/** Shopify CDN: Minification failed

Line 6171:14 Unexpected "{"
Line 6171:23 Expected ":"
Line 6171:30 Unexpected "{"
Line 6184:16 Unexpected "{"
Line 6184:25 Expected ":"
Line 6184:32 Unexpected "{"
Line 6185:13 Expected identifier but found whitespace
Line 6185:15 Unexpected "{"
Line 6185:24 Expected ":"
Line 6185:56 Expected ":"
... and 94 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-links (INDEX:3) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;
    grid-gap: var(--gap-3xl);

    &:has([ratio='portrait']) {
      --template-column-ratio: 0.8fr;
    }

    &:has([ratio='square']) {
      --template-column-ratio: 1fr;
    }

    &:has([ratio='landscape']) {
      --template-column-ratio: 1.4fr;
    }

    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

    &[layout='spotlight'] {
      position: relative;
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

      @media screen and (min-width: 750px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

      .collection-links__container {
        align-items: var(--alignment);
      }

      @media screen and (max-width: 749px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'text' 'image';
        grid-gap: var(--gap-2xl);

        .collection-links__container {
          gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
          justify-content: var(--alignment);
        }
      }
    }

    &[layout='text'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }
    }
  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media screen and (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:featured-product (INDEX:9) */
.featured-product-section .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .featured-product-section {
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    @media screen and (min-width: 750px) {
      --viewport-offset: 300px;
    }
  }

  .featured-product-section .product-grid__card {
    --padding-block: 20px;
    --padding-inline: 20px;

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

  @media screen and (max-width: 749px) {
    .featured-product-section .media-block {
      order: -1;
    }
  }

  @media screen and (min-width: 750px) {
    .featured-product-section .product-card__content {
      --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio, var(--media-preview-ratio)));
      width: min(100%, var(--hugged-width));
      margin-left: auto;
      margin-right: auto;
    }
  }
/* END_SECTION:featured-product */

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

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

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

  .utilities > * {
    text-align: center;

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

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

    .utilities--blocks-1 > * {
      justify-self: start;
      text-align: left;
    }

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

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

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

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

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

/* START_SECTION:footer (INDEX:11) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }
  .announcement-bar {
    text-align: center !important;
  }
  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

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

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:13) */
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 transparent text color 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: var(--color-transparent-text);
      --color-foreground-rgb: var(--color-transparent-text-rgb);
      --color-border: var(--color-transparent-text);
      --color-border-rgb: var(--color-transparent-text-rgb);
      --color-primary-button-background: var(--color-transparent-text);
      --color-primary-button-text: var(--color-transparent-text-contrast);
    }

    /* Swap the cart bubble in transparent state only when using the default
       style. Custom bubble colors apply unchanged across header states. */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(
        :has(.menu-list__link:is(:hover, [aria-expanded='true']))
      )
      .header__row {
      --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback));
      --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback));
    }

    /* 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-background='top']:hover .header__row--top,
  [data-transparent-background='top']:focus-within .header__row--top,
  [data-transparent-background='both']:hover .header__row--top,
  [data-transparent-background='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-background='bottom']:hover .header__row--bottom,
  [data-transparent-background='bottom']:focus-within .header__row--bottom,
  [data-transparent-background='both']:hover .header__row--bottom,
  [data-transparent-background='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-menu-drawer);
  }

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

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

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

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-menu-drawer);
  }

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

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

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

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

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

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-background-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-background-top-row) 0 var(--top-row-height),
      var(--color-background-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, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='top']:hover,
  [data-transparent-background='top']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='bottom']:hover,
  [data-transparent-background='bottom']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-background-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 background color, 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 section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

    &: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(--border-bottom-color, 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);
      border-bottom-color: var(--border-bottom-color-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);
    border-bottom-color: var(--border-bottom-color-mobile);
  }

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

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

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

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

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

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

  .header__column--right {
    gap: 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:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

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

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

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

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

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

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

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

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

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

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

    min-height: 600px;
  }

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

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

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

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

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

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

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

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

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

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

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

  /* Mobile/Desktop media visibility */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX:15) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:16) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:18) */
.blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:19) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
    background-color: var(--color-background);
  }

  /**
   * When there's no image, the blog post item has a border.
   */
  .blog-post-item {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:20) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:marquee (INDEX:24) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:25) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

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

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password-footer (INDEX:26) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password (INDEX:27) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:product-hotspots (INDEX:30) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--quick-add-foreground, var(--color-foreground));
      background-color: var(--quick-add-background, var(--color-background));
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:31) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }

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

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

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

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

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

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

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

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

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

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

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

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:quick-order-list (INDEX:34) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

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

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

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:slideshow (INDEX:39) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* START_SECTION:veya-about (INDEX:40) */
.veya-about {
    display: block;
    background-color: var(--veya-about-bg);
    padding-block: var(--veya-about-padding-top-mobile) var(--veya-about-padding-bottom-mobile);
  }

  @media screen and (min-width: 990px) {
    .veya-about {
      padding-block: var(--veya-about-padding-top-desktop) var(--veya-about-padding-bottom-desktop);
    }
  }

  .veya-about__inner {
    max-width: var(--veya-about-max-width);
    margin-inline: auto;
    padding-inline: var(--veya-about-padding-h-mobile);
  }

  @media screen and (min-width: 990px) {
    .veya-about__inner {
      padding-inline: var(--veya-about-padding-h-desktop);
    }
  }

  .veya-about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--veya-about-gap-mobile);
  }

  @media screen and (min-width: 990px) {
    .veya-about__grid {
      grid-template-columns: var(--veya-about-grid-columns);
      direction: rtl;
      align-items: center;
      gap: var(--veya-about-gap-desktop);
    }
  }

  .veya-about__text {
    min-width: 0;
    direction: rtl;
    text-align: right;
  }

  .veya-about__eyebrow {
    margin: 0 0 var(--veya-about-spacing-eyebrow-below);
    font-family: var(--font-body--family);
    font-size: var(--veya-about-eyebrow-size);
    color: var(--veya-about-eyebrow-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: var(--veya-about-heading-align-mobile);
  }

  @media screen and (min-width: 990px) {
    .veya-about__eyebrow {
      text-align: var(--veya-about-heading-align-desktop);
    }
  }

  .veya-about__heading {
    margin: 0 0 var(--veya-about-spacing-heading-below);
    font-family: var(--font-heading--family);
    font-size: var(--veya-about-heading-size-mobile);
    font-weight: var(--veya-about-heading-weight);
    line-height: var(--veya-about-heading-line-height);
    color: var(--veya-about-heading-color);
    text-align: var(--veya-about-heading-align-mobile);
  }

  @media screen and (min-width: 990px) {
    .veya-about__heading {
      font-size: var(--veya-about-heading-size-desktop);
      text-align: var(--veya-about-heading-align-desktop);
    }
  }

  .veya-about__body {
    max-width: var(--veya-about-content-max-width);
    margin: 0 0 var(--veya-about-spacing-body-below);
    margin-inline-start: auto;
    font-family: var(--font-body--family);
    font-size: var(--veya-about-body-size-mobile);
    line-height: var(--veya-about-body-line-height);
    color: var(--veya-about-body-color);
  }

  @media screen and (min-width: 990px) {
    .veya-about__body {
      font-size: var(--veya-about-body-size-desktop);
    }
  }

  .veya-about__body p {
    margin: 0 0 1em;
  }

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

  .veya-about__button {
    display: inline-block;
    padding: var(--veya-about-button-padding-v) var(--veya-about-button-padding-h);
    background-color: var(--veya-about-button-bg);
    color: var(--veya-about-button-text);
    text-decoration: none;
    font-family: var(--font-body--family);
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background-color 150ms ease, color 150ms ease;
  }

  .veya-about__button:hover,
  .veya-about__button:focus-visible {
    background-color: var(--veya-about-button-hover-bg);
    color: var(--veya-about-button-hover-text);
  }

  .veya-about__image-wrap {
    min-width: 0;
  }

  .veya-about__image,
  .veya-about__placeholder {
    display: block;
    width: 100%;
    height: var(--veya-about-image-height-mobile);
    object-fit: var(--veya-about-image-fit);
  }

  @media screen and (min-width: 990px) {
    .veya-about__image,
    .veya-about__placeholder {
      height: var(--veya-about-image-height-desktop);
    }
  }
/* END_SECTION:veya-about */

/* START_SECTION:veya-categories-grid (INDEX:41) */
.veya-cg {
    display: block;
    background-color: var(--veya-cg-bg);
    padding-block: var(--veya-cg-padding-top) var(--veya-cg-padding-bottom);
  }

  .veya-cg__grid {
    display: grid;
    grid-template-columns: repeat(var(--veya-cg-columns-mobile), minmax(0, 1fr));
    gap: var(--veya-cg-gap-mobile);
    /* Mobile-only side padding, kept off the outer .veya-cg element so it
       never touches the shared top/bottom section padding. Explicitly
       zeroed on tablet/desktop below so this never leaks past mobile. */
    padding-inline: var(--veya-cg-side-padding-mobile);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .veya-cg__grid {
      grid-template-columns: repeat(var(--veya-cg-columns-tablet), minmax(0, 1fr));
      padding-inline: 0;
    }
  }

  @media screen and (min-width: 990px) {
    .veya-cg__grid {
      grid-template-columns: repeat(var(--veya-cg-columns-desktop), minmax(0, 1fr));
      gap: var(--veya-cg-gap-desktop);
      padding-inline: 0;
    }
  }

  .veya-cg__card {
    position: relative;
    display: block;
    height: var(--veya-cg-card-height-mobile);
    overflow: hidden;
    text-decoration: none;
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .veya-cg__card {
      height: var(--veya-cg-card-height-tablet);
    }
  }

  @media screen and (min-width: 990px) {
    .veya-cg__card {
      height: var(--veya-cg-card-height-desktop);
    }
  }

  .veya-cg__card:focus-visible {
    outline: 2px solid var(--veya-cg-button-hover-bg);
    outline-offset: -4px;
  }

  /* Was a `<span>` with `background-image` at a flat 1600px wide — the same
     file on a 4-across desktop grid and a 1-across 400px mobile card, with no
     way to be lazy-loaded or to offer smaller candidates. On mobile that is
     roughly four times more pixels than the card can show, downloaded before
     anything below the fold needed to exist. It is a real `<img>` now, so it
     gets `srcset`/`sizes` and `loading="lazy"`; `object-fit`/`object-position`
     reproduce the old `background-size: cover` and the merchant's own
     focal-point settings exactly. */
  .veya-cg__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--veya-cg-card-bg-position-x) var(--veya-cg-card-bg-position-y);
    transition: transform 400ms ease;
  }

  .veya-cg__image--placeholder {
    background-color: #E4DACD;
  }

  @media (hover: hover) and (pointer: fine) {
    .veya-cg--hover-zoom .veya-cg__card:hover .veya-cg__image,
    .veya-cg--hover-zoom .veya-cg__card:focus-visible .veya-cg__image {
      transform: scale(var(--veya-cg-image-hover-scale));
    }
  }

  .veya-cg__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--veya-cg-overlay-color);
    opacity: var(--veya-cg-overlay-opacity);
    pointer-events: none;
  }

  .veya-cg__button {
    position: absolute;
    left: 50%;
    bottom: var(--veya-cg-button-bottom-offset);
    transform: translateX(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--veya-cg-button-padding-v) var(--veya-cg-button-padding-h);
    border: var(--veya-cg-button-border-width) solid var(--veya-cg-button-border);
    border-radius: var(--veya-cg-button-border-radius);
    background-color: var(--veya-cg-button-bg);
    color: var(--veya-cg-button-text);
    font-family: var(--font-body--family);
    font-size: var(--veya-cg-button-font-size-mobile);
    font-weight: var(--veya-cg-button-font-weight);
    letter-spacing: var(--veya-cg-button-letter-spacing);
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
  }

  @media screen and (min-width: 990px) {
    .veya-cg__button {
      font-size: var(--veya-cg-button-font-size-desktop);
    }
  }

  .veya-cg__card:hover .veya-cg__button,
  .veya-cg__card:focus-visible .veya-cg__button {
    background-color: var(--veya-cg-button-hover-bg);
    color: var(--veya-cg-button-hover-text);
    border-color: var(--veya-cg-button-hover-border);
  }

  .veya-cg--button-center .veya-cg__button {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }
/* END_SECTION:veya-categories-grid */

/* START_SECTION:veya-contact (INDEX:42) */
.veya-contact {
    display: block;
    direction: rtl;
    background-color: var(--veya-contact-bg);
    padding-block: var(--veya-contact-padding-top-mobile) var(--veya-contact-padding-bottom-mobile);
    padding-inline: var(--veya-contact-padding-h-mobile);
  }

  @media screen and (min-width: 750px) {
    .veya-contact {
      padding-block: var(--veya-contact-padding-top-desktop) var(--veya-contact-padding-bottom-desktop);
      padding-inline: var(--veya-contact-padding-h-desktop);
    }
  }

  .veya-contact__inner {
    max-width: var(--veya-contact-max-width);
    margin-inline: auto;
  }

  .veya-contact__header {
    text-align: center;
    padding-bottom: var(--veya-contact-spacing-below-heading);
  }

  .veya-contact__eyebrow {
    margin: 0 0 var(--veya-contact-spacing-eyebrow-heading);
    color: var(--veya-contact-eyebrow-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-contact-eyebrow-size-mobile);
    font-weight: var(--veya-contact-eyebrow-weight);
    letter-spacing: var(--veya-contact-eyebrow-letter-spacing);
    text-transform: uppercase;
  }

  @media screen and (min-width: 990px) {
    .veya-contact__eyebrow {
      font-size: var(--veya-contact-eyebrow-size-desktop);
    }
  }

  .veya-contact__heading {
    margin: 0;
    color: var(--veya-contact-heading-color);
    font-family: var(--font-heading--family);
    font-size: var(--veya-contact-heading-size-mobile);
    font-weight: var(--veya-contact-heading-weight);
    letter-spacing: var(--veya-contact-heading-letter-spacing);
    line-height: var(--veya-contact-heading-line-height);
  }

  @media screen and (min-width: 990px) {
    .veya-contact__heading {
      font-size: var(--veya-contact-heading-size-desktop);
    }
  }

  .veya-contact__form-wrap,
  .veya-contact__bar-wrap {
    max-width: var(--veya-contact-form-width);
    margin-inline: auto;
  }

  .veya-contact__form {
    display: grid;
    gap: var(--veya-contact-fields-gap-v);
  }

  .veya-contact__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--veya-contact-fields-gap-v);
  }

  @media screen and (min-width: 750px) {
    .veya-contact__row {
      grid-template-columns: 1fr 1fr;
      gap: var(--veya-contact-fields-gap-v) var(--veya-contact-fields-gap-h);
    }

    .veya-contact--stack-desktop .veya-contact__row {
      grid-template-columns: 1fr;
    }
  }

  .veya-contact__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .veya-contact__label {
    color: var(--veya-contact-field-text);
    font-family: var(--font-body--family);
    font-size: 13px;
    text-align: right;
  }

  .veya-contact__input,
  .veya-contact__textarea {
    display: block;
    width: 100%;
    background-color: var(--veya-contact-field-bg);
    color: var(--veya-contact-field-text);
    border: var(--veya-contact-field-border-width) solid var(--veya-contact-field-border-color);
    border-radius: 0;
    box-shadow: none;
    text-align: right;
    direction: rtl;
    font-family: var(--font-body--family);
    font-size: var(--veya-contact-field-font-size-mobile);
    padding: var(--veya-contact-field-padding-v) var(--veya-contact-field-padding-h);
    transition: border-color 200ms ease;
  }

  @media screen and (min-width: 990px) {
    .veya-contact__input,
    .veya-contact__textarea {
      font-size: var(--veya-contact-field-font-size-desktop);
    }
  }

  .veya-contact__input {
    height: var(--veya-contact-input-height-mobile);
  }

  @media screen and (min-width: 750px) {
    .veya-contact__input {
      height: var(--veya-contact-input-height-desktop);
    }
  }

  .veya-contact__textarea {
    height: var(--veya-contact-textarea-height-mobile);
    resize: var(--veya-contact-textarea-resize);
  }

  @media screen and (min-width: 750px) {
    .veya-contact__textarea {
      height: var(--veya-contact-textarea-height-desktop);
    }
  }

  .veya-contact__input::placeholder,
  .veya-contact__textarea::placeholder {
    color: var(--veya-contact-field-placeholder);
  }

  .veya-contact__input:focus,
  .veya-contact__textarea:focus {
    outline: none;
    border-color: var(--veya-contact-field-focus-border-color);
  }

  .veya-contact__input:focus-visible,
  .veya-contact__textarea:focus-visible {
    outline: 2px solid var(--veya-contact-field-focus-border-color);
    outline-offset: 2px;
  }

  .veya-contact__submit-wrap {
    display: flex;
  }

  .veya-contact__submit-wrap--right {
    justify-content: flex-start;
  }

  .veya-contact__submit-wrap--center {
    justify-content: center;
  }

  .veya-contact__submit-wrap--full {
    justify-content: stretch;
  }

  .veya-contact__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--veya-contact-button-full-width);
    height: var(--veya-contact-button-height);
    padding-inline: 32px;
    background-color: var(--veya-contact-button-bg);
    color: var(--veya-contact-button-text);
    border: none;
    border-radius: 0;
    font-family: var(--font-body--family);
    font-size: var(--veya-contact-button-font-size);
    letter-spacing: var(--veya-contact-button-letter-spacing);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
  }

  .veya-contact__submit-wrap--full .veya-contact__submit {
    width: 100%;
  }

  .veya-contact__submit:hover,
  .veya-contact__submit:focus-visible {
    background-color: var(--veya-contact-button-hover-bg);
    color: var(--veya-contact-button-hover-text);
  }

  .veya-contact__submit:focus-visible {
    outline: 2px solid var(--veya-contact-button-hover-bg);
    outline-offset: 2px;
  }

  .veya-contact__message {
    text-align: right;
    font-family: var(--font-body--family);
    font-size: var(--veya-contact-message-font-size);
    padding: 16px 18px;
    border: 1px solid currentColor;
  }

  .veya-contact__message--success {
    color: var(--veya-contact-success-text);
    background-color: var(--veya-contact-success-bg);
    border-color: var(--veya-contact-success-text);
  }

  .veya-contact__message--error {
    color: var(--veya-contact-error-text);
    background-color: var(--veya-contact-error-bg);
    border-color: var(--veya-contact-error-text);
  }

  .veya-contact__errors {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
  }

  .veya-contact__bar-wrap {
    margin-top: var(--veya-contact-gap-form-bar);
  }

  .veya-contact__bar {
    display: flex;
    flex-direction: column;
    background-color: var(--veya-contact-bar-bg);
    border-block-start: var(--veya-contact-bar-border-top);
    border-block-end: var(--veya-contact-bar-border-bottom);
  }

  .veya-contact__bar--mobile-row {
    flex-direction: row;
  }

  @media screen and (min-width: 750px) {
    .veya-contact__bar {
      flex-direction: row;
    }
  }

  .veya-contact__bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--veya-contact-icon-text-gap);
    padding: var(--veya-contact-item-padding-mobile);
    min-height: var(--veya-contact-item-min-height);
    color: var(--veya-contact-bar-text);
    text-decoration: none;
    border-block-start: var(--veya-contact-divider-width) solid var(--veya-contact-divider-color);
    transition: color 200ms ease, background-color 200ms ease;
  }

  .veya-contact__bar-item:first-child {
    border-block-start: none;
  }

  .veya-contact__bar--mobile-row .veya-contact__bar-item {
    border-block-start: none;
    border-inline-start: var(--veya-contact-divider-width) solid var(--veya-contact-divider-color);
  }

  .veya-contact__bar--mobile-row .veya-contact__bar-item:first-child {
    border-inline-start: none;
  }

  @media screen and (min-width: 750px) {
    .veya-contact__bar-item {
      padding: var(--veya-contact-item-padding-desktop);
      border-block-start: none;
      border-inline-start: var(--veya-contact-divider-width) solid var(--veya-contact-divider-color);
    }

    .veya-contact__bar-item:first-child {
      border-inline-start: none;
    }
  }

  .veya-contact__bar-item:hover,
  .veya-contact__bar-item:focus-visible {
    color: var(--veya-contact-bar-hover-text);
    background-color: var(--veya-contact-bar-hover-bg);
  }

  .veya-contact__bar-item:focus-visible {
    outline: 2px solid var(--veya-contact-bar-hover-text);
    outline-offset: -2px;
  }

  .veya-contact__bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--veya-contact-item-icon-size-mobile);
    height: var(--veya-contact-item-icon-size-mobile);
    color: var(--veya-contact-icon-color);
  }

  @media screen and (min-width: 750px) {
    .veya-contact__bar-icon {
      width: var(--veya-contact-item-icon-size-desktop);
      height: var(--veya-contact-item-icon-size-desktop);
    }
  }

  .veya-contact__bar-item:hover .veya-contact__bar-icon {
    color: var(--veya-contact-icon-hover-color);
  }

  .veya-contact__bar-icon svg,
  .veya-contact__bar-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .veya-contact__bar-text {
    font-family: var(--font-body--family);
    font-size: var(--veya-contact-bar-text-size-mobile);
    font-weight: var(--veya-contact-bar-text-weight);
    line-height: var(--veya-contact-bar-text-line-height);
  }

  @media screen and (min-width: 990px) {
    .veya-contact__bar-text {
      font-size: var(--veya-contact-bar-text-size-desktop);
    }
  }
/* END_SECTION:veya-contact */

/* START_SECTION:veya-faq (INDEX:43) */
.veya-faq {
    display: block;
    background-color: var(--veya-faq-bg);
    color: var(--veya-faq-text);
    padding-block: var(--veya-faq-padding-top-mobile) var(--veya-faq-padding-bottom-mobile);
    padding-inline: var(--veya-faq-padding-h-mobile);
  }

  @media screen and (min-width: 750px) {
    .veya-faq {
      padding-block: var(--veya-faq-padding-top-desktop) var(--veya-faq-padding-bottom-desktop);
      padding-inline: 0;
    }
  }

  .veya-faq__inner {
    max-width: var(--veya-faq-max-width);
    margin-inline: auto;
  }

  .veya-faq__header {
    text-align: center;
    /* padding, not margin: guarantees the gap always renders exactly as
       set, regardless of margin-collapsing with the body below it. */
    padding-bottom: var(--veya-faq-spacing-below-heading);
  }

  .veya-faq__eyebrow {
    margin: 0 0 var(--veya-faq-spacing-eyebrow-heading);
    color: var(--veya-faq-eyebrow-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-faq-eyebrow-size-mobile);
    font-weight: var(--veya-faq-eyebrow-weight);
    letter-spacing: var(--veya-faq-eyebrow-letter-spacing);
    text-transform: uppercase;
  }

  @media screen and (min-width: 990px) {
    .veya-faq__eyebrow {
      font-size: var(--veya-faq-eyebrow-size-desktop);
    }
  }

  .veya-faq__heading {
    margin: 0;
    color: var(--veya-faq-heading-color);
    font-family: var(--font-heading--family);
    font-size: var(--veya-faq-heading-size-mobile);
    font-weight: var(--veya-faq-heading-weight);
    letter-spacing: var(--veya-faq-heading-letter-spacing);
    line-height: var(--veya-faq-heading-line-height);
  }

  @media screen and (min-width: 990px) {
    .veya-faq__heading {
      font-size: var(--veya-faq-heading-size-desktop);
    }
  }

  /* Mobile: single column, nav never renders here regardless of the
     "show navigation" setting below (that setting only governs desktop). */
  .veya-faq__body {
    display: block;
  }

  @media screen and (min-width: 750px) {
    .veya-faq__body {
      display: grid;
      /* direction: rtl flips which physical side each grid item lands on —
         the nav (first in source) ends up on the right, content (second)
         on the left, matching the mirrored RTL layout. */
      direction: rtl;
      grid-template-columns: var(--veya-faq-nav-width) 1fr;
      gap: var(--veya-faq-columns-gap);
      align-items: start;
    }

    .veya-faq__body--no-nav {
      grid-template-columns: 1fr;
    }
  }

  .veya-faq__nav {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .veya-faq__nav {
      display: flex;
      flex-direction: column;
      /* Links shrink to their own text width and hug the right edge of the
         nav column, so the gap setting below is the *entire* visible
         distance to the content — not partially eaten by unused column
         width behind short labels. */
      align-items: flex-start;
      gap: var(--veya-faq-nav-item-gap);
      position: sticky;
      top: var(--veya-faq-nav-sticky-offset);
      align-self: start;
    }

    .veya-faq__nav--static {
      position: static;
    }
  }

  .veya-faq__nav-link {
    color: var(--veya-faq-nav-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-faq-nav-font-size);
    font-weight: var(--veya-faq-nav-font-weight);
    text-align: right;
    text-decoration: none;
    transition: color 200ms ease;
  }

  .veya-faq__nav-link:hover,
  .veya-faq__nav-link:focus-visible {
    color: var(--veya-faq-nav-hover-color);
  }

  .veya-faq__nav-link.is-active {
    color: var(--veya-faq-nav-active-color);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .veya-faq__category {
    scroll-margin-top: var(--veya-faq-nav-sticky-offset);
    margin-top: var(--veya-faq-category-spacing-mobile);
  }

  @media screen and (min-width: 750px) {
    .veya-faq__category {
      margin-top: var(--veya-faq-cat-margin-top);
    }
  }

  .veya-faq__category:first-of-type {
    margin-top: 0;
  }

  .veya-faq__category-header {
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: var(--veya-faq-cat-spacing-below);
    border-bottom: var(--veya-faq-divider-width) solid var(--veya-faq-divider-color);
  }

  .veya-faq__category-icon {
    flex-shrink: 0;
    display: flex;
    width: var(--veya-faq-cat-icon-size);
    height: var(--veya-faq-cat-icon-size);
    color: var(--veya-faq-text);
  }

  .veya-faq__category-icon svg,
  .veya-faq__category-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .veya-faq__category-title {
    color: var(--veya-faq-cat-title-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-faq-cat-title-size-mobile);
    font-weight: var(--veya-faq-cat-title-weight);
    letter-spacing: var(--veya-faq-cat-title-letter-spacing);
    text-transform: uppercase;
    text-align: right;
  }

  @media screen and (min-width: 990px) {
    .veya-faq__category-title {
      font-size: var(--veya-faq-cat-title-size-desktop);
    }
  }

  .veya-faq__item {
    border-bottom: var(--veya-faq-divider-width) solid var(--veya-faq-divider-color);
  }

  .veya-faq__summary {
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    padding-block: var(--veya-faq-item-padding-mobile);
  }

  @media screen and (min-width: 750px) {
    .veya-faq__summary {
      padding-block: var(--veya-faq-item-padding-desktop);
    }
  }

  .veya-faq__summary::-webkit-details-marker {
    display: none;
  }

  .veya-faq__summary:focus-visible {
    outline: 2px solid var(--veya-faq-accent);
    outline-offset: 2px;
  }

  .veya-faq__question {
    flex: 1;
    text-align: right;
    color: var(--veya-faq-question-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-faq-question-size-mobile);
    font-weight: var(--veya-faq-question-weight);
  }

  @media screen and (min-width: 990px) {
    .veya-faq__question {
      font-size: var(--veya-faq-question-size-desktop);
    }
  }

  .veya-faq__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--veya-faq-icon-size-mobile);
    height: var(--veya-faq-icon-size-mobile);
    color: var(--veya-faq-icon-color);
    position: relative;
  }

  @media screen and (min-width: 990px) {
    .veya-faq__icon {
      width: var(--veya-faq-icon-size-desktop);
      height: var(--veya-faq-icon-size-desktop);
    }
  }

  .veya-faq__summary:hover .veya-faq__icon {
    color: var(--veya-faq-icon-hover-color);
  }

  .veya-faq__icon-default,
  .veya-faq__icon-plus,
  .veya-faq__icon-minus {
    width: 100%;
    height: 100%;
  }

  .veya-faq__icon-plus img,
  .veya-faq__icon-minus img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Custom uploaded plus/minus icons: swap on open/close (no rotation —
     that trick only works on the inline SVG fallback, whose paths are
     targetable by name). */
  .veya-faq__icon-minus {
    display: none;
  }

  details[open] > summary .veya-faq__icon-plus {
    display: none;
  }

  details[open] > summary .veya-faq__icon-minus {
    display: block;
  }
  .veya-faq__answer p {
    direction: rtl !important;
  }

  .veya-faq__answer {
    overflow: hidden;
    text-align: right;
    color: var(--veya-faq-answer-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-faq-answer-size-mobile);
    line-height: var(--veya-faq-answer-line-height);
    interpolate-size: allow-keywords;
    transition: content-visibility var(--veya-faq-animation-duration) allow-discrete,
      block-size var(--veya-faq-animation-duration) var(--veya-faq-animation-easing),
      opacity var(--veya-faq-animation-duration) var(--veya-faq-animation-easing),
      padding-block var(--veya-faq-animation-duration) var(--veya-faq-animation-easing);
  }

  @media screen and (min-width: 990px) {
    .veya-faq__answer {
      font-size: var(--veya-faq-answer-size-desktop);
    }
  }

  .veya-faq__item:not([open]) .veya-faq__answer {
    padding-block: 0;
    opacity: 0;
    block-size: 0;
  }

  .veya-faq__item[open] .veya-faq__answer {
    opacity: 1;
    block-size: auto;
    padding-top: var(--veya-faq-answer-top-spacing);
    padding-bottom: var(--veya-faq-answer-bottom-spacing);
  }

  @starting-style {
    .veya-faq__item[open] .veya-faq__answer {
      opacity: 0;
      block-size: 0;
    }
  }

  .veya-faq__answer > :first-child {
    margin-top: 0;
  }

  .veya-faq__answer > :last-child {
    margin-bottom: 0;
  }

  .veya-faq__answer a {
    color: var(--veya-faq-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 200ms ease;
  }

  .veya-faq__answer a:hover {
    color: var(--veya-faq-link-hover-color);
  }

  @media (prefers-reduced-motion: reduce) {
    .veya-faq__answer {
      transition-duration: 0.01ms;
    }
  }
/* END_SECTION:veya-faq */

/* START_SECTION:veya-featured-products (INDEX:44) */
.veya-fp {
    display: block;
    background-color: var(--veya-fp-bg);
    padding-block: var(--veya-fp-padding-top-mobile) var(--veya-fp-padding-bottom-mobile);
    /* Hard boundary: this section's own carousel scrolls internally
       (.veya-fp__track), so nothing here should ever be able to widen the
       page itself. */
    overflow-x: hidden;
    /* Tracks .veya-fp__inner's own padding-inline below (kept as one
       shared custom property, not two independent hardcoded values) so
       the arrow edge-offset formula further down — which has to undo
       exactly this padding to reach past it — can never drift out of
       sync with whatever this actually is at each breakpoint. */
    --veya-fp-inner-padding: 16px;
  }

  @media screen and (min-width: 990px) {
    .veya-fp {
      padding-block: var(--veya-fp-padding-top-desktop) var(--veya-fp-padding-bottom-desktop);
    }
  }

  .veya-fp__inner {
    max-width: var(--veya-fp-max-width);
    margin-inline: auto;
    padding-inline: var(--veya-fp-inner-padding);
  }

  @media screen and (min-width: 750px) {
    .veya-fp {
      --veya-fp-inner-padding: 40px;
    }
  }

  .veya-fp__heading {
    margin: 0 0 var(--veya-fp-heading-spacing);
    color: var(--veya-fp-heading-color);
    font-family: var(--font-heading--family);
    font-weight: var(--veya-fp-heading-weight);
    font-size: var(--veya-fp-heading-size-mobile);
    line-height: var(--veya-fp-heading-line-height);
    letter-spacing: var(--veya-fp-heading-letter-spacing);
    text-transform: uppercase;
    text-align: center;
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .veya-fp__heading {
      font-size: var(--veya-fp-heading-size-tablet);
    }
  }

  @media screen and (min-width: 990px) {
    .veya-fp__heading {
      font-size: var(--veya-fp-heading-size-desktop);
    }
  }

  /* Only present when "Enable tabs" is on and at least one "tab" block
     exists — otherwise this whole rule set is simply unused.
     Deliberately never wraps to a second line: when there are too many
     tabs to fit, the row becomes its own horizontally-scrollable strip
     (its own scroll container, independent of the product carousel below
     it) instead of pushing tabs onto a new row. `max-width: 100%` keeps
     that strip from ever growing past `.veya-fp__inner`'s own width — the
     same content width the product carousel uses — even though flex
     content would otherwise be free to overflow it. */
  .veya-fp__tabs {
    display: flex;
    flex-wrap: nowrap;
    /* First tab lands on the right, matching Hebrew reading order — no JS
       scroll math depends on this row's scroll position (unlike the
       product track below), so a plain `direction: rtl` is safe here. */
    direction: rtl;
    align-items: center;
    /* `safe center`, not a plain `center`: on desktop, where every tab
       normally fits in one row with room to spare, plain `flex-start`
       left the whole row hugging the right edge instead of sitting
       centered like the reference design — but plain `center` has its own
       known flex bug once there ARE more tabs than fit: browsers split
       overflow evenly on both sides of a centered row, and a scroll
       container can only ever scroll into *positive* overflow past its
       edge, not into that "pushed back" negative space centering creates.
       That left the first tab (at the RTL start) permanently a few pixels
       clipped, un-reachable even after forcing `scrollLeft: 0` in the
       script below. The `safe` keyword (CSS Box Alignment) is exactly
       Shopify's/the platform's own escape hatch for this: it centers
       normally whenever that's safe (nothing overflows), and automatically
       falls back to start-alignment only once centering would actually
       make content inaccessible — i.e. only when this row has enough tabs
       to need scrolling in the first place. Browsers that don't understand
       `safe` treat the whole declaration as invalid and keep the
       property's initial value (`normal`, which behaves like `flex-start`
       for a flex container) — identical to this rule's previous fallback,
       so there's no regression risk either way. */
    justify-content: safe center;
    gap: var(--veya-fp-tabs-gap);
    margin-bottom: var(--veya-fp-tabs-spacing-below);
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* No scroll-snap here (deliberately, unlike the product track below):
       snap correcting the rest position after load is exactly what kept
       leaving this row a few pixels off true scrollLeft 0 — clipping the
       first tab and leaving both directions scrollable instead of only
       left. A plain scroller has nothing to correct, so it can't drift. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .veya-fp__tabs::-webkit-scrollbar {
    display: none;
  }

  .veya-fp__tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: var(--veya-fp-tab-padding-v) var(--veya-fp-tab-padding-h);
    border: 1px solid var(--veya-fp-tab-border-color);
    border-radius: 999px;
    background-color: transparent;
    color: var(--veya-fp-tab-text-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-fp-tab-font-size);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  }

  .veya-fp__tab:hover:not([aria-selected="true"]) {
    border-color: var(--veya-fp-tab-active-bg);
    color: var(--veya-fp-tab-active-bg);
  }

  .veya-fp__tab[aria-selected="true"] {
    background-color: var(--veya-fp-tab-active-bg);
    border-color: var(--veya-fp-tab-active-bg);
    color: var(--veya-fp-tab-active-text);
  }

  .veya-fp__carousel {
    position: relative;
  }

  /* `direction: rtl`, not `ltr`: product #1 (DOM-first, normal order) needs
     to be where native touch/trackpad scrolling actually *starts* — at
     `scrollLeft: 0`, the platform's own RTL rest position — not somewhere
     JS has to jump to after the fact. An earlier version forced `ltr` here
     and used JS to fake the RTL look (reversed DOM order + jumping
     `scrollLeft` to the far edge on connect); that satisfied the arrow
     buttons but fought the browser on every native swipe/trackpad scroll,
     since "swipe left to advance" only happens for free when the container
     is genuinely `rtl` — no JS can make an `ltr` track feel that way for
     touch input. The one real cost of going back to `rtl` is that
     `scrollLeft` is negative here (0 at rest, down to -(scrollWidth -
     clientWidth) at the far end) — the arrow script below is written for
     that directly. */
  .veya-fp__track {
    direction: rtl;
    display: flex;
    gap: var(--veya-fp-gap-mobile);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 100%;
  }

  .veya-fp__track::-webkit-scrollbar {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .veya-fp__track {
      gap: var(--veya-fp-gap-desktop);
    }
  }

  /* Merchant-only setting (schema: "reverse_scroll_direction") — flips the
     whole track to a plain LTR scroller: product #1 starts on the LEFT and
     scrolling advances to the RIGHT, the mirror image of the default RTL
     behavior above. The JS arrow logic (`#updateArrowState`/`scrollNext`/
     `scrollPrev`) already reads this element's own computed `direction`
     rather than assuming RTL, so it adapts automatically with no extra
     wiring. */
  .veya-fp--ltr .veya-fp__track {
    direction: ltr;
  }

  .veya-fp__card {
    flex: 0 0 var(--veya-fp-mobile-card-width);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 990px) {
    .veya-fp__card {
      flex-basis: calc(
        (100% - (var(--veya-fp-visible-desktop) - 1) * var(--veya-fp-gap-desktop)) / var(--veya-fp-visible-desktop)
      );
    }
  }

  /* .veya-fp__media is a plain, non-scrolling positioning box: it only
     hosts the progress bars (absolutely positioned) and clips its content.
     The actual horizontal scroller lives one level deeper, in
     .veya-fp__media-scroller — keeping the bars out of that scrolling box
     is what stops them from sliding away with the images on swipe.
     `timeline-scope` re-exposes that scroller's named scroll-timeline (see
     below) to the bars even though they're its sibling, not its
     descendant — a named scroll-timeline is otherwise only visible to the
     element that declares it and that element's own descendants. */
  .veya-fp__arrow {
    position: absolute;
    /* Centered on the image height specifically (not the whole card, which
       also includes title/price below it) — .veya-fp__carousel is the
       positioning ancestor, so this is expressed as a fixed offset rather
       than a percentage. Reads the same shared image-height custom
       properties as snippets/veya-product-card.liquid so the two stay in
       sync automatically. */
    top: calc(var(--product-card-image-height-mobile) / 2);
    transform: translateY(-50%);
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--veya-fp-arrow-button-size);
    height: var(--veya-fp-arrow-button-size);
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: var(--veya-fp-arrow-bg);
    color: var(--veya-fp-arrow-icon-color);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--veya-fp-arrow-fade-duration) ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
  }

  /* Disabled (JS-driven: nothing left to scroll to in that direction) —
     stays invisible regardless of hover, and native `disabled` semantics
     already make it unclickable and unfocusable. */
  .veya-fp__arrow:disabled {
    cursor: default;
    box-shadow: none;
  }

  .veya-fp--no-arrow-shadow .veya-fp__arrow {
    box-shadow: none;
  }

  .veya-fp--arrow-border .veya-fp__arrow {
    border-color: var(--veya-fp-arrow-border-color);
  }

  @media screen and (min-width: 990px) {
    .veya-fp__arrow {
      top: calc(var(--product-card-image-height-desktop) / 2);
      display: flex;
    }

    .veya-fp__carousel:hover .veya-fp__arrow:not(:disabled),
    .veya-fp__carousel:focus-within .veya-fp__arrow:not(:disabled) {
      opacity: 1;
    }
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .veya-fp__arrow {
      top: calc(var(--product-card-image-height-tablet) / 2);
    }
  }

  /* Mobile: same as desktop's hovered state, permanently — there's no
     hover to wait for on touch, so an arrow just shows outright whenever
     it isn't disabled (nothing to scroll to in that direction). Sized down
     a bit from the shared desktop button/icon size. Horizontal position
     isn't set here at all (it used to hardcode a flat 4px, but that was
     already dead — the unconditional `--veya-fp-arrow--prev`/`--next`
     rules further down share this same selector at equal specificity and
     come later in the file, so they always won here too): the shared
     edge-offset formula below already resolves to a small, edge-hugging
     value on mobile on its own (see its own comment), so there's nothing
     mobile-specific left to override. */
  @media screen and (max-width: 989px) {
    .veya-fp__arrow:disabled {
      display: none;
    }

    .veya-fp__arrow:not(:disabled) {
      display: flex;
      opacity: 1;
    }

    .veya-fp__arrow {
      width: calc(var(--veya-fp-arrow-button-size) * 0.8);
      height: calc(var(--veya-fp-arrow-button-size) * 0.8);
    }

    .veya-fp__arrow-icon {
      width: calc(var(--veya-fp-arrow-icon-size) * 0.8);
      height: calc(var(--veya-fp-arrow-icon-size) * 0.8);
    }
  }

  .veya-fp__arrow:hover,
  .veya-fp__arrow:focus-visible {
    background-color: var(--veya-fp-arrow-hover-bg);
    color: var(--veya-fp-arrow-hover-color);
  }

  /* `--veya-fp-arrow-offset` (schema: "Arrow distance from carousel edge")
     is measured from `.veya-fp__carousel`'s own box — the positioning
     ancestor (`position: relative`, see above) — so the arrows always sit
     right beside the product cards. A previous version of this formula
     measured from the true browser-window edge instead (compensating for
     `.veya-fp__inner`'s own centering margin past `--veya-fp-max-width`
     plus its inline padding), which was the actual bug reported: on any
     desktop monitor wider than the section's own max-width, that made the
     arrows drift far out into the empty margin on either side, detached
     from the carousel itself, rather than hugging it — invisible on
     mobile/tablet only because the viewport is rarely wider than the
     max-width there, so that margin naturally collapses to ~0. A plain
     offset from the carousel's own edge can't drift like that regardless
     of screen width. */
  .veya-fp__arrow--prev {
    right: var(--veya-fp-arrow-offset);
  }

  .veya-fp__arrow--next {
    left: var(--veya-fp-arrow-offset);
  }

  /* Reversed layout: "prev" (back toward product #1, now on the left)
     moves to the left edge, "next" (toward later products) moves to the
     right edge — swapped from the default RTL positions above; same
     carousel-relative offset either way. */
  .veya-fp--ltr .veya-fp__arrow--prev {
    right: auto;
    left: var(--veya-fp-arrow-offset);
  }

  .veya-fp--ltr .veya-fp__arrow--next {
    left: auto;
    right: var(--veya-fp-arrow-offset);
  }

  .veya-fp__arrow-icon {
    display: inline-flex;
    width: var(--veya-fp-arrow-icon-size);
    height: var(--veya-fp-arrow-icon-size);
  }

  /* Mirrors each arrow's own icon/custom image horizontally so it keeps
     pointing away from the carousel's center even after the button itself
     moved to the opposite side above — no separate reversed icon asset or
     markup needed, whether it's the built-in chevron or a merchant-uploaded
     custom icon. */
  .veya-fp--ltr .veya-fp__arrow-icon {
    transform: scaleX(-1);
  }

  .veya-fp__arrow-icon svg,
  .veya-fp__arrow-icon img,
  .veya-fp__arrow-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .veya-fp__button {
    display: table;
    margin: var(--veya-fp-button-margin-top) auto 0;
    padding: var(--veya-fp-button-padding-v) var(--veya-fp-button-padding-h);
    background-color: var(--veya-fp-button-bg);
    color: var(--veya-fp-button-text);
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: var(--veya-fp-button-font-size);
    letter-spacing: 0.08em;
    border-radius: var(--veya-fp-button-radius);
    transition: background-color 150ms ease, color 150ms ease;
  }

  .veya-fp__button:hover,
  .veya-fp__button:focus-visible {
    background-color: var(--veya-fp-button-hover-bg);
    color: var(--veya-fp-button-hover-text);
  }
/* END_SECTION:veya-featured-products */

/* START_SECTION:veya-footer (INDEX:45) */
.veya-footer {
    display: block;
    background-color: var(--veya-footer-bg);
    padding-block: var(--veya-footer-padding-top-mobile) var(--veya-footer-padding-bottom-mobile);
  }

  @media screen and (min-width: 990px) {
    .veya-footer {
      padding-block: var(--veya-footer-padding-top-desktop) var(--veya-footer-padding-bottom-desktop);
    }
  }

  .veya-footer__inner {
    max-width: var(--veya-footer-max-width);
    margin-inline: auto;
    padding-inline: var(--veya-footer-padding-h-mobile);
  }

  @media screen and (min-width: 990px) {
    .veya-footer__inner {
      padding-inline: var(--veya-footer-padding-h-desktop);
    }
  }

  .veya-footer__main {
    display: flex;
    flex-direction: column;
    gap: var(--veya-footer-mobile-groups-gap);
  }

  @media screen and (min-width: 990px) {
    .veya-footer__main {
      display: grid;
      grid-template-columns: var(--veya-footer-main-grid-columns);
      gap: var(--veya-footer-columns-gap);
      direction: rtl;
      align-items: start;
      min-height: var(--veya-footer-main-row-min-height);
    }
  }

  .veya-footer__column {
    text-align: right;
  }

  .veya-footer__heading {
    margin: 0 0 16px;
    font-family: var(--font-body--family);
    font-size: var(--veya-footer-heading-size-mobile);
    font-weight: var(--veya-footer-heading-weight);
    letter-spacing: var(--veya-footer-heading-letter-spacing);
    color: var(--veya-footer-heading-color);
    text-transform: uppercase;
  }

  @media screen and (min-width: 990px) {
    .veya-footer__heading {
      font-size: var(--veya-footer-heading-size-desktop);
    }
  }

  .veya-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--veya-footer-links-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .veya-footer__link {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: var(--veya-footer-link-size-mobile);
    line-height: var(--veya-footer-link-line-height);
    color: var(--veya-footer-link-color);
    text-decoration: none;
    transition: color 150ms ease;
  }

  @media screen and (min-width: 990px) {
    .veya-footer__link {
      font-size: var(--veya-footer-link-size-desktop);
    }
  }

  .veya-footer__link:hover,
  .veya-footer__link:focus-visible,
  .veya-footer__link--active {
    color: var(--veya-footer-link-hover-color);
  }

  /* ===== Newsletter ===== */
  .veya-footer__column--newsletter {
    max-width: var(--veya-footer-newsletter-width);
  }

  @media screen and (min-width: 990px) {
    .veya-footer__column--newsletter {
      max-width: none;
      width: var(--veya-footer-newsletter-width);
      justify-self: start;
    }
  }

  .veya-footer__newsletter-text {
    margin: 0 0 16px;
    font-family: var(--font-body--family);
    font-size: 13px;
    line-height: 1.6;
    color: var(--veya-footer-link-color);
  }

  .veya-footer__newsletter-form {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* ===== Newsletter: Shopify Forms app block styling =====
     The form itself (fields/button/checkbox/disclaimer) is rendered
     entirely by the Forms app block (`{% render block %}` above) — this
     theme has no Liquid access to that markup, only to whatever classes
     Shopify's own bundle puts on it. Every selector below is scoped under
     `.veya-footer__newsletter-form` (this section's own wrapper) so it
     can never leak onto a different Forms instance elsewhere on the site,
     and pairs Shopify's own hashed CSS-module class (e.g.
     `_formFieldset_jnbzb_92`, read straight off the live rendered form)
     with a plain element/attribute selector as a fallback where one was
     available — if a future Shopify Forms bundle update changes a hash,
     only that one selector goes stale rather than the whole rule.
     `!important` is used deliberately (unlike the rest of this file) only
     to win over Shopify's own injected vendor CSS, whose load order
     relative to this section's stylesheet isn't something this theme
     controls. Reuses the exact same `--veya-footer-input-*`/
     `--veya-footer-button-*` tokens the (now-removed) hand-built
     newsletter form used, per instruction to match that look exactly. */

  /* Two fields side by side, 50/50 — `direction: rtl` so "first name"
     (DOM-first) sits on the right, matching Hebrew reading order, same
     convention as every other RTL row in this file. The invisible
     `<shop-lead-capture>` controller div (no class of its own — matched
     by `:has()` since that's the only stable hook available) is
     collapsed out of the row entirely so it can't consume any of the
     50/50 space; the consent checkbox and submit button are each forced
     onto their own full-width row via `flex-basis: 100%` so only the two
     text fields actually share the row. */
  .veya-footer__newsletter-form ._formFieldset_jnbzb_92,
  .veya-footer__newsletter-form form[data-testid='form'] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    direction: rtl;
  }

  .veya-footer__newsletter-form form > div:has(shop-lead-capture) {
    flex-basis: 0;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .veya-footer__newsletter-form ._formFieldContainer_1mxsl_5 {
    position: relative;
    flex: 1 1 calc(50% - 5px);
    min-width: 140px;
  }

  .veya-footer__newsletter-form ._formInputField_nag3b_7 {
    width: 100% !important;
    height: var(--veya-footer-input-height) !important;
    padding-inline: 16px !important;
    border: 1px solid var(--veya-footer-input-border) !important;
    border-radius: 2px !important;
    background-color: var(--veya-footer-input-bg) !important;
    color: var(--veya-footer-input-text) !important;
    font-family: var(--font-body--family) !important;
    font-size: 13px !important;
    text-align: right;
    direction: rtl;
  }

  /* Only horizontal position/color/font are overridden — Shopify's own
     script animates this label's `top` via an inline style on
     focus/fill (see the live markup's own `style="top: 16px"`), so
     `position`/`top` stay untouched to keep that animation working.
     `right`, not `left`: mirrors the input's own `text-align: right` so
     the label sits over the RTL-aligned text instead of the LTR corner
     Shopify's own CSS assumes by default. */
  .veya-footer__newsletter-form ._formInputFieldLabel_1mxsl_38 {
    right: 16px !important;
    left: auto !important;
    color: rgba(31, 31, 31, 0.45) !important;
    font-family: var(--font-body--family) !important;
    font-size: 13px !important;
    direction: rtl;
  }

  /* Consent checkbox: forced onto its own full-width row below the two
     fields, and recolored for legibility against the bordeaux background
     — the vendor's own default text color is dark and effectively
     invisible there. `accent-color` retints just the native checkbox
     (box + checkmark) without needing a custom-built checkbox control. */
  .veya-footer__newsletter-form ._consentCheckboxContainer_jnbzb_49 {
    flex-basis: 100%;
    margin-top: 4px;
  }

  .veya-footer__newsletter-form ._checkboxFieldSet_1hja3_3 {
    border: none;
    margin: 0;
    padding: 0;
  }

  .veya-footer__newsletter-form ._checkboxField_1hja3_3 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    direction: rtl;
    cursor: pointer;
  }

  .veya-footer__newsletter-form ._checkboxInput_1hja3_38 {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: #F6F1EB;
    cursor: pointer;
  }

  .veya-footer__newsletter-form ._textBody_2aowh_10 {
    color: var(--veya-footer-link-color) !important;
    font-family: var(--font-body--family) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: right;
  }

  .veya-footer__newsletter-form ._formSubmitButton_jnbzb_106 {
    flex-basis: 100%;
    margin-top: var(--veya-footer-button-margin-top);
    padding: var(--veya-footer-button-padding-v) var(--veya-footer-button-padding-h) !important;
    border: none !important;
    border-radius: 2px !important;
    background-color: var(--veya-footer-button-bg) !important;
    color: var(--veya-footer-button-text) !important;
    font-family: var(--font-body--family) !important;
    font-size: 12px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
  }

  .veya-footer__newsletter-form ._formSubmitButton_jnbzb_106:hover,
  .veya-footer__newsletter-form ._formSubmitButton_jnbzb_106:focus-visible {
    background-color: var(--veya-footer-button-hover-bg) !important;
    color: var(--veya-footer-button-hover-text) !important;
  }

  .veya-footer__newsletter-form ._formDisclaimer_jnbzb_38 {
    margin-top: 12px;
  }

  .veya-footer__newsletter-form ._formDisclaimer_jnbzb_38 p {
    margin: 0 !important;
    font-family: var(--font-body--family) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: var(--veya-footer-link-color) !important;
    text-align: right;
    direction: rtl;
  }

  .veya-footer__newsletter-form ._formDisclaimer_jnbzb_38 a {
    color: var(--veya-footer-link-hover-color) !important;
    text-decoration: underline;
  }

  /* ===== Social ===== */
  .veya-footer__social {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--veya-footer-social-gap);
    margin-top: var(--veya-footer-social-top-spacing);
  }

  .veya-footer__social-link {
    display: inline-flex;
    color: var(--veya-footer-social-color);
    transition: color 150ms ease;
  }

  .veya-footer__social-link:hover,
  .veya-footer__social-link:focus-visible {
    color: var(--veya-footer-social-hover-color);
  }

  .veya-footer__social-icon {
    display: inline-flex;
    width: var(--veya-footer-social-size-mobile);
    height: var(--veya-footer-social-size-mobile);
  }

  @media screen and (min-width: 990px) {
    .veya-footer__social-icon {
      width: var(--veya-footer-social-size-desktop);
      height: var(--veya-footer-social-size-desktop);
    }
  }

  .veya-footer__social-icon svg,
  .veya-footer__social-icon img,
  .veya-footer__social-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* ===== Bottom row =====
     Two-column grid, `direction: rtl` so grid-column 1 (the first track) is
     the visual right — copyright — and column 2 is the visual left —
     payment icons — matching exactly at every width, so the two are always
     "on the same line" as requested. The localization switcher (present
     only when the shop has more than one available country/currency) spans
     both columns as its own row above them, since it isn't part of that
     pairing. */
  .veya-footer__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    direction: rtl;
    gap: 16px 20px;
    margin-top: var(--veya-footer-bottom-row-margin-top);
    padding-bottom: var(--veya-footer-mobile-bottom-spacing);
  }

  @media screen and (min-width: 990px) {
    .veya-footer__bottom {
      padding-bottom: var(--veya-footer-bottom-row-padding-bottom);
    }
  }

  .veya-footer__bottom-localization {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    min-height: 1px;
  }

  .veya-footer__bottom-credit {
    grid-column: 1;
    text-align: right;
  }

  .veya-footer__bottom-payment {
    grid-column: 2;
    min-height: 1px;
  }

  .veya-footer__copyright {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--veya-footer-copyright-size);
    color: var(--veya-footer-copyright-color);
  }

  .veya-footer__localization-form {
    display: flex;
  }

  .veya-footer__localization-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .veya-footer__localization-select {
    appearance: none;
    border: none;
    background: transparent;
    padding-inline-end: calc(var(--veya-footer-localization-arrow-size) + 8px);
    font-family: var(--font-body--family);
    font-size: var(--veya-footer-localization-size);
    color: var(--veya-footer-localization-color);
    cursor: pointer;
  }

  .veya-footer__localization-arrow {
    position: absolute;
    inset-inline-end: 0;
    display: inline-flex;
    width: var(--veya-footer-localization-arrow-size);
    height: var(--veya-footer-localization-arrow-size);
    pointer-events: none;
    color: var(--veya-footer-localization-color);
  }

  .veya-footer__localization-arrow svg,
  .veya-footer__localization-arrow img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .veya-footer__payment-list {
    display: flex;
    flex-wrap: wrap;
    /* `.veya-footer__bottom` is `direction: rtl` and that inherits down into
       this list, so "start" here means the right edge of this column, not
       the left — `flex-end` is what actually pushes the icons to the
       column's left edge (the RTL "end"), flush with the footer's own left
       edge. `flex-start` here was landing the icons mid-row instead. */
    justify-content: flex-end;
    align-items: center;
    gap: var(--veya-footer-payment-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .veya-footer__payment-icon {
    display: block;
    height: var(--veya-footer-payment-icon-height);
    width: auto;
  }

  /* .visually-hidden itself comes from assets/base.css (loaded globally,
     with a more specific `:not(:focus, :active)` + !important rule that
     already wins over a plain re-declaration here) — no need to redefine
     it in every section that uses the class. */
/* END_SECTION:veya-footer */

/* START_SECTION:veya-header (INDEX:46) */
.veya-header {
    position: relative;
    display: block;
    z-index: var(--veya-header-z-index, 30);
    background-color: var(--veya-header-bg);
    color: var(--veya-header-text);
    border-bottom: var(--veya-header-border-width, 0) solid var(--veya-header-border-color);
    transition: background-color var(--veya-header-sticky-transition, 250ms) ease, box-shadow var(--veya-header-sticky-transition, 250ms) ease;
  }

  /* Shopify's native header.liquid never makes the header CUSTOM ELEMENT
     itself sticky — it makes the auto-generated `.shopify-section` wrapper
     around it sticky instead (see `.header-section:has(> #header-component
     [sticky='always'])` there), and collapses `#header-group` (the shared,
     global wrapper around every header-group section) via `display:
     contents` so nothing about ITS box can constrain that. Both rules key
     off `#header-component`'s literal `id` — which only the *native* header
     section ever has — so neither one ever matched our `<veya-header
     -component>`, no matter which section was actually active in the header
     slot: `position: sticky` was previously set directly on `.veya-header`
     itself, several levels below the still-un-collapsed `#header-group`,
     which is why enabling the setting visibly did nothing. These two rules
     replicate the native pair, keyed off our own tag name instead of an id
     so they match regardless of `section.id`. */
  #header-group:has(veya-header-component[sticky]) {
    display: contents;
  }

  .veya-header-section:has(> veya-header-component[sticky]) {
    position: sticky;
    /* -1px, not 0: lets the IntersectionObserver in veya-header.js detect
       the stuck transition by watching this wrapper's own intersection
       ratio drop below 1 — same technique (and same reason) as the native
       header's own `top: -1px` comment. */
    top: -1px;
    z-index: var(--veya-header-z-index, 30);
  }

  .veya-header--stuck {
    background-color: var(--veya-header-sticky-bg, var(--veya-header-bg));
    box-shadow: 0 4px 16px rgb(0 0 0 / var(--veya-header-sticky-shadow-opacity, 0));
  }

  .veya-header__inner {
    max-width: var(--veya-header-max-width);
    margin-inline: auto;
    padding-inline: var(--veya-header-padding-inline-mobile);
    padding-block: var(--veya-header-padding-block-start) var(--veya-header-padding-block-end);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .veya-header__inner {
      padding-inline: var(--veya-header-padding-inline-tablet);
    }
  }

  @media screen and (min-width: 990px) {
    .veya-header__inner {
      padding-inline: var(--veya-header-padding-inline-desktop);
    }
  }

  .veya-header__row {
    display: grid;
    /* `minmax(0, 1fr)`, not a bare `1fr` — a plain `1fr` track's minimum
       size defaults to its content's own min-content width, not 0. Below
       990px the two side zones carry a different number of icons (the
       hamburger zone: 1 icon; the search+cart zone: 2 icons — see the
       markup below), so their min-content widths differ; a bare `1fr`
       column that needs more than its "fair" 50% of the leftover space to
       fit its own content is allowed to grow past it, and grid takes that
       extra width from the OTHER `1fr` column to compensate — which shifts
       the centered `auto` column (the logo) away from the row's true
       visual center toward whichever side has less content. Capping each
       track's minimum at 0 forces both to split the remaining space
       exactly 50/50 regardless of how much their own icons need, which is
       what actually centers the logo. Both zones' own icons stay a fixed,
       small size regardless (see `--veya-header-icon-button-width/height`
       etc.), so neither track is ever at real risk of clipping its content
       once forced to this equal split. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: 'start logo end';
    /* Stretch (not center) so zones/logo span the full row height — this
       lets the desktop dropdown's `top: 100%` land flush with the header's
       true bottom edge instead of the shorter link text's own height. */
    align-items: stretch;
    min-height: var(--veya-header-height-mobile);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .veya-header__row {
      min-height: var(--veya-header-height-tablet);
    }
  }

  @media screen and (min-width: 990px) {
    .veya-header__row {
      min-height: var(--veya-header-height-desktop);
    }
  }

  .veya-header__zone {
    display: flex;
    align-items: center;
    min-width: 0;
    justify-content: flex-start;
    gap: var(--veya-header-icon-spacing);
  }

  /* Below 990px the hamburger zone renders on the physical right and the
     search/cart zone renders on the physical left (swapped from desktop). */
  .veya-header__zone--start {
    grid-area: end;
    justify-content: flex-end;
  }

  .veya-header__zone--end {
    grid-area: start;
    justify-content: flex-start;
  }

  @media screen and (min-width: 990px) {
    .veya-header__zone--start {
      grid-area: start;
    }

    .veya-header__zone--end {
      grid-area: end;
    }

    .veya-header__zone {
      justify-content: space-between;
      gap: 0;
    }
  }

  /* ===== Logo ===== */
  /* `.veya-header__logo-link` carries a DEFINITE width/height (not the
     image itself) — an uploaded logo SVG whose root `<svg>` declares only a
     `viewBox` (no `width`/`height` attributes, which is legal, valid SVG,
     and is exactly what an export from most design tools produces) has an
     intrinsic aspect ratio but no intrinsic *size*. Sizing `.veya-header
     __logo-image` itself via `width: auto; height: auto` plus `max-width`/
     `max-height` — fine for a raster PNG/JPG, which always has a real
     intrinsic pixel size — leaves the browser needing to size a box from
     nothing but two max-constraints and a ratio, a combination real-world
     engines don't all resolve the same way; that inconsistency is what let
     a vector logo render on one device and not another even though the
     file itself loads perfectly fine on its own. Giving the *link* a
     definite box instead removes the ambiguity entirely: `object-fit:
     contain` reliably scales any replaced element — vector or raster,
     with or without its own intrinsic size — to fit inside a
     definite-sized parent, in every browser. Visually identical to the
     max-width/max-height approach for an existing raster logo (whichever
     of width/height is more constraining still wins), so this doesn't
     change anything for a PNG/JPG logo — it only fixes the case that
     previously had no reliable way to size itself at all. */
  .veya-header__logo-link {
    grid-area: logo;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    /* `.veya-header__row`'s own `align-items: stretch` only actually
       stretches a grid item whose own height is `auto` — now that this one
       has a definite `height` (see the comment above), stretch's fallback
       for a non-auto-sized item is to place it flush with the row's
       block-start (top) instead, exactly the "logo pinned to the top"
       symptom. `align-self: center` overrides that for this one item only,
       centering its now-fixed-height box within the taller stretched row —
       every other grid item (the icon zones) is untouched and keeps
       genuinely stretching to the full row height, same as before. */
    align-self: center;
    overflow: hidden;
    width: var(--veya-header-logo-width-mobile);
    height: var(--veya-header-logo-max-height);
    text-decoration: none;
    color: var(--veya-header-text);
  }

  /* No `object-fit` — Safari has a well-documented bug where `object-fit`
     fails to apply on an element's very first paint (confirmed via
     research, not assumed here), rendering it unconstrained for a moment
     before a later repaint corrects it. That's a strong match for "logo
     briefly renders huge, then settles," reported as mobile-only (iPhone/
     Safari) and unaffected by every fix so far, including fully disabling
     cross-document view transitions (see assets/base.css) — ruling out
     every timing theory tried before this one. `height: 100%` (against
     `.veya-header__logo-link`'s own definite height — see both its own
     external rule below and the instant inline `<style>` duplicate above
     it) + `width: auto` + the `aspect-ratio` set inline on the `<img>`
     itself achieve the exact same "fit inside the box, preserve ratio"
     result `object-fit: contain` did, without ever invoking the buggy
     property at all. `max-width: 100%` stays as a guard for the (here,
     essentially impossible, since the link's own configured width/height
     already share this logo's real ratio) case where the computed width
     would exceed the box. */
  .veya-header__logo-image {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .veya-header__logo-link {
      width: var(--veya-header-logo-width-tablet);
    }
  }

  @media screen and (min-width: 990px) {
    .veya-header__logo-link {
      width: var(--veya-header-logo-width-desktop);
    }
  }

  .veya-header__logo-text {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* ===== Icon buttons ===== */
  .veya-header__icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--veya-header-icon-button-width);
    height: var(--veya-header-icon-button-height);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--veya-header-icon-color);
    cursor: pointer;
    text-decoration: none;
    transition: color 150ms ease;
  }

  .veya-header__icon-button:hover,
  .veya-header__icon-button:focus-visible {
    color: var(--veya-header-icon-hover-color);
  }

  .veya-header__icon-button:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
  }

  .veya-header__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .veya-header__icon-wrap svg,
  .veya-header__icon-wrap img,
  .veya-header__icon-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .veya-header__icon-wrap--search {
    width: var(--veya-header-search-icon-size-mobile);
    height: var(--veya-header-search-icon-size-mobile);
  }

  .veya-header__icon-wrap--cart {
    width: var(--veya-header-cart-icon-size-mobile);
    height: var(--veya-header-cart-icon-size-mobile);
  }

  .veya-header__icon-wrap--menu {
    width: var(--veya-header-menu-icon-size-mobile);
    height: var(--veya-header-menu-icon-size-mobile);
  }

  .veya-header__cart-button {
    width: var(--veya-header-cart-hit-area);
    height: var(--veya-header-cart-hit-area);
  }

  .veya-header__search-button {
    width: var(--veya-header-search-hit-area);
    height: var(--veya-header-search-hit-area);
  }

  .veya-header__hamburger {
    width: var(--veya-header-icon-button-width);
    height: var(--veya-header-icon-button-height);
  }

  @media screen and (min-width: 990px) {
    .veya-header__icon-wrap--search {
      width: var(--veya-header-search-icon-size-desktop);
      height: var(--veya-header-search-icon-size-desktop);
    }

    .veya-header__icon-wrap--cart {
      width: var(--veya-header-cart-icon-size-desktop);
      height: var(--veya-header-cart-icon-size-desktop);
    }
  }

  .veya-header__hamburger,
  .veya-header__search-button--mobile {
    display: inline-flex;
  }

  .veya-header__search-button--desktop {
    display: none;
  }

  .veya-header__menu {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .veya-header__hamburger,
    .veya-header__search-button--mobile {
      display: none;
    }

    .veya-header__search-button--desktop {
      display: inline-flex;
    }

    .veya-header__menu {
      display: flex;
      align-self: stretch;
    }
  }

  /* ===== Cart badge ===== */
  .veya-header__cart-icon {
    position: relative;
    display: inline-flex;
  }

  .veya-header__cart-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--veya-header-cart-badge-size);
    height: var(--veya-header-cart-badge-size);
    border-radius: 50%;
    background-color: var(--veya-header-cart-badge-bg);
    color: var(--veya-header-cart-badge-text);
  }

  .veya-header__cart-badge--hidden {
    visibility: hidden;
  }

  .veya-header__cart-badge-text {
    font-size: calc(var(--veya-header-cart-badge-size) * 0.55);
    line-height: 1;
  }

  .veya-header--hide-cart-badge .veya-header__cart-badge {
    display: none;
  }

  /* ===== Desktop nav menus ===== */
  .veya-header__menu-list {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .veya-header__menu-list--right {
    gap: var(--veya-header-right-menu-gap);
    margin-left: var(--veya-header-gap-right-logo);
  }

  .veya-header__menu-list--left {
    gap: var(--veya-header-left-menu-gap);
    margin-right: var(--veya-header-gap-left-logo);
  }

  .veya-header__menu-item {
    position: relative;
  }

  .veya-header__menu-link {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 4px;
    color: var(--veya-header-text);
    text-decoration: none;
    font-family: var(--font-body--family);
    font-size: var(--veya-header-menu-font-size-tablet);
    font-weight: var(--veya-header-menu-font-weight);
    letter-spacing: var(--veya-header-menu-letter-spacing);
    text-transform: var(--veya-header-menu-text-transform);
    padding-block: 8px;
    transition: color 150ms ease;
  }

  @media screen and (min-width: 990px) {
    .veya-header__menu-link {
      font-size: var(--veya-header-menu-font-size-desktop);
    }
  }

  .veya-header__menu-link:hover,
  .veya-header__menu-link:focus-visible {
    color: var(--veya-header-hover);
  }

  .veya-header__menu-link--active {
    color: var(--veya-header-active);
  }

  .veya-header__submenu-arrow {
    display: inline-flex;
    width: var(--veya-header-submenu-arrow-size);
    height: var(--veya-header-submenu-arrow-size);
    transition: transform var(--veya-header-dropdown-transition) ease;
  }

  /* `:not(...--nested)`: without it, this descendant selector would also
     rotate a level-2 flyout's own arrow the moment the top-level item is
     hovered, before the mouse has even reached the row that owns it. */
  .veya-header__menu-item--has-dropdown:is(:hover, :focus-within) .veya-header__submenu-arrow:not(.veya-header__submenu-arrow--nested) {
    transform: rotate(180deg);
  }

  .veya-header__dropdown {
    /* A tall, narrow list continuing the header's own color — like the
       mobile drawer's list, not a floating card. */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 4px);
    z-index: 10;
    width: var(--veya-header-dropdown-width);
    max-width: min(var(--veya-header-dropdown-width), calc(100vw - 32px));
    margin: 0;
    padding: var(--veya-header-dropdown-padding) 0;
    list-style: none;
    background-color: var(--veya-header-dropdown-bg);
    color: var(--veya-header-dropdown-text);
    border: none;
    border-top: 1px solid var(--veya-header-dropdown-border);
    box-shadow: var(--veya-header-dropdown-shadow);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--veya-header-dropdown-transition) ease, transform var(--veya-header-dropdown-transition) ease, visibility var(--veya-header-dropdown-transition) ease;
  }

  /* `>` (direct child), not a plain descendant combinator: this must only
     reveal the top-level item's own immediate dropdown (level 1), never
     the level-2 flyout nested inside one of its rows (that one has its own
     reveal rule below, tied to its own direct parent row) — otherwise
     hovering the top-level item would pop level 2 open as well,
     regardless of which row the mouse is actually on. */
  .veya-header__menu-item--has-dropdown:is(:hover, :focus-within) > .veya-header__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .veya-header__dropdown li {
    width: 100%;
    padding-inline: var(--veya-header-dropdown-padding);
    border-bottom: 1px solid var(--veya-header-dropdown-border);
  }

  .veya-header__dropdown li:last-child {
    border-bottom: none;
  }

  .veya-header__dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-block: 12px;
    color: var(--veya-header-dropdown-text);
    text-decoration: none;
    font-family: var(--font-body--family);
    font-size: var(--veya-header-menu-font-size-tablet);
    transition: color 150ms ease;
  }

  .veya-header__dropdown-link:hover,
  .veya-header__dropdown-link:focus-visible {
    color: var(--veya-header-dropdown-hover);
  }

  .veya-header__dropdown-link--active {
    color: var(--veya-header-dropdown-hover);
  }

  /* A dropdown row that itself opens a level-2 flyout needs to host that
     flyout's `position: absolute`. */
  .veya-header__dropdown-item {
    position: relative;
  }

  .veya-header__submenu-arrow--nested {
    flex-shrink: 0;
    /* Rotated 90°, not left as the plain down-arrow: this one opens a
       flyout to the side, not a dropdown below, so it should read as
       "leads sideways" rather than "expands down/up" like the top-level
       arrow above. */
    transform: rotate(90deg);
  }

  /* The level-2 dropdown flies out to the side of its own parent row
     instead of opening below like the level-1 dropdown — stacking a
     second dropdown directly underneath the first would read as a second,
     disconnected menu rather than a continuation of the same item. Opens
     toward the left (`right: 100%`): the header's own nav already
     occupies the right side of the viewport in this RTL layout, so flying
     out further left is what has room and continues the same reading
     direction. */
  .veya-header__dropdown--nested {
    /* Explicit, not just inherited from the base `.veya-header__dropdown`
       rule above (it also carries that class, so it would already apply)
       — spelled out here so this flyout's out-of-flow, side-anchored
       positioning can never depend on load order or a cascade accident. */
    position: absolute;
    top: 0;
    left: auto;
    right: 100%;
    transform: translateX(8px);
    border-top: none;
    border-inline-end: 1px solid var(--veya-header-dropdown-border);
  }

  /* Same `>` reasoning as the level-1 reveal rule above: only this
     flyout's own direct parent row should open it. */
  .veya-header__dropdown-item--has-dropdown:is(:hover, :focus-within) > .veya-header__dropdown--nested {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  /* ===== Mobile menu drawer ===== */
  .veya-mobile-drawer.theme-drawer__dialog {
    position: fixed;
    inset: unset;
    top: 0;
    bottom: 0;
    right: calc(-1 * var(--veya-mobile-drawer-width));
    left: auto;
    width: var(--veya-mobile-drawer-width);
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background-color: var(--veya-mobile-drawer-bg);
    color: var(--veya-mobile-item-text);
    z-index: var(--veya-mobile-z-index);
    overflow: hidden;
  }

  .veya-mobile-drawer.theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .veya-mobile-drawer.theme-drawer__dialog--opening,
  .veya-mobile-drawer.theme-drawer__dialog--opening-inline-start {
    animation-name: veya-mobile-drawer-slide-in;
    animation-duration: var(--veya-mobile-drawer-duration);
    animation-timing-function: var(--veya-mobile-drawer-easing);
    animation-fill-mode: both;
  }

  .veya-mobile-drawer.theme-drawer__dialog--closing {
    animation-name: veya-mobile-drawer-slide-out;
    animation-duration: var(--veya-mobile-drawer-duration);
    animation-timing-function: var(--veya-mobile-drawer-easing);
    animation-fill-mode: forwards;
  }

  @keyframes veya-mobile-drawer-slide-in {
    from {
      right: calc(-1 * var(--veya-mobile-drawer-width));
    }

    to {
      right: 0;
    }
  }

  @keyframes veya-mobile-drawer-slide-out {
    from {
      right: 0;
    }

    to {
      right: calc(-1 * var(--veya-mobile-drawer-width));
    }
  }

  .veya-mobile-drawer.theme-drawer__dialog::backdrop {
    background: rgb(var(--veya-mobile-overlay-rgb) / var(--veya-mobile-overlay-alpha));
  }

  .veya-mobile-drawer__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .veya-mobile-drawer__close {
    flex-shrink: 0;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--veya-mobile-icon-hit-area);
    height: var(--veya-mobile-icon-hit-area);
    margin: var(--veya-mobile-close-top)
      calc(var(--veya-mobile-padding-inline) - ((var(--veya-mobile-icon-hit-area) - var(--veya-mobile-close-icon-size)) / 2) + var(--veya-mobile-close-side))
      0 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--veya-mobile-icon-color);
    cursor: pointer;
    transition: color 150ms ease;
  }

  .veya-mobile-drawer__close:hover,
  .veya-mobile-drawer__close:focus-visible {
    color: var(--veya-mobile-icon-hover-color);
  }

  /* Overrides the shared .theme-drawer__close-button's circular chrome
     (background, border, shadow) with a combined-class selector so it wins
     regardless of stylesheet load order — this should read as a bare icon.
     `outline: none` too: assets/theme-drawer.js's own `#focusInitialElement()`
     explicitly moves real keyboard focus to this exact button every time
     the drawer opens (a deliberate, shared a11y behavior across every
     theme-drawer), and a programmatic `.focus()` call is treated as "not
     a mouse click" by every major browser's focus-visible heuristic — so
     the shared `:focus-visible` ring from snippets/theme-drawer-styles.liquid
     activates immediately on open, which around a now-square
     (border-radius: 0) button reads as a literal square frame around the
     X. Focus itself still moves there correctly for real keyboard/
     screen-reader use; only the visible ring is gone. */
  .veya-mobile-drawer__close.theme-drawer__close-button {
    border-radius: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    color: var(--veya-mobile-icon-color);
  }

  .veya-mobile-drawer__close.theme-drawer__close-button:hover:not(:active) {
    background-color: transparent;
    color: var(--veya-mobile-icon-hover-color);
  }

  .veya-mobile-drawer__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--veya-mobile-close-icon-size);
    height: var(--veya-mobile-close-icon-size);
  }

  .veya-mobile-drawer__icon-wrap svg,
  .veya-mobile-drawer__icon-wrap img,
  .veya-mobile-drawer__icon-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .veya-mobile-drawer__icon-wrap--back {
    width: var(--veya-mobile-back-icon-size);
    height: var(--veya-mobile-back-icon-size);
  }

  .veya-mobile-drawer__panels {
    position: relative;
    flex: 1;
    margin-top: var(--veya-mobile-space-below-close);
    overflow: hidden;
  }

  .veya-mobile-drawer__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-inline: var(--veya-mobile-padding-inline);
    transition: transform var(--veya-mobile-panel-duration) var(--veya-mobile-panel-easing);
  }

  .veya-mobile-drawer__panel[aria-hidden='true'] {
    pointer-events: none;
  }

  /* Same flex-column-sibling shape as `.veya-mobile-drawer__social` below
     (not `position: fixed`, so it never overlaps the scrollable panel
     content above it) — no `border-top` of its own on purpose: this row
     always sits directly above that one, so ITS top divider already reads
     as belonging to both, exactly the "right above the divider line"
     placement asked for, without a second divider stacking on top of it. */
  .veya-mobile-drawer__ring-size-help {
    flex-shrink: 0;
    padding-inline: var(--veya-mobile-padding-inline);
    padding-block: 4px 12px;
  }

  /* Matches snippets/veya-ring-size-finder.liquid's own `.veya-rsf__trigger`
     styling exactly (bordered box, underline, bordeaux text) per request —
     kept as a literal copy of those properties rather than sharing the
     class, since that file is explicitly signed off as final and must
     never depend on anything defined here. */
  .veya-mobile-drawer__ring-size-link {
    display: block;
    width: 100%;
    padding: 10px 0;
    border: 1px solid rgb(31 31 31 / 0.2);
    background: transparent;
    color: #4F1119;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-family: var(--font-body--family);
    font-size: 13px;
    cursor: pointer;
  }

  /* Fixed footer strip, below .veya-mobile-drawer__panels (flex: 1) — a
     plain flex-column sibling, not `position: fixed`, so it never overlaps
     the scrollable panel content above it. Reuses the same divider custom
     properties as every other divider in this drawer (menu items, submenu
     back row) so it matches automatically if those are ever restyled. */
  .veya-mobile-drawer__social {
    flex-shrink: 0;
    padding-inline: var(--veya-mobile-padding-inline);
    padding-block: 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: var(--veya-mobile-divider-thickness) solid rgb(var(--veya-mobile-divider-rgb) / var(--veya-mobile-divider-alpha));
  }

  .veya-mobile-drawer--no-dividers .veya-mobile-drawer__social {
    border-top: none;
  }

  .veya-mobile-drawer__social-list {
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--veya-mobile-social-icon-gap);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .veya-mobile-drawer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--veya-mobile-social-icon-size) + 20px);
    height: calc(var(--veya-mobile-social-icon-size) + 20px);
    border-radius: 50%;
    background-color: #4F1119;
    color: #F6F1EB;
    transition: background-color 150ms ease;
  }

  .veya-mobile-drawer__social-link:hover,
  .veya-mobile-drawer__social-link:focus-visible {
    background-color: #3A0D13;
  }

  .veya-mobile-drawer__social-link svg,
  .veya-mobile-drawer__social-link img {
    display: block;
    width: var(--veya-mobile-social-icon-size);
    height: var(--veya-mobile-social-icon-size);
    object-fit: contain;
  }

  .veya-mobile-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .veya-mobile-drawer__item {
    opacity: 0;
    transform: translateY(var(--veya-mobile-item-translate));
    border-bottom: var(--veya-mobile-divider-thickness) solid rgb(var(--veya-mobile-divider-rgb) / var(--veya-mobile-divider-alpha));
  }

  .veya-mobile-drawer__item.is-visible {
    animation-name: veya-mobile-item-in;
    animation-duration: var(--veya-mobile-item-fade-duration);
    animation-timing-function: var(--veya-mobile-panel-easing);
    animation-fill-mode: forwards;
    animation-delay: calc(var(--i, 0) * var(--veya-mobile-item-stagger-delay));
  }

  .veya-mobile-drawer--no-stagger .veya-mobile-drawer__item {
    opacity: 1;
    transform: none;
    animation: none;
  }

  @keyframes veya-mobile-item-in {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .veya-mobile-drawer--no-dividers .veya-mobile-drawer__item {
    border-bottom: none;
  }

  .veya-mobile-drawer__row {
    display: flex;
    direction: rtl;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: var(--veya-mobile-item-min-height);
    padding: var(--veya-mobile-item-padding-block) var(--veya-mobile-item-padding-inline);
    border: none;
    background: transparent;
    color: var(--veya-mobile-item-text);
    text-decoration: none;
    text-align: right;
    font-family: var(--font-body--family);
    font-size: var(--veya-mobile-item-font-size);
    font-weight: var(--veya-mobile-item-font-weight);
    letter-spacing: var(--veya-mobile-item-letter-spacing);
    line-height: var(--veya-mobile-item-line-height);
    cursor: pointer;
    transition: color 150ms ease;
  }

  .veya-mobile-drawer__row:focus-visible,
  .veya-mobile-drawer__row--active {
    color: var(--veya-mobile-item-hover);
  }

  /* `.is-pressed` — added/removed by the touchend handler in
     assets/veya-header.js, not a `:active` pseudo-class: a real press
     state a shopper can actually see for a moment on tap, on every row
     type (leaf link, submenu-opening button, back button — see
     `.veya-mobile-drawer__back.is-pressed` further down), including the
     leaf links, which now navigate straight from `touchend` instead of
     waiting on `click` (see that file's own comment) — without this,
     tapping a leaf link had no visible press feedback at all before the
     page changed, unlike every other row, which gets one for free from
     its own panel-slide animation having time to render first. */
  .veya-mobile-drawer__row.is-pressed {
    color: var(--veya-mobile-item-hover);
  }

  /* `(hover: hover)` — a real mouse/trackpad, not a touchscreen. Without
     this guard, a touch device treats the FIRST tap on a link as "trigger
     :hover" and only a SECOND tap as "actually activate it" (a
     well-documented mobile browser behavior for any element styled with
     :hover) — exactly the reported "first tap highlights the row in
     bordeaux but doesn't navigate, second tap works" symptom, on this
     store's mobile-only shoppers specifically. Genuine hover-capable
     devices (desktop mouse) are completely unaffected either way — this
     only removes the touch-device two-tap trap. `:focus-visible`/
     `--active` above are untouched and keep working identically on every
     device; only the plain `:hover` state moves behind this guard. */
  @media (hover: hover) {
    .veya-mobile-drawer__row:hover {
      color: var(--veya-mobile-item-hover);
    }
  }

  .veya-mobile-drawer__arrow {
    flex-shrink: 0;
    display: inline-flex;
    width: var(--veya-mobile-arrow-icon-size);
    height: var(--veya-mobile-arrow-icon-size);
    color: var(--veya-mobile-icon-color);
  }

  .veya-mobile-drawer__row:focus-visible .veya-mobile-drawer__arrow {
    color: var(--veya-mobile-icon-hover-color);
  }

  /* Same touch-two-tap guard as `.veya-mobile-drawer__row:hover` above,
     applied here to keep the arrow's own hover color in sync with the
     text — without it, a submenu-opening row would show the same
     first-tap-doesn't-work symptom for opening its submenu. */
  @media (hover: hover) {
    .veya-mobile-drawer__row:hover .veya-mobile-drawer__arrow {
      color: var(--veya-mobile-icon-hover-color);
    }
  }

  .veya-mobile-drawer__back {
    flex-shrink: 0;
    display: flex;
    direction: rtl;
    align-items: center;
    gap: 8px;
    height: var(--veya-mobile-submenu-header-height);
    margin: 0 calc(-1 * var(--veya-mobile-padding-inline));
    padding-inline: var(--veya-mobile-padding-inline);
    border: none;
    border-bottom: var(--veya-mobile-divider-thickness) solid rgb(var(--veya-mobile-divider-rgb) / var(--veya-mobile-divider-alpha));
    background: transparent;
    color: var(--veya-mobile-submenu-header-color);
    cursor: pointer;
    width: calc(100% + (2 * var(--veya-mobile-padding-inline)));
  }

  .veya-mobile-drawer--no-dividers .veya-mobile-drawer__back {
    border-bottom: none;
  }

  /* Same reasoning as `.veya-mobile-drawer__row.is-pressed` above — a
     visible press moment for the back row too, now that it's also
     triggered directly from `touchend` on mobile. */
  .veya-mobile-drawer__back.is-pressed {
    color: var(--veya-mobile-item-hover);
  }

  .veya-mobile-drawer__back-label {
    font-family: var(--font-body--family);
    font-size: var(--veya-mobile-submenu-header-font-size);
    font-weight: var(--veya-mobile-submenu-header-font-weight);
  }

  .veya-mobile-drawer__panel[data-panel-level='0'] .veya-mobile-drawer__list {
    margin-top: 0;
  }

  .veya-mobile-drawer__panel:not([data-panel-level='0']) .veya-mobile-drawer__list {
    margin-top: var(--veya-mobile-submenu-list-top);
  }

  @media (prefers-reduced-motion: reduce) {
    .veya-mobile-drawer {
      --veya-mobile-drawer-duration: 0.01ms;
      --veya-mobile-panel-duration: 0.01ms;
      --veya-mobile-item-fade-duration: 0.01ms;
      --veya-mobile-item-stagger-delay: 0ms;
      --veya-mobile-item-translate: 0px;
    }
  }
/* END_SECTION:veya-header */

/* START_SECTION:veya-hero (INDEX:47) */
.shopify-section.veya-hero-section {
    margin: 0 !important;
  }

  #veya-hero-{{ section.id }} {
    position: relative;
    display: block;
    direction: rtl;
    width: 100%;
    margin: 0 !important;
    top: auto !important;
    inset-block-start: auto !important;
    background-color: var(--veya-hero-fallback-bg);
    min-height: 420px;
  }

  @media screen and (min-width: 750px) {
    #veya-hero-{{ section.id }} {
      height: {{ section.settings.height_desktop_vh }}vh !important;
      min-height: 480px;
    }
  }

  #veya-hero-{{ section.id }} .veya-hero__container {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  /* Fills exactly the box the two background <div>s used to fill. The
     `<picture>` itself is the positioned layer; the <img> inside it is what
     actually paints, via `object-fit`/`object-position` standing in for the
     old `background-size`/`background-position` (same custom properties,
     same merchant settings, same result). */
  #veya-hero-{{ section.id }} .veya-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
  }

  #veya-hero-{{ section.id }} .veya-hero__bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--veya-hero-bg-size);
    object-position: var(--veya-hero-bg-position-mobile);
  }

  /* Same 750px breakpoint the old `--mobile`/`--desktop` div swap used. The
     IMAGE is switched by the `<picture>`'s own `media` attribute; this only
     switches the focal point to the desktop setting. */
  @media screen and (min-width: 750px) {
    #veya-hero-{{ section.id }} .veya-hero__bg-img {
      object-position: var(--veya-hero-bg-position-desktop);
    }
  }

  #veya-hero-{{ section.id }} .veya-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  #veya-hero-{{ section.id }} .veya-hero__overlay--solid {
    background-color: rgb(var(--veya-hero-overlay-rgb) / var(--veya-hero-overlay-opacity));
  }

  #veya-hero-{{ section.id }} .veya-hero__overlay--gradient {
    background: linear-gradient(
      to top,
      rgb(var(--veya-hero-overlay-rgb) / var(--veya-hero-gradient-end)) 0%,
      rgb(var(--veya-hero-overlay-rgb) / var(--veya-hero-gradient-start)) var(--veya-hero-gradient-height),
      rgb(var(--veya-hero-overlay-rgb) / 0) 100%
    );
  }

  #veya-hero-{{ section.id }} .veya-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: var(--veya-hero-align-items);
    width: 100%;
    max-width: var(--veya-hero-content-max-width-mobile);
    margin-inline: auto;
    padding-inline: 20px;
    padding-bottom: var(--veya-hero-content-bottom-mobile);
    text-align: var(--veya-hero-text-align);
  }

  @media screen and (min-width: 750px) {
    #veya-hero-{{ section.id }} .veya-hero__content {
      max-width: var(--veya-hero-content-max-width-desktop);
      padding-bottom: var(--veya-hero-content-bottom-desktop);
      align-items: flex-end;
      text-align: right;
      margin-left: auto;
      margin-right: var(--veya-hero-content-right-offset-desktop);
    }

    #veya-hero-{{ section.id }} .veya-hero__benefits {
      margin-left: 0;
      margin-right: 0;
    }
  }

  #veya-hero-{{ section.id }} .veya-hero__heading {
    max-width: var(--veya-hero-heading-max-width-mobile);
    margin: 0 0 var(--veya-hero-heading-margin-bottom);
    font-family: var(--font-heading--family);
    font-size: var(--veya-hero-heading-size-mobile);
    font-weight: var(--veya-hero-heading-weight);
    line-height: var(--veya-hero-heading-line-height-mobile);
    color: var(--veya-hero-heading-color);
  }

  @media screen and (min-width: 750px) {
    #veya-hero-{{ section.id }} .veya-hero__heading {
      max-width: var(--veya-hero-heading-max-width-desktop);
      font-size: var(--veya-hero-heading-size-desktop);
      line-height: var(--veya-hero-heading-line-height-desktop);
    }
  }

  #veya-hero-{{ section.id }} .veya-hero__subtitle {
    max-width: var(--veya-hero-subtitle-max-width-mobile);
    margin: 0 0 var(--veya-hero-subtitle-margin-bottom);
    font-family: var(--font-body--family);
    font-size: var(--veya-hero-subtitle-size-mobile);
    line-height: var(--veya-hero-subtitle-line-height);
    color: var(--veya-hero-subtitle-color);
  }

  @media screen and (min-width: 750px) {
    #veya-hero-{{ section.id }} .veya-hero__subtitle {
      max-width: var(--veya-hero-subtitle-max-width-desktop);
      font-size: var(--veya-hero-subtitle-size-desktop);
    }
  }

  #veya-hero-{{ section.id }} .veya-hero__subtitle p {
    margin: 0;
  }

  #veya-hero-{{ section.id }} .veya-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--veya-hero-button-icon-gap);
    padding-inline: var(--veya-hero-button-padding-x);
    padding-block: var(--veya-hero-button-padding-y);
    margin: 0 0 var(--veya-hero-button-margin-bottom);
    border: none;
    border-radius: var(--veya-hero-button-radius);
    background-color: var(--veya-hero-button-bg);
    color: var(--veya-hero-button-text-color);
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font-body--family);
    font-size: var(--veya-hero-button-size-mobile);
    font-weight: var(--veya-hero-button-weight);
    transition: background-color 200ms ease, color 200ms ease;
  }

  @media screen and (min-width: 750px) {
    #veya-hero-{{ section.id }} .veya-hero__button {
      font-size: var(--veya-hero-button-size-desktop);
    }
  }

  #veya-hero-{{ section.id }} .veya-hero__button:hover,
  #veya-hero-{{ section.id }} .veya-hero__button:focus-visible {
    background-color: var(--veya-hero-button-hover-bg);
    color: var(--veya-hero-button-hover-text-color);
  }

  #veya-hero-{{ section.id }} .veya-hero__button:focus-visible {
    outline: 2px solid var(--veya-hero-button-hover-bg);
    outline-offset: 3px;
  }

  #veya-hero-{{ section.id }} .veya-hero__button-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: var(--veya-hero-button-icon-size);
    height: var(--veya-hero-button-icon-size);
  }

  #veya-hero-{{ section.id }} .veya-hero__button-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  #veya-hero-{{ section.id }} .veya-hero__benefits {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: var(--veya-hero-benefits-max-width-mobile);
    margin-inline: auto;
    margin-top: var(--veya-hero-benefits-top-spacing);
    margin-bottom: var(--veya-hero-benefits-bottom-spacing);
    gap: var(--veya-hero-benefits-gap);
  }

  @media screen and (min-width: 750px) {
    #veya-hero-{{ section.id }} .veya-hero__benefits {
      max-width: var(--veya-hero-benefits-max-width-desktop);
    }
  }

  #veya-hero-{{ section.id }} .veya-hero__benefit,
  #veya-hero-{{ section.id }} .veya-hero__benefit-link {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
    padding-inline: 12px;
  }

  #veya-hero-{{ section.id }} .veya-hero__benefit-link {
    color: inherit;
    text-decoration: none;
  }

  #veya-hero-{{ section.id }} .veya-hero__benefit-divider {
    flex-shrink: 0;
    align-self: center;
    width: var(--veya-hero-divider-thickness);
    height: var(--veya-hero-divider-height);
    background-color: rgb(var(--veya-hero-divider-color) / var(--veya-hero-divider-opacity));
  }

  #veya-hero-{{ section.id }} .veya-hero__benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    width: var(--veya-hero-icon-size-mobile);
    height: var(--veya-hero-icon-size-mobile);
    color: var(--veya-hero-icon-color);
  }

  @media screen and (min-width: 750px) {
    #veya-hero-{{ section.id }} .veya-hero__benefit-icon {
      width: var(--veya-hero-icon-size-desktop);
      height: var(--veya-hero-icon-size-desktop);
    }
  }

  #veya-hero-{{ section.id }} .veya-hero__benefit-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  #veya-hero-{{ section.id }} .veya-hero__benefit-text {
    display: block;
    max-width: 100%;
    font-family: var(--font-body--family);
    font-size: var(--veya-hero-benefit-text-size-mobile);
    line-height: 1.3;
    color: var(--veya-hero-heading-color);
    text-align: center;
  }

  @media screen and (min-width: 750px) {
    #veya-hero-{{ section.id }} .veya-hero__benefit-text {
      font-size: var(--veya-hero-benefit-text-size-desktop);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #veya-hero-{{ section.id }} .veya-hero__button {
      transition-duration: 0.01ms;
    }
  }
/* END_SECTION:veya-hero */

/* START_SECTION:veya-instagram-feed-custom (INDEX:48) */
/* `overflow-x: hidden` contains the grid's own viewport-width breakout
     below: `100vw` can be a hair wider than the true visible viewport
     whenever the page has a vertical scrollbar (browsers vary on whether
     the scrollbar's own width counts toward 100vw), which would otherwise
     leave a few stray pixels of horizontal overflow on the whole page.
     Clipping it here, locally, means the grid still visually reaches both
     screen edges — this only trims an invisible sliver nobody would ever
     see or scroll to. */
  .veya-ig {
    display: block;
    overflow-x: hidden;
    background-color: var(--veya-ig-bg);
    padding-top: var(--veya-ig-padding-top-mobile);
  }

  @media screen and (min-width: 990px) {
    .veya-ig {
      padding-top: var(--veya-ig-padding-top-desktop);
    }
  }

  .veya-ig__container {
    max-width: var(--veya-ig-max-width);
    margin-inline: auto;
    padding-inline: var(--veya-ig-padding-h);
  }

  .veya-ig__header {
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
  }

  .veya-ig__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
  }

  .veya-ig__avatar {
    flex-shrink: 0;
    width: var(--veya-ig-avatar-size);
    height: var(--veya-ig-avatar-size);
    border-radius: 50%;
    object-fit: cover;
  }

  .veya-ig__identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .veya-ig__name {
    color: var(--veya-ig-name-color);
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .veya-ig__handle {
    color: var(--veya-ig-handle-color);
    font-family: var(--font-body--family);
    font-size: 13px;
  }

  .veya-ig__follow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--veya-ig-follow-radius);
    background-color: var(--veya-ig-follow-bg);
    color: var(--veya-ig-follow-text);
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 200ms ease;
  }

  .veya-ig__follow:hover,
  .veya-ig__follow:focus-visible {
    background-color: var(--veya-ig-follow-hover-bg);
  }

  .veya-ig__follow-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
  }

  .veya-ig__follow-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Mobile: a horizontally-scrolling, 2-row grid laid out COLUMN by
     column (`grid-auto-flow: column`) instead of row by row — item 1
     stacks above item 2 in the first (half-viewport-wide) column, item 3
     above item 4 in the second column, and so on, so exactly 2 columns
     (4 images, a visual 2×2) ever fit in view at once. Snapping (below)
     then locks to every OTHER column boundary, so one swipe reveals a
     full new 2×2 page of 4 images rather than shifting by a single
     column. `grid-template-rows: repeat(2, 1fr)` is intentionally never
     overridden for desktop below — 2 equal rows is exactly what the
     desktop 6-column layout needs too, just filled row-major instead of
     column-major there. */
  .veya-ig__grid {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 50%;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .veya-ig__grid::-webkit-scrollbar {
    display: none;
  }

  /* Only the FIRST column of every 2-column/4-image page is a snap
     point (1st/2nd item of every group of 4: positions 1,2, 5,6, 9,10 —
     i.e. `4n+1`/`4n+2`) — the second column of each page has none, so a
     swipe can't stop halfway through a page. */
  .veya-ig__item:nth-child(4n+1),
  .veya-ig__item:nth-child(4n+2) {
    scroll-snap-align: start;
  }

  @media screen and (min-width: 990px) {
    .veya-ig__grid {
      grid-auto-flow: row;
      grid-auto-columns: auto;
      grid-template-columns: repeat(6, 1fr);
      overflow-x: visible;
      scroll-snap-type: none;
    }
  }

  .veya-ig__item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  .veya-ig__item-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  .veya-ig__item-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
  }

  /* Hover affordance: a black scrim + centered Instagram glyph fade in
     over the image, signaling the click destination — every item is
     already a plain `<a>` to Instagram (or the block's own per-image
     link override), so this is purely visual, no separate click target.
     Scoped to real hover devices only (mouse), same convention already
     used elsewhere in this theme (see snippets/veya-product-card.liquid)
     — a touch tap has no hover state to fade in first anyway, it just
     navigates directly. */
  .veya-ig__item-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background-color: rgb(0 0 0 / 0);
    opacity: 0;
    pointer-events: none;
    transition: background-color 250ms ease, opacity 250ms ease;
  }

  .veya-ig__item-overlay svg {
    width: 28px;
    height: 28px;
  }

  @media (hover: hover) and (pointer: fine) {
    .veya-ig__item-link:hover .veya-ig__item-image,
    .veya-ig__item-link:focus-visible .veya-ig__item-image {
      transform: scale(1.04);
    }

    .veya-ig__item-link:hover .veya-ig__item-overlay,
    .veya-ig__item-link:focus-visible .veya-ig__item-overlay {
      background-color: rgb(0 0 0 / 0.55);
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .veya-ig__item-image,
    .veya-ig__item-overlay {
      transition: none;
    }
  }
/* END_SECTION:veya-instagram-feed-custom */

/* START_SECTION:veya-instagram-feed (INDEX:49) */
.veya-instagram-feed {
    display: block;
    background-color: var(--veya-if-bg);
    padding-block: var(--veya-if-padding-top-mobile) var(--veya-if-padding-bottom-mobile);
  }

  @media screen and (min-width: 990px) {
    .veya-instagram-feed {
      padding-block: var(--veya-if-padding-top-desktop) var(--veya-if-padding-bottom-desktop);
    }
  }

  .veya-instagram-feed__inner {
    max-width: var(--veya-if-max-width);
    margin-inline: auto;
    padding-inline: 16px;
  }

  @media screen and (min-width: 750px) {
    .veya-instagram-feed__inner {
      padding-inline: 40px;
    }
  }

  .veya-instagram-feed__heading {
    margin: 0 0 32px;
    color: var(--veya-if-heading-color);
    font-family: var(--font-heading--family);
    text-align: center;
    text-transform: uppercase;
  }

  /* The embed's own internal layout/colors (columns, hover effect, header,
     etc.) come from the third-party widget itself and are configured on
     its own dashboard (e.g. elfsight.com) — this wrapper only controls the
     surrounding background and spacing, consistent with every other VEYA
     section. */
  .veya-instagram-feed__embed {
    width: 100%;
  }
/* END_SECTION:veya-instagram-feed */

/* START_SECTION:veya-legal (INDEX:50) */
.veya-legal {
    display: block;
    background-color: var(--veya-legal-bg);
    color: var(--veya-legal-text);
    padding-block: var(--veya-legal-padding-top-mobile) var(--veya-legal-padding-bottom-mobile);
    padding-inline: var(--veya-legal-padding-h-mobile);
  }

  @media screen and (min-width: 750px) {
    .veya-legal {
      padding-block: var(--veya-legal-padding-top-desktop) var(--veya-legal-padding-bottom-desktop);
      padding-inline: 0;
    }
  }

  .veya-legal__inner {
    max-width: var(--veya-legal-max-width);
    margin-inline: auto;
  }

  .veya-legal__header {
    text-align: center;
    padding-bottom: var(--veya-legal-spacing-below-heading);
  }

  .veya-legal__eyebrow {
    margin: 0 0 var(--veya-legal-spacing-eyebrow-heading);
    color: var(--veya-legal-eyebrow-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-legal-eyebrow-size-mobile);
    font-weight: var(--veya-legal-eyebrow-weight);
    letter-spacing: var(--veya-legal-eyebrow-letter-spacing);
    text-transform: uppercase;
  }

  @media screen and (min-width: 990px) {
    .veya-legal__eyebrow {
      font-size: var(--veya-legal-eyebrow-size-desktop);
    }
  }

  .veya-legal__heading {
    margin: 0;
    color: var(--veya-legal-heading-color);
    font-family: var(--font-heading--family);
    font-size: var(--veya-legal-heading-size-mobile);
    font-weight: var(--veya-legal-heading-weight);
    letter-spacing: var(--veya-legal-heading-letter-spacing);
    line-height: var(--veya-legal-heading-line-height);
  }

  @media screen and (min-width: 990px) {
    .veya-legal__heading {
      font-size: var(--veya-legal-heading-size-desktop);
    }
  }

  .veya-legal__body {
    display: block;
  }

  @media screen and (min-width: 750px) {
    .veya-legal__body {
      display: grid;
      /* Same technique as veya-faq: direction: rtl flips which physical
         side each grid item lands on — the nav (first in source) ends up
         on the right, content (second) on the left. */
      direction: rtl;
      grid-template-columns: var(--veya-legal-nav-width) 1fr;
      gap: var(--veya-legal-columns-gap);
      align-items: start;
    }

    .veya-legal__body--no-nav {
      grid-template-columns: 1fr;
    }
  }

  /* Also collapses to one column at runtime if the pasted content has no
     <h3> headings at all — see the script's `veya-legal--no-nav` class. */
  .veya-legal--no-nav .veya-legal__body {
    grid-template-columns: 1fr;
  }

  .veya-legal__nav {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .veya-legal__nav {
      display: flex;
      flex-direction: column;
      /* `flex-start`, not `flex-end`: this container is a *column* flex
         (cross axis = horizontal = the inline axis), and it inherits
         `direction: rtl` from .veya-legal__body — so cross-start (`flex-
         start`) is the inline-start of RTL, i.e. the right. `flex-end`
         would instead hug the *left*, leaving each link's distance from
         the right edge (and so from the content column) vary with its own
         text length instead of every title lining up flush right. */
      align-items: flex-start;
      gap: var(--veya-legal-nav-item-gap);
      position: sticky;
      top: var(--veya-legal-nav-sticky-offset);
      align-self: start;
    }

    .veya-legal__nav--static {
      position: static;
    }

    .veya-legal--no-nav .veya-legal__nav {
      display: none;
    }
  }

  .veya-legal__nav-link {
    color: var(--veya-legal-nav-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-legal-nav-font-size);
    font-weight: var(--veya-legal-nav-font-weight);
    text-align: right;
    text-decoration: none;
    transition: color 200ms ease;
  }

  .veya-legal__nav-link:hover,
  .veya-legal__nav-link:focus-visible {
    color: var(--veya-legal-nav-hover-color);
  }

  .veya-legal__nav-link.is-active {
    color: var(--veya-legal-nav-active-color);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .veya-legal__content {
    direction: rtl;
    text-align: right;
    color: var(--veya-legal-content-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-legal-content-size-mobile);
    line-height: var(--veya-legal-content-line-height);
  }

  @media screen and (min-width: 990px) {
    .veya-legal__content {
      font-size: var(--veya-legal-content-size-desktop);
    }
  }

  .veya-legal__content > :first-child,
  .veya-legal__content h3:first-child {
    margin-top: 0;
  }

  .veya-legal__content > :last-child {
    margin-bottom: 0;
  }

  .veya-legal__content p,
  .veya-legal__content ul,
  .veya-legal__content ol {
    margin: 0 0 var(--veya-legal-content-paragraph-spacing);
  }

  .veya-legal__content ul,
  .veya-legal__content ol {
    padding-inline-start: 1.4em;
    padding-inline-end: 0;
  }

  .veya-legal__content li + li {
    margin-top: 6px;
  }

  .veya-legal__content strong,
  .veya-legal__content b {
    font-weight: 600;
  }

  .veya-legal__content a {
    color: var(--veya-legal-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 200ms ease;
  }

  .veya-legal__content a:hover {
    color: var(--veya-legal-link-hover-color);
  }

  .veya-legal__content h3 {
    scroll-margin-top: var(--veya-legal-nav-sticky-offset);
    margin: var(--veya-legal-h3-spacing-above) 0 var(--veya-legal-h3-spacing-below);
    color: var(--veya-legal-h3-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-legal-h3-size-mobile);
    font-weight: var(--veya-legal-h3-weight);
    letter-spacing: var(--veya-legal-h3-letter-spacing);
    text-transform: uppercase;
  }

  @media screen and (min-width: 990px) {
    .veya-legal__content h3 {
      font-size: var(--veya-legal-h3-size-desktop);
    }
  }
/* END_SECTION:veya-legal */

/* START_SECTION:veya-loading-screen (INDEX:51) */
.veya-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: var(--veya-ls-bg);
    opacity: 1;
    transition: opacity var(--veya-ls-fade-out) ease;
  }

  .veya-loading-screen.is-hiding {
    opacity: 0;
    pointer-events: none;
  }

  .veya-loading-screen__image {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--veya-ls-fade-in) ease;
  }

  .veya-loading-screen.is-visible .veya-loading-screen__image {
    opacity: 1;
  }

  /* `<picture>` is inline by default — sized as a block filling the exact
     same box the old standalone `<img>` used to fill directly, so the `img`
     rule below still resolves its 100%/100% against an identically-sized
     box either way. Desktop vs. mobile is now the browser's own `<source
     media>` match (only one of the two ever actually downloads) instead of
     a CSS `display: none` swap that still fetched both. */
  .veya-loading-screen__image picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .veya-loading-screen__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (prefers-reduced-motion: reduce) {
    .veya-loading-screen,
    .veya-loading-screen__image {
      transition-duration: 0.01ms;
    }
  }
/* END_SECTION:veya-loading-screen */

/* START_SECTION:veya-main-cart (INDEX:52) */
.veya-cart {
    display: block;
    width: 100%;
    max-width: var(--veya-cart-max-width);
    margin-inline: auto;
    box-sizing: border-box;
    background-color: var(--veya-cart-bg);
    color: var(--veya-cart-text);
    padding-block: var(--veya-cart-padding-top-mobile) var(--veya-cart-padding-bottom-mobile);
    padding-inline: var(--veya-cart-padding-h-mobile);
  }

  @media screen and (min-width: 750px) {
    .veya-cart {
      padding-block: var(--veya-cart-padding-top-desktop) var(--veya-cart-padding-bottom-desktop);
      padding-inline: 0;
    }
  }

  .veya-cart--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* ===== Header ===== */
  .veya-cart__header {
    text-align: right;
    margin-bottom: var(--veya-cart-spacing-below-header);
  }

  .veya-cart__title .cart-title {
    text-align: right;
  }

  .veya-cart__title .cart-title h1 {
    font-family: var(--font-heading--family);
    font-size: var(--veya-cart-heading-size-mobile);
    font-weight: var(--veya-cart-heading-weight);
    letter-spacing: var(--veya-cart-heading-letter-spacing);
    color: var(--veya-cart-text);
  }

  @media screen and (min-width: 750px) {
    .veya-cart__title .cart-title h1 {
      font-size: var(--veya-cart-heading-size-desktop);
    }
  }

  /* ===== Desktop table headings ===== */
  .veya-cart__table-headings {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .veya-cart__table-headings {
      display: grid;
      direction: rtl;
      grid-template-columns: var(--veya-cart-col-product) var(--veya-cart-col-quantity) var(--veya-cart-col-total);
      gap: var(--veya-cart-columns-gap);
      padding-bottom: 12px;
      border-bottom: 1px solid var(--veya-cart-divider);
      font-size: var(--veya-cart-table-heading-size);
      letter-spacing: 0.08em;
      color: var(--veya-cart-muted);
      font-weight: 400;
    }

    .veya-cart__heading-product {
      text-align: right;
    }

    .veya-cart__heading-quantity {
      text-align: center;
    }

    .veya-cart__heading-total {
      text-align: left;
    }
  }

  /* ===== Product rows (reusing cart-products.liquid's shared markup) ===== */
  .veya-cart__items .cart-items {
    --cart-item-media-width-min: var(--veya-cart-image-width-mobile);
    --cart-item-media-width-max: var(--veya-cart-image-width-mobile);
  }

  @media screen and (min-width: 750px) {
    .veya-cart__items .cart-items {
      --cart-item-media-width-min: var(--veya-cart-image-width-desktop);
      --cart-item-media-width-max: var(--veya-cart-image-width-desktop);
    }
  }

  .veya-cart__items .cart-items__table-row {
    direction: rtl;
    grid-template-columns: clamp(2.5rem, 15cqi, var(--veya-cart-image-width-mobile)) minmax(0, 1fr) auto;
    column-gap: 16px;
    padding-block: var(--veya-cart-row-padding);
    margin-bottom: 0;
    border-bottom-color: var(--veya-cart-divider);
  }

  @media screen and (min-width: 750px) {
    .veya-cart__items .cart-items__table-row {
      grid-template-columns: var(--veya-cart-image-width-desktop) var(--veya-cart-col-quantity) var(--veya-cart-col-total);
      grid-template-areas: 'media details quantity price';
      column-gap: var(--veya-cart-columns-gap);
      align-items: center;
    }

    .veya-cart__items .cart-items__table-row .cart-items__details {
      grid-column: 2;
    }

    .veya-cart__items .cart-items__table-row .cart-items__quantity {
      justify-self: center;
      margin-top: 0;
    }

    .veya-cart__items .cart-items__table-row .cart-items__price {
      text-align: left;
    }
  }

  /* No border-bottom on the last row — the footer's own border-top
     (below) is the single divider between the product list and the
     footer, instead of two adjacent lines. */

  /* Image fills the row's full height (title through the quantity row)
     instead of a fixed aspect-ratio box — same technique as the cart
     drawer: the media cell stretches to the row's content height, and the
     image is pinned to the container's box via `inset: 0` rather than a
     percentage-height chain, which stays correct however tall the row
     ends up being (variant lines, wrapped title, etc.) on any screen size. */
  .veya-cart__items .cart-items__media {
    align-self: stretch;
  }

  .veya-cart__items .cart-items__media-container {
    aspect-ratio: unset;
    width: auto;
    height: 100%;
    max-width: 100%;
    min-height: 96px;
    background-color: var(--veya-cart-image-bg);
    border-radius: var(--veya-cart-image-radius);
  }

  .veya-cart__items .cart-items__media-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: var(--veya-cart-image-fit);
  }

  .veya-cart__items .cart-items__product-info {
    display: flex;
    flex-direction: column;
    gap: var(--veya-cart-product-info-gap);
  }

  .veya-cart__items .cart-items__title {
    font-size: var(--veya-cart-product-title-size-mobile);
    font-weight: var(--veya-cart-product-title-weight);
    letter-spacing: var(--veya-cart-product-title-letter-spacing);
    color: var(--veya-cart-text);
  }

  @media screen and (min-width: 750px) {
    .veya-cart__items .cart-items__title {
      font-size: var(--veya-cart-product-title-size-desktop);
    }
  }

  .veya-cart__items .cart-items__unit-price-wrapper {
    font-size: var(--veya-cart-unit-price-size);
    color: var(--veya-cart-muted);
  }

  .veya-cart__items .cart-items__variants,
  .veya-cart__items .cart-items__properties {
    font-size: var(--veya-cart-variant-size);
    color: var(--veya-cart-muted);
  }

  .veya-cart__items .quantity-selector {
    /* The shared component derives the number input's own max-width from
       this custom property (not the plain `width` below) — overriding
       only `width` without also updating this left the input sized for
       the *default* 124px box while the box itself was our narrower
       value, so the flex row overflowed and shrank unevenly (visible as
       lopsided padding on one side). */
    --quantity-selector-width: var(--veya-cart-quantity-width);
    width: var(--veya-cart-quantity-width);
    height: var(--veya-cart-quantity-height);
    border-radius: 0;
    border-color: var(--veya-cart-input-border);
  }

  .veya-cart__items .cart-items__remove {
    margin-top: var(--veya-cart-remove-spacing-above);
    background-color: transparent;
    color: var(--veya-cart-text);
    width: auto;
    height: auto;
    padding: 0;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 200ms ease;
  }

  .veya-cart__items .cart-items__remove:hover {
    color: var(--veya-cart-accent);
  }

  .veya-cart__items .cart-items__price {
    font-size: var(--veya-cart-unit-price-size);
    color: var(--veya-cart-text);
  }

  /* ===== Footer: note (right) + summary/checkout (left), RTL =====
     Reuses the same row-padding value as the gap above the divider, so
     the space before the footer matches the rhythm between product rows
     instead of an unrelated one-off number. */
  .veya-cart__footer {
    margin-top: 0;
    /* padding-top: var(--veya-cart-row-padding); */
    border-top: 1px solid var(--veya-cart-divider);
  }
  @media (max-width: 767px) {
    .veya-cart__footer  {
      border-top: none;
    }
  }

  @media screen and (min-width: 750px) {
    .veya-cart__note {
      display: grid;
      direction: rtl;
      grid-template-columns: 1fr 1fr;
      gap: 0 64px;
      align-items: start;
    }

    /* Unwraps .cart-totals AND .cart-actions so their children (order note,
       discount coupon, subtotal, total) become direct grid items alongside
       .cart__ctas. The discount coupon lives on the *opposite* side from
       the total/checkout (grid-column: 1, the "note" side — empty when the
       order note setting is off), but is pinned to the bottom row so it
       lines up with the checkout button on the other side. */
    .veya-cart__note .cart-totals,
    .veya-cart__note .cart-actions {
      display: contents;
    }

    .veya-cart__note .cart-note {
      grid-column: 1;
      grid-row: 1;
    }

    .veya-cart__note .cart-actions__divider {
      display: none;
    }

    .veya-cart__note .cart-discount {
      grid-column: 1;
      grid-row: 3;
      align-self: end;
    }

    .veya-cart__note .cart-totals__original-container,
    .veya-cart__note .cart-totals__container,
    .veya-cart__note .cart__ctas {
      grid-column: 2;
    }

    .veya-cart__note .cart-totals__original-container {
      grid-row: 1;
    }

    .veya-cart__note .cart-totals__container {
      grid-row: 2;
      margin-top: 20px;
    }

    .veya-cart__note .cart__ctas {
      grid-row: 3;
    }
  }

  .veya-cart__note .cart-note__label {
    font-size: 13px;
    font-weight: 400;
  }


  .veya-cart__note .cart-discount__summary {
    font-size: 13px;
    font-weight: 400;
    flex-direction: row-reverse;
  }

  .veya-cart__note .cart-note__instructions {
    min-height: var(--veya-cart-note-height);
    border-color: var(--veya-cart-input-border);
    background-color: transparent;
    border-radius: 0;
  }

  .cart-items__price {
    min-height: 0 !important;
  }

  .veya-cart__note .cart-totals__total-label,
  .veya-cart__note .cart-totals__total-value {
    color: var(--veya-cart-text);
    font-weight: 400;
  }

  /* Explicit direction + row order on the total line itself: it sits
     inside layers unwrapped via `display: contents` above, so rather than
     rely on inheritance reaching this deep, this pins the label
     definitively to the right and the value to its left. */
  .veya-cart__note .cart-totals__item {
    direction: rtl;
    flex-direction: row;
  }

  @media screen and (min-width: 750px) {
    .veya-cart__note .cart-totals__item {
      justify-content: flex-start;
      gap: 8px;
    }
  }

  .veya-cart__note .cart-totals__tax-note {
    direction: rtl;
    text-align: right;
    color: var(--veya-cart-muted);
    font-size: 12px;
  }

  .veya-cart__note .cart__checkout-button {
    margin-top: var(--veya-cart-checkout-margin-top);
    width: 100%;
    height: var(--veya-cart-checkout-height);
    background-color: var(--veya-cart-checkout-bg);
    color: var(--veya-cart-checkout-text);
    border-radius: var(--veya-cart-checkout-radius);
    font-size: var(--veya-cart-checkout-font-size-mobile);
    letter-spacing: var(--veya-cart-checkout-letter-spacing);
    text-transform: uppercase;
    transition: background-color 200ms ease, color 200ms ease;
  }

  @media screen and (min-width: 750px) {
    .veya-cart__note .cart__checkout-button {
      width: var(--veya-cart-checkout-width-desktop);
      margin-inline-start: auto;
      font-size: var(--veya-cart-checkout-font-size-desktop);
    }

    .veya-cart__note .cart__ctas {
      display: flex;
      justify-content: flex-end;
    }
  }

  .veya-cart__note .cart__checkout-button:hover {
    background-color: var(--veya-cart-checkout-hover-bg);
    color: var(--veya-cart-checkout-hover-text);
  }

  /* Express checkout buttons — out of scope for this pass; hidden visually
     only, nothing in the accelerated-checkout integration is disabled. */
  .veya-cart .additional-checkout-buttons {
    display: none;
  }

  /* ===== Empty cart ===== */
  .veya-cart--empty .veya-cart__header {
    margin-bottom: 24px;
  }

  .veya-cart--empty .cart-items__empty-button {
    background-color: var(--veya-cart-accent);
    color: #F6F1EB;
    border-radius: 0;
  }
/* END_SECTION:veya-main-cart */

/* START_SECTION:veya-main-collection (INDEX:53) */
.veya-mc {
      display: block;
      background-color: var(--veya-mc-bg);
      color: var(--veya-mc-heading-color);
      padding-block: var(--veya-mc-padding-top-mobile) var(--veya-mc-padding-bottom-mobile);
    }

    @media screen and (min-width: 990px) {
      .veya-mc {
        padding-block: var(--veya-mc-padding-top-desktop) var(--veya-mc-padding-bottom-desktop);
      }
    }

    .veya-mc__inner {
      max-width: var(--veya-mc-max-width);
      margin-inline: auto;
      padding-inline: var(--veya-mc-padding-h-mobile);
    }

    @media screen and (min-width: 990px) {
      .veya-mc__inner {
        padding-inline: var(--veya-mc-padding-h-desktop);
      }
    }

    .veya-mc__header {
      margin-bottom: var(--veya-mc-header-spacing-below);
      text-align: right;
    }

    .veya-mc__eyebrow {
      margin: 0 0 var(--veya-mc-eyebrow-spacing-below);
      font-family: var(--font-body--family);
      font-size: var(--veya-mc-eyebrow-size-mobile);
      color: var(--veya-mc-eyebrow-color);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      text-align: var(--veya-mc-heading-align-mobile);
    }

    @media screen and (min-width: 990px) {
      .veya-mc__eyebrow {
        font-size: var(--veya-mc-eyebrow-size-desktop);
        text-align: var(--veya-mc-heading-align-desktop);
      }
    }

    .veya-mc__title {
      margin: 0 0 var(--veya-mc-title-spacing-below);
      font-family: var(--font-heading--family);
      font-size: var(--veya-mc-title-size-mobile);
      font-weight: var(--veya-mc-title-weight);
      line-height: var(--veya-mc-title-line-height);
      color: var(--veya-mc-title-color);
      text-transform: none;
      text-align: var(--veya-mc-heading-align-mobile);
    }

    @media screen and (min-width: 990px) {
      .veya-mc__title {
        font-size: var(--veya-mc-title-size-desktop);
        text-align: var(--veya-mc-heading-align-desktop);
      }
    }

    .veya-mc__description {
      max-width: var(--veya-mc-desc-max-width);
      margin-inline-start: auto;
      font-family: var(--font-body--family);
      font-size: var(--veya-mc-desc-size-mobile);
      color: var(--veya-mc-desc-color);
      line-height: 1.6;
    }

    @media screen and (min-width: 990px) {
      .veya-mc__description {
        font-size: var(--veya-mc-desc-size-desktop);
      }
    }

    /* RTL layout: the sidebar is the first DOM child, so with `direction:
      rtl` it lands on the right and the product grid — second in DOM —
      lands on the left, matching the reference exactly without mirroring
      or transforming anything (images are never affected by `direction`,
      it only reorders/aligns layout and text). Applied to the sidebar at
      every width, not just desktop — the mobile filter drawer trigger and
      the drawer's own contents live inside it too, and without this they
      render in the browser's default LTR orientation on mobile (drawer
      trigger on the wrong side, drawer content mis-aligned). */
    .veya-mc__sidebar {
      direction: rtl;
    }

    .veya-mc__layout {
      display: block;
    }

    @media screen and (min-width: 990px) {
      .veya-mc__layout {
        display: grid;
        grid-template-columns: minmax(0, var(--veya-mc-sidebar-width)) minmax(0, var(--veya-mc-content-width));
        gap: var(--veya-mc-columns-gap);
        direction: rtl;
        align-items: start;
      }

      .veya-mc__sidebar,
      .veya-mc__content {
        min-width: 0;
      }
    }

    .veya-mc__sidebar--sticky {
      @media screen and (min-width: 990px) {
        position: sticky;
        top: var(--veya-mc-sticky-top);
        max-height: var(--veya-mc-sidebar-max-height);
        overflow-y: auto;
        scrollbar-width: thin;
      }
    }

    .veya-mc__content {
      min-width: 0;
    }

    .veya-mc__toolbar {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px;
    }

    .veya-mc__layout-switcher {
      display: none;
      align-items: center;
      gap: var(--veya-mc-layout-icon-gap);
    }

    @media screen and (min-width: 990px) {
      .veya-mc__layout-switcher {
        display: flex;
      }
    }

    .veya-mc__layout-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--veya-mc-layout-icon-size);
      height: var(--veya-mc-layout-icon-size);
      padding: 0;
      border: none;
      background: none;
      color: var(--veya-mc-layout-icon-inactive-color);
      opacity: 0.4;
      cursor: pointer;
      transition: opacity 150ms ease, color 150ms ease;
    }

    .veya-mc__layout-btn svg,
    .veya-mc__layout-btn img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .veya-mc__layout-btn:hover {
      opacity: 0.7;
    }

    .veya-mc__layout-btn[aria-pressed='true'] {
      color: var(--veya-mc-layout-icon-active-color);
      opacity: 1;
    }

    /* Empty state */
    .veya-mc__empty {
      padding-block: 80px;
      text-align: center;
    }

    .veya-mc__empty-text {
      margin: 0 0 16px;
      font-family: var(--font-body--family);
      color: var(--veya-mc-heading-color);
    }

    .veya-mc__empty-clear {
      display: inline-block;
      padding: 12px 28px;
      background-color: #4F1119;
      color: #F6F1EB;
      text-decoration: none;
      font-size: 13px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    /* Product grid */
    .veya-mc__grid {
      display: grid;
      grid-template-columns: repeat(var(--veya-mc-columns-mobile), minmax(0, 1fr));
      gap: var(--veya-mc-gap-v-mobile) var(--veya-mc-gap-h-mobile);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    @media screen and (min-width: 750px) and (max-width: 989px) {
      .veya-mc__grid {
        grid-template-columns: repeat(var(--veya-mc-columns-tablet), minmax(0, 1fr));
      }
    }

    @media screen and (min-width: 990px) {
      .veya-mc__grid {
        grid-template-columns: repeat(var(--veya-mc-columns-desktop), minmax(0, 1fr));
        gap: var(--veya-mc-gap-v-desktop) var(--veya-mc-gap-h-desktop);
      }
    }

    .veya-mc__card-wrap {
      display: block;
      min-width: 0;
    }

    .veya-mc__card {
      display: flex;
      flex-direction: column;
    }

    /* Load more */
    .veya-mc__load-more-wrap {
      display: flex;
      justify-content: center;
      margin-top: 48px;
    }

    .veya-mc__load-more {
      padding: 14px 40px;
      background-color: #4F1119;
      color: #F6F1EB;
      border: none;
      font-size: 13px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background-color 150ms ease;
    }

    .veya-mc__load-more:hover:not(:disabled) {
      background-color: #3A0D13;
    }

    .veya-mc__load-more:disabled {
      opacity: 0.6;
      cursor: default;
    }

    @media (prefers-reduced-motion: reduce) {
      .veya-mc__layout-btn,
      .veya-mc__load-more {
        transition-duration: 0.01ms;
      }
    }

    /* Mobile-only 2/1 column switcher, built in JS (#enhanceMobileLayoutSwitcher)
       and appended into `.facets-toggle` itself, so it shares that bar's
       own `justify-content: space-between` to land on the opposite side
       from the "סינון" trigger button for free — no positioning CSS of its
       own needed. Hidden at desktop widths defensively (its parent
       `.facets-toggle` is already display:none there via the rule above,
       which alone would be enough, but this avoids relying on that alone). */
    .veya-mc__mobile-layout-switcher {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    @media screen and (min-width: 990px) {
      .veya-mc__mobile-layout-switcher {
        display: none;
      }
    }

    .veya-mc__mobile-layout-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      padding: 0;
      border: none;
      background: none;
      color: #1F1F1F;
      opacity: 0.4;
      cursor: pointer;
      transition: opacity 150ms ease;
    }

    .veya-mc__mobile-layout-btn svg {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .veya-mc__mobile-layout-btn[aria-pressed='true'] {
      opacity: 1;
    }
/* END_SECTION:veya-main-collection */

/* START_SECTION:veya-main-product (INDEX:54) */
.veya-mp {
      display: block;
      background-color: var(--veya-mp-bg);
      color: var(--veya-mp-text-color);
      padding-block: var(--veya-mp-padding-top-mobile) var(--veya-mp-padding-bottom-mobile);
    }

    @media screen and (min-width: 990px) {
      .veya-mp {
        padding-block: var(--veya-mp-padding-top-desktop) var(--veya-mp-padding-bottom-desktop);
        padding-inline: var(--veya-mp-padding-h);
      }
    }

    .veya-mp__grid {
      display: block;
    }

    /* Belt-and-suspenders full-bleed on mobile: a plain block <div> already
      defaults to 100% of its container's width, but this makes that
      explicit and zeroes out any inherited margin/padding so the mobile
      hero (nested two levels deeper, in .veya-mp__hero) can never be
      narrower than the section itself. Scoped to below the desktop
      breakpoint only — applying `width: 100%` unscoped to this same
      element once it becomes a CSS grid item (see the 990px block below)
      is what caused the horizontal overflow, since it fights the grid's
      own `minmax(0, …)` track sizing instead of just being redundant. */
    @media screen and (max-width: 989px) {
      .veya-mp__gallery-col {
        width: 100%;
        margin: 0;
        padding: 0;
      }
    }

    @media screen and (min-width: 990px) {
      .veya-mp__grid {
        display: grid;
        grid-template-columns: minmax(0, var(--veya-mp-gallery-width)) minmax(0, var(--veya-mp-info-width));
        gap: var(--veya-mp-columns-gap);
        max-width: var(--veya-mp-max-width);
        margin-inline: auto;
        align-items: start;
      }

      /* Belt-and-suspenders against grid blowout: a track's own minmax(0, …)
        already stops it from exceeding its share, but pinning each item's
        min-width to 0 too means neither column's content (e.g. the image
        grid) can ever push its own box past the width the track gave it. */
      .veya-mp__gallery-col,
      .veya-mp__info {
        min-width: 0;
      }
    }

    /* Mobile-only hero: a real horizontally-scrolling track. Lives inside
      .veya-mp__gallery--mobile (see the markup), which already has its own
      display:none at 990px+, so this never needs its own breakpoint logic
      — desktop already has its own full stacked gallery instead (see
      .veya-mp__gallery--desktop below), scrolled via the page itself, so
      this would just be a second, redundant single-image viewer there. */
    .veya-mp__hero {
      position: relative;
      display: block;
      margin-bottom: var(--veya-mp-gallery-gap-v);
    }

    /* `direction: rtl`: photo 1 sits on the right and swiping/dragging
      right-to-left reveals later photos, matching Hebrew reading
      direction — the exact same convention snippets/veya-product-card.
      liquid's own image scroller already uses, and why the arrows below
      are positioned "prev" on the right / "next" on the left. */
    .veya-mp__hero-track {
      direction: rtl;
      display: flex;
      width: 100%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .veya-mp__hero-track::-webkit-scrollbar {
      display: none;
    }

    .veya-mp__hero-item {
      flex: 0 0 100%;
      scroll-snap-align: start;
      width: 100%;
      height: var(--veya-mp-single-image-height-mobile);
      overflow: hidden;
      background-color: var(--veya-mp-media-bg);
      border-radius: var(--veya-mp-media-radius);
      box-sizing: border-box;
    }

    /* Image items render as <button> (for the lightbox); video/model items
      render as <div> — same reset as .veya-mp__gallery-item below, for
      the same reason. */
    button.veya-mp__hero-item {
      position: relative;
      border: none;
      padding: var(--veya-mp-media-padding);
      font: inherit;
      text-align: inherit;
      cursor: pointer;
    }

    .veya-mp__hero-item img,
    .veya-mp__hero-item video,
    .veya-mp__hero-item model-viewer,
    .veya-mp__hero-item .veya-mp__placeholder {
      display: block;
      width: 100%;
      height: 100%;
      /* `--veya-mp-mobile-main-fit` ("Main image fit" under "Mobile
        gallery" in the schema), not the desktop `--veya-mp-media-fit` —
        this hero only ever renders on mobile now (see its own CSS rule
        above), and this is the setting that already existed for exactly
        this purpose back when .veya-mp__main was mobile's own separate
        (now-removed) main image. */
      object-fit: var(--veya-mp-mobile-main-fit);
    }

    /* Small and bordeaux ("delicate"), matching the same bordeaux-circle/
      cream-icon language as .veya-mp__gallery-zoom-icon above rather than
      sections/veya-featured-products.liquid's own cream-circle/bordeaux-
      icon carousel arrows — this is a single hero image, not a repeated
      card, so it reads better matching this file's own established icon
      style than borrowing the card-carousel's inverted one. Always
      enabled, never disabled: stepping loops (see `#stepHero` in the
      script below), so there's never a genuine boundary to stop at. RTL:
      "prev" (back toward photo 1) on the right, "next" on the left — same
      convention as every other RTL-aware arrow pair in this theme. */
    .veya-mp__hero-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 50%;
      background-color: #4F1119;
      color: #F6F1EB;
      cursor: pointer;
      box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
      transition: background-color 150ms ease;
    }

    .veya-mp__hero-arrow:hover,
    .veya-mp__hero-arrow:focus-visible {
      background-color: #3A0D13;
    }

    .veya-mp__hero-arrow--prev {
      right: 16px;
    }

    .veya-mp__hero-arrow--next {
      left: 16px;
    }

    .veya-mp__hero-arrow svg {
      width: 16px;
      height: 16px;
    }

    @media (prefers-reduced-motion: reduce) {
      .veya-mp__hero-arrow {
        transition: none;
      }
    }

    /* Desktop gallery: shown only on desktop, a simple single-column stack —
      one photo after another, full-width, scrolling down the page like the
      rest of the info column beside it. No grid, no per-image layout logic
      needed: every photo just gets the same fixed height (see
      .veya-mp__gallery-item below). */
    .veya-mp__gallery--desktop {
      display: none;
    }

    @media screen and (min-width: 990px) {
      .veya-mp__gallery--desktop {
        display: flex;
        flex-direction: column;
        gap: var(--veya-mp-gallery-gap-v);
      }
    }

    .veya-mp__gallery-item {
      /* Image items render as <button> (for the lightbox); video/model items
        render as <div>. These reset the button-specific defaults so both
        look identical. */
      display: block;
      position: relative;
      border: none;
      padding: var(--veya-mp-media-padding);
      font: inherit;
      text-align: inherit;
      cursor: pointer;
      background-color: var(--veya-mp-media-bg);
      border-radius: var(--veya-mp-media-radius);
      box-sizing: border-box;
      overflow: hidden;
      /* The same grid-blowout fix as .veya-mp__gallery-col/.veya-mp__info,
        one level deeper: without this, a grid item's default `min-width:
        auto` lets its content (the image) push past its 1fr track share. */
      min-width: 0;
      min-height: 0;
    }

    div.veya-mp__gallery-item {
      cursor: default;
    }

    /* Zoom affordance, shared by the desktop gallery AND the mobile main
      image (each renders one of these per image — see both loops above,
      each wrapped in its own image `<button on:click="/openLightbox">`
      that already opens the lightbox on click; this is purely a visible
      cue so a shopper knows it's zoomable without having to discover
      that by tapping). `pointer-events: none` so it never intercepts the
      click itself; the parent button already handles that for its entire
      area, including wherever this icon visually sits. Bottom-right
      corner (this store's RTL reading direction reads right-to-left, so
      the icon sitting at the image's trailing/near corner is where a
      shopper's eye naturally lands last) — physical `right`, not a
      logical property, matching every other icon/badge position already
      hardcoded this way in this file. */
    .veya-mp__gallery-zoom-icon {
      position: absolute;
      right: 16px;
      bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #4F1119;
      color: #F6F1EB;
      box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
      pointer-events: none;
      transition: transform 200ms ease;
    }

    .veya-mp__gallery-zoom-icon svg {
      width: 15px;
      height: 15px;
    }

    .veya-mp__gallery-item:hover .veya-mp__gallery-zoom-icon,
    .veya-mp__gallery-item:focus-visible .veya-mp__gallery-zoom-icon {
      transform: scale(1.1);
    }

    @media (prefers-reduced-motion: reduce) {
      .veya-mp__gallery-zoom-icon {
        transition: none;
      }
    }

    /* This element only ever becomes visible at 990px+ (see
      .veya-mp__gallery--desktop above), where every photo — regardless of
      how many the gallery has — gets the same fixed height here, cropped
      to fit via `object-fit: cover` (see .veya-mp__gallery-item img
      below), same idea as the mobile main image. */
    @media screen and (min-width: 990px) {
      .veya-mp__gallery-item {
        width: 100%;
        height: var(--veya-mp-gallery-image-height-desktop);
      }
    }

    .veya-mp__gallery-item img,
    .veya-mp__gallery-item video,
    .veya-mp__gallery-item model-viewer,
    .veya-mp__placeholder {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: var(--veya-mp-media-fit);
    }

    /* Full-screen image lightbox, opened by clicking a desktop gallery
      image. Built on native <dialog> (the same primitive the rest of the
      theme uses for its own modals/drawers), so ESC-to-close and focus
      handling are free. The fade/scale-in on open uses @starting-style,
      which only takes effect once `[open]` is actually applied — no JS
      animation timing needed. */
    .veya-mp__lightbox {
      margin: auto;
      border: none;
      padding: 0;
      max-width: 92vw;
      max-height: 92vh;
      background: transparent;
      opacity: 0;
      transform: scale(0.96);
      transition: opacity 250ms ease, transform 250ms ease, overlay 250ms allow-discrete, display 250ms allow-discrete;
    }

    .veya-mp__lightbox[open] {
      opacity: 1;
      transform: scale(1);
    }

    @starting-style {
      .veya-mp__lightbox[open] {
        opacity: 0;
        transform: scale(0.96);
      }
    }

    .veya-mp__lightbox::backdrop {
      background: rgb(0 0 0 / 0);
      transition: background-color 250ms ease, overlay 250ms allow-discrete, display 250ms allow-discrete;
    }

    .veya-mp__lightbox[open]::backdrop {
      background: rgb(0 0 0 / 0.85);
    }

    @starting-style {
      .veya-mp__lightbox[open]::backdrop {
        background: rgb(0 0 0 / 0);
      }
    }

    .veya-mp__lightbox-image {
      display: block;
      max-width: 92vw;
      max-height: 92vh;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    .veya-mp__lightbox-close {
      position: fixed;
      top: 20px;
      right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 50%;
      background-color: rgb(255 255 255 / 0.95);
      color: #1F1F1F;
      cursor: pointer;
    }

    .veya-mp__lightbox-close svg {
      width: 18px;
      height: 18px;
    }

    @media (prefers-reduced-motion: reduce) {
      .veya-mp__lightbox,
      .veya-mp__lightbox::backdrop {
        transition-duration: 0.01ms;
      }
    }

    /* Mobile gallery: shown only below desktop. */
    .veya-mp__gallery--mobile {
      display: block;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    @media screen and (min-width: 990px) {
      .veya-mp__gallery--mobile {
        display: none;
      }
    }

    /* Custom-uploaded zoom icon image (section.settings.custom_zoom_icon)
      keeps its own configurable size — the default built-in SVG icon is
      sized directly in .veya-mp__gallery-zoom-icon svg above instead,
      since that one's a fixed, deliberately small glyph, not something a
      merchant uploads at an arbitrary resolution. */
    .veya-mp__gallery-zoom-icon img {
      width: var(--veya-mp-zoom-icon-size);
      height: var(--veya-mp-zoom-icon-size);
      object-fit: contain;
    }

    .veya-mp__thumbs {
      direction: rtl;
      display: flex;
      gap: var(--veya-mp-thumb-gap);
      padding: var(--veya-mp-thumbs-padding);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .veya-mp__thumbs::-webkit-scrollbar {
      display: none;
    }

    .veya-mp__thumb {
      flex: 0 0 auto;
      width: var(--veya-mp-thumb-size);
      height: var(--veya-mp-thumb-size);
      border: 1px solid transparent;
      padding: 0;
      background: none;
      cursor: pointer;
      overflow: hidden;
    }

    .veya-mp__thumb.is-active {
      border-color: var(--veya-mp-thumb-active-color);
      border-width: var(--veya-mp-thumb-active-width);
    }

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

    .veya-mp__info {
      margin-top: 32px;
      padding-inline: 16px;
      letter-spacing: var(--veya-mp-letter-spacing);
    }

    @media screen and (min-width: 750px) {
      .veya-mp__info {
        padding-inline: 40px;
      }
    }

    @media screen and (min-width: 990px) {
      .veya-mp__info {
        margin-top: 0;
        padding-inline: 0;
      }

      .veya-mp__info--sticky {
        position: sticky;
        top: var(--veya-mp-sticky-top);
        align-self: start;
      }
    }

    .veya-mp__tag {
      margin: 0 0 var(--veya-mp-tag-spacing-below);
      color: var(--veya-mp-tag-color);
      font-family: var(--font-body--family);
      font-size: var(--veya-mp-tag-size-mobile);
      font-weight: var(--veya-mp-tag-weight);
      letter-spacing: var(--veya-mp-tag-letter-spacing);
      text-transform: var(--veya-mp-tag-transform);
      text-align: right;
    }

    @media screen and (min-width: 990px) {
      .veya-mp__tag {
        font-size: var(--veya-mp-tag-size-desktop);
      }
    }

    .veya-mp__title {
      margin: var(--veya-mp-title-spacing-above) 0 var(--veya-mp-title-spacing-below);
      color: var(--veya-mp-title-color);
      font-family: var(--font-heading--family);
      font-size: var(--veya-mp-title-size-mobile);
      font-weight: var(--veya-mp-title-weight);
      letter-spacing: var(--veya-mp-title-letter-spacing);
      line-height: var(--veya-mp-title-line-height);
      text-align: right;
    }

    @media screen and (min-width: 990px) {
      .veya-mp__title {
        font-size: var(--veya-mp-title-size-desktop);
      }
    }

    .veya-mp__price {
      margin: 0 0 var(--veya-mp-price-spacing-below);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      font-family: var(--font-body--family);
      font-weight: var(--veya-mp-price-weight);
      letter-spacing: var(--veya-mp-price-letter-spacing);
      text-align: right;
    }

    .veya-mp__price-current {
      color: var(--veya-mp-price-color);
      font-size: var(--veya-mp-price-size-mobile);
    }

    /* Diagonal strikethrough, not the browser's plain horizontal
      `text-decoration: line-through` — matches
      snippets/veya-product-card.liquid's own identical `::after`
      technique on its `.compare-at-price`/`.price-item--regular`, so a
      discounted price reads as the same deliberate design language on
      both the product card AND this full product page, not two
      different strikethrough styles. `position: relative` +
      `display: inline-block` turn this span itself into the
      pseudo-element's own sizing box, so `left: 0; right: 0` always
      spans exactly this rendered price's own width, however many
      digits it has. */
    .veya-mp__price-compare {
      position: relative;
      display: inline-block;
      color: var(--veya-mp-compare-color);
      font-size: var(--veya-mp-compare-size);
    }

    .veya-mp__price-compare::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 1.5px;
      background-color: var(--veya-mp-active-outline-color);
      transform: rotate(-8deg);
      pointer-events: none;
    }

    @media screen and (min-width: 990px) {
      .veya-mp__price-current {
        font-size: var(--veya-mp-price-size-desktop);
      }
    }

    .veya-mp__divider {
      margin: var(--veya-mp-divider-margin-above) 0 var(--veya-mp-divider-margin-below);
      border: none;
      border-top: var(--veya-mp-divider-thickness) solid var(--veya-mp-divider-color);
      opacity: var(--veya-mp-divider-opacity);
    }

    .veya-mp__color-block {
      margin: 0 0 20px;
    }

    .veya-mp__color-title {
      margin: 0 0 12px;
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      direction: rtl;
      gap: 8px;
      color: var(--veya-mp-text-color);
      font-family: var(--font-body--family);
      font-size: 13px;
      font-weight: 400;
      text-align: right;
    }

    /* Fixed "סוג החומר" row — same look as .veya-mp__color-title right
       below it, just with no swatches/selection of its own, so it reads as
       one visually continuous pair rather than two unrelated rows. */
    .veya-mp__color-title--static {
      margin: 0 0 4px;
    }

    .veya-mp__color-name {
      color: var(--veya-mp-text-color);
    }

    .veya-mp__set-items-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Without this, every `<ul data-linked-set-items="...">` this file's
      own JS marks `hidden` (see `#showLinkedSetItems`) would still
      render anyway — a class rule setting `display` and the browser's
      own built-in `[hidden] { display: none }` rule have the SAME
      specificity, and the class rule (author CSS) wins that tie over
      the built-in one regardless of source order, so `hidden` alone
      silently does nothing on an element this class already applies
      to. This is exactly why, before this rule existed, switching
      colors on a Set showed every color's own component list stacked
      together instead of only the active one's. */
    .veya-mp__set-items-list[hidden] {
      display: none;
    }

    .veya-mp__set-item-link {
      /* `direction: rtl` puts the first DOM child (the thumbnail) on the
        RIGHT and the title after it, to its left — same convention
        already used for `.veya-mp__color-title`/`.veya-mp__variant-option-pills`
        in this file. A <button>, not an <a> (see the Liquid comment
        above), so this also resets it to look identical to a plain
        inline row: no border/background of its own, full row width so
        the whole thing (not just the text/image) stays clickable. */
      direction: rtl;
      display: flex;
      align-items: center;
      width: 100%;
      gap: 10px;
      border: none;
      background: none;
      padding: 0;
      font: inherit;
      text-align: right;
      text-decoration: none;
      cursor: pointer;
    }

    .veya-mp__set-item-thumb {
      display: block;
      width: 48px;
      height: 48px;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid rgb(0 0 0 / 0.15);
      flex-shrink: 0;
    }

    .veya-mp__set-item-title {
      color: var(--veya-mp-text-color);
      font-family: var(--font-body--family);
      font-size: 13px;
    }

    .veya-mp__swatches {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: var(--veya-mp-swatch-gap);
    }

    .veya-mp__swatch {
      display: inline-flex;
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      border-radius: 50%;
    }

    .veya-mp__swatch .swatch {
      --swatch-width: var(--veya-mp-swatch-size-mobile);
      --swatch-height: var(--veya-mp-swatch-size-mobile);
    }

    @media screen and (min-width: 990px) {
      .veya-mp__swatch .swatch {
        --swatch-width: var(--veya-mp-swatch-size-desktop);
        --swatch-height: var(--veya-mp-swatch-size-desktop);
      }

      .veya-mp__swatch-fallback {
        width: var(--veya-mp-swatch-size-desktop);
        height: var(--veya-mp-swatch-size-desktop);
      }
    }

    .veya-mp__swatch-fallback {
      display: block;
      width: var(--veya-mp-swatch-size-mobile);
      height: var(--veya-mp-swatch-size-mobile);
      border-radius: 50%;
      border: 1px solid rgb(0 0 0 / 0.15);
      box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
    }

    /* Linked-color (gold/silver/rosegold) circles: sized independently of
       the shared swatch-size setting above, since a merchant who already
       configured that setting for the native color picker wouldn't see
       any change from a new schema default here — these need to look
       bigger immediately once the code is pasted in. */
    .veya-mp__swatch-fallback--linked {
      width: 34px;
      height: 34px;
    }

    @media screen and (min-width: 990px) {
      .veya-mp__swatch-fallback--linked {
        width: 40px;
        height: 40px;
      }
    }

    /* A tight "halo" ring instead of a plain offset outline: a background-
       colored gap right at the circle's edge, then the brand-colored ring
       just outside it — reads clearly as "this circle is selected" rather
       than a ring floating disconnected from the swatch it belongs to.
       `box-shadow` (not `outline`) so it follows the circle's own
       `border-radius: 50%` exactly, with no separate radius needed. */
    .veya-mp__swatch.is-active,
    .veya-mp__swatch:focus-visible {
      box-shadow: 0 0 0 2px var(--veya-mp-bg), 0 0 0 4px var(--veya-mp-active-outline-color);
      outline: none;
    }

    /* Out-of-stock linked-color swatches: kept visible (never hidden or
      removed — see `linked_color_picker`'s own Liquid comment) so a
      shopper can always see every color this product comes in, not just
      the ones currently in stock, but visually struck through and
      unselectable (the matching JS guard lives in `selectLinkedColor`).
      The diagonal line is a `linear-gradient` on the circle itself, not a
      separate `::after` element, so it's guaranteed to follow the exact
      same `border-radius: 50%` with no extra positioning to keep in
      sync. */
    .veya-mp__swatch[data-available='false'] {
      cursor: not-allowed;
    }

    .veya-mp__swatch[data-available='false'] .veya-mp__swatch-fallback--linked {
      opacity: 0.5;
      background-image: linear-gradient(
        to top left,
        transparent calc(50% - 1px),
        rgb(0 0 0 / 0.6) calc(50% - 1px),
        rgb(0 0 0 / 0.6) calc(50% + 1px),
        transparent calc(50% + 1px)
      );
    }

    /* Secondary option picker for a linked-color product's own extra
      option axis (e.g. chain length) — see `linked_color_picker`'s own
      Liquid comment. Rectangular pills, deliberately not circular
      swatches, so this reads as a distinct control from the color choice
      above it rather than a second, confusing set of color circles. */
    .veya-mp__variant-options {
      margin-top: 16px;
    }

    .veya-mp__variant-option-group + .veya-mp__variant-option-group {
      margin-top: 12px;
    }

    .veya-mp__variant-option-label {
      display: block;
      margin: 0 0 8px;
      color: var(--veya-mp-muted-color);
      font-family: var(--font-body--family);
      font-size: 13px;
      text-align: right;
    }

    .veya-mp__variant-option-pills {
      /* `direction: rtl` + `justify-content: flex-start`, not `flex-end`:
        in an RTL flex container the main axis is flipped, so "start" is
        the RIGHT edge and "end" is the left — `flex-end` here would
        actually push the whole row to the LEFT, the opposite of what's
        wanted. Same pattern `.veya-mp__color-title` already uses
        (`direction: rtl` + `justify-content: flex-start`) for the exact
        same right-aligned-in-RTL result. */
      direction: rtl;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 8px;
    }

    .veya-mp__variant-option-pill {
      min-width: 44px;
      padding: 8px 14px;
      border: 1px solid rgb(31 31 31 / 0.2);
      border-radius: 2px;
      background-color: transparent;
      color: var(--veya-mp-text-color);
      font-family: var(--font-body--family);
      font-size: 13px;
      cursor: pointer;
      transition: border-color 150ms ease, background-color 150ms ease;
    }

    .veya-mp__variant-option-pill.is-active,
    .veya-mp__variant-option-pill:focus-visible {
      border-color: var(--veya-mp-active-outline-color);
      /* `color-mix`, not a hardcoded RGB tint: stays correct regardless
        of what hex a merchant sets for active_outline_color, rather than
        assuming it's always the default bordeaux. */
      background-color: color-mix(in srgb, var(--veya-mp-active-outline-color) 8%, transparent);
      outline: none;
    }

    /* Sold-out value (no variant containing it is available at all — see
      the Liquid comment on `linked_value_available`): same diagonal-line
      treatment as the sold-out linked-color swatch above, adapted to a
      rectangle instead of a circle. */
    .veya-mp__variant-option-pill[data-available='false'] {
      position: relative;
      color: var(--veya-mp-muted-color);
      border-color: rgb(31 31 31 / 0.1);
      cursor: not-allowed;
    }

    .veya-mp__variant-option-pill[data-available='false']::after {
      content: '';
      position: absolute;
      inset-inline: 6px;
      top: 50%;
      height: 1px;
      background-color: rgb(31 31 31 / 0.3);
      transform: rotate(-8deg);
    }

    .veya-mp__add-to-cart-wrap {
      margin-top: var(--veya-mp-atc-margin-top);
    }

    .veya-mp__add-to-cart {
      position: relative;
      display: block;
      width: 100%;
      height: var(--veya-mp-atc-height);
      border: none;
      border-radius: var(--veya-mp-atc-radius);
      background-color: var(--veya-mp-atc-bg);
      color: var(--veya-mp-atc-text);
      font-family: var(--font-body--family);
      font-size: var(--veya-mp-atc-size-mobile);
      font-weight: var(--veya-mp-atc-weight);
      letter-spacing: var(--veya-mp-atc-letter-spacing);
      text-transform: uppercase;
      cursor: pointer;
      transition: background-color 200ms ease, color 200ms ease;
    }

    @media screen and (min-width: 990px) {
      .veya-mp__add-to-cart {
        font-size: var(--veya-mp-atc-size-desktop);
      }
    }

    .veya-mp__add-to-cart:hover:not(:disabled),
    .veya-mp__add-to-cart:focus-visible:not(:disabled) {
      background-color: var(--veya-mp-atc-hover-bg);
      color: var(--veya-mp-atc-hover-text);
    }

    .veya-mp__add-to-cart:disabled {
      background-color: var(--veya-mp-atc-disabled-bg);
      cursor: not-allowed;
    }

    @media (prefers-reduced-motion: reduce) {
      .veya-mp__add-to-cart {
        transition: none;
      }
    }

    .veya-mp__shipping-text {
      margin: var(--veya-mp-shipping-margin-top) 0 var(--veya-mp-shipping-margin-bottom);
      color: var(--veya-mp-shipping-color);
      font-family: var(--font-body--family);
      font-size: var(--veya-mp-shipping-size-mobile);
      text-align: center;
    }

    @media screen and (min-width: 990px) {
      .veya-mp__shipping-text {
        font-size: var(--veya-mp-shipping-size-desktop);
      }
    }

    /* Trust badges row: 3 fixed icon+caption columns with short (not
      full-height) dividers between them, matching the reference layout —
      the dividers are real elements sized to their own height rather than
      a border stretched to the row's height, so they stay centered and
      elegant regardless of how long each caption wraps. */
    .veya-mp__trust-badges {
      margin-top: var(--veya-mp-trust-margin-top);
      margin-bottom: var(--veya-mp-trust-margin-bottom);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }

    .veya-mp__trust-item {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--veya-mp-trust-gap-icon-text);
      text-align: center;
    }

    .veya-mp__trust-icon {
      display: inline-flex;
      width: var(--veya-mp-trust-icon-size);
      height: var(--veya-mp-trust-icon-size);
      color: var(--veya-mp-trust-icon-color);
    }

    .veya-mp__trust-icon svg,
    .veya-mp__trust-icon img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .veya-mp__trust-text {
      font-family: var(--font-body--family);
      font-size: var(--veya-mp-trust-text-size-mobile);
      font-weight: var(--veya-mp-trust-text-weight);
      color: var(--veya-mp-trust-text-color);
      line-height: 1.3;
    }

    @media screen and (min-width: 990px) {
      .veya-mp__trust-text {
        font-size: var(--veya-mp-trust-text-size-desktop);
      }
    }

    .veya-mp__trust-divider {
      align-self: center;
      flex-shrink: 0;
      width: 1px;
      height: var(--veya-mp-trust-divider-height);
      background-color: var(--veya-mp-trust-divider-color);
    }

    /* Mobile-only sticky add-to-cart bar. Hidden off-screen by default via
      `translateY` + `visibility` (rather than `display`), so it can slide
      in/out smoothly and — just as important — stays out of the tab order
      and off-screen-but-focusable trap while hidden. Desktop drops it
      entirely; the button reuses the theme's own `.add-to-cart-button`
      class so it gets the exact same checkmark-burst "added" animation as
      the main button, with no extra JS/CSS of its own for that part. */
    .veya-mp__sticky-bar {
      position: fixed;
      inset-inline: 0;
      bottom: 0;
      z-index: var(--layer-sticky, 40);
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      direction: rtl;
      background-color: var(--veya-mp-bg);
      border-top: 1px solid rgba(31, 31, 31, 0.12);
      box-shadow: 0 -6px 16px rgba(31, 31, 31, 0.08);
      transform: translateY(100%);
      visibility: hidden;
      transition: transform 250ms ease, visibility 250ms;
    }

    .veya-mp__sticky-bar.is-visible {
      transform: translateY(0);
      visibility: visible;
    }

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

    .veya-mp__sticky-bar-media {
      flex-shrink: 0;
      display: block;
      width: 52px;
      height: 52px;
      overflow: hidden;
      background-color: var(--veya-mp-media-bg);
    }

    .veya-mp__sticky-bar-media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .veya-mp__sticky-bar-info {
      flex: 1;
      min-width: 0;
    }

    .veya-mp__sticky-bar-title {
      margin: 0;
      font-family: var(--font-body--family);
      font-size: 12px;
      font-weight: 400;
      color: var(--veya-mp-text-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: right;
    }

    .veya-mp__sticky-bar-price {
      margin: 2px 0 0;
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-body--family);
      font-size: 13px;
      font-weight: 500;
      color: var(--veya-mp-text-color);
    }

    /* Same diagonal `::after` strikethrough as `.veya-mp__price-compare`
      above (and snippets/veya-product-card.liquid's own identical
      technique) — not plain `text-decoration: line-through` — so the
      sticky mobile bar's own compact price row reads consistently with
      the rest of the page. */
    .veya-mp__sticky-bar-price-compare {
      position: relative;
      display: inline-block;
      font-size: 11px;
      font-weight: 400;
      color: var(--veya-mp-muted-color);
    }

    .veya-mp__sticky-bar-price-compare::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 1.5px;
      background-color: var(--veya-mp-active-outline-color);
      transform: rotate(-8deg);
      pointer-events: none;
    }

    /* Same fixed 3-circle color picker as the main swatches (reuses
      .veya-mp__swatch/.veya-mp__swatch-fallback--linked entirely — see
      the add_to_cart block's Liquid), just sized down to fit the sticky
      bar's own compact height. */
    .veya-mp__sticky-bar-swatches {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .veya-mp__sticky-bar-swatch .veya-mp__swatch-fallback--linked {
      width: 26px;
      height: 26px;
    }

    /* Compact "current value → tap to open a short list" control for the
      active color's own secondary option (see the add_to_cart block's own
      Liquid comment on `data-sticky-size-wrap`) — same visual language as
      the page's own `.veya-mp__variant-option-pill` (border/color/font),
      just small enough to sit in this already-crowded row alongside the
      image/title/price/swatches/button. No `position: relative` here on
      purpose — see `.veya-mp__sticky-bar-size-popover`'s own comment for
      why it anchors to the full-width bar instead of this narrow chip. */
    .veya-mp__sticky-bar-size-wrap {
      flex-shrink: 0;
    }

    .veya-mp__sticky-bar-size {
      display: flex;
      align-items: center;
      gap: 4px;
      height: 30px;
      padding-inline: 10px;
      border: 1px solid rgb(31 31 31 / 0.2);
      border-radius: 2px;
      background-color: transparent;
      color: var(--veya-mp-text-color);
      font-family: var(--font-body--family);
      font-size: 11px;
      white-space: nowrap;
      cursor: pointer;
    }

    .veya-mp__sticky-bar-size svg {
      flex-shrink: 0;
      width: 12px;
      height: 12px;
    }

    .veya-mp__sticky-bar-size[aria-expanded='true'] {
      border-color: var(--veya-mp-active-outline-color);
    }

    .veya-mp__sticky-bar-size[aria-expanded='true'] svg {
      transform: rotate(180deg);
    }

    /* Opens UPWARD, not down: the sticky bar itself is pinned to the
      bottom of the viewport, so a downward popover would render mostly
      (or entirely) off-screen. Anchored to `.veya-mp__sticky-bar` itself
      (the nearest POSITIONED ancestor once the popover's own — narrow —
      wrap gives up `position: relative`, see that rule's own comment),
      not to the chip: the chip can sit anywhere along this crowded RTL
      row, so a popover anchored to IT (e.g. `right: 0` on the chip's own
      wrap) could still overflow past the screen's left edge once a color
      had enough size values to need real width (reported: a 4th value
      pushed the panel off-screen). `left`/`right: 16px` instead insets
      it evenly within the full-width bar — matching the bar's own 16px
      row padding — so it can never exceed the viewport regardless of
      where the chip is or how many values there are; `max-width` +
      `margin-inline: auto` on top of that centers a short list (few
      values) as a compact panel instead of stretching it edge-to-edge
      for no reason. Reuses the page's own
      `.veya-mp__variant-options`/`-group`/`-pills`/`-pill` styling
      entirely for its contents (a live clone — see
      `#updateStickySizeControl`) — only the handful of overrides below
      that are specific to fitting inside this small floating panel. */
    .veya-mp__sticky-bar-size-popover {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 16px;
      right: 16px;
      max-width: 340px;
      margin-inline: auto;
      z-index: 1;
      max-height: 45vh;
      overflow-y: auto;
      padding: 12px;
      border: 1px solid rgb(31 31 31 / 0.15);
      border-radius: 2px;
      background-color: var(--veya-mp-bg);
      box-shadow: 0 -6px 16px rgba(31, 31, 31, 0.12);
    }

    .veya-mp__sticky-bar-size-popover .veya-mp__variant-options {
      margin-top: 0;
    }

    .veya-mp__sticky-bar-size-popover .veya-mp__variant-option-pills {
      justify-content: center;
    }

    .veya-mp__sticky-bar-size-popover .veya-mp__variant-option-label {
      text-align: center;
    }

    .veya-mp__sticky-bar-button {
      flex-shrink: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-inline: 20px;
      height: 44px;
      border: none;
      border-radius: 0;
      background-color: var(--veya-mp-atc-bg, #4F1119);
      color: var(--veya-mp-atc-text, #F6F1EB);
      font-family: var(--font-body--family);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color 200ms ease, color 200ms ease;
    }

    .veya-mp__sticky-bar-button:hover:not(:disabled),
    .veya-mp__sticky-bar-button:focus-visible:not(:disabled) {
      background-color: var(--veya-mp-atc-hover-bg, #3A0D13);
      color: var(--veya-mp-atc-hover-text, #F6F1EB);
    }

    .veya-mp__sticky-bar-button:disabled {
      background-color: var(--veya-mp-atc-disabled-bg, #B9AFA4);
      cursor: not-allowed;
    }

    @media (prefers-reduced-motion: reduce) {
      .veya-mp__sticky-bar {
        transition-duration: 0.01ms;
      }

      .veya-mp__sticky-bar-button {
        transition: none;
      }
    }

    /* FAQ / Q&A rows. The reference design is LTR (heading on the left, "+"
      icon on the right); `direction: rtl` on the summary flips that for
      Hebrew — the heading (first in DOM) lands on the right, the icon
      (second in DOM) lands on the left, matching the rest of this section's
      RTL rows. Reuses the theme's own `accordion-custom` element and
      `icon-plus` animation (both already global) rather than new JS. */
    .veya-mp__faq-row:first-of-type .veya-mp__faq-details {
      border-top: var(--veya-mp-faq-divider-width) solid var(--veya-mp-faq-divider-color);
    }

    .veya-mp__faq-details {
      border-bottom: var(--veya-mp-faq-divider-width) solid var(--veya-mp-faq-divider-color);
    }

    .veya-mp__faq-summary {
      direction: rtl;
      display: flex;
      align-items: center;
      gap: 12px;
      list-style: none;
      cursor: pointer;
      padding-block: var(--veya-mp-faq-row-padding);
    }

    .veya-mp__faq-summary::-webkit-details-marker {
      display: none;
    }

    .veya-mp__faq-question {
      flex: 1;
      text-align: right;
      font-family: var(--font-body--family);
      font-size: var(--veya-mp-faq-question-size-mobile);
      font-weight: var(--veya-mp-faq-question-weight);
      color: var(--veya-mp-faq-question-color);
      letter-spacing: var(--veya-mp-faq-letter-spacing);
      text-transform: var(--veya-mp-faq-text-transform);
    }

    @media screen and (min-width: 990px) {
      .veya-mp__faq-question {
        font-size: var(--veya-mp-faq-question-size-desktop);
      }
    }

    .veya-mp__faq-icon {
      flex-shrink: 0;
      width: var(--veya-mp-faq-icon-size);
      height: var(--veya-mp-faq-icon-size);
      color: var(--veya-mp-faq-icon-color);
    }

    .veya-mp__faq-answer {
      color: var(--veya-mp-faq-answer-color);
      font-family: var(--font-body--family);
      font-size: var(--veya-mp-faq-answer-size);
      line-height: 1.6;
      text-align: right;
      padding-bottom: var(--veya-mp-faq-row-padding);
    }

    .veya-mp__faq-answer > :first-child {
      margin-top: 0;
    }

    .veya-mp__faq-answer > :last-child {
      margin-bottom: 0;
    }
/* END_SECTION:veya-main-product */

/* START_SECTION:veya-mini-about (INDEX:55) */
.veya-mini-about {
    display: block;
    background-color: var(--veya-ma-bg);
    padding-block: var(--veya-ma-padding-top-mobile) var(--veya-ma-padding-bottom-mobile);
    padding-inline: var(--veya-ma-padding-h);
  }

  @media screen and (min-width: 990px) {
    .veya-mini-about {
      padding-block: var(--veya-ma-padding-top-desktop) var(--veya-ma-padding-bottom-desktop);
    }
  }

  .veya-mini-about__inner {
    max-width: var(--veya-ma-max-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    direction: rtl;
  }

  .veya-mini-about__logo {
    display: block;
    width: var(--veya-ma-logo-width);
    height: auto;
    margin-bottom: var(--veya-ma-logo-spacing-bottom);
  }

  .veya-mini-about__name {
    margin: 0 0 var(--veya-ma-name-spacing-bottom);
    color: var(--veya-ma-name-color);
    font-family: var(--font-heading--family);
    font-size: var(--veya-ma-name-size-mobile);
    letter-spacing: var(--veya-ma-name-letter-spacing);
  }

  @media screen and (min-width: 990px) {
    .veya-mini-about__name {
      font-size: var(--veya-ma-name-size-desktop);
    }
  }

  .veya-mini-about__description {
    margin: 0 0 var(--veya-ma-desc-spacing-bottom);
    max-width: var(--veya-ma-desc-max-width);
    color: var(--veya-ma-desc-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-ma-desc-size-mobile);
    line-height: var(--veya-ma-desc-line-height);
  }

  @media screen and (min-width: 990px) {
    .veya-mini-about__description {
      font-size: var(--veya-ma-desc-size-desktop);
    }
  }

  .veya-mini-about__description p {
    margin: 0;
  }

  .veya-mini-about__description p + p {
    margin-top: 12px;
  }

  .veya-mini-about__tagline {
    margin: 0;
    color: var(--veya-ma-tagline-color);
    font-family: var(--font-body--family);
    font-size: var(--veya-ma-tagline-size-mobile);
    font-weight: var(--veya-ma-tagline-weight);
    letter-spacing: var(--veya-ma-tagline-letter-spacing);
  }

  @media screen and (min-width: 990px) {
    .veya-mini-about__tagline {
      font-size: var(--veya-ma-tagline-size-desktop);
    }
  }
/* END_SECTION:veya-mini-about */

/* START_SECTION:veya-search-results (INDEX:59) */
.veya-sr {
      display: block;
      background-color: var(--veya-sr-bg);
      color: var(--veya-sr-heading-color);
      padding-block: var(--veya-sr-padding-top-mobile) var(--veya-sr-padding-bottom-mobile);
    }

    @media screen and (min-width: 990px) {
      .veya-sr {
        padding-block: var(--veya-sr-padding-top-desktop) var(--veya-sr-padding-bottom-desktop);
      }
    }

    .veya-sr__inner {
      max-width: var(--veya-sr-max-width);
      margin-inline: auto;
      padding-inline: var(--veya-sr-padding-h-mobile);
    }

    @media screen and (min-width: 990px) {
      .veya-sr__inner {
        padding-inline: var(--veya-sr-padding-h-desktop);
      }
    }

    /* Search bar — functional native search form (routes.search_url, ?q=,
      hidden type=product), restyled to match this section's own brand
      variables. The reset link's visibility is pure CSS (`:has()`), no JS
      needed for it to work. */
    .veya-sr__search-form {
      display: flex;
      justify-content: center;
      margin-bottom: var(--veya-sr-search-spacing-below);
    }

    @media screen and (min-width: 990px) {
      .veya-sr__search-form {
        justify-content: var(--veya-sr-heading-align-desktop);
      }
    }

    .veya-sr__search-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      max-width: var(--veya-sr-search-max-width);
    }

    .veya-sr__search-input {
      width: 100%;
      height: var(--veya-sr-search-height);
      background-color: var(--veya-sr-search-bg);
      color: var(--veya-sr-search-text);
      border: 1px solid var(--veya-sr-search-border-color);
      border-radius: 0;
      box-shadow: none;
      direction: rtl;
      text-align: right;
      font-family: var(--font-body--family);
      font-size: var(--veya-sr-search-font-size);
      padding-inline-start: 44px;
      padding-inline-end: 44px;
      transition: border-color 200ms ease;
      appearance: none;
    }

    /* Floors the merchant-set size at 16px on touch devices only — below
       that, iOS Safari zooms the viewport in on focus and never zooms back
       out. See snippets/veya-search-panel.liquid's own identical guard for
       the full reasoning; desktop keeps whatever "גודל טקסט בשדה החיפוש"
       is set to, exactly as before. */
    @media (pointer: coarse) {
      .veya-sr__search-input {
        font-size: max(16px, var(--veya-sr-search-font-size));
      }
    }

    .veya-sr__search-input::-webkit-search-cancel-button {
      display: none;
    }

    .veya-sr__search-input::placeholder {
      color: var(--veya-sr-search-placeholder-color);
    }

    .veya-sr__search-input:focus {
      outline: none;
      border-color: var(--veya-sr-search-focus-border-color);
    }

    .veya-sr__search-input:focus-visible {
      outline: 2px solid var(--veya-sr-search-focus-border-color);
      outline-offset: 2px;
    }

    .veya-sr__search-icon,
    .veya-sr__search-reset {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      color: var(--veya-sr-search-icon-color);
    }

    .veya-sr__search-icon {
      inset-inline-start: 16px;
      pointer-events: none;
    }

    .veya-sr__search-icon svg,
    .veya-sr__search-reset svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .veya-sr__search-reset {
      inset-inline-end: 16px;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 150ms ease, visibility 150ms ease;
    }

    .veya-sr__search-input-wrap:has(.veya-sr__search-input:not(:placeholder-shown)) .veya-sr__search-reset {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .veya-sr__search-reset:hover {
      color: var(--veya-sr-search-focus-border-color);
    }

    .veya-sr__results-count {
      margin-inline-start: 8px;
      font-family: var(--font-body--family);
      font-size: 0.55em;
      font-weight: 400;
      color: var(--veya-sr-desc-color);
      vertical-align: middle;
    }

    .veya-sr__header {
      direction: rtl;
      margin-bottom: var(--veya-sr-header-spacing-below);
      text-align: right;
    }

    .veya-sr__eyebrow {
      margin: 0 0 var(--veya-sr-eyebrow-spacing-below);
      font-family: var(--font-body--family);
      font-size: var(--veya-sr-eyebrow-size-mobile);
      color: var(--veya-sr-eyebrow-color);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      text-align: var(--veya-sr-heading-align-mobile);
    }

    @media screen and (min-width: 990px) {
      .veya-sr__eyebrow {
        font-size: var(--veya-sr-eyebrow-size-desktop);
        text-align: var(--veya-sr-heading-align-desktop);
      }
    }

    .veya-sr__title {
      margin: 0 0 var(--veya-sr-title-spacing-below);
      font-family: var(--font-heading--family);
      font-size: var(--veya-sr-title-size-mobile);
      font-weight: var(--veya-sr-title-weight);
      line-height: var(--veya-sr-title-line-height);
      color: var(--veya-sr-title-color);
      text-transform: none;
      text-align: var(--veya-sr-heading-align-mobile);
    }

    @media screen and (min-width: 990px) {
      .veya-sr__title {
        font-size: var(--veya-sr-title-size-desktop);
        text-align: var(--veya-sr-heading-align-desktop);
      }
    }

    /* RTL layout: the sidebar is the first DOM child, so with `direction:
      rtl` it lands on the right and the product grid — second in DOM —
      lands on the left, matching the reference exactly without mirroring
      or transforming anything (images are never affected by `direction`,
      it only reorders/aligns layout and text). Applied to the sidebar at
      every width, not just desktop — the mobile filter drawer trigger and
      the drawer's own contents live inside it too, and without this they
      render in the browser's default LTR orientation on mobile (drawer
      trigger on the wrong side, drawer content mis-aligned). */
    .veya-sr__sidebar {
      direction: rtl;
    }

    .veya-sr__layout {
      display: block;
    }

    @media screen and (min-width: 990px) {
      .veya-sr__layout {
        display: grid;
        grid-template-columns: minmax(0, var(--veya-sr-sidebar-width)) minmax(0, var(--veya-sr-content-width));
        gap: var(--veya-sr-columns-gap);
        direction: rtl;
        align-items: start;
      }

      /* No products at all (e.g. an empty search): the filters sidebar
        isn't rendered, so the single remaining child (.veya-sr__content)
        should take the full row instead of sitting in the narrow sidebar
        track that CSS grid auto-placement would otherwise give it. */
      .veya-sr__layout--no-sidebar {
        grid-template-columns: 1fr;
      }

      .veya-sr__sidebar,
      .veya-sr__content {
        min-width: 0;
      }
    }

    .veya-sr__sidebar--sticky {
      @media screen and (min-width: 990px) {
        position: sticky;
        top: var(--veya-sr-sticky-top);
        max-height: var(--veya-sr-sidebar-max-height);
        overflow-y: auto;
        scrollbar-width: thin;
      }
    }

    .veya-sr__content {
      min-width: 0;
    }

    .veya-sr__toolbar {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px;
    }

    .veya-sr__layout-switcher {
      display: none;
      align-items: center;
      gap: var(--veya-sr-layout-icon-gap);
    }

    @media screen and (min-width: 990px) {
      .veya-sr__layout-switcher {
        display: flex;
      }
    }

    .veya-sr__layout-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--veya-sr-layout-icon-size);
      height: var(--veya-sr-layout-icon-size);
      padding: 0;
      border: none;
      background: none;
      color: var(--veya-sr-layout-icon-inactive-color);
      opacity: 0.4;
      cursor: pointer;
      transition: opacity 150ms ease, color 150ms ease;
    }

    .veya-sr__layout-btn svg,
    .veya-sr__layout-btn img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .veya-sr__layout-btn:hover {
      opacity: 0.7;
    }

    .veya-sr__layout-btn[aria-pressed='true'] {
      color: var(--veya-sr-layout-icon-active-color);
      opacity: 1;
    }

    /* Empty state */
    .veya-sr__empty {
      padding-block: 80px;
      text-align: center;
    }

    .veya-sr__empty-text {
      margin: 0 0 16px;
      font-family: var(--font-body--family);
      color: var(--veya-sr-heading-color);
    }

    .veya-sr__empty-clear {
      display: inline-block;
      padding: 12px 28px;
      background-color: #4F1119;
      color: #F6F1EB;
      text-decoration: none;
      font-size: 13px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    /* Product grid */
    .veya-sr__grid {
      display: grid;
      grid-template-columns: repeat(var(--veya-sr-columns-mobile), minmax(0, 1fr));
      gap: var(--veya-sr-gap-v-mobile) var(--veya-sr-gap-h-mobile);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    @media screen and (min-width: 750px) and (max-width: 989px) {
      .veya-sr__grid {
        grid-template-columns: repeat(var(--veya-sr-columns-tablet), minmax(0, 1fr));
      }
    }

    @media screen and (min-width: 990px) {
      .veya-sr__grid {
        grid-template-columns: repeat(var(--veya-sr-columns-desktop), minmax(0, 1fr));
        gap: var(--veya-sr-gap-v-desktop) var(--veya-sr-gap-h-desktop);
      }
    }

    .veya-sr__card-wrap {
      display: block;
      min-width: 0;
    }

    .veya-sr__card {
      display: flex;
      flex-direction: column;
    }

    /* Load more */
    .veya-sr__load-more-wrap {
      display: flex;
      justify-content: center;
      margin-top: 48px;
    }

    .veya-sr__load-more {
      padding: 14px 40px;
      background-color: #4F1119;
      color: #F6F1EB;
      border: none;
      font-size: 13px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background-color 150ms ease;
    }

    .veya-sr__load-more:hover:not(:disabled) {
      background-color: #3A0D13;
    }

    .veya-sr__load-more:disabled {
      opacity: 0.6;
      cursor: default;
    }

    @media (prefers-reduced-motion: reduce) {
      .veya-sr__layout-btn,
      .veya-sr__load-more {
        transition-duration: 0.01ms;
      }
    }

    /* Mobile-only 2/1 column switcher, built in JS (#enhanceMobileLayoutSwitcher)
       and appended into `.facets-toggle` itself, so it shares that bar's
       own `justify-content: space-between` to land on the opposite side
       from the "סינון" trigger button for free — no positioning CSS of its
       own needed. Hidden at desktop widths defensively (its parent
       `.facets-toggle` is already display:none there via the rule above,
       which alone would be enough, but this avoids relying on that alone). */
    .veya-sr__mobile-layout-switcher {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    @media screen and (min-width: 990px) {
      .veya-sr__mobile-layout-switcher {
        display: none;
      }
    }

    .veya-sr__mobile-layout-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      padding: 0;
      border: none;
      background: none;
      color: #1F1F1F;
      opacity: 0.4;
      cursor: pointer;
      transition: opacity 150ms ease;
    }

    .veya-sr__mobile-layout-btn svg {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .veya-sr__mobile-layout-btn[aria-pressed='true'] {
      opacity: 1;
    }
/* END_SECTION:veya-search-results */

/* START_SECTION:veya-whatsapp-button (INDEX:60) */
#veya-whatsapp-{{ section.id }} {
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
    text-decoration: none;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }

  @media screen and (min-width: 750px) {
    #veya-whatsapp-{{ section.id }} {
      bottom: var(--veya-wa-bottom-desktop) !important;
      right: var(--veya-wa-right-desktop) !important;
      width: var(--veya-wa-size-desktop) !important;
      height: var(--veya-wa-size-desktop) !important;
    }
  }

  #veya-whatsapp-{{ section.id }}:hover,
  #veya-whatsapp-{{ section.id }}:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.3);
  }

  #veya-whatsapp-{{ section.id }} svg {
    display: block;
    flex-shrink: 0;
  }

  @media screen and (min-width: 750px) {
    #veya-whatsapp-{{ section.id }} svg {
      width: calc(var(--veya-wa-size-desktop) * 0.6) !important;
      height: calc(var(--veya-wa-size-desktop) * 0.6) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #veya-whatsapp-{{ section.id }} {
      transition: none;
    }
  }
/* END_SECTION:veya-whatsapp-button */

/* CSS from block stylesheet tags */
/* START_BLOCK:_announcement (INDEX:62) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

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

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

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

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

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

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

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

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

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

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

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

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:63) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

    &:hover {
      color: var(--color-foreground-subdued);
    }
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:64) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:65) */
.blog-post-card__content-text a {
    color: currentcolor;
  }

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:66) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    position: relative;
    display: block;
    width: var(--width);
    margin-inline: auto;
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:67) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:68) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:70) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

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

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:71) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:72) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:73) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(#header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    @media screen and (min-width: 750px) {
      height: 100%;
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:74) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

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

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

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:77) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:79) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

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

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:83) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;

      flex-shrink: 0;
      height: auto;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    gap: var(--gap);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:84) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:86) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:89) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:90) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

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

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

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

    display: flex;
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .overflow-menu {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    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.background-matches-parent,
    .overflow-menu.background-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

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

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

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

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

    visibility: visible;
  }

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

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

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

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

    display: contents;
    white-space: normal;

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

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

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

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

  .header-menu {
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), 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;
  }

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:95) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

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

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

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

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:99) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_product-details (INDEX:104) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

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

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

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

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

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:109) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

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

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:110) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:111) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

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

  .social-icons__icon {
    display: none;
  }

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

    .social-icons__icon {
      display: block;
    }

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

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:comparison-slider (INDEX:119) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    color: var(--handle-color, var(--color-foreground));
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:120) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:121) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

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

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

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

/* START_BLOCK:disclosures (INDEX:123) */
.disclosures__container {
      width: 100%;
    }

    .disclosures__container:has(> [shopify-block-empty]) {
      display: none;
    }

    .disclosures {
      --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1));

      display: block;
      color: var(--color, inherit);
      width: 100%;
      container-type: inline-size;
    }

    .disclosures.accordion--dividers accordion-custom:first-child .details {
      border-block-start: var(--style-border-width) solid var(--color-border);
    }

    .disclosures.accordion--dividers accordion-custom:last-child .details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .disclosures__heading {
      margin-block-end: var(--margin-lg);
    }

    .disclosures .details__header {
      padding-block: var(--padding-xl);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .disclosures .details__header > .svg-wrapper {
      margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2);
    }

    .disclosures details[open] .details__header {
      padding-block-end: var(--padding-xs);
    }

    .disclosures__summary-content {
      flex: 1 1 0%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--gap-xs);
      min-width: 0;
    }

    .disclosures__summary-item {
      display: flex;
      flex-direction: column;
      row-gap: var(--gap-xs);
      min-width: 0;
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      width: max-content;
      max-width: none;
      visibility: hidden;
      white-space: nowrap;
      pointer-events: none;
      contain: layout style;
    }

    .disclosures__summary-item-row {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      min-width: 0;
      vertical-align: middle;
    }

    .disclosures__summary-item-title {
      font-weight: var(--font-weight-normal, normal);
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-title {
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .disclosures .details__icon {
      display: inline-block;
      flex-shrink: 0;
      width: auto;
      max-inline-size: 100%;
      height: var(--disclosures-icon-size);
      margin: 0;
      object-fit: contain;
      vertical-align: middle;
    }

    .disclosures__summary-item-row:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title {
      grid-column: 2;
    }

    .disclosures details[open] > summary .disclosures__summary-item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__summary-item-extra {
      display: block;
    }

    .disclosures__separator {
      display: none;
      flex-shrink: 0;
      padding-inline: var(--padding-xs);
      line-height: 1;
    }

    @container (min-width: 701px) {
      .disclosures:where([data-summary-layout='inline']) .details__header {
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper {
        margin-block-start: 0;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item {
        display: block;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row {
        display: inline-flex;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) {
        display: inline-grid;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra {
        display: inline-flex;
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__separator {
        display: inline-block;
      }
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row {
      display: inline-flex;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) {
      display: inline-grid;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-extra {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__separator {
      display: inline-block;
    }

    .disclosures details[open] .disclosures__summary-item-extra {
      display: none;
    }

    .disclosures__item {
      display: flex;
    }

    .disclosures__item + .disclosures__item {
      margin-block-start: var(--spacing-lg);
    }

    .disclosures__item-left {
      flex: 0 1 auto;
      min-width: 0;
      cursor: default;
    }

    .disclosures__item-right {
      flex: 1;
      cursor: pointer;
    }

    .disclosures__item-header {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      margin-block-end: var(--spacing-xs);
      padding-block-end: var(--padding-xs);
    }

    .disclosures__item-title {
      margin: 0;
    }

    .disclosures__item-header:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__item-header:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__item-header:has(> .details__icon) > .disclosures__item-title {
      grid-column: 2;
    }

    .disclosures details[open] .disclosures__item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__item-content {
      max-width: var(--normal-content-width);
      padding-block-end: var(--padding-2xl);
    }

    .disclosures details[open] .details-content {
      padding-block-end: 0;
    }
/* END_BLOCK:disclosures */

/* START_BLOCK:email-signup (INDEX:124) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

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

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

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

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

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

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

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

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

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .email-signup__button.button-unstyled:hover {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:featured-collection (INDEX:125) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:126) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      /* margin: var(--facets-margin); */
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    @media screen and (min-width: 750px) {
      padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-subdued);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }



  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

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

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--theme-drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

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

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

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

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--theme-drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets--drawer .theme-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    /* margin-inline-start: auto; */
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

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

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --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
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);

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

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-copyright (INDEX:128) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:129) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:131) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:132) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

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

  .image-block {
    display: flex;

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

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

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

/* START_BLOCK:logo (INDEX:134) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

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

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:135) */
.menu {
    width: 100%;
  }

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

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

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

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

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

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

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

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

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

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

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

/* START_BLOCK:page-content (INDEX:136) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:137) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:138) */
.payment-icons {
    width: 100%;
  }

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

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:139) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-custom-property (INDEX:142) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:144) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:145) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:148) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:150) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

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

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

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

  .social-icons__icon {
    display: none;
  }

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

    .social-icons__icon {
      display: block;
    }

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

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:151) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:152) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:155) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:156) */
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:accordion-styles (INDEX:157) */
.accordion {
    flex: 1;
    width: 100%;
  }

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

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

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

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

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

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

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:accordion-styles */

/* START_SNIPPET:background-media (INDEX:159) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:160) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:161) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:buy-buttons-styles (INDEX:166) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .product__pickup-availabilities {
    width: 100%;
    color: var(--color, var(--color-foreground));
  }

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

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

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

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

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

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

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

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

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

  .pickup-location__button:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

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

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

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

  .volume-pricing__table {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  more-payment-options-link a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:167) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:168) */
.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(--cart-bubble-text, var(--cart-bubble-text-fallback));
    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(--cart-bubble-background, var(--cart-bubble-background-fallback));
    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-disclosure-tooltip (INDEX:169) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer (INDEX:170) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .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__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

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

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

  .theme-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 rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

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

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

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

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

  /* ==========================================================================
     VEYA cart drawer — RTL layout + brand restyle.
     Everything below is scoped under #cart-drawer so none of it touches the
     /cart page (cart-products.liquid and cart-summary.liquid are shared with
     it) or any other drawer (nav, filters, quick add all reuse theme-drawer).
     ========================================================================== */

  /* Brand colors, local to this drawer only — does not touch the shared
     settings.drawer_background_color / drawer_text_color used by other
     drawers. */
  #cart-drawer .theme-drawer__dialog {
    --color-background: #F6F1EB;
    --color-background-rgb: 246 241 235;
    --color-foreground: #1F1F1F;
    --color-foreground-rgb: 31 31 31;
    --color-border: rgba(31, 31, 31, 0.14);
    --button-background-color: #4F1119;
    --button-color: #F6F1EB;
  }

  /* RTL: the theme's cart CSS is built almost entirely on logical
     properties (margin-inline-*, text-align: end, direction-aware grid
     column order), so this one declaration correctly mirrors text
     alignment, the header title/close-button split, and the product image
     side — without rewriting any of that shared markup. Only physical
     left/right positioning below needs manual mirroring. */
  #cart-drawer {
    direction: rtl;
  }

  /* Width: narrow and tall on desktop, near-full-width on mobile — the
     dialog's own width already reads from this custom property. */
  #cart-drawer .theme-drawer__dialog {
    --theme-drawer-width: 92vw;
  }

  @media screen and (min-width: 480px) {
    #cart-drawer .theme-drawer__dialog {
      --theme-drawer-width: 440px;
    }
  }

  /* The drawer stays docked to its native right edge (the shared dialog's
     default) — only the text/content inside is mirrored for RTL via
     `direction: rtl` above.
     The shared squeeze-coordination script (theme-drawer.liquid) still adds
     this class at ≥990px regardless of modal state — cancel its margin so
     the cart drawer never pushes the page, only the native backdrop (from
     force-modal, above) dims it. */
  body:has(#cart-drawer[open]) .page-wrapper--drawer-open {
    margin-right: 0;
  }

  /* The native <dialog> backdrop already appears/disappears automatically
     with showModal()/close() — force-modal above is what makes that
     happen on every screen size. The only real gap is the shared
     --backdrop-opacity (0.15, barely a tint) that every drawer in the
     theme uses by default; this scopes a properly dark overlay to just
     this dialog's own ::backdrop, without touching that shared variable
     (nav drawer, filters, quick add, search all still use their own
     subtle default). */
  #cart-drawer .theme-drawer__dialog::backdrop {
    background: rgba(31, 31, 31, 0.55);
    transition: background-color 300ms ease;
  }

  @starting-style {
    #cart-drawer .theme-drawer__dialog::backdrop {
      background: rgba(31, 31, 31, 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #cart-drawer .theme-drawer__dialog::backdrop {
      transition-duration: 0.01ms;
    }
  }

  /* Header */
  #cart-drawer .theme-drawer__header {
    border-bottom: 1px solid var(--color-border);
  }

  #cart-drawer .theme-drawer__title {
    font-weight: 400;
    letter-spacing: 0.06em;
  }

  /* Divider between line items. */
  #cart-drawer .cart-drawer__items .cart-items__table-row {
    border-bottom-color: var(--color-border);
  }

  /* Quantity selector: thinner, squared-off frame. */
  #cart-drawer .quantity-selector {
    border-radius: 0;
    border-color: var(--color-border);
  }

  /* Remove: plain underlined text link instead of an icon button. */
  #cart-drawer .cart-items__remove--text {
    width: auto;
    height: auto;
    padding: 0;
    font-size: var(--font-size--sm);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 200ms ease;
  }

  #cart-drawer .cart-items__remove--text:hover {
    color: #4F1119;
  }

  /* Footer / checkout */
  #cart-drawer .cart__checkout-button {
    border-radius: 0;
  }

  /* Express checkout buttons (PayPal, Shop Pay, etc.) — not part of this
     pass; hidden visually only, so nothing in the accelerated-checkout
     integration itself is disabled or broken. */
  #cart-drawer .additional-checkout-buttons {
    display: none;
  }

  /* Item-count badge next to the title — removed per request; the
     screen-reader-only cart count right after it is untouched. */
  #cart-drawer .theme-drawer__badge {
    display: none;
  }

  /* Close (×) button — the shared theme-drawer-header markup gives it a
     circular background/border/shadow (snippets/theme-drawer-styles.liquid)
     — removed per request, leaving just the icon. On top of that,
     assets/theme-drawer.js's own `#focusInitialElement()` explicitly
     moves real keyboard focus to this exact button every time ANY
     drawer opens (a deliberate, shared a11y behavior — screen-reader/
     keyboard users need to know where focus landed) — a programmatic
     `.focus()` call is treated as "not a mouse click" by every major
     browser's focus-visible heuristic, so `:focus-visible` activates
     immediately on open too, which is what actually painted the frame
     the merchant kept seeing "when opening" even after the circle
     itself was removed. `outline: none` here drops that ring
     unconditionally (not just on `:focus-visible`) — focus itself still
     moves there correctly, only the visible ring is gone. Scoped to
     #cart-drawer only, so every other drawer keeps its own default
     behavior unless separately overridden (see the identical pattern in
     sections/veya-header.liquid for the mobile menu drawer, and
     snippets/veya-collection-filters.liquid for the filters drawer). */
  #cart-drawer .theme-drawer__close-button {
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
  }

  /* Breathing room between the header divider and the first product. */
  #cart-drawer .cart-drawer__items {
    padding-top: 24px;
  }

  /* Larger, more legible product thumbnail. */
  #cart-drawer .cart-items__table-row,
  #cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: 92px minmax(0, 1fr) auto;
  }

  /* Image fills the row's full height (title through the quantity row)
     instead of sitting as a small fixed square. `align-items: start` on
     the row (above) normally keeps every cell at its natural content
     height — this opts the media cell back into stretching to match
     whatever height the text content builds up. The image itself is
     positioned absolutely against the container's own box (which is
     already `position: relative` in the shared cart-items CSS) rather
     than chained through `height: 100%`, since a percentage height only
     resolves correctly when every ancestor in between has a definite
     height — one broken link in that chain (e.g. a shorter row on
     mobile with no variant/unit-price lines) collapses it to 0 and the
     image silently disappears. Anchoring to the container's box via
     `inset: 0` has no such dependency. */
  #cart-drawer .cart-items__media {
    align-self: stretch;
  }

  #cart-drawer .cart-items__media-container {
    aspect-ratio: unset;
    width: auto;
    height: 100%;
    max-width: 100%;
    min-height: 64px;
  }

  #cart-drawer .cart-items__media-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
  }

  /* Free shipping progress bar */
  #cart-drawer .cart-drawer__shipping-bar {
    padding: 16px var(--cart-drawer-padding);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    margin-left: 28px !important;
  }

  #cart-drawer .cart-drawer__shipping-message {
    margin: 0 0 10px;
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
  }

  #cart-drawer .cart-drawer__shipping-track {
    position: relative;
    direction: rtl;
    height: 4px;
    border-radius: 999px;
    background-color: rgb(var(--color-foreground-rgb) / 0.12);
    overflow: visible;
  }

  #cart-drawer .cart-drawer__shipping-fill {
    height: 100%;
    border-radius: 999px;
    background-color: #4F1119;
    transition: width 400ms ease;
  }

  #cart-drawer .cart-drawer__shipping-marker {
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-background);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.25);
    color: #1F1F1F;
  }

  #cart-drawer .cart-drawer__shipping-marker svg {
    width: 12px;
    height: 12px;
  }

  #cart-drawer .cart-drawer__shipping-marker.is-reached {
    background-color: #4F1119;
    border-color: #4F1119;
    color: #F6F1EB;
  }

  #cart-drawer .cart-drawer__shipping-label {
    margin: 8px 0 0;
    text-align: left;
    font-size: var(--font-size--xs);
    color: rgb(var(--color-foreground-rgb) / 0.7);
    margin-left: -28px !important;
  }

  @media (prefers-reduced-motion: reduce) {
    #cart-drawer .cart-drawer__shipping-fill {
      transition-duration: 0.01ms;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #cart-drawer .theme-drawer__dialog {
      transition-duration: 0.01ms;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:171) */
.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),
    html:active-view-transition-type(fill-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:172) */
.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-items__wrapper {
    display: flex;
    flex-direction: column;
  }

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

  .cart-items__wrapper--drawer-empty {
    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-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  /* Cart drawer: separate grid area for variants */
  .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(3, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      '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__price {
      min-width: auto;
      width: max-content;
    }
  }

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

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

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

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

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

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

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

  .cart-items--dividers .cart-items__table-row {
    /* border-top: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); */
    margin-bottom: var(--cart-items-gap);
  }

  @media (max-width: 767px) {
    .cart-items--dividers .cart-items__table-row
    {
        border-top: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    }
}

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

  .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-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

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

  /* 5px shorter than the global control height, in the cart only (merchant
     request). The selector's own height is whatever its −/+ buttons are, and
     those are sized from `--minimum-touch-target` (44px,
     snippets/theme-styles-variables.liquid) — a variable shared with every
     other tappable control in the theme, so it's overridden here by
     selector rather than by redefining the variable. The number input
     between them has no height of its own and follows the flex row down. */
  .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus) {
    height: calc(var(--minimum-touch-target) - 5px);
  }

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

  /* Thumbnail runs 10px taller than its aspect ratio alone would make it
     (merchant request). The media grid column is exactly
     `clamp(2.5rem, 15cqi, 7.5rem)` wide — see `.cart-items__table-row`'s own
     `grid-template-columns` — so the height `aspect-ratio` was producing is
     that width divided by `--ratio` (set inline per row from the block's
     square/portrait/adapt setting). Restating that and adding the 10px makes
     height the explicitly-set property instead of a derived one, which is
     why `aspect-ratio` has to step aside here rather than fight it.
     `15cqi` resolves against the `cart-items` container declared at the top
     of this stylesheet, the same one the column width resolves against, so
     the two always agree. */
  .cart-items__media-container {
    display: flex;
    aspect-ratio: auto;
    height: calc(clamp(2.5rem, 15cqi, 7.5rem) / var(--ratio, 1) + 10px);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  /* Fills the now-taller box instead of keeping its own ratio and leaving a
     10px gap under it — `object-fit: cover` takes care of the difference by
     cropping, so the image simply adapts. */
  .cart-items__media-image {
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

    /* Cart drawer: separate area for variants */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        '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:cart-summary (INDEX:173) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

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

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

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

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

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

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

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

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

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart-terms-consent {
    display: flex;
    align-items: flex-start;
    direction: rtl;
    width: 100%;
    gap: 8px;
    margin-block-start: var(--margin-3xs);
    cursor: pointer;
  }

  .cart-terms-consent__checkbox {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: #4F1119;
    cursor: pointer;
  }

  .cart-terms-consent__text {
    text-align: right;
    font-size: var(--font-size--sm);
    line-height: 1.5;
    color: var(--color-foreground);
  }

  .cart-terms-consent__link {
    color: #4F1119;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .cart-terms-consent__link:hover {
    text-decoration-color: transparent;
  }

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

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

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

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

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

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:chat-drawer (INDEX:174) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:collection-card (INDEX:176) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
    height: 100%;
    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--gap);
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }

    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:179) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:180) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:181) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:182) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:183) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:188) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:190) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

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

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:191) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

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

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:192) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

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

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

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

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

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

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

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

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

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

  .header-actions__cart-icon .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-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;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

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

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

/* START_SNIPPET:header-drawer (INDEX:193) */
.header__icon--menu {
    position: initial;
  }

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

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

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

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

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

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

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

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

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

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

  .menu-drawer__navigation {
    padding: 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    outline-color: var(--color-foreground-subdued);
  }

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

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

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

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

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

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

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

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

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

  .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);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:199) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:202) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: #1f1f1f;
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:203) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-foreground);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

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

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

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

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:204) */
.media-block {
    overflow: hidden;
    position: relative;

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

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:209) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:210) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
    isolation: isolate;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      )::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      ) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

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

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:211) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:215) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    40% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &:hover {
      opacity: 1;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:216) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    color: var(--color-foreground-muted);
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:218) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card (INDEX:219) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:220) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

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

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

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

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:221) */
.product-information {
    gap: var(--gap) 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:222) */
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;
    }
  }

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

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

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

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

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

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

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:223) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .dialog--preloading {
    opacity: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:224) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

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

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

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

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

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

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

/* START_SNIPPET:quantity-selector (INDEX:225) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

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

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal-styles (INDEX:226) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

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

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

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

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:228) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    background-color: var(--quick-add-background, var(--color-background));
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--quick-add-background, var(--color-background));
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:231) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .resource-card {
    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    /* Only meaningful inside .resource-card__media-scroller (touch) — a
       no-op everywhere else, so this is safe on the single-image case too. */
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* Touch baseline: a real side-by-side scroller, not the absolute-overlay
     crossfade — swiping is the only way to reveal the second photo without
     a `:hover` to key off. Unwrapped back to the original overlay on
     pointer devices below. */
  .resource-card__media-scroller {
    display: flex;
    direction: rtl;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Explicit axis hint for the touch gesture recognizer. Needed here
       specifically (not just relying on overflow-x: auto) because inside
       the predictive search dropdown this scroller sits directly under
       `.predictive-search-results__inner`, an ancestor that scrolls
       vertically (`overflow-y: auto`) only a couple of levels up — on real
       touch browsers a drag starting over a nested horizontal scroller can
       get claimed by that nearer vertical-scrolling ancestor instead
       unless this element explicitly declares it owns horizontal panning,
       which silently blocked the swipe (while desktop's separate hover
       crossfade, which never touches scrolling at all, kept working fine).
       On every other page using this same card there's no such nested
       vertical scroller nearby, which is why the swipe already worked
       there without this. */
    touch-action: pan-x;
    /* Drives the progress bars below via CSS scroll-timeline alone — no JS
       involved. Same technique as sections/veya-featured-products.liquid's
       .veya-fp__media-scroller. */
    scroll-timeline-name: --resource-card-gallery-scroll;
    scroll-timeline-axis: x;
  }

  .resource-card__media-scroller::-webkit-scrollbar {
    display: none;
  }

  .resource-card__image--secondary {
    border-radius: var(--resource-card-corner-radius);
  }

  /* .resource-card__media is the bars' positioning ancestor — they must stay
     outside .resource-card__media-scroller (a sibling, not a descendant) so
     they never slide away with the images on swipe. `timeline-scope`
     re-exposes the scroller's named scroll-timeline (declared above) to
     these sibling bars, which a named scroll-timeline otherwise only shares
     with the declaring element's own descendants.
     `position: relative` is required here (without it the bars fell through
     to `.resource-card`'s positioning context instead, landing near the
     price). `z-index: 2` lifts this element above `.resource-card__link` —
     the separate, full-card invisible overlay anchor (`z-index: 1`) used for
     the card's own whole-card click target — which otherwise sits on top and
     silently swallows every touch/pointer event over the image before they
     ever reach the scroller beneath it, which is why swiping did nothing.
     `.resource-card__media` is now a real link to the same URL, so tapping
     the image (without dragging) still navigates correctly on its own. */
  .resource-card__media {
    display: block;
    position: relative;
    z-index: 2;
    timeline-scope: --resource-card-gallery-scroll;
  }

  .resource-card__gallery-bars {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    z-index: 1;
    display: flex;
    gap: 4px;
  }

  .resource-card__gallery-bar {
    flex: 1 1 0;
    height: 2px;
    background-color: var(--color-foreground);
    opacity: 0.35;
    transition: opacity 300ms ease;
  }

  .resource-card__gallery-bar--first {
    opacity: 1;
  }

  /* Mobile: scroll-driven, tied to .resource-card__media-scroller's scroll
     progress via the shared timeline. Inert on desktop, where the scroller
     is `display: contents` (no scrollport to time), so it never fights the
     :hover rule below. */
  @keyframes resource-card-gallery-bar-first {
    0%, 35% {
      opacity: 1;
    }
    65%, 100% {
      opacity: 0.35;
    }
  }

  @keyframes resource-card-gallery-bar-second {
    0%, 35% {
      opacity: 0.35;
    }
    65%, 100% {
      opacity: 1;
    }
  }

  /* Swapped relative to the keyframe names (--first plays the "-second"
     keyframe and vice versa): the scroller's scroll-timeline progresses in
     the opposite direction from .veya-fp__media-scroller's despite using an
     identical setup, so the bars need the opposite pairing here to actually
     match which photo is on screen. */
  .resource-card__gallery-bar--first {
    animation-name: resource-card-gallery-bar-second;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --resource-card-gallery-scroll;
  }

  .resource-card__gallery-bar--second {
    animation-name: resource-card-gallery-bar-first;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --resource-card-gallery-scroll;
  }

  @media (hover: hover) and (pointer: fine) {
    /* Drops the scroller's own box so both images become direct
       positioning children of .resource-card__media again — restores the
       exact original desktop markup/behavior, untouched. */
    .resource-card__media-scroller {
      display: contents;
    }

    .resource-card {
      --resource-card-secondary-image-opacity: 0;
      --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));
    }

    .resource-card__image {
      opacity: var(--resource-card-primary-image-opacity);
    }

    .resource-card__image--secondary {
      position: absolute;
      top: 0;
      flex: none;
      opacity: var(--resource-card-secondary-image-opacity);
    }

    /* Bars stay visible on desktop too, swapping on hover exactly like
       sections/veya-featured-products.liquid's .veya-fp__gallery-bar — the
       scroll-timeline animation above is inert here anyway (the scroller is
       `display: contents`, so it has no scrollport to time), so it never
       fights these rules. */
    .resource-card__media:hover .resource-card__gallery-bar--first,
    .resource-card__media:focus-visible .resource-card__gallery-bar--first {
      opacity: 0.35;
    }

    .resource-card__media:hover .resource-card__gallery-bar--second,
    .resource-card__media:focus-visible .resource-card__gallery-bar--second {
      opacity: 1;
    }
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:232) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:233) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

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

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:resource-list-styles (INDEX:234) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list(min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-modal (INDEX:237) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

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

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

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

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    left: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      left: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    /* This component (and every child inside it: header, input, results
       dropdown, product cards) is built with logical properties throughout
       (padding-inline, margin-inline-*, etc.), so a single `direction: rtl`
       here is enough to correctly mirror the whole thing for Hebrew — the
       only exceptions are the handful of *physical* left/right rules
       below (the search icon's position and the header divider), which
       don't respond to `direction` and are flipped by hand instead. */
    direction: rtl;

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

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

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

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

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

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

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

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

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

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

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

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    right: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      right: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

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

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

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

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

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

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

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

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

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

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

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

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

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

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

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

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

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:241) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:243) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

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

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

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

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

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

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:244) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

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

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

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

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

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

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

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

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:245) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

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

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

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

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

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:247) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    * {
      pointer-events: none;
    }
  }

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

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

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

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

    50% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

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

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

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:249) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

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

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

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

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text-component-shimmer-styles (INDEX:257) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

  @keyframes text-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */

/* START_SNIPPET:text (INDEX:258) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

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

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

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:260) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      /* --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0); */
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-picker-styles (INDEX:273) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SNIPPET:variant-swatches (INDEX:274) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:veya-collection-filters (INDEX:275) */
/* ==========================================================================
      Native filters block reskin — sort / price keep running through
      blocks/filters.liquid untouched (real Storefront Filtering, native
      pagination + URL); everything below only restyles its output (plus the
      two custom filters above, which reuse the exact same native class
      names on purpose) to match the VEYA reference, scoped under this
      snippet's own wrapper so no other page reusing the same block is
      affected.
      ========================================================================== */

    /* Top bar: "סינון לפי" heading stacked above the sort accordion (native
      default puts them side by side in one row) — the reference wants them
      stacked, full width. (Visibility of this whole bar per breakpoint is
      handled further below, alongside the mobile drawer trigger.) */
    .veya-collection-filters .facets--filters-title {
      order: -1;
      margin: 0 0 18px;
      font-family: var(--font-body--family);
      font-size: 13px;
      font-weight: 500;
      color: #1F1F1F;
      text-align: right;
    }

    /* Mobile: the only thing visible should be the "סינון" trigger button —
      everything else (title/sort bar, and the full filter list, which the
      native block already duplicates *inside* the drawer via its own
      `should_use_select_on_mobile`/drawer markup) stays hidden until the
      drawer is opened. The native breakpoint for this is 750px; overridden
      here to 990px so it switches at the exact same point as the two-column
      desktop layout, instead of having a 750–989px range where both the
      drawer trigger and the inline vertical filters show at once. */
    .veya-collection-filters .facets-controls-wrapper {
      display: none;
    }

    .veya-collection-filters .facets--vertical {
      display: none;
    }

    .veya-collection-filters .facets-toggle {
      display: flex;
    }

    @media screen and (min-width: 990px) {
      .veya-collection-filters .facets-controls-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding-block: 0 !important;
      }

      .veya-collection-filters .facets--vertical {
        display: block;
      }

      .veya-collection-filters .facets-toggle {
        display: none;
      }
    }

    /* Hides the exact bits of text #translateSortOptions rewrites until that
      first pass has actually run, so the English Shopify renders
      server-side (this shop's language setup doesn't cover these specific
      platform strings in Hebrew) is never visible even for an instant. Self
      -contained (keyed off this component's own `--ready` class, added at
      the end of its first `#enhanceAll` pass) rather than depending on
      either calling section's own ready flag, since this snippet is shared
      by more than one. Only guards the sort accordion, which lives inside
      the native block — not the two custom filters above, already
      server-rendered in Hebrew directly, nothing to hide. */
    .veya-collection-filters:not(.veya-collection-filters--ready) .sorting-filter__label,
    .veya-collection-filters:not(.veya-collection-filters--ready) .facets__status,
    .veya-collection-filters:not(.veya-collection-filters--ready) .sorting-filter__select {
      visibility: hidden;
    }

    /* Not part of the reference — hidden rather than restyled. */
    .veya-collection-filters .products-count-wrapper {
      display: none !important;
    }

    .veya-collection-filters .sorting-filter__container .facets__label {
      font-family: var(--font-body--family);
      font-size: 13px;
      font-weight: 500;
      color: #1F1F1F;
    }

    .veya-collection-filters .sorting-filter__select {
      font-family: var(--font-body--family);
      color: #1F1F1F;
    }

    /* Mobile filter drawer only: blocks/filters.liquid renders sort as a
      label + <select> pair here by default (should_use_select_on_mobile —
      true whenever filtering is enabled, see that file's own logic), a
      different control than the "+"/accordion style every other filter
      (מחיר, סוג תכשיט, זמינות — and sort itself, on desktop) uses. The
      merchant wants one consistent look everywhere, so the <select> pair is
      force-hidden here and the SAME accordion markup snippets/sorting.liquid
      already renders alongside it (normally kept mobile-only-hidden via its
      own `mobile:hidden` class) is force-shown instead — no JS/Liquid
      change needed, both are always in the DOM already, this only flips
      which one is visible. `!important` on both: the classes it's
      overriding (`.desktop\:hidden`/`.mobile\:hidden` in assets/base.css)
      are themselves `!important`, so normal specificity can't win here
      regardless of selector depth.
      `justify-content: flex-start; gap: 12px;` below is now dead weight
      (only ever styled the now-hidden <select> pair) but harmless to leave
      — removing it isn't needed for anything to work correctly. */
    .facets-drawer__filters .sorting-filter__container {
      display: none !important;
      justify-content: flex-start;
      gap: 12px;
    }

    .facets-drawer__filters .sorting-filter .facets__panel {
      display: block !important;
    }

    /* Filters-drawer close (×) button: assets/theme-drawer.js's own
      `#focusInitialElement()` explicitly moves real keyboard focus to this
      exact button every time the drawer opens (a deliberate, shared a11y
      behavior across every theme-drawer, blocks/filters.liquid's own
      #filters-drawer included), and a programmatic `.focus()` call is
      treated as "not a mouse click" by every major browser's focus-visible
      heuristic — so the shared `:focus-visible` ring
      (snippets/theme-drawer-styles.liquid) activates immediately on open,
      reading as an unwanted frame around the X. Focus itself still moves
      there correctly for real keyboard/screen-reader use; only the visible
      ring is removed. Same fix as sections/veya-header.liquid's mobile menu
      close button and snippets/cart-drawer.liquid's own #cart-drawer one —
      scoped to #filters-drawer only, so nothing else is affected. */
    #filters-drawer .theme-drawer__close-button {
      outline: none;
    }

    /* The native accordion hides the current sort value on desktop
      (`desktop:hidden`) — the reference shows it ("מיון לפי: מומלצים"),
      so it's forced visible here. */
    .veya-collection-filters .sorting-filter .facets__status {
      display: inline-block !important;
      color: #6B6B6B;
      font-weight: 400;
    }

    /* Accordion rows (sort, price, availability, type): plus/minus instead
      of the native caret, right-aligned labels, VEYA divider color. The
      native sort summary has 3 direct children (label, status, icon) while
      list-filter/price-filter/our own custom summaries only have 2 (label,
      status-wrapper) — `justify-content: space-between` handles the 2-child
      case fine (one item pinned to each edge) but splits the 3-child sort
      row apart, floating the status text in the dead center instead of next
      to the label. Using `flex-start` + `gap` for the real children and
      pushing only the generated +/- glyph to the far edge via its own auto
      margin fixes both cases the same way, so everything lines up
      identically across every row. */
    .veya-collection-filters .facets__summary {
      justify-content: flex-start;
      align-items: center;
      gap: 6px;
      padding-block: 16px;
      font-family: var(--font-body--family);
    }

    .veya-collection-filters .facets__label {
      font-size: 13px;
      font-weight: 500;
      color: #1F1F1F;
    }

    .veya-collection-filters .facets__status-wrapper {
      justify-content: flex-start;
      gap: 6px;
    }

    .veya-collection-filters .facets__summary .icon-caret {
      display: none;
    }

    .veya-collection-filters .facets__summary::after {
      content: '+';
      flex-shrink: 0;
      margin-inline-start: auto;
      font-size: 17px;
      line-height: 1;
      color: #1F1F1F;
    }

    .veya-collection-filters details[open] > .facets__summary::after {
      content: '−';
    }

    .veya-collection-filters .facets__item::before,
    .veya-collection-filters .sorting-filter::before {
      border-top-color: rgba(31, 31, 31, 0.12) !important;
    }

    /* Product-count and grid-density controls belong to the native block's
      always-rendered top bar — hidden defensively (not just via the block's
      own `enable_grid_density` setting) so this never depends on whether
      that setting has actually been re-saved in the page's JSON template. */
    .veya-collection-filters .column-options-wrapper {
      display: none !important;
    }


    /* Checkboxes (availability, type, and any remaining native list filter):
      box on the right, label text extending to its left — the natural
      result of inheriting the sidebar's `direction: rtl` (no override
      needed), since the checkbox `<input>` is the first DOM child and lands
      at the RTL start (right) with the label following toward the left. */
    .veya-collection-filters .checkbox__label-text {
      font-family: var(--font-body--family);
      font-size: 13px;
      color: #1F1F1F;
    }

    .veya-collection-filters .checkbox__input:checked + .checkbox__label .icon-checkmark {
      background-color: #4F1119;
      border-color: #4F1119;
    }

    .veya-collection-filters .checkbox__input:focus-visible + .checkbox__label .icon-checkmark {
      outline-color: #4F1119;
    }

    /* "סוג תכשיט" swatches: colored circle + label text, matching the same
      visual convention already used for this fixed 3-color system elsewhere
      (sections/veya-main-product.liquid's linked_color_picker swatches,
      snippets/veya-product-card.liquid's card swatches) — border + soft
      shadow at rest, a box-shadow "halo" ring on the checked circle instead
      of the checkbox module's checkmark icon. The real `<input
      type="checkbox">` stays in the DOM (JS filtering reads it directly by
      `name`/`value`, same as the plain checkboxes above) but is visually
      hidden — the circle + text pair is the actual clickable control via the
      wrapping `<label for>`. */
    .veya-collection-filters .veya-type-swatch-list {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 18px;
    }

    .veya-collection-filters .veya-type-swatch-item {
      display: flex;
    }

    .veya-collection-filters .veya-type-swatch-input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .veya-collection-filters .veya-type-swatch-label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .veya-collection-filters .veya-type-swatch-circle {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid rgb(0 0 0 / 0.15);
      box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
      transition: box-shadow 150ms ease;
    }

    .veya-collection-filters .veya-type-swatch-input:checked + .veya-type-swatch-label .veya-type-swatch-circle {
      box-shadow: 0 0 0 2px #F6F1EB, 0 0 0 4px #4F1119;
    }

    .veya-collection-filters .veya-type-swatch-input:focus-visible + .veya-type-swatch-label .veya-type-swatch-circle {
      outline: none;
      box-shadow: 0 0 0 2px #F6F1EB, 0 0 0 4px #4F1119;
    }

    .veya-collection-filters .veya-type-swatch-text {
      font-family: var(--font-body--family);
      font-size: 13px;
      color: #1F1F1F;
    }

    /* "מחיר" (price) fields: fully custom markup, deliberately not reusing
      snippets/price-filter.liquid's native `.price-facet`/
      `.price-facet__inputs-wrapper` classes — those are only guaranteed to
      lay out correctly nested exactly as that snippet nests them
      (`<price-facet-component class="price-facet">` as the *outer*
      element, wrapping `.facets__inputs-wrapper.facets__inputs-wrapper--row`
      → `.price-facet__inputs-wrapper` inside it), and getting that nesting
      order backwards once already (this markup used to invert it) is
      exactly the kind of mismatch that's easy to reintroduce by accident.
      Both fields sit in one row unconditionally — no responsive stacking —
      since the sidebar column is never narrow enough to need it. */
    .veya-collection-filters .veya-price-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .veya-collection-filters .veya-price-field {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1 1 0;
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid rgb(31 31 31 / 0.2);
      background-color: #FFFFFF;
    }

    .veya-collection-filters .veya-price-currency {
      flex-shrink: 0;
      font-family: var(--font-body--family);
      font-size: 13px;
      color: #6B6B6B;
    }

    .veya-collection-filters .veya-price-input {
      flex: 1 1 0;
      min-width: 0;
      border: none;
      outline: none;
      background: none;
      padding: 0;
      font-family: var(--font-body--family);
      font-size: 13px;
      color: #1F1F1F;
      text-align: right;
    }

    .veya-collection-filters .veya-price-input::placeholder {
      color: #9A9A9A;
    }

    /* 16px on touch devices only, so focusing a price field doesn't make
       iOS Safari zoom the viewport in (and never zoom back out). Desktop
       keeps 13px exactly. See snippets/veya-search-panel.liquid's own
       identical guard for the full reasoning. */
    @media (pointer: coarse) {
      .veya-collection-filters .veya-price-input {
        font-size: 16px;
      }
    }

    .veya-collection-filters .veya-price-separator {
      flex-shrink: 0;
      font-family: var(--font-body--family);
      font-size: 13px;
      color: #6B6B6B;
    }

    /* Dual-handle price range slider, added *below* the existing price
      fields (never replacing them — see #syncPriceSliders' class comment).
      Physical `right`/`left` throughout, not logical `inset-inline-*`: the
      reference explicitly wants 0 ₪ fixed to the right and the highest
      price fixed to the left regardless of direction, so the RTL container
      this sits in must not flip these. `.veya-price-slider__track` is the
      draggable axis both handles and the range bar measure themselves
      against (see the JS, which reads its `getBoundingClientRect()`); the
      handles/range are positioned as its *own* absolutely-positioned
      children, not the outer `.veya-price-slider` wrapper, so the wrapper
      is free to carry the vertical spacing below the price fields without
      that spacing shifting the track's own 0%/100% endpoints. The wrapper's
      own `padding-inline` (half the handle's own width) is what keeps a
      handle sitting at a 0%/100% track end from getting visually cut off
      by the panel's edge — a handle centers itself exactly *on* the track's
      end (see the `transform` comment below), so half its circle would
      otherwise extend straight past the track's own boundary with nothing
      to its outside. */
    .veya-collection-filters .veya-price-slider {
      margin-top: 20px;
      padding-inline: 8px;
    }

    .veya-collection-filters .veya-price-slider__track {
      position: relative;
      width: 100%;
      height: 4px;
      border-radius: 999px;
      background-color: rgb(31 31 31 / 0.15);
    }

    .veya-collection-filters .veya-price-slider__range {
      position: absolute;
      top: 0;
      bottom: 0;
      border-radius: 999px;
      background-color: #4F1119;
    }

    .veya-collection-filters .veya-price-slider__handle {
      position: absolute;
      top: 50%;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: none;
      padding: 0;
      background-color: #4F1119;
      box-shadow: 0 0 0 2px #F6F1EB, 0 1px 3px rgb(0 0 0 / 0.25);
      cursor: grab;
      /* Centers the handle exactly on its own `right: X%` position — see
        the JS: `right` alone would only put the handle's *own* right edge
        there, so this shifts it back by half its own width to center it,
        the mirror of the usual LTR `left` + `translateX(-50%)` technique. */
      transform: translate(50%, -50%);
      touch-action: none;
    }

    .veya-collection-filters .veya-price-slider__handle:hover {
      background-color: #3A0D13;
    }

    .veya-collection-filters .veya-price-slider__handle:focus-visible {
      outline: 2px solid #4F1119;
      outline-offset: 3px;
    }

    .veya-collection-filters .veya-price-slider__handle.is-dragging {
      cursor: grabbing;
    }

    /* Custom-filter-only: no native equivalent to reskin. */
    .veya-filters__empty-message {
      margin: 0;
      padding-block: 24px;
      font-family: var(--font-body--family);
      font-size: 13px;
      color: #6B6B6B;
      text-align: center;
    }

    /* Active-filter pill row (#updateActivePills/#activePillsContainer): a
      single container this component creates and owns outright — not the
      *native* `.facets-remove` (see the class comment on
      `#updateActivePills` for why populating that, which blocks/filters.liquid
      renders twice, once showed the same pill twice at once). `display` is
      toggled directly in JS (`none` vs `flex`, matching `.facets-remove`'s
      own hide-when-empty behavior) rather than here, since there's no
      server-rendered state to key a CSS selector off. Sits right below
      "מסננים" — see `#repositionActivePills`. */
    /* Width/inset: mirrors the *native* row divider's own formula exactly
      (`:is(.facets--drawer, .facets--vertical) :is(.facets__item,
      .sorting-filter)::before` in blocks/filters.liquid — `width:
      calc(100% - var(--theme-drawer-padding) * 2); margin: 0 auto;`), not a
      guess at a matching value: below the 990px breakpoint this container
      sits inside the mobile drawer's own `.theme-drawer__dialog`, which is
      what actually defines `--theme-drawer-padding` in the first place (see
      snippets/theme-drawer-styles.liquid), so this resolves to the exact
      same inset every other row's own divider/content already uses there.
      At 990px+ the container instead sits in the desktop sidebar, where the
      native accordion panels reset their own padding to 0 (edge-to-edge of
      the column) — matched here the same way, full width with no inset. */
    .veya-collection-filters .veya-active-pills {
      display: none;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--gap-2xs, 6px);
      width: calc(100% - var(--theme-drawer-padding) * 2);
      margin-inline: auto;
      margin-block-end: 16px;
      padding-block-end: 16px;
      border-bottom: 1px solid rgba(31, 31, 31, 0.12);
    }

    @media screen and (min-width: 990px) {
      .veya-collection-filters .veya-active-pills {
        width: 100%;
        margin-inline: 0;
      }
    }

    /* "סוג תכשיט" pills: a small swatch circle before the text (only present
      when VeyaPillEntry#color is set — see #swatchColorFor), same visual
      convention as the checkbox list itself (.veya-type-swatch-circle) and
      every other place this 3-color system shows up, just sized down to fit
      a compact pill. Grouped with the text in `.veya-active-pill-label` —
      see the JS comment on why this can't just be a 3rd flex child of the
      pill itself. */
    .veya-collection-filters .veya-active-pill-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .veya-collection-filters .veya-active-pill-swatch {
      flex-shrink: 0;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid rgb(0 0 0 / 0.15);
    }

    /* The pills themselves: plain `<button>`s carrying the exact same
      `.pills__pill`/`.facets-remove__pill` classes the *native* pills use,
      so all of their actual look (background, border, padding, colors)
      comes from that already-loaded stylesheet — author-level rules there
      win over the browser's default button chrome automatically regardless
      of load order, so no reset is needed for that part. `font`/`cursor`
      are the one pair of defaults a plain `<button>` does NOT reliably
      inherit cross-browser, so those two are set explicitly here. */
    .veya-collection-filters [data-veya-pill] {
      font: inherit;
      cursor: pointer;
    }
/* END_SNIPPET:veya-collection-filters */

/* START_SNIPPET:veya-product-card (INDEX:277) */
/* .veya-product-card__media is a plain positioning box, clipping its one
     static image to a fixed height read from CSS custom properties the
     caller sets on its own root, with the current site defaults as a
     fallback. No scroller, no crossfade, no gallery — just the product's
     own featured image, always. */
  .veya-product-card__media {
    position: relative;
    display: block;
    /* Bumped up from the previous 320/340/380 fallbacks to sit closer to
       actual product photos' own 4:5 upload ratio at typical card widths,
       so less of each photo gets cropped away by `object-fit: cover`.
       Only takes effect where a caller hasn't already set this custom
       property itself (main-collection/search-results/featured-products
       each have their own "Image area height" setting in their schema —
       bump those sliders too if a section doesn't visibly change here). */
    height: var(--product-card-image-height-mobile, 350px);
    overflow: hidden;
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .veya-product-card__media {
      height: var(--product-card-image-height-tablet, 375px);
    }
  }

  @media screen and (min-width: 990px) {
    .veya-product-card__media {
      height: var(--product-card-image-height-desktop, 415px);
    }
  }

  .veya-product-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Shared corner badge for "new", "X% הנחה" (discount) and "אזל במלאי"
     (sold-out) — the Liquid above only ever renders one of the three at
     once (sold-out, then discount, then new — see that markup's own
     comment), so one class covers all three; there's nothing left to
     visually distinguish since they never appear together.
     `has_any_available` already accounts for the linked-color
     case — a product with 3 linked colors only counts as sold out once
     NONE of them have stock left, not just this (placeholder) product's
     own variant. Small and understated, top-right corner, with the
     quick-add "+" button's own drop-shadow/border-radius for a matching
     bit of polish. Previously a full-image bordeaux overlay for the
     sold-out case specifically — reverted back to this same small-badge
     treatment per explicit merchant direction. */
  .veya-product-card__status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 4px 10px;
    background-color: #4F1119;
    color: #FFFFFF;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.4;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
  }

  /* `direction: rtl` fixes the price/swatches order intrinsically, rather
     than depending on whichever ancestor a given caller happens to wrap
     this card in: this snippet itself sets no direction, and the theme's
     global `<html>` (layout/theme.liquid) carries no `dir="rtl"` either —
     RTL is retrofitted locally, component by component, wherever a given
     section remembered to set it. sections/veya-featured-products.liquid's
     carousel track does (`direction: rtl` on `.veya-fp__track`), so cards
     there inherited it and showed price-then-swatches in the correct
     right-to-left order (price right, swatches left); sections/
     veya-main-collection.liquid's grid never set it, so cards there fell
     back to the browser's plain LTR default and showed the opposite order.
     Setting it once here, directly on the card's own info block, makes
     every caller (main-collection, featured-products, search-results,
     resource-card) consistent regardless of its own ancestor. */
  .veya-product-card__info {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    direction: rtl;
    text-align: center;
    text-decoration: none;
    color: inherit;
  }

  .veya-product-card__title {
    display: block;
    color: #1F1F1F;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.4px;
  }

  @media screen and (min-width: 990px) {
    .veya-product-card__title {
      font-size: 16px;
    }
  }

  .veya-product-card__info:hover .veya-product-card__title {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Price and swatches sit on one centered row together. `flex-wrap` so a
     card too narrow to hold both (2-up mobile, with a struck-through "was"
     price doubling the price's own width) drops the SWATCHES to their own
     line — rather than squeezing the price flex item until the two halves
     of a sale price break across two lines, which is what used to happen.
     See `.price__sale` below for the other half of that fix. */
  .veya-product-card__price-row {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .veya-product-card__price {
    color: #1F1F1F;
    font-family: var(--font-body--family);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* snippets/price.liquid renders a sale price as two sibling
     `.price-item__group` spans — the struck-through "was" and the actual
     "now" — inside a plain block `<div class="price__sale">`, separated by
     nothing but collapsible source whitespace. Left as inline content in a
     block, they wrap independently the moment the card gets narrow, putting
     the two halves of one price on two lines. Making the container an
     inline-flex row with an explicit gap keeps them together as a single
     unbreakable unit, and gives the pair a real, consistent 6px separator
     instead of one collapsed space.

     `:not(.price__hidden)` is load-bearing, not decoration: price.liquid
     puts BOTH the regular and the sale block in the markup every time and
     hides whichever one doesn't apply with `.price__hidden { display: none }`
     (assets/base.css) — a single-class rule. A bare
     `.veya-product-card__price .price__sale` selector is two classes, so it
     would out-specify that and force the empty sale block visible on every
     full-price card in the store. Same specificity trap as the
     `.veya-mp__set-items-list[hidden]` fix in
     sections/veya-main-product.liquid. */
  .veya-product-card__price .price__sale:not(.price__hidden) {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
  }

  @media screen and (min-width: 990px) {
    .veya-product-card__price {
      font-size: 15px;
    }
  }

  .veya-product-card__price .price,
  .veya-product-card__price .price-item--sale {
    color: #1F1F1F;
  }

  .veya-product-card__price .price__starting-from {
    color: #1F1F1F;
    font-size: 0.85em;
    font-weight: normal;
  }

  /* Diagonal strikethrough, not the browser's plain horizontal
     `text-decoration: line-through` — matches the same rotated-line
     treatment this project already uses elsewhere for a struck-through
     value (e.g. sections/veya-main-product.liquid's own sold-out variant
     pills), so a discounted-price card reads as the same deliberate
     design language rather than a plain browser default. Built via
     `::after` since `text-decoration` itself has no way to rotate the
     line it draws. `position: relative` + `display: inline-block` turn
     the price span itself into the pseudo-element's own sizing box, so
     `left: 0; right: 0` always spans exactly the rendered price's own
     width, however many digits it has. */
  .veya-product-card__price .compare-at-price,
  .veya-product-card__price .price-item--regular {
    position: relative;
    display: inline-block;
    /* Smaller than the current/"now" price next to it (which stays at
       this row's own default 14px/15px) — merchant-requested: the
       struck-through "was" price should read as clearly secondary,
       not equal weight to the actual price being charged. `em`, not a
       fixed px value, so it automatically scales down proportionally
       whichever size the row itself ends up at (14px mobile / 15px
       desktop, per the rule just above), rather than needing its own
       separate mobile/desktop breakpoint pair to stay proportionate. */
    font-size: 0.8em;
    color: #9A9A9A;
    text-decoration: none;
  }

  .veya-product-card__price .compare-at-price::after,
  .veya-product-card__price .price-item--regular::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1.5px;
    background-color: #4F1119;
    transform: rotate(-8deg);
    pointer-events: none;
  }

  /* Purely decorative — display only, no selection state. */
  .veya-product-card__swatches {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .veya-product-card__swatch {
    display: inline-flex;
  }

  /* Reuses the theme's own swatch snippet (native color/image per option
     value); this just applies this card's own size. */
  .veya-product-card__swatch .swatch {
    --swatch-width: 19px;
    --swatch-height: 19px;
  }

  /* Only used when a value has no native swatch color/image configured. */
  .veya-product-card__swatch-fallback {
    display: block;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 1px solid rgb(0 0 0 / 0.08);
  }

  /* Quick-add "+" button. .veya-product-card__media-wrap is the new
     positioning ancestor for it (added alongside .veya-product-card__media
     rather than inside it — see this file's own comment on why the button
     can't be a descendant of the <a>). `display: contents` on every
     wrapper between the button and that ancestor (the theme's own
     <product-form-component>/<add-to-cart-component>, plus the plain
     <form> Shopify's own product form Liquid tag renders) makes them all
     disappear for layout purposes, so the button positions directly
     against .veya-product-card__media-wrap regardless of how many
     component wrappers sit between them in the DOM. */
  .veya-product-card__media-wrap {
    position: relative;
  }

  .veya-product-card__quick-add-form,
  .veya-product-card__quick-add-form form,
  .veya-product-card__quick-add-form add-to-cart-component {
    display: contents;
  }

  .veya-product-card__quick-add {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 4px;
    background-color: #4F1119;
    color: #F6F1EB;
    cursor: pointer;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
    transition: transform 200ms ease, background-color 150ms ease;
  }

  .veya-product-card__quick-add:hover,
  .veya-product-card__quick-add:focus-visible {
    transform: scale(1.08);
    background-color: #3A0D13;
  }

  .veya-product-card__quick-add:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* An actual SVG cross, not a "+" text glyph — a font's own baseline
     metrics never line up exactly with a flex box's true center (worse at
     small sizes, and inconsistent across devices/browsers), where a
     symmetric SVG path is centered by construction and needs no per-size
     correction at all. Same reasoning as every other icon already in this
     project (zoom, close, arrows) being SVG rather than a text character. */
  .veya-product-card__quick-add-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
  }

  .veya-product-card__quick-add-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    .veya-product-card__quick-add {
      transition: none;
    }
  }

  /* Quick-add bottom sheet: a single, lazily-created <dialog> shared by
     every card on the page (built by assets/veya-quick-add-sheet.js) — its
     styling lives here rather than in sections/veya-quick-add.liquid
     since that section only ever supplies .veya-qa__content's own inner
     markup, never the sheet chrome around it. Sized/positioned exactly
     like sections/veya-main-product.liquid's own lightbox dialog (same
     fade/scale-in technique, just sliding up from the bottom instead of
     scaling in centered), so the two full-screen overlays in this theme
     feel consistent. */
  .veya-qa__dialog {
    position: fixed;
    inset: 0;
    margin: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
  }

  .veya-qa__dialog::backdrop {
    background: rgb(0 0 0 / 0);
    transition: background-color 250ms ease, overlay 250ms allow-discrete, display 250ms allow-discrete;
  }

  .veya-qa__dialog[open]::backdrop {
    background: rgb(0 0 0 / 0.6);
  }

  @starting-style {
    .veya-qa__dialog[open]::backdrop {
      background: rgb(0 0 0 / 0);
    }
  }

  .veya-qa__panel {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    background-color: #F6F1EB;
    border-radius: 16px 16px 0 0;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px rgb(0 0 0 / 0.16);
    transform: translateY(100%);
    transition: transform 300ms ease;
  }

  .veya-qa__dialog[open] .veya-qa__panel {
    transform: translateY(0);
  }

  @starting-style {
    .veya-qa__dialog[open] .veya-qa__panel {
      transform: translateY(100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .veya-qa__dialog::backdrop,
    .veya-qa__panel {
      transition-duration: 0.01ms;
    }
  }

  /* Left, not right: the header row below is `direction: rtl` with the
     product thumbnail as its first (rightmost) child — anchoring the
     close button at `right` would sit it directly on top of that image
     instead of in its own clear space. `.veya-qa__header`'s own
     `padding-inline-end` (the RTL "end" = left) already reserves exactly
     this corner for it. */
  /* `outline: none` unconditionally (not just on `:focus-visible`): this
     button is the first focusable element inside the dialog, so
     `showModal()` (see the controller's own `open()`) auto-focuses it the
     moment the sheet opens — a programmatic `.focus()` is treated as "not
     a mouse click" by every major browser's focus-visible heuristic, so
     the native ring paints immediately on open, around this button's own
     already-circular background, reading as a second, unwanted outer
     ring. Focus itself still moves here correctly (screen-reader/keyboard
     users still get it), only the visible ring is gone. Same fix already
     applied to the cart drawer's own close button — see
     snippets/cart-drawer.liquid's own comment on
     `#cart-drawer .theme-drawer__close-button`. */
  .veya-qa__close {
    position: absolute;
    top: 12px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background-color: rgb(31 31 31 / 0.06);
    color: #1F1F1F;
    cursor: pointer;
    outline: none;
  }

  .veya-qa__close svg {
    width: 16px;
    height: 16px;
  }

  .veya-qa__loading,
  .veya-qa__error {
    margin: 20px 0;
    color: #6B6B6B;
    font-family: var(--font-body--family);
    font-size: 14px;
    text-align: center;
  }

  .veya-qa__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding-inline-end: 40px;
    direction: rtl;
  }

  .veya-qa__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: cover;
    background-color: #F6F1EB;
    border: 1px solid rgb(31 31 31 / 0.08);
  }

  .veya-qa__header-text {
    min-width: 0;
  }

  .veya-qa__title {
    margin: 0 0 4px;
    color: #1F1F1F;
    font-family: var(--font-heading--family);
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .veya-qa__price {
    color: #1F1F1F;
    font-family: var(--font-body--family);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .veya-qa__price .compare-at-price,
  .veya-qa__price .price-item--regular {
    /* Same "smaller than the current price" treatment as
       .veya-product-card__price's own identical rule above. */
    font-size: 0.8em;
    color: #9A9A9A;
    text-decoration: line-through;
  }

  .veya-qa__section-label {
    margin: 0 0 10px;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    color: #1F1F1F;
    font-family: var(--font-body--family);
    font-size: 13px;
    text-align: right;
    direction: rtl;
  }

  /* Fixed "סוג החומר" row — same look as .veya-qa__section-label right
     below it, just with no swatches/selection of its own, so it reads as
     one visually continuous pair rather than two unrelated rows. */
  .veya-qa__section-label--static {
    margin: 0 0 4px;
  }

  /* Filled in by the controller's own `#selectLinkedColor` on every pick
     (e.g. "ציפוי רודיום") — empty, and so invisible, until then. */
  .veya-qa__selected-color {
    color: #1F1F1F;
  }

  .veya-qa__swatches {
    /* `flex-start`, not `flex-end`: in an RTL flex container the main axis
       is flipped, so "start" is the RIGHT edge and "end" is the left —
       `flex-end` here was actually pushing the whole row to the LEFT, the
       opposite of intended (same rule .veya-qa__pills below already
       follows correctly, and sections/veya-main-product.liquid's own
       `.veya-mp__variant-option-pills` documents this exact gotcha). */
    display: flex;
    justify-content: flex-start;
    direction: rtl;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }

  .veya-qa__swatch {
    display: inline-flex;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
  }

  .veya-qa__swatch-fallback {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgb(0 0 0 / 0.15);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
  }

  .veya-qa__swatch.is-active,
  .veya-qa__swatch:focus-visible {
    box-shadow: 0 0 0 2px #F6F1EB, 0 0 0 4px #4F1119;
    outline: none;
    border-radius: 50%;
  }

  .veya-qa__swatch[data-available='false'] {
    cursor: not-allowed;
  }

  .veya-qa__swatch[data-available='false'] .veya-qa__swatch-fallback {
    opacity: 0.5;
    background-image: linear-gradient(
      to top left,
      transparent calc(50% - 1px),
      rgb(0 0 0 / 0.6) calc(50% - 1px),
      rgb(0 0 0 / 0.6) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
  }

  .veya-qa__variant-options {
    margin-bottom: 4px;
  }

  .veya-qa__variant-option-group + .veya-qa__variant-option-group {
    margin-top: 12px;
  }

  .veya-qa__variant-option-label {
    display: block;
    margin: 0 0 8px;
    color: #6B6B6B;
    font-family: var(--font-body--family);
    font-size: 13px;
    text-align: right;
    direction: rtl;
  }

  .veya-qa__pills {
    direction: rtl;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }

  .veya-qa__pill {
    min-width: 44px;
    padding: 8px 14px;
    border: 1px solid rgb(31 31 31 / 0.2);
    border-radius: 2px;
    background-color: transparent;
    color: #1F1F1F;
    font-family: var(--font-body--family);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
  }

  .veya-qa__pill.is-active,
  .veya-qa__pill:focus-visible {
    border-color: #4F1119;
    background-color: color-mix(in srgb, #4F1119 8%, transparent);
    outline: none;
  }

  .veya-qa__pill[data-available='false'] {
    position: relative;
    color: #9A9A9A;
    border-color: rgb(31 31 31 / 0.1);
    cursor: not-allowed;
  }

  .veya-qa__pill[data-available='false']::after {
    content: '';
    position: absolute;
    inset-inline: 6px;
    top: 50%;
    height: 1px;
    background-color: rgb(31 31 31 / 0.3);
    transform: rotate(-8deg);
  }

  .veya-qa__add-to-cart {
    position: relative;
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 8px;
    border: none;
    background-color: #4F1119;
    color: #F6F1EB;
    font-family: var(--font-body--family);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease;
  }

  .veya-qa__add-to-cart:hover:not(:disabled),
  .veya-qa__add-to-cart:focus-visible:not(:disabled) {
    background-color: #3A0D13;
  }

  .veya-qa__add-to-cart:disabled {
    background-color: #B9AFA4;
    cursor: not-allowed;
  }

  @media (prefers-reduced-motion: reduce) {
    .veya-qa__add-to-cart {
      transition: none;
    }
  }
/* END_SNIPPET:veya-product-card */

/* START_SNIPPET:veya-ring-size-finder (INDEX:278) */
.veya-rsf__trigger {
    display: none;
    width: 100%;
    margin-top: 10px;
    padding: 10px 0;
    border: 1px solid rgb(31 31 31 / 0.2);
    background: transparent;
    color: #4F1119;
    font-family: var(--font-body--family);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  @media screen and (max-width: 989px) {
    .veya-rsf__trigger {
      display: block;
    }
  }

  .veya-rsf__dialog {
    position: fixed;
    inset: 0;
    margin: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 0;
    border: none;
    background: #F6F1EB;
    opacity: 0;
    transition: opacity 250ms ease, overlay 250ms allow-discrete, display 250ms allow-discrete;
  }

  .veya-rsf__dialog[open] {
    opacity: 1;
  }

  @starting-style {
    .veya-rsf__dialog[open] {
      opacity: 0;
    }
  }

  .veya-rsf__dialog::backdrop {
    background: rgb(0 0 0 / 0.55);
  }

  @media screen and (min-width: 990px) {
    .veya-rsf__dialog {
      display: none;
    }
  }

  .veya-rsf__panel {
    position: relative;
    height: 100%;
    overflow-y: auto;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    /* Stops a fast double-tap anywhere in the finder (most disruptively on
       the measure screen, where a shopper taps quickly to fine-tune the
       circle) from triggering the browser's own double-tap-to-zoom — that
       zoom fights directly with `#setCircleMm`'s own live-width
       compensation, which already reads `document.documentElement.
       clientWidth` fresh on every change and would otherwise measure
       against a suddenly-zoomed layout. `manipulation`, not `pan-y` or
       `none`: it only removes the double-tap gesture specifically, still
       allowing normal scrolling AND deliberate pinch-zoom (which
       `#setCircleMm`'s own `visualViewport.scale` correction already
       accounts for) to keep working exactly as before. */
    touch-action: manipulation;
  }

  /* A concrete height (not `auto`) for `.veya-rsf__step`'s own
     `min-height: 100%` below to actually resolve against — percentage
     heights are ignored by the CSS spec when the containing block's own
     height is auto, which is exactly what was silently defeating the
     centering: the step's box was only ever as tall as its own content,
     so `justify-content: center` had no extra space to center within. */
  .veya-rsf__body {
    height: 100%;
  }

  .veya-rsf__close {
    /* `z-index: 2`: `.veya-rsf__step` is also `position: relative` (it
       has to be — `.veya-rsf__back` anchors to it) and comes later in the
       DOM, so without an explicit z-index here the step's own box —
       which spans the full top area under this button, not just its
       visible content — paints (and captures clicks/taps) ON TOP of this
       button instead of the other way around. That's what made the ×
       unreliable to tap. */
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: rgb(31 31 31 / 0.06);
    color: #1F1F1F;
    cursor: pointer;
    outline: none;
  }

  .veya-rsf__close svg {
    width: 18px;
    height: 18px;
  }

  /* `:not([hidden])`, not a plain `.veya-rsf__step { display: flex }`:
     author CSS always overrides the browser's own built-in
     `[hidden] { display: none }` default once there's ANY author rule of
     equal-or-higher specificity setting `display` on the same element —
     a bare class rule here would keep every step visibly stacked
     regardless of the `hidden` attribute JS toggles on it (`#showStep`),
     which is exactly what was happening before this fix: all 3 steps
     rendering as one continuous scrolling page instead of one at a
     time. */
  .veya-rsf__step:not([hidden]) {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* `min-height`, not `height`: guarantees full-screen centering for
       short content (this rule's whole point) while still letting a
       tall step (e.g. a long model list) grow past 100% and scroll
       inside `.veya-rsf__panel`'s own `overflow-y: auto`, rather than
       clipping. No top padding reserved for the close/back buttons
       (`position: absolute`, out of flow) — real content is short
       enough that centering it never reaches that top-corner area. */
    min-height: 100%;
  }

  .veya-rsf__title {
    margin: 0 0 12px;
    color: #1F1F1F;
    font-family: var(--font-heading--family);
    font-size: 22px;
    font-weight: 400;
    outline: none;
  }

  .veya-rsf__text {
    margin: 0 0 28px;
    max-width: 320px;
    color: #6B6B6B;
    font-family: var(--font-body--family);
    font-size: 14px;
    line-height: 1.6;
  }

  .veya-rsf__button {
    width: 100%;
    max-width: 320px;
    height: 52px;
    border: none;
    background-color: #4F1119;
    color: #F6F1EB;
    font-family: var(--font-body--family);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease;
  }

  .veya-rsf__button:hover {
    background-color: #3A0D13;
  }

  .veya-rsf__link {
    margin-top: 16px;
    border: none;
    background: none;
    color: #4F1119;
    font-family: var(--font-body--family);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .veya-rsf__back {
    position: absolute;
    top: 16px;
    right: 16px;
    border: none;
    background: none;
    color: #4F1119;
    font-family: var(--font-body--family);
    font-size: 13px;
    cursor: pointer;
  }

  .veya-rsf__option-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
  }

  .veya-rsf__option {
    width: 100%;
    height: 48px;
    border: 1px solid rgb(31 31 31 / 0.2);
    background-color: transparent;
    color: #1F1F1F;
    font-family: var(--font-body--family);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
  }

  .veya-rsf__option:hover,
  .veya-rsf__option:focus-visible {
    border-color: #4F1119;
    background-color: color-mix(in srgb, #4F1119 8%, transparent);
    outline: none;
  }

  .veya-rsf__circle-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 280px;
    margin-bottom: 20px;
  }

  .veya-rsf__circle {
    border-radius: 50%;
    border: 3px solid #4F1119;
    background-color: color-mix(in srgb, #4F1119 5%, transparent);
    transition: width 60ms linear, height 60ms linear;
  }

  .veya-rsf__fine-tune {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin-bottom: 16px;
  }

  .veya-rsf__fine-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(31 31 31 / 0.2);
    border-radius: 50%;
    background: transparent;
    color: #1F1F1F;
    font-size: 18px;
    cursor: pointer;
  }

  .veya-rsf__slider {
    flex: 1;
    accent-color: #4F1119;
  }

  .veya-rsf__diameter-readout {
    margin: 0 0 20px;
    color: #1F1F1F;
    font-family: var(--font-body--family);
    font-size: 14px;
  }

  .veya-rsf__result-size {
    margin: 0 0 20px;
    color: #4F1119;
    font-family: var(--font-heading--family);
    font-size: 40px;
    font-weight: 400;
  }

  @media (prefers-reduced-motion: reduce) {
    .veya-rsf__dialog,
    .veya-rsf__circle {
      transition-duration: 0.01ms;
    }
  }
/* END_SNIPPET:veya-ring-size-finder */

/* START_SNIPPET:veya-search-panel (INDEX:280) */
/* Keeps the header visually in place for as long as this panel is open.
    assets/dialog.js's `showDialog()` locks scroll via `overflow: hidden`
    on both `<html>` and `.page-wrapper` (assets/base.css) — the latter is
    a real ancestor of the sticky header, and giving it `overflow: hidden`
    makes IT the header's `position: sticky` containing block instead of
    the viewport. Since `.page-wrapper` itself never actually scrolled,
    the header's sticky box recomputes against `.page-wrapper`'s own
    (permanently 0) scroll offset and snaps back to its natural, non-stuck
    position — while the outer viewport, frozen by `<html>`'s own
    `overflow: hidden`, stays visually scrolled to wherever the shopper
    actually was. The header then renders off in its natural, unstuck
    spot instead of where it visually was, which is what made it appear
    to simply vanish the instant this panel opened (see the JS's own
    `#updatePanelTop` for the full mechanism, and why measuring the panel's
    own `top` correctly isn't enough to fix this by itself — this is a
    second, independent symptom of the same root cause).
    `position: fixed` is immune to this: unlike sticky, it never consults
    an ancestor's `overflow` value at all (only a transformed/filtered
    ancestor or the viewport), so forcing it here holds the header exactly
    where `position: sticky` already had it — same `top: -1px` the native
    sticky rule below also uses — for as long as
    `veya-search-panel-open` is present. Gated on
    `.veya-search-panel-header-was-stuck`, NOT the header's own
    `.veya-header--stuck` — see `#updatePanelTop`'s own class comment in
    the script above for why that one can never actually be present on
    this store (its own sentinel element doesn't exist in the real
    markup) and had to be replaced with a self-contained equivalent. Same
    intent either way: never fire before the header would have stuck on
    its own — if it wasn't already stuck, the shopper is at or near the
    top of the page, where the lock has nothing to disrupt, since the
    header's natural position is already `top: 0` regardless. */
  html.veya-search-panel-open .veya-header-section:has(> veya-header-component.veya-search-panel-header-was-stuck) {
    position: fixed;
    top: -1px;
    inset-inline: 0;
  }

  /* Shapes the native <dialog> into a full-width bar anchored below the
    header, instead of Shopify's default centered modal — its own native
    `::backdrop` (always full-viewport, drawn beneath it once shown via
    `.showModal()`) is what supplies the dark overlay over everything the
    opaque panel itself doesn't cover, with zero extra markup. `top` reads
    a custom property the JS sets once per open (see `#updatePanelTop` —
    the header's real position can shift depending on whether an
    announcement bar above it is still visible), falling back to the
    header's own static height variables for the very first paint before
    that runs. */
  .veya-search-panel__dialog {
    position: fixed;
    inset-inline: 0;
    top: var(--veya-search-panel-top, var(--veya-header-height-mobile, 64px));
    /* A modal dialog lives in the browser's top layer and needs no
       `z-index` at all. This one is opened non-modally (see the markup
       comment above), so it stacks like any other positioned element and
       needs to be told where it belongs: above page content, and BELOW the
       header's own `--veya-header-z-index` (default 30) so the header stays
       both visible and clickable while the panel is open. The cart drawer
       and mobile menu are still modal, so they keep landing on top of this
       with no coordination needed. */
    z-index: 20;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - var(--veya-search-panel-top, var(--veya-header-height-mobile, 64px)));
    border: none;
    background: var(--veya-header-bg, #F6F1EB);
    color: #1F1F1F;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--animation-speed-medium, 0.15s) var(--ease-out-quad, ease-out),
      transform var(--animation-speed-medium, 0.15s) var(--ease-out-quad, ease-out),
      overlay var(--animation-speed-medium, 0.15s) allow-discrete,
      display var(--animation-speed-medium, 0.15s) allow-discrete;
  }

  @media screen and (min-width: 750px) {
    .veya-search-panel__dialog {
      top: var(--veya-search-panel-top, var(--veya-header-height-tablet, 72px));
      max-height: calc(100dvh - var(--veya-search-panel-top, var(--veya-header-height-tablet, 72px)));
    }
  }

  @media screen and (min-width: 990px) {
    .veya-search-panel__dialog {
      top: var(--veya-search-panel-top, var(--veya-header-height-desktop, 88px));
      max-height: calc(100dvh - var(--veya-search-panel-top, var(--veya-header-height-desktop, 88px)));
    }
  }

  .veya-search-panel__dialog[open] {
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    .veya-search-panel__dialog[open] {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

  /* Darkens everything BELOW the panel only — never the header itself,
    even though the header sits above where the panel's own box starts
    (see `top` above) and a native `::backdrop` otherwise always spans the
    *entire* viewport uniformly, with no awareness of the dialog's own
    position: a flat `background-color` here would have darkened the
    header's own screen region too, since nothing else in the browser's
    top layer covers that area to paint over it. A hard-stop gradient
    solves this with zero extra markup/JS: fully transparent from the top
    of the viewport down to this same `--veya-search-panel-top` value (the
    header's real bottom edge — the exact value `top` above already uses),
    then the same weight as the mobile menu drawer's own overlay (see
    sections/veya-header.liquid's --veya-mobile-overlay-alpha, defaulting
    to 40%) from that point down to the bottom of the viewport. */
  .veya-search-panel__overlay {
    position: fixed;
    inset-inline: 0;
    /* Starts exactly where the panel starts — the header's real bottom edge,
       the same `--veya-search-panel-top` measurement `#updatePanelTop`
       maintains — so the header is neither darkened nor covered, and stays
       clickable. This replaces a `::backdrop` gradient that achieved the
       identical look by staying transparent above this same line; a
       non-modal dialog has no `::backdrop` to style, hence a real element.
       `z-index: 19` puts it directly beneath the panel (20) and beneath the
       header (30). */
    top: var(--veya-search-panel-top, var(--veya-header-height-desktop, 88px));
    bottom: 0;
    z-index: 19;
    background-color: rgb(31 31 31 / 0.4);
    opacity: 0;
    transition: opacity var(--animation-speed-medium, 0.15s) var(--ease-out-quad, ease-out);
  }

  .veya-search-panel__overlay[data-veya-search-overlay-open] {
    opacity: 1;
  }

  /* Author rule setting a property the UA's own `[hidden]` rule also sets,
     at equal specificity — without this the element would stay laid out and
     the overlay would be permanently present (invisible at opacity 0, but
     still swallowing clicks below the header). Same trap as
     `.veya-mp__set-items-list[hidden]` in
     sections/veya-main-product.liquid. */
  .veya-search-panel__overlay[hidden] {
    display: none;
  }

  /* Mobile: same "continues the header, doesn't cover it" rule as
    desktop — `top` still reads the exact same header-bottom measurement
    (see `#updatePanelTop` in the script below), it just isn't paired
    with a `max-height`/backdrop-darkening below it here: `bottom: 0` (not
    an explicit `height`) lets the panel's own box fill everything from
    the header's bottom edge to the screen's bottom edge on its own, and
    since nothing of the page is left showing below it at that point, a
    separate dark overlay would never actually show through anywhere —
    hidden the same way snippets/search-modal.liquid already hides its
    own backdrop below 750px. */
  @media screen and (max-width: 989px) {
    .veya-search-panel__dialog {
      inset-inline: 0;
      top: var(--veya-search-panel-top, var(--veya-header-height-mobile, 64px));
      bottom: 0;
      width: 100%;
      height: auto;
      max-height: none;
    }

    /* Below 990px the panel fills everything under the header on its own,
       so there is no strip of page left for an overlay to darken. */
    .veya-search-panel__overlay {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .veya-search-panel__dialog {
      transition-duration: 0.01ms;
    }
  }

  .veya-search-panel__inner {
    direction: rtl;
    display: block;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    font-family: var(--font-body--family);
  }

  .veya-search-panel__form {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding: 20px 24px 40px;
    box-sizing: border-box;
  }

  .veya-search-panel__input-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }

  .veya-search-panel__input-icon {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #6B6B6B;
    pointer-events: none;
    /* Sits over the input, which is painted after it in DOM order. Absolute
       positioning alone already wins that, but stating it explicitly stops
       the icon disappearing behind the field in the one case where it did —
       WebKit's native search widget (see `appearance: none` on the input)
       painting its own opaque background over everything beneath it. */
    z-index: 1;
  }

  {% comment %}
    Neither `background-color` nor `border-color` is set here, and that is
    deliberate. assets/base.css styles every field with
    `input:not([type='checkbox'], [type='radio'])`, which is specificity
    (0,1,1) — higher than this single class (0,1,0) — so the resting field
    has always taken its background and border colour from the theme's own
    `--color-input-background` / `--color-input-border`, i.e. the cream that
    matches the panel around it. Restating a colour here would be dead code
    that loses anyway, and restating it in the focus rule below is exactly
    what previously made the field flip to white the moment it was focused:
    that selector IS more specific than base.css, so it won, and the field
    changed appearance on focus. Letting one rule in base.css decide the
    colours for every state is what guarantees they are identical.
  {% endcomment %}
  .veya-search-panel__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding-inline: 40px 16px;
    border-width: 1px;
    border-style: solid;
    font-family: var(--font-body--family);
    font-size: 15px;
    color: #1F1F1F;
    outline: none;
    box-shadow: none;
    /* This is an `<input type="search">`, and WebKit gives that type its own
       native widget appearance — a rounded, shadowed capsule that the
       browser repaints in a different state once it takes focus, on top of
       (and ignoring) the border/background set above. On iOS that showed up
       as the field visibly gaining a drop shadow and losing its flat border
       the moment the keyboard came up. `appearance: none` opts out of the
       native widget entirely, so the field renders the same way whether or
       not it holds focus. sections/veya-search-results.liquid's own search
       field already did this; this one had been missing it.

       Note this is the ONLY appearance-related property set here. Border
       radius is left to assets/base.css's themed `--style-border-radius-inputs`
       exactly as before, for the same reason the colours are — one source,
       one result, in every state. */
    -webkit-appearance: none;
    appearance: none;
  }

  /* Suppresses the only two things that genuinely DO appear on focus — the
     global `*:focus-visible` outline in assets/base.css, and any UA or
     injected focus shadow — and nothing else.
     `background-color`/`border-color` are deliberately absent: see the
     comment on the base rule above. Re-declaring them here would out-specify
     base.css and reintroduce the very change this rule exists to prevent,
     which is exactly what happened the first time round. The rule is now
     purely subtractive, so the field's colours cannot differ between resting
     and focused — they come from the same place in both. */
  .veya-search-panel__input:is(:hover, :focus, :focus-visible, :active) {
    outline: none;
    box-shadow: none;
  }

  /* The native "clear" (✕) widget that WebKit adds inside a search input —
     redundant next to this panel's own close button, and another piece of
     native chrome that paints itself rather than following the CSS above. */
  .veya-search-panel__input::-webkit-search-cancel-button,
  .veya-search-panel__input::-webkit-search-decoration {
    display: none;
    -webkit-appearance: none;
  }

  /* iOS Safari zooms the whole viewport in the moment a shopper focuses ANY
     form field whose computed font-size is below 16px, and never zooms back
     out on its own — the page stays stuck oversized until it's pinched back
     by hand. Since this panel focuses its field automatically the instant it
     opens, that fired on every single search on an iPhone.

     Scoped to `pointer: coarse` rather than applied outright: the zoom only
     ever happens on touch, so this leaves the 15px desktop appearance
     completely untouched and changes the rendered size by 1px only on the
     devices that actually have the problem. Same treatment is applied to
     every other field a shopper can reach on mobile — the search page's own
     input (sections/veya-search-results.liquid) and the price filters
     (snippets/veya-collection-filters.liquid). */
  @media (pointer: coarse) {
    .veya-search-panel__input {
      font-size: 16px;
    }
  }

  .veya-search-panel__input::placeholder {
    color: #9A9A9A;
  }

  {% comment %}
    No focus styling here on purpose. A `:focus-visible` rule used to paint
    the border burgundy, but a text input ALWAYS matches `:focus-visible`
    while focused (the spec treats any field that takes keyboard input that
    way, regardless of whether focus arrived by mouse, touch or keyboard) —
    and `#handleDialogOpen` focuses this field the moment the panel opens so
    a shopper can type straight away. The net effect was that the panel
    always appeared with a burgundy-outlined field, reading as an error or
    validation state rather than a neutral one. The field now looks
    identical at all times; the automatic focus stays, so typing still just
    works.
  {% endcomment %}

  .veya-search-panel__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    color: #1F1F1F;
    cursor: pointer;
  }

  .veya-search-panel__close .svg-wrapper {
    width: 18px;
    height: 18px;
  }

  .veya-search-panel__error {
    margin: 16px 0 0;
    padding: 10px 14px;
    background-color: rgb(180 40 40 / 0.08);
    color: #8A2020;
    font-size: 13px;
  }

  /* Loading: keep whatever's already showing visible (never blank the
    area out while a new response is in flight), just dim it slightly. */
  .veya-search-panel__inner[data-panel-state='loading'] #veya-search-panel-results {
    opacity: 0.5;
    transition: opacity var(--animation-speed, 0.125s) ease-in-out;
    pointer-events: none;
  }

  .veya-search-panel__heading {
    margin: 0 0 18px;
    font-family: var(--font-heading--family);
    font-size: 18px;
    font-weight: 600;
    color: #1F1F1F;
  }

  @media screen and (min-width: 990px) {
    .veya-search-panel__heading {
      font-size: 20px;
    }
  }

  .veya-search-panel__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-top: 28px;
    direction: rtl;
  }

  /* #veya-search-panel-results is the morph target (see the JS) — its own
    box is removed from layout so its children (the suggestions block and
    the results/no-results block, rendered by
    snippets/veya-search-panel-content.liquid) become direct grid/flex
    items of .veya-search-panel__body instead, positioned individually
    below without any JS DOM-moving. */
  #veya-search-panel-results {
    display: contents;
  }

  .veya-search-panel__categories,
  [data-veya-search-panel-suggestions] {
    order: 1;
  }

  .veya-search-panel__categories {
    order: 2;
  }

  .veya-search-panel__results,
  .veya-search-panel__no-results {
    order: 3;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgb(31 31 31 / 0.12);
  }

  .veya-search-panel__no-results {
    margin: 28px 0 0;
    font-family: var(--font-body--family);
    font-size: 13px;
    color: #6B6B6B;
    text-align: center;
  }

  .veya-search-panel__categories-list,
  .veya-search-panel__suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .veya-search-panel__categories-list a,
  .veya-search-panel__suggestion-link {
    font-family: var(--font-body--family);
    font-size: 13px;
    color: #1F1F1F;
    text-decoration: none;
  }

  .veya-search-panel__categories-list a:hover,
  .veya-search-panel__suggestion-link:hover {
    text-decoration: underline;
  }

  /* Mobile: not part of the reference design at all (only "קטגוריות" +
    results belong there) — the suggestions block is desktop-only, shown
    again explicitly inside the 990px+ block below. */
  [data-veya-search-panel-suggestions] {
    display: none;
  }

  /* Mobile: a horizontally-scrolling carousel, same technique as
    sections/veya-featured-products.liquid's own `.veya-fp__track`
    (`direction: rtl` so native swipe/scroll-snap already starts at
    product #1 on the right with zero JS; `overscroll-behavior-x: contain`
    stops it chaining into the page once it hits either end) — not a
    static 2-column grid. Swapped back to a plain grid at 990px+ below,
    matching the desktop reference instead. */
  .veya-search-panel__products-grid {
    direction: rtl;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .veya-search-panel__products-grid::-webkit-scrollbar {
    display: none;
  }

  /* One card fully visible, ~40% of the next one peeking past the edge —
    not two evenly-split cards. */
  .veya-search-panel__products-grid > li {
    flex: 0 0 70%;
    scroll-snap-align: start;
  }

  @media screen and (min-width: 990px) {
    .veya-search-panel__body {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
      grid-template-areas: 'suggestions results' 'categories results';
      align-items: start;
      column-gap: 48px;
    }

    [data-veya-search-panel-suggestions] {
      display: block;
      grid-area: suggestions;
    }

    .veya-search-panel__categories {
      grid-area: categories;
    }

    .veya-search-panel__results,
    .veya-search-panel__no-results {
      grid-area: results;
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }

    /* `display: flex`, not a fixed `grid-template-columns: repeat(4, ...)`
      — a CSS grid always reserves all 4 column *tracks* regardless of how
      many `<li>` actually exist, so whenever litcommerce-hidden supplier
      products (see snippets/veya-product-card.liquid — that snippet
      renders nothing at all for one, so no phantom `<li>` is ever emitted
      here) crowd out real matches for a given search term, fewer than 4
      real results left 1-3 blank, reserved-but-empty columns sitting next
      to the lone real card. Same underlying cause, same fix, as
      sections/veya-featured-products.liquid's own carousel. Flex only
      ever lays out children that actually exist, so a short result list
      just ends after its last real card instead of leaving gaps. */
    .veya-search-panel__products-grid {
      display: flex;
      gap: 32px 24px;
      overflow-x: visible;
      scroll-snap-type: none;
    }

    .veya-search-panel__products-grid > li {
      /* Fixed width matching what a 4-column `repeat(4, minmax(0, 1fr))`
        share would compute to at this same 24px gap — visually identical
        to before whenever there really are 4 results; the difference only
        shows up when there are fewer. */
      flex: 0 0 calc((100% - 3 * 24px) / 4);
      scroll-snap-align: none;
    }
  }

  .veya-search-panel__products-grid {
    --product-card-image-height-mobile: 300px;
    --product-card-image-height-tablet: 310px;
    --product-card-image-height-desktop: 340px;
  }
/* END_SNIPPET:veya-search-panel */

/* START_SNIPPET:video (INDEX:281) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:282) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    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;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */