/** Shopify CDN: Minification failed

Line 7387:69 Unexpected "*"
Line 7392:67 Unterminated string token
Line 7393:69 Unterminated string token

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-links (INDEX:2) */
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:8) */
.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:9) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-foreground-muted);

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

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

  .utilities > * {
    text-align: center;

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

  /* 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:10) */
.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:11) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
    overflow: hidden;
  }

  /* Keep the announcement content centred against the full browser width.
     The section may still use the page-width setting, but the slider itself
     spans the complete announcement row. */
  .announcement-bar > .announcement-bar__slider {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    position: relative;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    box-sizing: border-box;
    padding-inline: var(--page-margin);
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] minmax(0, 1fr);
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: min(680px, calc(100% - (var(--button-size) * 2)));
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
    width: 100%;
    min-width: 0;
  }

  .announcement-bar__slide {
    width: 100%;
    place-content: center;
    text-align: center;
    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__text {
    width: 100%;
    text-align: center;
  }

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

  .announcement-bar__slider slideshow-arrows {
    inset-block: 0;
    inset-inline: var(--page-margin);
    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;
    transform: none;
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

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

  @media screen and (max-width: 749px) {
    .announcement-bar > .announcement-bar__slider {
      padding-inline: var(--page-margin);
    }

    .announcement-bar__slides {
      width: calc(100% - (var(--button-size) * 2));
    }
  }
/* END_SECTION:header-announcements */

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

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    position: relative;

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

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

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

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

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

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

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

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

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

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

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

  .header__column--right {
    gap: 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) calc(var(--header-mobile-bookend) + 12px);

      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;
        /* SARKY: the right bookend is 44px wider (wishlist icon) -- nudge the logo back toward true centre when there is room */
        position: relative;
        inset-inline-start: clamp(0px, calc((100vw - 350px) / 2), 6px);
      }

      &: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) calc(var(--header-mobile-bookend) + 12px);

    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;
      position: relative;
      inset-inline-start: clamp(0px, calc((100vw - 350px) / 2), 6px);
    }

    &: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);
  }

  /* SARKY adjustable main header height */
  .header__row--top .header__columns {
    min-height: var(--sarky-header-height-mobile);
    height: var(--sarky-header-height-mobile);
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header__row--top .header__columns {
      min-height: var(--sarky-header-height-desktop);
      height: var(--sarky-header-height-desktop);
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* ================================
   * SARKY dedicated mobile search row (homepage only)
   * ================================ */
  .sarky-header-search-row {
    padding: 8px clamp(12px, 4vw, 32px) 12px;
    max-height: 56px;
    opacity: 1;
    overflow: hidden;
    transition:
      max-height var(--animation-speed-slow) var(--ease-out-cubic),
      padding-block var(--animation-speed-slow) var(--ease-out-cubic),
      opacity var(--animation-speed) var(--animation-easing);
  }

  /* Collapses away with the header's own scrolled/opaque state instead
     of staying visible while scrolling through the page. Keyed off
     #header-group's data-sarky attribute - the site's existing, already-
     proven header transparent/white controller (see
     sections/header-announcements.liquid), NOT Horizon's own
     enable_sticky_header/data-sticky-state (deliberately left at "never"
     in sections/header-group.json - running both at once broke the
     transparent state entirely, see that file's doc comment). No new
     scroll listener - this reuses the one that already exists.
     padding-block is explicitly zeroed alongside max-height so a
     collapsed row can never leave a residual band of vertical padding
     behind (max-height alone constrains the content box, not the extra
     space padding would otherwise still request). */
  #header-group:not([data-sarky='top']) .sarky-header-search-row {
    max-height: 0;
    padding-block: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* Undo the compact inline-action margins that snippets/search.liquid's
     own .search-action rules assume - this is a full-width row, not a
     small icon in a column. Width itself is set alongside the component's
     other sizing in snippets/sarky-header-search.liquid. */
  .sarky-header-search--row.search-action {
    margin-inline: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .sarky-header-search-row {
      transition: none;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:13) */
.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;
    --hero-mobile-extra: 0px;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset) + var(--hero-mobile-extra));
  }

  /*
   * Homepage only: the product rail directly below the hero (see
   * sections/sarky-product-rail.liquid) renders cards at a real,
   * measurable mobile width of calc((100vw - 6px) / 1.6) with a fixed
   * 3:4 photo aspect-ratio (snippets/sarky-rail-product-card.liquid,
   * .sarky-rail-card__media). Pushing the first product row down by
   * "about half a visible product photo height" is therefore derived
   * from that real card geometry (card width x 4/3 aspect / 2), not a
   * separate hardcoded pixel guess -- so it keeps tracking the actual
   * rendered card size if that width or ratio ever changes.
   */
  @media screen and (max-width: 749px) {
    .hero--sarky-homepage-mobile-taller {
      --hero-mobile-extra: calc((100vw - 6px) / 1.6 * 4 / 3 / 2);
    }
  }

  .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:14) */
.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:15) */
.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:17) */
.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:18) */
/**
   * 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);
  }

  /**
   * 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:19) */
.sarky-cart-fallback {
    border-bottom: 1px solid var(--sarky-cart-fallback-border);
  }

  .sarky-cart-fallback__inner {
    width: min(100%, var(--sarky-cart-fallback-max-width));
    margin-inline: auto;
    padding: var(--sarky-cart-fallback-top) var(--sarky-cart-fallback-side)
      var(--sarky-cart-fallback-bottom);
  }

  .sarky-cart-fallback__button {
    display: flex;
    width: 100%;
    height: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 1px solid var(--sarky-cart-fallback-button-bg);
    border-radius: 0;
    background: var(--sarky-cart-fallback-button-bg);
    color: var(--sarky-cart-fallback-button-text);
    font-family: var(--font-body--family);
    font-size: var(--sarky-cart-fallback-button-size);
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: opacity 160ms ease;
  }

  .sarky-cart-fallback__button:hover {
    opacity: 0.86;
  }

  .sarky-cart-fallback__empty {
    display: grid;
    gap: 22px;
    justify-items: center;
    text-align: center;
  }

  .sarky-cart-fallback__empty-heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 400;
    line-height: 1;
  }

  .sarky-cart-fallback__empty-text {
    max-width: 560px;
    font-size: 16px;
    line-height: 1.5;
  }

  @media screen and (max-width: 749px) {
    .sarky-cart-fallback__inner {
      padding: 42px 24px 24px;
    }

    .sarky-cart-fallback__button {
      height: 46px;
      min-height: 46px;
      padding-inline: 10px;
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:21) */
.sarky-collection-campaign {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: var(--campaign-height-mobile);
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .sarky-collection-campaign--framed {
    width: 100%;
  }

  .sarky-collection-campaign__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: var(--campaign-text);
    text-decoration: none;
  }

  .sarky-collection-campaign picture,
  .sarky-collection-campaign__image,
  .sarky-collection-campaign__placeholder {
    display: block;
    width: 100%;
    height: 100%;
  }

  .sarky-collection-campaign__image {
    object-fit: cover;
    object-position: var(--campaign-position-x-mobile) var(--campaign-position-y-mobile);
  }

  .sarky-collection-campaign__placeholder {
    background: #f1edec;
  }

  .sarky-collection-campaign__overlay {
    position: absolute;
    inset: 0;
    background: var(--campaign-overlay);
  }

  .sarky-collection-campaign__content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--campaign-content-padding-mobile);
    text-align: center;
  }

  .sarky-collection-campaign__content strong {
    font-family: var(--font-heading--family);
    font-size: var(--campaign-heading-mobile);
    font-weight: 500;
    line-height: 1.05;
  }

  .sarky-collection-campaign__content span {
    font-size: 12px;
    line-height: 1.35;
  }

  .sarky-collection-wrapper {
    width: 100%;
    min-width: 0;
  }

  /*
    The outer wrapper controls the actual collection width.
    Page width = the centre column of Horizon's section grid.
    Full width = the full viewport grid. Children then fill that wrapper.
  */
  .sarky-collection-section > .sarky-collection-wrapper--centered {
    grid-column: 1 / -1 !important;
    width: min(100%, var(--sarky-collection-page-width));
    max-width: var(--sarky-collection-page-width);
    margin-inline: auto;
  }

  .sarky-collection-section > .sarky-collection-wrapper--full-width {
    grid-column: 1 / -1 !important;
  }

  .sarky-collection-wrapper > .facets-block-wrapper,
  .sarky-collection-wrapper > .sarky-collection-links,
  .sarky-collection-wrapper > .main-collection-grid {
    grid-column: var(--full-width) !important;
    width: 100%;
    min-width: 0;
    padding-inline: var(--sarky-content-side-mobile) !important;
  }

  @media screen and (max-width: 749px) {
    .sarky-collection-section > .sarky-collection-wrapper--centered,
    .sarky-collection-section > .sarky-collection-wrapper--full-width,
    .sarky-collection-section > .sarky-collection-wrapper--mobile-full {
      grid-column: 1 / -1 !important;
      width: 100% !important;
      max-width: none !important;
      margin-inline: 0 !important;
    }

    .sarky-collection-wrapper > .facets-block-wrapper,
    .sarky-collection-wrapper > .sarky-collection-links,
    .sarky-collection-wrapper > .main-collection-grid {
      width: 100% !important;
      padding-inline: var(--sarky-content-side-mobile) !important;
    }
  }

  .sarky-collection-section .facets:not(.facets--drawer) {
    padding-inline: 0 !important;
  }

  .sarky-collection-links {
    overflow: hidden;
    color: var(--links-text);
    background: var(--links-bg);
    border-bottom: 0;
  }

  .sarky-collection-links__chips {
    display: flex;
    gap: var(--chip-gap);
    width: 100%;
    padding: 10px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
  }

  .sarky-collection-links__chips::-webkit-scrollbar {
    display: none;
  }

  .sarky-collection-links__chip {
    flex: 0 0 auto;
    min-height: var(--chip-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 14px;
    border: var(--chip-border-width, 1px) solid var(--links-border);
    background: var(--chip-bg);
    color: var(--chip-text);
    font-size: var(--chip-font-size);
    font-weight: var(--chip-font-weight);
    letter-spacing: var(--chip-letter-spacing);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: center;
  }

  .sarky-collection-links__chip.is-active {
    border-color: var(--chip-active-bg);
    background: var(--chip-active-bg);
    color: var(--chip-active-text);
  }

  @media screen and (min-width: 750px) {
    /* Billy's correction: this used to also reset .is-active back to the
       plain look on desktop (leaving the real selected collection - e.g.
       Tops on /collections/tops - only black on :hover, never at rest),
       so the actual selected state never showed. Scoped to the bare
       .sarky-collection-links__chip selector only now - the higher-
       specificity .is-active rule declared above (outside this media
       query, so it already applies at every width) wins here on its own
       for the genuinely active chip; this rule still governs every
       non-active chip's plain resting look. */
    .sarky-collection-links__chip {
      border-color: var(--links-border);
      background: var(--chip-bg);
      color: var(--chip-text);
    }

    .sarky-collection-links__chip:hover,
    .sarky-collection-links__chip:focus-visible {
      border-color: var(--chip-active-bg);
      background: var(--chip-active-bg);
      color: var(--chip-active-text);
    }
  }

  .sarky-collection-links__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 0;
    padding: var(--sarky-breadcrumb-gap-above-mobile) 0 var(--sarky-breadcrumb-gap-below-mobile);
    font-size: var(--sarky-breadcrumb-font-size-mobile);
    font-weight: var(--sarky-breadcrumb-font-weight);
    letter-spacing: var(--sarky-breadcrumb-letter-spacing);
    line-height: 1.2;
    text-transform: uppercase;
  }

  .sarky-collection-links__breadcrumbs a {
    color: inherit;
    opacity: 0.55;
    text-decoration: none;
  }

  .sarky-collection-links__breadcrumbs strong {
    font-weight: var(--sarky-breadcrumb-font-weight);
  }

  .sarky-collection-section .main-collection-grid {
    border-top: 0 !important;
  }

  .sarky-collection-section--fixed-ratio .main-collection-grid .card-gallery {
    --gallery-aspect-ratio: var(--sarky-product-image-ratio-mobile) !important;
  }

  @media screen and (min-width: 750px) {
    .sarky-collection-campaign {
      width: var(--sarky-collection-page-width);
      max-width: var(--sarky-collection-page-width);
      margin-inline: auto;
    }

    .sarky-collection-campaign__image {
      object-position: var(--campaign-position-x-desktop) var(--campaign-position-y-desktop);
    }

    .sarky-collection-campaign__content {
      padding: var(--campaign-content-padding-desktop);
    }

    .sarky-collection-section--fixed-ratio .main-collection-grid .card-gallery {
      --gallery-aspect-ratio: var(--sarky-product-image-ratio-desktop) !important;
    }
    .sarky-collection-campaign {
      height: var(--campaign-height-desktop);
    }

    .sarky-collection-campaign__content strong {
      font-size: var(--campaign-heading-desktop);
    }

    .sarky-collection-campaign__content span {
      font-size: 13px;
    }

    .sarky-collection-section > .sarky-collection-wrapper--centered {
      grid-column: 1 / -1 !important;
      width: min(100%, var(--sarky-collection-page-width));
      max-width: var(--sarky-collection-page-width);
      margin-inline: auto;
    }

    .sarky-collection-section > .sarky-collection-wrapper--full-width {
      grid-column: 1 / -1 !important;
    }

    .sarky-collection-wrapper > .facets-block-wrapper,
    .sarky-collection-wrapper > .sarky-collection-links,
    .sarky-collection-wrapper > .main-collection-grid {
      grid-column: var(--full-width) !important;
      width: 100%;
      padding-inline: 0 !important;
    }

    .sarky-collection-links__chips {
      padding: 12px 0 8px;
    }

    .sarky-collection-links__breadcrumbs {
      padding:
        var(--sarky-breadcrumb-gap-above-desktop)
        0
        var(--sarky-breadcrumb-gap-below-desktop)
        var(--sarky-toolbar-left-inset-desktop);
      font-size: var(--sarky-breadcrumb-font-size-desktop);
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:marquee (INDEX:23) */
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:24) */
.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:25) */
.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-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

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

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

/* START_SECTION:product-hotspots (INDEX:29) */
/* 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(--color-foreground);
      background-color: 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:30) */
.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);
  }

  /* SARKY: only rendered when no variant resolves yet (current_variant
     blank) -- a real, tappable call to action, not a static label, so it
     needs its own reset from the default <button> chrome. Sized/colored to
     read identically to the plain-text variant summary it replaces. */
  .sarky-sticky-select-size {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .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) {
    /* SARKY: the native IntersectionObserver-driven sticky bar proved
       unreliable on real iPhones (barely/inconsistently appeared) --
       snippets/sarky-mobile-purchase-bar.liquid replaces it as the
       deterministic mobile purchase bar. Hidden here, not removed: the
       underlying component/JS stays intact for desktop and any other
       surface that still relies on it (see .sarky-mobile-bar's own
       desktop display:none for the reverse side of this split), and
       exactly one purchase bar is ever visible on mobile at a time. */
    .sticky-add-to-cart__bar {
      display: none !important;
    }

    .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:33) */
.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:sarky-coll-nav (INDEX:36) */
.sarky-collection-navigation {
    width: 100%;
    overflow: hidden;
    background: var(--sarky-collection-bg);
    color: var(--sarky-collection-text);
  }

  .sarky-collection-navigation__banner {
    position: relative;
    display: block;
    width: 100%;
    height: var(--sarky-banner-height-desktop, 180px);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
  }

  .sarky-collection-navigation__banner--static {
    cursor: default;
  }

  .sarky-collection-navigation__banner picture,
  .sarky-collection-navigation__banner-image,
  .sarky-collection-navigation__banner-placeholder {
    display: block;
    width: 100%;
    height: 100%;
  }

  .sarky-collection-navigation__banner-image {
    object-fit: cover;
    object-position: var(--sarky-banner-position-desktop, center);
  }

  .sarky-collection-navigation__banner-placeholder {
    background: #f1edec;
  }

  .sarky-collection-navigation__banner-overlay {
    position: absolute;
    inset: 0;
    background: var(--sarky-banner-overlay, transparent);
    opacity: var(--sarky-banner-overlay-opacity, 0);
    pointer-events: none;
  }

  .sarky-collection-navigation__banner-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: var(--sarky-banner-align, center);
    justify-content: center;
    gap: 3px;
    padding: 20px;
    color: var(--sarky-banner-text, #ffffff);
    text-align: var(--sarky-banner-text-align, center);
    z-index: 1;
  }

  .sarky-collection-navigation__banner-content strong {
    font-size: var(--sarky-banner-heading-size, 28px);
    line-height: 1.05;
    font-weight: 600;
  }

  .sarky-collection-navigation__banner-content span {
    font-size: var(--sarky-banner-copy-size, 13px);
    line-height: 1.3;
  }

  .sarky-collection-navigation__inner {
    padding: 14px var(--sarky-collection-side-desktop) 12px;
  }

  .sarky-collection-navigation__chips {
    display: flex;
    gap: var(--sarky-collection-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
  }

  .sarky-collection-navigation__chips::-webkit-scrollbar {
    display: none;
  }

  .sarky-collection-navigation__chip {
    box-sizing: border-box;
    flex: 0 0 auto;
    height: var(--sarky-collection-chip-height);
    min-height: var(--sarky-collection-chip-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--sarky-collection-border);
    background: var(--sarky-collection-chip-bg);
    color: var(--sarky-collection-chip-text);
    font-size: var(--sarky-collection-chip-size);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  }

  .sarky-collection-navigation__chip:hover,
  .sarky-collection-navigation__chip.is-active {
    background: var(--sarky-collection-chip-active-bg);
    color: var(--sarky-collection-chip-active-text);
    border-color: var(--sarky-collection-chip-active-bg);
  }

  .sarky-collection-navigation__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 11px;
    font-size: 12px;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .sarky-collection-navigation__breadcrumbs a {
    color: rgb(var(--color-foreground-rgb) / 0.45);
    text-decoration: none;
  }

  .sarky-collection-navigation__breadcrumbs span:last-child {
    font-weight: 600;
  }

  @media screen and (max-width: 749px) {
    .sarky-collection-navigation__banner {
      height: var(--sarky-banner-height-mobile, 120px);
    }

    .sarky-collection-navigation__banner-image {
      object-position: var(--sarky-banner-position-mobile, center);
    }

    .sarky-collection-navigation__banner-content strong {
      font-size: var(--sarky-banner-heading-size-mobile, 22px);
    }

    .sarky-collection-navigation__banner-content span {
      font-size: var(--sarky-banner-copy-size-mobile, 12px);
    }

    .sarky-collection-navigation__inner {
      padding: 12px var(--sarky-collection-side-mobile) 10px;
    }

    .sarky-collection-navigation__chip {
      padding-inline: 12px;
    }
  }
/* END_SECTION:sarky-coll-nav */

/* START_SECTION:sarky-collection-header (INDEX:37) */
.sarky-collection-header {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid var(--sarky-collection-border-color);
  }

  .sarky-collection-header--plain {
    background: var(--sarky-collection-plain-bg);
    color: var(--sarky-collection-plain-text);
  }

  .sarky-collection-header--with-image {
    min-height: var(--sarky-collection-height-mobile);
    color: var(--sarky-collection-image-text);
  }

  .sarky-collection-header__media,
  .sarky-collection-header__overlay {
    position: absolute;
    inset: 0;
  }

  .sarky-collection-header__media {
    z-index: -2;
    display: block;
  }

  .sarky-collection-header__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--sarky-collection-position-mobile);
  }

  .sarky-collection-header__overlay {
    z-index: -1;
    background: var(--sarky-collection-overlay);
    opacity: var(--sarky-collection-overlay-opacity);
  }

  .sarky-collection-header__inner {
    width: min(100%, calc(var(--sarky-collection-content-width) + (var(--sarky-collection-padding-mobile) * 2)));
    min-height: inherit;
    margin-inline: auto;
    padding: 42px var(--sarky-collection-padding-mobile);
    display: flex;
    align-items: center;
  }

  .sarky-collection-header__content {
    width: 100%;
    max-width: var(--sarky-collection-content-width);
    display: flex;
    flex-direction: column;
    gap: var(--sarky-collection-gap);
  }

  .sarky-collection-header--align-left .sarky-collection-header__content {
    align-items: flex-start;
    text-align: left;
    margin-right: auto;
  }

  .sarky-collection-header--align-center .sarky-collection-header__content {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .sarky-collection-header--align-right .sarky-collection-header__content {
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
  }

  .sarky-collection-header__breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-body--family), Arial, sans-serif;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.78;
  }

  .sarky-collection-header__breadcrumbs a {
    color: inherit;
    text-decoration: none;
  }

  .sarky-collection-header__eyebrow,
  .sarky-collection-header__count {
    margin: 0;
    font-family: var(--font-body--family), Arial, sans-serif;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .sarky-collection-header__count {
    letter-spacing: 0.08em;
    opacity: 0.78;
  }

  .sarky-collection-header__title {
    margin: 0;
    color: inherit;
    font-family: var(--sarky-collection-title-font);
    font-size: var(--sarky-collection-title-size-mobile);
    font-weight: var(--sarky-collection-title-weight);
    line-height: 0.98;
    letter-spacing: var(--sarky-collection-title-spacing);
  }

  .sarky-collection-header__description {
    max-width: 680px;
    color: inherit;
    font-family: var(--font-body--family), Arial, sans-serif;
    font-size: var(--sarky-collection-description-size-mobile);
    line-height: 1.55;
    opacity: 0.88;
  }

  .sarky-collection-header__description > * {
    margin-block: 0;
  }

  @media screen and (min-width: 750px) {
    .sarky-collection-header--with-image {
      min-height: var(--sarky-collection-height-desktop);
    }

    .sarky-collection-header__image {
      object-position: var(--sarky-collection-position-desktop);
    }

    .sarky-collection-header__inner {
      width: min(100%, calc(var(--sarky-collection-content-width) + (var(--sarky-collection-padding-desktop) * 2)));
      padding: 64px var(--sarky-collection-padding-desktop);
    }

    .sarky-collection-header__title {
      font-size: var(--sarky-collection-title-size-desktop);
    }

    .sarky-collection-header__description {
      font-size: var(--sarky-collection-description-size-desktop);
    }
  }
/* END_SECTION:sarky-collection-header */

/* START_SECTION:sarky-footer (INDEX:39) */
.sarky-footer,
  .sarky-footer * {
    box-sizing: border-box;
  }

  .sarky-footer {
    width: 100%;
    color: var(--sf-text);
    font-family: var(--font-body--family, Arial, sans-serif);
    overflow: hidden;
  }

  .sarky-footer a {
    color: inherit;
    text-decoration: none;
  }

  .sarky-footer__main {
    background: var(--sf-bg);
  }

  .sarky-footer__inner,
  .sarky-footer__bottom-inner {
    width: min(100%, calc(var(--sf-max-width) + (var(--sf-side-desktop) * 2)));
    margin-inline: auto;
    padding-inline: var(--sf-side-desktop);
  }

  .sarky-footer__inner {
    padding-top: var(--sf-top-desktop);
    padding-bottom: var(--sf-bottom-desktop);
  }

  .sarky-footer__newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.85fr);
    align-items: end;
    gap: var(--sf-newsletter-column-gap-desktop);
  }

  .sarky-footer__eyebrow {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .sarky-footer__title {
    max-width: 780px;
    margin: 0;
    color: var(--sf-text);
    font-family: var(--font-heading--family, Georgia, serif);
    font-size: var(--sf-title-desktop);
    font-style: var(--font-heading--style, normal);
    font-weight: var(--font-heading--weight, 400);
    line-height: 0.98;
    letter-spacing: -0.025em;
  }

  .sarky-footer__newsletter-text {
    max-width: 620px;
    margin-top: 18px;
    color: var(--sf-muted);
    font-size: var(--sf-body-size);
    line-height: 1.55;
  }

  .sarky-footer__newsletter-text > *:first-child,
  .sarky-footer__brand-text > *:first-child,
  .sarky-footer__note > *:first-child {
    margin-top: 0;
  }

  .sarky-footer__newsletter-text > *:last-child,
  .sarky-footer__brand-text > *:last-child,
  .sarky-footer__note > *:last-child {
    margin-bottom: 0;
  }

  .sarky-footer__field-row {
    min-height: var(--sf-field-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    background: var(--sf-field-bg);
    border: 1px solid var(--sf-line);
  }

  .sarky-footer__email {
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 20px;
    color: var(--sf-text);
    font: inherit;
    font-size: 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
  }

  .sarky-footer__email::placeholder {
    color: var(--sf-muted);
    opacity: 1;
  }

  .sarky-footer__email:focus-visible {
    outline: 1px solid var(--sf-text);
    outline-offset: -3px;
  }

  .sarky-footer__submit {
    min-width: 150px;
    min-height: var(--sf-field-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 24px;
    color: var(--sf-button-text);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--sf-button-bg);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: opacity 180ms ease;
  }

  .sarky-footer__submit:hover {
    opacity: 0.82;
  }

  .sarky-footer__submit svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .sarky-footer__note {
    margin-top: 11px;
    color: var(--sf-muted);
    font-size: 10px;
    line-height: 1.5;
  }

  .sarky-footer__note a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .sarky-footer__form-message {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.4;
  }

  .sarky-footer__form-message--error {
    color: #b42318;
  }

  .sarky-footer__form-message--success {
    color: var(--sf-text);
  }

  .sarky-footer__divider {
    width: 100%;
    height: 1px;
    margin-block: var(--sf-section-gap-desktop);
    background: var(--sf-line);
  }

  .sarky-footer__content {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) minmax(0, 2fr);
    gap: var(--sf-content-column-gap-desktop);
    align-items: start;
  }

  .sarky-footer__brand {
    max-width: 420px;
  }

  .sarky-footer__logo {
    display: block;
    width: min(100%, var(--sf-logo-desktop));
    height: auto;
  }

  .sarky-footer__brand-name {
    font-family: var(--font-heading--family, Georgia, serif);
    font-size: clamp(36px, 4vw, 64px);
    font-style: var(--font-heading--style, normal);
    font-weight: var(--font-heading--weight, 400);
    line-height: 0.9;
    letter-spacing: -0.04em;
  }

  .sarky-footer__brand-text {
    max-width: 350px;
    margin-top: 22px;
    color: var(--sf-muted);
    font-size: var(--sf-body-size);
    line-height: 1.55;
  }

  .sarky-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
  }

  .sarky-footer__socials a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sf-line);
    border-radius: 50%;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
  }

  .sarky-footer__socials a:hover {
    color: var(--sf-bg);
    background: var(--sf-text);
    border-color: var(--sf-text);
  }

  .sarky-footer__socials svg {
    width: 18px;
    height: 18px;
  }

  .sarky-footer__menus-desktop {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: var(--sf-menu-column-gap-desktop);
  }

  .sarky-footer__menu-heading {
    margin: 0 0 22px;
    color: var(--sf-text);
    font-family: var(--font-body--family, Arial, sans-serif);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .sarky-footer__menu-list,
  .sarky-footer__accordion-list,
  .sarky-footer__payments {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sarky-footer__menu-list {
    display: grid;
    gap: 13px;
  }

  .sarky-footer__menu-list a {
    position: relative;
    display: inline-block;
    color: var(--sf-muted);
    font-size: var(--sf-menu-size);
    line-height: 1.4;
  }

  .sarky-footer__menu-list a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transition: right 180ms ease;
  }

  .sarky-footer__menu-list a:hover {
    color: var(--sf-text);
  }

  .sarky-footer__menu-list a:hover::after {
    right: 0;
  }

  .sarky-footer__menus-mobile {
    display: none;
  }

  .sarky-footer__utility-row {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: var(--sf-utility-top-gap-desktop);
    padding-top: 22px;
    border-top: 1px solid var(--sf-line);
  }

  .sarky-footer__localization {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .sarky-footer__localization select {
    max-width: 230px;
    height: 38px;
    padding: 0 32px 0 12px;
    color: var(--sf-text);
    font: inherit;
    font-size: 11px;
    background-color: transparent;
    border: 1px solid var(--sf-line);
    border-radius: 0;
  }

  .sarky-footer__payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .sarky-footer__payments li {
    display: flex;
    align-items: center;
  }

  .sarky-footer__payments svg {
    width: 36px;
    height: auto;
  }

  .sarky-footer__wordmark {
    width: 100%;
    margin-top: clamp(44px, 6vw, 78px);
    overflow: hidden;
    color: var(--sf-text);
    font-family: var(--font-heading--family, Georgia, serif);
    font-size: var(--sf-wordmark-desktop);
    font-style: var(--font-heading--style, normal);
    font-weight: var(--font-heading--weight, 400);
    line-height: 0.72;
    letter-spacing: -0.055em;
    white-space: nowrap;
    text-align: center;
  }

  .sarky-footer__bottom {
    color: var(--sf-bottom-text);
    background: var(--sf-bottom-bg);
  }

  .sarky-footer__bottom-inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 14px;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .sarky-footer__policies {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 20px;
  }

  .sarky-footer__policies a {
    opacity: 0.74;
    transition: opacity 180ms ease;
  }

  .sarky-footer__policies a:hover {
    opacity: 1;
  }

  @media screen and (max-width: 989px) {
    .sarky-footer__newsletter {
      grid-template-columns: 1fr;
      gap: 34px;
    }

    .sarky-footer__content {
      grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.4fr);
      gap: 48px;
    }

    .sarky-footer__menus-desktop {
      grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
  }

  @media screen and (max-width: 749px) {
    .sarky-footer__inner,
    .sarky-footer__bottom-inner {
      width: 100%;
      padding-inline: var(--sf-side-mobile);
    }

    .sarky-footer__inner {
      display: flex;
      flex-direction: column;
      padding-top: var(--sf-top-mobile);
      padding-bottom: var(--sf-bottom-mobile);
    }

    .sarky-footer__newsletter {
      order: var(--sf-newsletter-order-mobile);
      gap: 26px;
    }

    .sarky-footer__eyebrow {
      margin-bottom: 11px;
      font-size: 10px;
    }

    .sarky-footer__title {
      font-size: var(--sf-title-mobile);
      line-height: 1;
    }

    .sarky-footer__newsletter-text {
      margin-top: 14px;
      font-size: 13px;
    }

    .sarky-footer__field-row {
      grid-template-columns: minmax(0, 1fr) 54px;
    }

    .sarky-footer__email {
      padding-inline: 14px;
      font-size: 13px;
    }

    .sarky-footer__submit {
      min-width: 54px;
      width: 54px;
      padding: 0;
    }

    .sarky-footer__submit span {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .sarky-footer__submit svg {
      width: 22px;
      height: 22px;
    }

    .sarky-footer__divider {
      display: none;
      margin-block: 0;
    }

    .sarky-footer__content {
      display: contents;
    }

    .sarky-footer__brand {
      order: var(--sf-brand-order-mobile);
      max-width: none;
      padding-bottom: 30px;
    }

    .sarky-footer__logo {
      width: min(100%, var(--sf-logo-mobile));
      margin: var(--sf-logo-margin-mobile);
    }

    .sarky-footer__brand-name {
      text-align: var(--sf-logo-text-align-mobile);
    }

    .sarky-footer__brand-name {
      font-size: 42px;
    }

    .sarky-footer__brand-text {
      max-width: 320px;
      margin-top: 16px;
      margin-inline: var(--sf-brand-text-margin-mobile);
      font-size: 13px;
      text-align: var(--sf-brand-text-align-mobile);
    }

    .sarky-footer__socials {
      width: 100%;
      margin-top: 20px;
      justify-content: var(--sf-social-justify-mobile);
    }

    .sarky-footer__socials a {
      width: 36px;
      height: 36px;
    }

    .sarky-footer__menus-desktop {
      display: none;
    }

    .sarky-footer__menus-mobile {
      order: var(--sf-menus-order-mobile);
      display: block;
      margin-top: 28px;
      border-top: 1px solid var(--sf-line);
    }

    .sarky-footer__accordion {
      border-bottom: 1px solid var(--sf-line);
    }

    .sarky-footer__accordion summary {
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      color: var(--sf-text);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      list-style: none;
    }

    .sarky-footer__accordion summary::-webkit-details-marker {
      display: none;
    }

    .sarky-footer__accordion-content {
      overflow: hidden;
    }

    .sarky-footer__accordion:not([open]) .sarky-footer__accordion-content {
      height: 0;
    }

    .sarky-footer__accordion.is-animating .sarky-footer__accordion-content {
      overflow: hidden;
    }

    .sarky-footer__accordion-icon {
      position: relative;
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
    }

    .sarky-footer__accordion-icon::before,
    .sarky-footer__accordion-icon::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12px;
      height: 1px;
      background: currentColor;
      transform: translate(-50%, -50%);
      transition: transform 180ms ease;
    }

    .sarky-footer__accordion-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .sarky-footer__accordion[open] .sarky-footer__accordion-icon::after {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    .sarky-footer__accordion-list {
      display: grid;
      gap: 13px;
      padding: 0 0 22px;
    }

    .sarky-footer__accordion-list a {
      color: var(--sf-muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .sarky-footer__utility-row {
      order: var(--sf-utility-order-mobile);
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 24px;
      margin-top: 26px;
      padding-top: 0;
      border-top: 0;
    }

    .sarky-footer__localization {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
    }

    .sarky-footer__localization label,
    .sarky-footer__localization select {
      width: 100%;
      max-width: none;
    }

    .sarky-footer__payments {
      width: max-content;
      max-width: 100%;
      display: grid;
      grid-template-columns: repeat(var(--sf-payment-columns-mobile), var(--sf-payment-icon-mobile));
      gap: var(--sf-payment-gap-mobile);
      align-items: center;
      justify-items: center;
      justify-self: var(--sf-payment-justify-self-mobile);
      align-self: var(--sf-payment-align-self-mobile);
      margin-inline: var(--sf-payment-margin-mobile);
    }

    .sarky-footer__payments--mobile-left {
      justify-self: start !important;
      align-self: flex-start !important;
      margin-inline: 0 auto !important;
    }

    .sarky-footer__payments--mobile-center {
      justify-self: center !important;
      align-self: center !important;
      margin-inline: auto !important;
    }

    .sarky-footer__payments--mobile-right {
      justify-self: end !important;
      align-self: flex-end !important;
      margin-inline: auto 0 !important;
    }

    .sarky-footer__payments li {
      width: var(--sf-payment-icon-mobile);
      min-width: 0;
      justify-content: center;
    }

    .sarky-footer__payments svg {
      width: min(100%, var(--sf-payment-icon-mobile));
      max-width: var(--sf-payment-icon-mobile);
    }

    .sarky-footer__wordmark {
      order: var(--sf-wordmark-order-mobile);
      margin-top: 42px;
      font-size: var(--sf-wordmark-mobile);
      line-height: 0.8;
    }

    .sarky-footer__bottom-inner {
      min-height: 0;
      display: grid;
      justify-items: start;
      gap: var(--sf-bottom-gap-mobile);
      padding-block: var(--sf-bottom-padding-mobile);
      font-size: var(--sf-bottom-font-size-mobile);
    }

    .sarky-footer__policies {
      justify-content: flex-start;
      gap: var(--sf-policy-row-gap-mobile) var(--sf-policy-column-gap-mobile);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sarky-footer a,
    .sarky-footer button,
    .sarky-footer__accordion-icon::after {
      transition: none !important;
    }
  }
/* END_SECTION:sarky-footer */

/* START_SECTION:sarky-mood-edit (INDEX:42) */
.sarky-mood-edit {
    width: 100%;
  }

  .sarky-mood-edit__width {
    margin-inline: auto;
  }

  .sarky-mood-edit__width--page-width {
    max-width: var(--page-width, 1280px);
    padding-inline: 4px;
  }

  @media screen and (min-width: 750px) {
    .sarky-mood-edit__width--page-width {
      padding-inline: 24px;
    }
  }

  .sarky-mood-edit__header {
    text-align: center;
    margin: 0 0 16px;
  }

  .sarky-mood-edit__eyebrow {
    margin: 4px 0 0;
    color: var(--color-foreground-secondary, #696461);
    font-family: var(--font-body--family);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .sarky-mood-edit__heading {
    margin: 0;
    color: var(--color-foreground);
    font-family: var(--font-heading--family);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.15;
  }

  .sarky-mood-edit__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  @media screen and (min-width: 750px) {
    .sarky-mood-edit__grid {
      gap: 16px;
    }
  }

  .sarky-mood-edit__tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 1 / 1.05;
    overflow: hidden;
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    background: #ebe7e4;
  }

  .sarky-mood-edit__media {
    position: absolute;
    inset: 0;
    display: block;
  }

  .sarky-mood-edit__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sarky-mood-edit__image--focus-top {
    object-position: center top;
  }

  .sarky-mood-edit__image--focus-bottom {
    object-position: center bottom;
  }

  .sarky-mood-edit__tile:hover .sarky-mood-edit__image {
    transform: scale(1.04);
  }

  .sarky-mood-edit__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.25) 65%, rgba(0, 0, 0, 0) 90%);
  }

  .sarky-mood-edit__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    padding: 10px;
  }

  @media screen and (min-width: 750px) {
    .sarky-mood-edit__content {
      padding: 20px;
      gap: 10px;
    }
  }

  .sarky-mood-edit__tile-heading {
    max-width: 70%;
    font-family: Didot, 'Bodoni 72', 'Times New Roman', serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.1;
  }

  @media screen and (min-width: 750px) {
    .sarky-mood-edit__tile-heading {
      font-size: 2.2rem;
    }
  }

  .sarky-mood-edit__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body--family);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
  }

  @media screen and (min-width: 750px) {
    .sarky-mood-edit__cta {
      font-size: 0.75rem;
    }
  }

  .sarky-mood-edit__cta-arrow {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
/* END_SECTION:sarky-mood-edit */

/* START_SECTION:sarky-motion-banner (INDEX:43) */
.sarky-motion-banner {
    width: 100%;
  }

  .sarky-motion-banner__width {
    margin-inline: auto;
  }

  .sarky-motion-banner__width--page-width {
    max-width: var(--page-width, 1280px);
    padding-inline: 4px;
  }

  @media screen and (min-width: 750px) {
    .sarky-motion-banner__width--page-width {
      padding-inline: 24px;
    }
  }

  .sarky-motion-banner__banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    color: #ffffff;
    background: #111111;
  }

  @media screen and (min-width: 750px) {
    .sarky-motion-banner__banner {
      aspect-ratio: 21 / 9;
    }
  }

  .sarky-motion-banner__media {
    position: absolute;
    inset: 0;
  }

  .sarky-motion-banner__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sarky-motion-banner__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 75%);
  }

  .sarky-motion-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px;
  }

  @media screen and (min-width: 750px) {
    .sarky-motion-banner__content {
      padding: 28px;
      gap: 8px;
    }
  }

  .sarky-motion-banner__eyebrow {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.15;
  }

  @media screen and (min-width: 750px) {
    .sarky-motion-banner__eyebrow {
      font-size: 1.7rem;
    }
  }

  .sarky-motion-banner__subtext {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.85;
  }

  @media screen and (min-width: 750px) {
    .sarky-motion-banner__subtext {
      font-size: 0.95rem;
    }
  }

  .sarky-motion-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 8px 16px;
    color: #111111;
    background: #ffffff;
    border-radius: 999px;
    font-family: var(--font-body--family);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
  }

  @media screen and (min-width: 750px) {
    .sarky-motion-banner__cta {
      padding: 10px 20px;
      font-size: 0.72rem;
    }
  }

  .sarky-motion-banner__cta-arrow {
    width: 11px;
    height: 11px;
  }
/* END_SECTION:sarky-motion-banner */

/* START_SECTION:sarky-product-rail (INDEX:45) */
.sarky-product-rail-section {
    padding-block-start: 18px;
    padding-block-end: 28px;
    padding-inline: 13px;
  }

  /* Controlled-by-hero instance: the hero's own bottom overlay padding
     already provides breathing room above this section, so it needs
     only a small functional gutter here, not the section's normal
     standalone top spacing - keeps the rail feeling like a continuation
     of the hero rather than a separate content block. Chained selector
     (not just the modifier class alone) so this reliably wins over the
     later min-width:750px base-padding rule regardless of source order,
     since both rules would otherwise have equal specificity. */
  .sarky-product-rail-section.sarky-product-rail-section--controlled {
    padding-block-start: 2px;
  }

  @media screen and (min-width: 750px) {
    .sarky-product-rail-section.sarky-product-rail-section--controlled {
      /* PASS 11 follow-up (Billy, this task): desktop was explicitly left
         untouched when mobile went 10px -> 6px -> 2px (see this file's
         doc comment above) - now brought into the same tightened
         hero-flows-into-rail feel, proportionally (desktop's larger
         imagery still gets a hair more than mobile's 2px). */
      padding-block-start: 4px;
    }
  }

  .sarky-product-rail-section__header {
    text-align: center;
    margin-bottom: 14px;
  }

  .sarky-product-rail-section__eyebrow {
    margin: 0 0 4px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #77716e;
  }

  .sarky-product-rail-section__heading {
    margin: 0;
    font-size: 23px;
    font-weight: 400;
    letter-spacing: -0.4px;
    line-height: 28px;
    color: #111111;
  }

  .sarky-product-rail__tabs {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sarky-product-rail__tabs::-webkit-scrollbar {
    display: none;
  }

  .sarky-product-rail__tab {
    flex: 0 0 auto;
    padding: 6px 2px 9px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #77716e;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: color 180ms ease, border-color 180ms ease;
  }

  .sarky-product-rail__tab:hover {
    color: #111111;
  }

  .sarky-product-rail__tab[aria-selected='true'] {
    color: #111111;
    border-color: #111111;
  }

  .sarky-product-rail__tab:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 2px;
  }

  /* Panels are shown/hidden by assets/sarky-product-rail.js (plain
     hidden attribute toggling) - no async loading state exists because
     every panel's products are already rendered server-side above; this
     transition is purely a cosmetic cross-fade on tab switch, not a
     loading indicator. */
  .sarky-product-rail__panel {
    animation: sarky-product-rail-fade-in 220ms ease;
  }

  @keyframes sarky-product-rail-fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .sarky-product-rail__empty {
    text-align: center;
    padding: 32px 16px;
    font-size: 10.5px;
    color: #696461;
  }

  /* Mobile: one dominant card in view with a deliberate peek of the
     next card (flex-basis in vw, not %, so the peek stays proportional
     to the viewport regardless of the section's own side padding).
     80vw + a 10px gap keeps a peek of roughly 9-12% of the viewport
     across 320/375/390/~430px, computed (not eyeballed) against the
     section's existing 13px SARKY padding on each side:
       peek = 20vw - 36px  ->  320px: ~28px, 375px: ~39px,
                                390px: ~42px, 430px: ~50px.
     scroll-snap-type: x mandatory (not proximity) so a swipe always
     lands squarely on a card. `scroll-padding-inline-start` gives a
     small (20px) reserved gap at the scrollport's start edge - once
     scrolled past the first card, that gap lets the PREVIOUS card's
     trailing edge peek through too (scroll-snap-align stays `start`,
     just anchored 20px in rather than flush at 0), matching the
     "peek on both sides mid-rail" feel Billy asked for without
     switching to a fragile center-aligned snap. */
  .sarky-product-rail__grid {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 20px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    /* PROVEN via real browser inspection (this task): this track never
       had scrollbar-hiding treatment (unlike .sarky-product-rail__tabs,
       which does) - on a platform with non-overlay scrollbars (e.g.
       Windows Chrome) this rendered as a plain grey bar directly under
       the cards - the reported "grijze streep onder de prijs". Purely
       cosmetic, no layout/geometry impact, so applied unscoped to
       benefit every rail instance, not just single-row-carousel ones. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sarky-product-rail__grid::-webkit-scrollbar {
    display: none;
  }

  .sarky-product-rail__grid > * {
    flex: 0 0 80vw;
    scroll-snap-align: start;
  }

  .sarky-product-rail__view-all {
    display: block;
    width: fit-content;
    margin: 16px auto 0;
    padding: 4px 2px;
    border-bottom: 1px solid #111111;
    color: #111111;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
  }

  /* PEPPERMAYO-FEEL PASS 5 (single-row carousel, gated by the
     `single_row_carousel` setting - see this section's doc comment).
     assets/sarky-product-rail-carousel.js drives real one-card-at-a-time
     navigation via a JS-computed centered scrollTo(); this only replaces
     the default rail's start-aligned + scroll-padding-inline-start peek
     hack with a genuine center-aligned scroll-snap fallback (no visible
     nav buttons - see PASS 7 in this section's doc comment). The
     default (non-carousel) `.sarky-product-rail__grid` rules above are
     completely untouched - only scoped, higher-specificity overrides
     are added here, so any other/future instance of this reusable
     section that doesn't enable the setting keeps its exact current
     behavior. */
  .sarky-product-rail-section--single-row .sarky-product-rail__grid {
    scroll-padding-inline-start: 0;
  }

  /* INTERACTION PASS 2 (this task): real mouse drag-to-scroll, added in
     assets/sarky-product-rail-carousel.js via Pointer Events. `grab`/
     `grabbing` matches PepperMayo's own real measured carousel CSS
     (their compiled bundle sets the exact same two cursor values on
     their track during idle vs. active drag). `user-select: none` only
     while actively dragging (`.is-dragging`, toggled by that same JS)
     so a fast drag never triggers an accidental text/image selection -
     scoped to the track only, the rest of the page is unaffected. */
  .sarky-product-rail-section--single-row .sarky-product-rail__grid {
    cursor: grab;
  }

  .sarky-product-rail-section--single-row .sarky-product-rail__grid.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  /* PEPPERMAYO-FEEL PASS 8 (proven via real Chrome measurement, this
     task - see the report for the exact numbers): card width was
     `80vw`/`22vw` - a raw VIEWPORT unit, not relative to the track's
     own real width. On mobile the two happen to coincide (the section
     has no width cap there, so container ~= viewport), but on desktop
     the section's own `100%` is silently capped to `--page-width` by
     Horizon's shared `.section` grid host (`.section > * { grid-column:
     2 }` in assets/base.css) - so a `22vw` card was sized off the full,
     UNCAPPED viewport while the track it lived in was only the capped
     ~1440px column. On a wide screen that produced exactly two
     oversized cards instead of a real multi-card row. Switched to
     `calc()` against the track's own `100%`, which is correct
     regardless of any page-width capping now or later - the same
     formula PepperMayo's own real compiled CSS uses for their
     `--slides-to-show` var, just written out with SARKY's numbers
     instead of a custom property (no build step here to feed one in).
     4.25 desktop is the real ratio documented below - see PASS 9 just
     below for why mobile is no longer a fractional slide count. */

  /* PEPPERMAYO-FEEL PASS 10 (mobile, this task - real device photo from
     Billy): back to `center`, on purpose, reversing the PASS 9 REVISED
     decision above. Seeing it live on his own iPhone, Billy asked for
     peeks on BOTH sides (not just trailing/right) so the row reads as
     genuinely continuous, and confirmed a half-visible neighbor
     title/price is fine - it doesn't need to be photo-only. The mobile
     card width uses a 1.6-slides ratio, keeping the active card prominent
     while making the cards visibly shorter and revealing more of both
     neighboring cards.
     assets/sarky-product-rail-carousel.js's targetForIndex() already
     reads each card's own computed scroll-snap-align at runtime (added
     last round specifically so CSS drives this, not a hardcoded JS
     formula), so no JS change is needed for this reversal. */
  .sarky-product-rail-section--single-row .sarky-product-rail__grid > * {
    scroll-snap-align: center;
    flex: 0 0 calc((100% - 0.6 * 2px) / 1.6);
  }

  /* Same photo: the section's normal 13px mobile side padding read as
     dead white gutters boxing the carousel in, when the goal is an
     edge-to-edge, continuously-flowing row (peeking neighbors should
     touch the screen edges, not sit behind a margin). Chained selector
     (matches this file's existing `--controlled` padding override
     convention above) so it reliably wins regardless of source order,
     and wrapped to mobile only so desktop's own 32px side padding -
     untouched, hard-locked - is completely unaffected. */
  @media screen and (max-width: 749px) {
    .sarky-product-rail-section.sarky-product-rail-section--single-row {
      padding-inline: 0;
    }
  }

  /* Found via real mobile-viewport testing (this task, finally possible
     this round): removing this section's OWN padding-inline above was
     not enough to reach the true screen edge - the auto Shopify section
     wrapper (assets/base.css `.section`) reserves an additional,
     separate `--page-margin` (measured: 16px) on EVERY device via its
     grid's own minmax margin columns, regardless of viewport width or
     this section's own padding. That's a different token from
     `--page-width` (the one the desktop-only fix further below already
     breaks out of) - `--page-margin` is a universal minimum edge gutter,
     not a max-width. `grid-column: 1 / -1` (unscoped here, so it now
     applies on mobile too, not just >=750px) spans across those margin
     columns the same way it already did for desktop's page-width cap -
     the only way to actually reach the literal screen edge, since
     nothing in this section's own CSS can override a constraint
     applied one level up by its parent grid host. */
  .sarky-product-rail-section--single-row {
    grid-column: 1 / -1;
  }

  @media screen and (min-width: 750px) {
    .sarky-product-rail-section {
      padding-block-start: 28px;
      padding-block-end: 36px;
      padding-inline: 32px;
    }

    .sarky-product-rail-section__heading {
      font-size: 31px;
      line-height: 37px;
    }

    .sarky-product-rail__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      overflow-x: visible;
    }

    .sarky-product-rail__grid > * {
      flex: initial;
    }

    /* Single-row carousel instances never take the grid conversion
       above - this selector's higher specificity (two classes) wins
       regardless of source order, so the rail stays one real horizontal
       row - now genuinely wide (see the grid-column: 1 / -1 override
       above). flex-basis is calc() against the track's own 100%, not
       vw (see PASS 8 comment above): (100% - 3.25 * 14px) / 4.25 gives
       ~4 full cards with a peek of the next, matching the real
       PepperMayo desktop ratio measured from their own compiled CSS
       (`--slides-to-show-desktop: 4.25`) - see this task's report.
       `scroll-snap-align: center` is re-asserted explicitly here rather
       than left to inherit from the mobile rule above - both happen to
       be `center` again as of PASS 10, but re-declaring it keeps
       desktop's own alignment independently correct regardless of
       whatever the mobile rule does in some future round. */
    .sarky-product-rail-section--single-row .sarky-product-rail__grid {
      /* PASS 11 follow-up (Billy, this task): desktop card gap was
         explicitly left untouched (14px) when mobile's own gap went
         10px -> 6px -> 2px (see this file's doc comment above) - tightened
         here to match, kept in lockstep with the flex-basis calc below
         exactly like the mobile pass did. */
      display: flex;
      gap: 4px;
      overflow-x: auto;
    }

    .sarky-product-rail-section--single-row .sarky-product-rail__grid > * {
      scroll-snap-align: center;
      flex: 0 0 calc((100% - 3.25 * 4px) / 4.25);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sarky-product-rail__panel {
      animation: none;
    }

    .sarky-product-rail__tab {
      transition: none;
    }
  }
/* END_SECTION:sarky-product-rail */

/* START_SECTION:search-header (INDEX:51) */
.sarky-search-page__background,
  .sarky-search-page-shell {
    background: #f1edec;
  }

  .sarky-search-page-shell .search-page__header {
    width: 100%;
    /* SEARCH RESULTS MOBILE PARITY: .section--page-width places this element
       in the stock page-grid's fixed 16px-gutter center column. Collection's
       equivalent content (main-collection.liquid) opts out of that gutter
       system entirely (grid-column: 1/-1) and applies its own tighter,
       Billy-approved inset via --sarky-content-side-mobile/desktop (4px/3px).
       Matching that here so Search's title/search-field align to the same
       content edge as Collection instead of the wider stock 16px margin. */
    grid-column: 1 / -1 !important;
    padding-inline: 3px;
  }

  .sarky-search-page__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  .sarky-search-page__title {
    margin: 0;
    color: #111111;
    font-family: Didot, 'Bodoni 72', 'Times New Roman', serif;
    font-size: clamp(38px, 4vw, 48px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .sarky-search-page__meta {
    margin: 0;
    color: #6f6865;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.09em;
  }

  @media screen and (max-width: 749px) {
    .sarky-search-page-shell .search-page__header {
      padding-block: 22px 18px !important;
      padding-inline: 4px;
    }

    .sarky-search-page__title {
      font-size: 22px;
    }

    .sarky-search-page__intro {
      gap: 7px;
    }
  }
/* END_SECTION:search-header */

/* START_SECTION:search-results (INDEX:52) */
.sarky-search-results-page {
    background: #ffffff;
  }

  /* SEARCH RESULTS MOBILE PARITY: blocks/filters.liquid (.facets-block-wrapper)
     and snippets/product-grid.liquid (.main-collection-grid) are the SAME
     shared markup Collection uses, but main-collection.liquid additionally
     wires them into a --sarky-content-side-mobile/desktop padding token
     (4px/3px, Billy-approved) via its own sarky-collection-wrapper classes.
     Search's wrapper never got those classes, so these children render with
     0 horizontal padding. Reusing Collection's exact effective values here,
     scoped to this section only, without touching Collection's own file or
     its wrapper-class system. */
  .sarky-search-results-page .collection-wrapper > .facets-block-wrapper,
  .sarky-search-results-page .collection-wrapper > .main-collection-grid {
    padding-inline: 3px !important;
  }

  @media screen and (max-width: 749px) {
    .sarky-search-results-page .collection-wrapper > .facets-block-wrapper,
    .sarky-search-results-page .collection-wrapper > .main-collection-grid {
      padding-inline: 4px !important;
    }

    .sarky-search-results-page {
      --padding-block-start: 0px !important;
    }

    .sarky-search-results-page .facets-toggle {
      min-height: 52px;
      height: 52px;
      margin: 0;
      padding: 0 16px;
      border-top: 1px solid rgb(17 17 17 / 0.1);
      border-bottom: 1px solid rgb(17 17 17 / 0.1);
      background: #ffffff;
    }

    .sarky-search-results-page .facets-toggle__wrapper {
      margin-left: 0;
    }

    .sarky-search-results-page .facets-toggle__button {
      min-height: 44px;
      gap: 8px;
      color: #111111;
      font-family: var(--font-body--family);
      font-size: 11px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .sarky-search-results-page .facets-toggle__button .svg-wrapper {
      width: 15px;
      height: 15px;
    }

    .sarky-search-results-page .facets-mobile-wrapper {
      gap: 8px;
    }

    .sarky-search-results-page .product-grid {
      --product-grid-gap: 24px 8px;
    }
  }
/* END_SECTION:search-results */

/* START_SECTION:slideshow (INDEX:55) */
.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 */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:62) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:63) */
.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:64) */
.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 .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;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:65) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  /* SARKY: article body subheadings (e.g. "1. For the Office...") inherit the
     theme's global h1-h6 preset sizes, meant for full page section titles --
     far too large for inline subheadings inside a paragraph of blog copy.
     Scoped to .blog-post-content only, so product descriptions and policy
     pages (which also use the shared .rte class) are unaffected. */
  .blog-post-content h2 {
    font-size: 1.375rem;
  }

  .blog-post-content h3 {
    font-size: 1.125rem;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:66) */
.blog-post-card__content-text a {
    color: var(--color-primary);
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:67) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    display: block;
    position: relative;
    width: var(--width);
  }

  .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:68) */
.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:69) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    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 {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      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);
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: 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;
    }
  }
/* 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;
    border-radius: var(--style-border-radius-buttons-primary);
    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 {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .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__content {
      --flex-wrap: nowrap;
    }
  }

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

  .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 {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

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

    background-color: transparent;
  }

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

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

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

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

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

    visibility: visible;
  }

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

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

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

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

    display: contents;
    white-space: normal;

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

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

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

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

  .header-menu {
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

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

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

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

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

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

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

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

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

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

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

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

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
/* END_BLOCK:_header-menu */

/* START_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-card-gallery (INDEX:101) */
.sarky-product-badges--sold-out {
    top: 6px !important;
    right: auto !important;
    bottom: auto !important;
    left: 6px !important;
  }

  .sarky-product-card-sold-out-badge {
    min-height: 19px;
    padding: 3px 6px !important;
    border: 1px solid #111111 !important;
    border-radius: 0 !important;
    background: #f1edec !important;
    color: #111111 !important;
    font-family: var(--font-body--family) !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase !important;
    white-space: nowrap;
  }

  .sarky-product-card-sale-badge {
    min-height: var(--sarky-sale-badge-height, 28px);
    padding-block: var(--sarky-sale-badge-padding-y, 4px) !important;
    padding-inline: var(--sarky-sale-badge-padding-x, 9px) !important;
    color: var(--sarky-sale-badge-text, #ffffff) !important;
    background: var(--sarky-sale-badge-background, #d00000) !important;
    border: 0 !important;
    border-radius: var(--sarky-sale-badge-radius, 0px) !important;
    font-size: var(--sarky-sale-badge-font-size, 13px) !important;
    font-weight: var(--sarky-sale-badge-font-weight, 500) !important;
    line-height: 1 !important;
  }
/* END_BLOCK:_product-card-gallery */

/* START_BLOCK:_product-details (INDEX:104) */
@media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title,
  .view-more-details__wrapper {
    display: none;
  }

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

  /* SARKY: real flex row for the PDP title + wishlist heart -- title/price/
     buy-buttons group takes all remaining width, heart is a fixed-size
     sibling pinned to the top-right (flex-start), never absolute/overlay.
     Only wraps the group on the real PDP (see the Liquid above); the
     quick-add modal keeps rendering the bare group with no row wrapper. */
  .sarky-pdp-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .sarky-pdp-title-row > .group-block {
    flex: 1 1 auto;
    min-width: 0;
  }

  .product-details .accordion details > summary,
  .product-details details > summary,
  .product-details summary.accordion__summary {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .product-details .accordion details > summary > svg,
  .product-details .accordion details > summary > .svg-wrapper,
  .product-details .accordion details > summary > .icon,
  .product-details .accordion details > summary > .accordion__icon,
  .product-details details > summary > svg,
  .product-details details > summary > .svg-wrapper,
  .product-details details > summary > .icon,
  .product-details details > summary > .accordion__icon,
  .product-details summary.accordion__summary > svg,
  .product-details summary.accordion__summary > .svg-wrapper,
  .product-details summary.accordion__summary > .icon,
  .product-details summary.accordion__summary > .accordion__icon {
    order: -1 !important;
    margin: 0 8px 0 0 !important;
    flex: 0 0 auto !important;
  }

  .product-details .accordion details > summary::after,
  .product-details details > summary::after,
  .product-details summary.accordion__summary::after {
    order: -1 !important;
    margin: 0 8px 0 0 !important;
  }

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

  @media screen and (max-width: 749px) {
    .product-details buy-buttons-component,
    .product-details .buy-buttons,
    .product-details [data-testid="buy-buttons"],
    .product-details product-form-component,
    .product-details .shopify-block:has(> buy-buttons-component),
    .product-details .shopify-block:has(> product-form-component),
    .product-details .group-block:has(> buy-buttons-component),
    .product-details .group-block:has(> product-form-component) {
      display: none !important;
      height: 0 !important;
      min-height: 0 !important;
      max-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    .product-details .sarky-product-usps {
      margin-top: 0 !important;
    }

    .product-details .sarky-product-usps,
    .product-details .sarky-product-usps + * {
      clear: both !important;
    }
  }
/* 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));
    }
  }

  .sarky-search-page__animate {
    display: block;
    width: 100%;
    max-width: var(--size-style-width);
  }

  .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 RESULTS X-ICON FIX: two concrete, provable bugs made this
     button's icon read as a small, off-center "floating glyph" (Billy's
     physical-iPhone report) - neither was a device-only rendering quirk:
     1) `top: auto` on an absolutely-positioned flex child relies on the
        parent's `align-items: center` to supply its static position,
        which the search overlay's own already-proven reset button
        (snippets/search-modal.liquid .predictive-search__reset-button)
        explicitly avoids in favor of `top: 50%; transform: translateY(-50%)`
        for exactly this reason. Matched that proven technique here.
     2) .search__reset-button-icon (15x15px, see the scoped rule below)
        is a normal in-flow child of .search__reset-button (24px desktop,
        36px mobile - also below), but .search__reset-button itself had
        no `display: flex` to center a smaller child inside a larger box,
        so the icon rendered pinned to the box's top-left corner instead
        of centered. The overlay's own reset button already has
        `display: flex; align-items: center; justify-content: center`
        for this same reason - added here too. */
  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 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    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;
  }

  .sarky-search-page-shell .sarky-search-page__animate {
    max-width: min(100%, 620px);
  }

  .sarky-search-page-shell search-page-input-component {
    height: 44px;
    max-width: 100%;
    margin: 22px 0 0;
    overflow: hidden;
    border: 1px solid rgb(17 17 17 / 0.18);
    border-radius: 5px;
    background: #ffffff;
    box-shadow: none;
  }

  .sarky-search-page-shell .search-page-input {
    height: 100%;
    padding-block: 0;
    padding-inline: 42px 48px;
    border: 0;
    border-radius: 5px;
    background: transparent !important;
    appearance: none;
    -webkit-appearance: none;
    color: #111111;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: none;
    outline: none;
    box-shadow: none;
  }

  .sarky-search-page-shell .search-page-input:hover,
  .sarky-search-page-shell .search-page-input:focus,
  .sarky-search-page-shell .search-page-input:focus-visible {
    background: transparent !important;
    outline: none;
    box-shadow: none;
  }

  .sarky-search-page-shell search-page-input-component:focus-within {
    border-color: rgb(17 17 17 / 0.36);
    outline: none;
    box-shadow: none;
  }

  .sarky-search-page-shell search-page-input-component .search__icon {
    left: 14px;
    width: 15px;
    height: 15px;
    color: #111111;
  }

  .sarky-search-page-shell search-page-input-component .search__icon svg {
    width: 15px;
    height: 15px;
  }

  .sarky-search-page-shell search-page-input-component .search__reset-button {
    right: 12px;
    width: 24px;
    height: 24px;
    color: #111111;
  }

  .sarky-search-page-shell search-page-input-component .search__reset-button-icon,
  .sarky-search-page-shell search-page-input-component .search__reset-button-icon svg {
    width: 15px;
    height: 15px;
  }

  .sarky-search-page-shell search-page-input-component .sarky-animated-search__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding-inline: 42px 48px;
    pointer-events: none;
    color: #4f4a48;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
  }

  .sarky-search-page-shell search-page-input-component .sarky-animated-search__overlay[hidden] {
    display: none;
  }

  .sarky-search-page-shell search-page-input-component:has(.search-page-input:focus)
    .sarky-animated-search__overlay {
    display: none;
  }

  /* SEARCH RESULTS MOBILE PARITY: the previous mobile rule rendered the
     real <input> at 48px/16px (needed so iOS Safari's own "don't zoom on
     focus" heuristic, which only checks the DECLARED font-size, never
     triggers) then used `transform: scale(0.75)` + `position: absolute;
     width: 133.333%` to visually shrink it back down to fit this
     component's compact 36px mobile height. The icon/reset-button
     siblings were never part of that transform (they're separately
     absolutely-positioned, sized off the UNSCALED --margin-*/--icon-*
     tokens below), so their position only stayed correct by the scale
     factor and the 133.333% width happening to cancel out exactly
     (133.333% x 0.75 = 100%) -- correct today, but one WebKit rendering
     quirk on a transformed native <input> (a real, documented category
     of Safari-specific bug, not reproducible in this environment's
     Chromium-only testing) away from drifting, which matches Billy's
     physical-iPhone report of a "badly positioned" clear icon. Removed
     entirely: the input now renders at its real, final size with no
     transform, using the exact same font-size (16px) to keep the same
     zoom-prevention guarantee, just without the fragile scale trick. */
  @media screen and (max-width: 749px) {
    .sarky-search-page-shell search-page-input-component {
      height: 36px;
      margin-top: 18px;
    }

    .sarky-search-page-shell .search-page-input {
      font-size: 16px;
    }

    .sarky-search-page-shell search-page-input-component .sarky-animated-search__overlay {
      font-size: 16px;
    }

    /* SEARCH RESULTS X-ICON FIX: matches the search overlay's own
       already-proven mobile reset-button size/position
       (snippets/search-modal.liquid .predictive-search__reset-button:
       36px hit target, flush to the field's trailing edge) instead of
       this field's previous, visibly smaller 24px/right:12px box -
       "hit target" and "right inset" now match between the two fields,
       per Billy's explicit reuse requirement. Desktop keeps its existing
       24px/right:12px sizing, unchanged and not reported as an issue. */
    .sarky-search-page-shell search-page-input-component .search__reset-button {
      right: 0;
      width: 36px;
      height: 36px;
    }
  }
/* 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:accordion (INDEX:113) */
.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);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:comparison-slider (INDEX:121) */
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);
    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:122) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:123) */
.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:email-signup (INDEX:125) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .email-signup__button.button-unstyled:hover {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:127) */
.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;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

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

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .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 {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .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-muted);
    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:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .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(--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(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    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: var(--color-primary-hover);

    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(--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__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

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

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }


  /* SARKY collection shopping toolbar */
  .sarky-collection-toolbar__title,
  .sarky-collection-mobile-toolbar__title {
    margin: 0;
    color: var(--color-foreground);
    font-family: var(--sarky-toolbar-title-font);
    font-weight: var(--sarky-toolbar-title-weight);
    letter-spacing: var(--sarky-toolbar-title-spacing);
    line-height: 1.15;
  }

  .sarky-collection-toolbar__title {
    display: none;
  }

  .sarky-collection-filter-trigger {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .sarky-collection-facets .facets--horizontal {
      position: relative;
      display: flex;
      width: 100%;
      min-width: 0;
      align-items: center;
      gap: 16px;
      min-height: var(--sarky-toolbar-height-desktop);
      padding-block: 0;
      border: 0;
      overflow: visible;
    }

    .sarky-collection-facets .sarky-collection-toolbar__left {
      display: flex;
      align-items: center;
      flex: 1 1 auto;
      min-width: 0;
      gap: var(--sarky-toolbar-title-chip-gap-desktop);
      margin-inline-start: var(--sarky-toolbar-left-inset-desktop, 20px);
      overflow: hidden;
    }

    .sarky-collection-facets .sarky-collection-toolbar__title {
      display: block;
      flex: 0 0 auto;
      max-width: none;
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
      font-size: var(--sarky-toolbar-title-size-desktop);
    }

    .sarky-collection-facets .sarky-collection-toolbar__chips {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
      padding: 0 !important;
      gap: var(--chip-gap);
      overflow-x: auto;
      overflow-y: hidden;
    }

    .sarky-collection-facets .sarky-collection-toolbar__chips .sarky-collection-links__chip {
      min-height: var(--chip-height);
      border-width: var(--chip-border-width, 1px);
    }

    .sarky-collection-facets .facets__form-wrapper {
      min-width: max-content;
      width: auto;
      flex: 0 0 auto;
      margin-inline-start: auto;
      /* position:relative removed: it made this the nearest positioned
         ancestor for .products-count-wrapper's absolute centering below,
         which resolved centering against this narrow right-aligned
         cluster instead of the full toolbar (.facets--horizontal, now
         position:relative itself). z-index still works here without it:
         this is a flex item of .facets--horizontal, and z-index applies
         to flex items regardless of their own position value. */
      z-index: 3;
      background: var(--color-background);
    }

    .sarky-collection-facets .facets__form {
      min-width: max-content;
      width: auto;
      flex: 0 0 auto;
    }

    .sarky-collection-facets .facets__form {
      align-items: center;
      justify-content: flex-end;
      /* Billy's follow-up: Filter/Sort/grid selector sat too spread out
         (was action-gap-desktop * 3, 21px at the default 7px setting) -
         tightened to a fixed, deliberately snug 10px so the whole
         cluster reads as one connected control group closer to the grid
         icons, not three separately floating pieces. */
      gap: 10px;
    }

    .sarky-collection-facets .filter-remove-buttons,
    .sarky-collection-facets .facets__filters-wrapper,
    .sarky-collection-facets .facets-horizontal-remove {
      display: none !important;
    }

    /* DESKTOP COLLECTION PRODUCT COUNT: completes the same information
       hierarchy already built for mobile (controls, product count, grid
       selector) - same recipe as the mobile
       .sarky-collection-mobile-toolbar__results-count, including true
       centering across the FULL toolbar width (relative to
       .facets--horizontal, given `position: relative` above) rather than
       just sitting wherever it falls in the filter/sort/grid cluster's own
       flex flow - matching Billy's explicit correction that it wasn't
       centered and was still grey instead of black. Taking it out of flow
       via absolute positioning also means it never competes for space
       with the filter/sort/grid cluster next to it. Does not touch
       Search: this whole selector is unreachable there (see the comment
       on this element's own liquid block above). */
    .sarky-collection-facets .products-count-wrapper {
      display: flex !important;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      align-items: center;
      height: auto;
      margin-left: 0;
      font-size: var(--sarky-toolbar-action-size-desktop);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #111111;
      white-space: nowrap;
    }

    /* Same compact SARKY pill recipe as the mobile Filter/Sort controls
       (sarky-collection-mobile-toolbar--collection .filter/.sort further
       down this file): warm grey fill, no border, no icons - applied here
       so desktop reads as the same design, not a separate treatment.
       .sarky-collection-filter-trigger is already Collection-only markup
       (gated on is_collection_page in the liquid above, never rendered on
       Search); .sorting-filter__horizontal is shared with Search but this
       whole rule is scoped under .sarky-collection-facets, which is only
       ever added to this ancestor on Collection pages. */
    /* Billy's follow-up: the two read as visibly different sizes - root
       cause was <summary> (Sort) carrying its own default block padding
       (~11px top/bottom from shared Horizon styles) that this rule's
       earlier min-height alone couldn't override, so Sort rendered 44px
       tall against Filter's 32px despite an identical min-height
       declaration. `padding-block: 0` on both (explicit, not assumed)
       fixes that. Also sized down to match the collection chip row
       (25px height, 11px font, 14px inline padding) directly above, per
       Billy's explicit ask. */
    .sarky-collection-facets .sarky-collection-filter-trigger,
    .sarky-collection-facets .sorting-filter__horizontal .facets__summary {
      background: #f1edec;
      border-radius: 5px;
      /* Billy's follow-up: 14px (matching the chip row) read as too wide
         for Sort specifically, whose visible text ("Sort") is shorter
         than Filter's - tightened to 10px for both so the shared recipe
         stays identical, but each pill now hugs its own (different)
         text width more snugly instead of both being propped open by
         the wider chip-matched padding. */
      padding-inline: 10px;
      padding-block: 0;
    }

    .sarky-collection-facets .sarky-collection-filter-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--sarky-toolbar-action-gap-desktop);
      height: 25px;
      color: inherit;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      white-space: nowrap;
      cursor: pointer;
    }

    .sarky-collection-facets .sarky-collection-filter-trigger .sarky-toolbar-filter-icon {
      display: none;
    }

    .sarky-collection-filter-trigger__count {
      min-width: 19px;
      height: 19px;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      background: #111111;
      color: #ffffff;
      font-size: 10px;
      line-height: 1;
    }

    .sarky-collection-facets .sorting-filter__horizontal .facets__summary {
      /* Billy's correction: text sat left of true center (more grey on
         the right) - the hidden "Most relevant" status span and caret
         (both display:none, see below) still left a few px of residual
         flex-start slack after the visible "Sort" label. justify-content
         center makes the visible content genuinely centered regardless
         of any hidden siblings' leftover space. */
      display: flex;
      align-items: center;
      justify-content: center;
      height: 25px;
      font-size: 11px;
      gap: var(--sarky-toolbar-action-gap-desktop);
      text-transform: uppercase;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .sarky-collection-facets .sorting-filter__horizontal .icon-caret {
      display: none;
    }

    /* The real cause of the off-center "Sort" text: .facets__label
       carries a shared margin-right (var(--margin-2xs), ~4.8px) meant to
       separate it from the sibling status text/caret - both hidden above,
       but the label's own margin box still reserves that space, which
       shifts justify-content:center's centering point left of the pill's
       true middle. Scoped to only this summary's own label, not
       .facets__label generally (used elsewhere with that spacing still
       intentional). */
    .sarky-collection-facets .sorting-filter__horizontal .facets__summary .facets__label {
      margin-right: 0;
    }

    .sarky-collection-facets .column-options-wrapper {
      margin-right: 0;
      flex: 0 0 auto;
    }
  }

  @media screen and (max-width: 749px) {
    .sarky-collection-mobile-toolbar.facets-toggle {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: var(--color-background);
      overflow: visible !important;
    }

    /* COLLECTION IA + MOBILE TOOLBAR: chips now read as the second block
       under the breadcrumb (see sections/main-collection.liquid, which
       moved the breadcrumb markup ahead of this whole filters block), and
       this controls row comes third, directly above the product grid -
       a pure `order` swap, no markup was moved, so this rule change has
       zero effect anywhere this row's title still renders (title is only
       ever suppressed via the `show_collection_title` block setting on
       Collection's own template - Search's copy of this shared block is
       untouched either way, since it never rendered these chips at all:
       the chips capture two rules up is gated on `is_collection_page`). */
    .sarky-collection-mobile-toolbar__row {
      order: 2;
      width: 100%;
      min-height: var(--sarky-toolbar-height-mobile);
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding-block: 0;
      padding-inline: var(--sarky-content-side-mobile, 12px);
    }

    .sarky-collection-mobile-toolbar__title {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: var(--sarky-toolbar-title-size-mobile);
    }

    /* Left cluster (filter+sort) / center (product count) / right (grid
       selector). An equal-fr 3-column grid (1fr auto 1fr) was tried first,
       but the left cluster's real content (filter+sort pills together) is
       measurably wider than the right cluster (grid selector alone) - an
       equal 1fr/1fr split under-allocates the left track versus its own
       content and the count visually overlapped the sort pill. Centering
       the count with real absolute positioning instead decouples it
       entirely from the two clusters' own (unequal) widths, which is what
       actually keeps it pixel-centered on the row regardless of a longer
       filter/sort cluster on one side and a narrower grid selector on the
       other - exactly the imbalance this row has. Spans both of .row's own
       columns unconditionally so it reads as a full-width row whether or
       not a title happens to render in the first column next to it. */
    /* Base (shared with Search - unchanged from before this task): actions
       stay right-packed. Collection gets its own layout override just
       below, scoped to .sarky-collection-mobile-toolbar--collection (only
       added to the container when is_collection_page is true), so none of
       this task's geometry/spacing changes reach Search's copy of this
       same shared markup. */
    .sarky-collection-mobile-toolbar__actions {
      grid-column: 1 / -1;
      display: flex !important;
      align-items: center;
      justify-content: flex-end;
      gap: calc(var(--sarky-toolbar-action-gap-mobile) * 2);
      width: 100%;
      min-width: 0;
    }

    .sarky-collection-mobile-toolbar__controls {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: calc(var(--sarky-toolbar-action-gap-mobile) * 2);
      min-width: 0;
    }

    /* COLLECTION-ONLY: left cluster (filter+sort) / center (product count)
       / right (grid selector). An equal-fr 3-column grid (1fr auto 1fr)
       was tried first, but the left cluster's real content is measurably
       wider than the right cluster (grid selector alone) - an equal
       1fr/1fr split under-allocated the left track versus its own content
       and the count visually overlapped the sort pill. Centering the count
       with real absolute positioning instead decouples it entirely from
       the two clusters' own (unequal) widths, which is what actually keeps
       it pixel-centered on the row. */
    .sarky-collection-mobile-toolbar--collection .sarky-collection-mobile-toolbar__actions {
      position: relative;
      justify-content: space-between;
    }

    /* Compact SARKY pills (Collection only): filter and sort read as
       siblings sharing one recipe. Internal icon/select/caret behavior is
       unchanged; Search keeps its original plain, borderless controls
       (the shared base rules above/below this block). Billy's try: no
       border, filled with the same warm SARKY grey (#f1edec) already used
       elsewhere in this file (search field fill, wishlist media
       background, etc.) instead of the earlier white+black-border pill,
       to compare the two looks. */
    .sarky-collection-mobile-toolbar--collection .sarky-collection-mobile-toolbar__filter,
    .sarky-collection-mobile-toolbar--collection .sarky-collection-mobile-toolbar__sort {
      min-height: 20px;
      padding-inline: 7px;
      border: 0;
      border-radius: 4px;
      background: #f1edec;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    /* Billy's real-device correction: text-only pills, no icons - the
       filter glyph and sort chevron are hidden (not removed from the
       markup) so Search's copy of this exact same shared markup keeps
       its icons untouched. The active-filter-count bubble is real
       information (not decoration) and stays. `!important` is required
       here to win against the existing max-width:430px safety-net rule
       further down this file (`.sarky-collection-mobile-toolbar__filter
       .svg-wrapper { display: inline-grid !important; }`, from an earlier
       polish pass keeping the icon from shrinking away at very narrow
       widths) - that rule still applies as-is everywhere else (including
       Search), this just wins on top of it for Collection specifically. */
    .sarky-collection-mobile-toolbar--collection .sarky-collection-mobile-toolbar__filter .sarky-toolbar-filter-icon,
    .sarky-collection-mobile-toolbar--collection .sarky-collection-mobile-toolbar__sort .icon-caret {
      display: none !important;
    }

    .sarky-collection-mobile-toolbar__filter {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      gap: var(--sarky-toolbar-action-gap-mobile);
      color: inherit;
      font-size: var(--sarky-toolbar-action-size-mobile);
      white-space: nowrap;
    }

    .sarky-collection-mobile-toolbar__filter .svg-wrapper,
    .sarky-collection-mobile-toolbar__filter svg {
      width: var(--sarky-toolbar-action-icon-mobile);
      height: var(--sarky-toolbar-action-icon-mobile);
    }

    .sarky-collection-mobile-toolbar__count {
      min-width: 17px;
      height: 17px;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      background: #111111;
      color: #ffffff;
      font-size: 9px;
      line-height: 1;
    }

    .sarky-collection-mobile-toolbar__sort {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      gap: var(--sarky-toolbar-action-gap-mobile);
      font-size: var(--sarky-toolbar-action-size-mobile);
      white-space: nowrap;
      cursor: pointer;
    }

    .sarky-collection-mobile-toolbar__sort select {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }

    .sarky-collection-mobile-toolbar__sort .icon-caret,
    .sarky-collection-mobile-toolbar__sort .icon-caret svg {
      width: calc(var(--sarky-toolbar-action-icon-mobile) * 0.65);
      height: calc(var(--sarky-toolbar-action-icon-mobile) * 0.65);
    }

    /* Real, dynamic collection/filtered-result count (see blocks/filters.liquid's
       `products_count` - the same value the desktop .products-count-wrapper
       already used) - restrained/editorial, visually secondary, never the
       loudest thing in the row. */
    .sarky-collection-mobile-toolbar__results-count {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #111111;
    }

    /* The grid-density snippet is untouched (icons/behavior/markup) - only
       given its position as this row's right-aligned flex item. */
    .sarky-collection-mobile-toolbar__actions > .column-options-wrapper {
      flex: 0 0 auto;
    }

    .sarky-collection-mobile-toolbar__chips {
      order: 1;
      display: flex !important;
      width: 100% !important;
      min-width: 0;
      padding:
        var(--sarky-toolbar-title-chip-gap-mobile)
        var(--sarky-content-side-mobile, 12px)
        10px !important;
      gap: var(--chip-gap);
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scrollbar-width: none;
      overscroll-behavior-inline: contain;
      scroll-padding-inline: var(--sarky-content-side-mobile, 12px);
    }

    .sarky-collection-mobile-toolbar__chips::-webkit-scrollbar {
      display: none;
    }

    .sarky-collection-mobile-toolbar__chips .sarky-collection-links__chip {
      min-height: var(--chip-height);
      border-width: var(--chip-border-width, 1px);
    }
  }

  /* SARKY collection toolbar icons */
  .sarky-collection-facets .sarky-toolbar-filter-icon {
    width: var(--sarky-toolbar-action-icon-desktop);
    height: var(--sarky-toolbar-action-icon-desktop);
    display: inline-grid;
    place-items: center;
    flex: 0 0 var(--sarky-toolbar-action-icon-desktop);

    /* Maison secondary tier at this 18px desktop render: 1.61u = 1.21px. */
    --sarky-maison-stroke-secondary: 1.61;
  }

  .sarky-collection-mobile-toolbar .sarky-toolbar-filter-icon {
    width: var(--sarky-toolbar-action-icon-mobile);
    height: var(--sarky-toolbar-action-icon-mobile);
    display: inline-grid;
    place-items: center;
    flex: 0 0 var(--sarky-toolbar-action-icon-mobile);

    /* Maison secondary tier at this 16px mobile render: 1.74u = 1.16px. */
    --sarky-maison-stroke-secondary: 1.74;
  }

  .sarky-collection-facets .sarky-toolbar-filter-icon svg,
  .sarky-collection-mobile-toolbar .sarky-toolbar-filter-icon svg {
    width: 100%;
    height: 100%;
  }

  @media screen and (max-width: 430px) {
    .sarky-collection-mobile-toolbar__row {
      gap: 6px;
      padding-inline: var(--sarky-content-side-mobile, 12px);
    }

    .sarky-collection-mobile-toolbar__actions {
      gap: 9px;
    }

    .sarky-collection-mobile-toolbar__filter .svg-wrapper {
      display: inline-grid !important;
      width: var(--sarky-toolbar-action-icon-mobile);
      height: var(--sarky-toolbar-action-icon-mobile);
      flex: 0 0 var(--sarky-toolbar-action-icon-mobile);
    }
  }

  /* SARKY filter drawer: shared visual language with the mobile search
     and menu surfaces (warm canvas, Didot display type, compact square
     controls and quiet hairline separators). */
  .sarky-filter-drawer__panel {
    border: 0;
    border-radius: 0;
    background: #f1edec;
    color: #111111;
    box-shadow: none;
  }

  .sarky-filter-drawer__panel .facets__title-wrapper {
    min-height: 58px;
    padding: 8px 8px 8px 16px;
    border-bottom: 1px solid rgb(17 17 17 / 0.14);
    background: #f1edec;
    box-shadow: none;
  }

  .sarky-filter-drawer__panel .facets-drawer__title {
    color: #111111;
    font-family: Didot, 'Bodoni 72', 'Times New Roman', serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  .sarky-filter-drawer__panel .facets-drawer__close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111111;
    box-shadow: none;
   }

  .sarky-filter-drawer__panel .facets-drawer__close:is(:focus, :focus-visible, :active) {
    border: 0;
    outline: none;
    box-shadow: none;
  }

  .sarky-filter-drawer__panel .facets-drawer__close .svg-wrapper,
  .sarky-filter-drawer__panel .facets-drawer__close svg {
    width: 18px;
    height: 18px;
  }

  .sarky-filter-drawer__panel .facets-drawer__filters,
  .sarky-filter-drawer__panel .facets__filters-wrapper,
  .sarky-filter-drawer__panel .facets__panel-content,
  .sarky-filter-drawer__panel .sorting-filter {
    background: #f1edec;
  }

  .sarky-filter-drawer__panel :is(.facets__item, .sorting-filter)::before {
    border-color: rgb(17 17 17 / 0.14);
  }

  .sarky-filter-drawer__panel .facets__summary {
    min-height: 48px;
    align-items: center;
    color: #111111;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .sarky-filter-drawer__panel .facets__summary .icon-caret,
  .sarky-filter-drawer__panel .facets__summary .icon-caret svg {
    width: 10px;
    height: 10px;
    color: #111111;
  }

  .sarky-filter-drawer__panel .facets__inputs {
    --facets-mobile-gap: 14px;
    padding-bottom: 14px;
  }

  .sarky-filter-drawer__panel .checkbox {
    --checkbox-size: 18px;
    --checkbox-border-radius: 0;
    --checkbox-label-padding: 10px;
  }

  .sarky-filter-drawer__panel .checkbox .icon-checkmark {
    border-color: rgb(17 17 17 / 0.45);
    background: #ffffff;
  }

  .sarky-filter-drawer__panel .checkbox__label-text {
    color: #3f3b39;
    font-size: 13px;
    font-weight: 400;
  }

  .sarky-filter-drawer__panel .price-facet__inputs-wrapper {
    gap: 10px;
    padding: 0;
  }

  .sarky-filter-drawer__panel .price-facet__field {
    height: 36px;
  }

  .sarky-filter-drawer__panel .price-facet__input {
    height: 36px;
    min-height: 36px;
    padding-block: 0;
    padding-inline: 28px 10px;
    border: 1px solid rgb(17 17 17 / 0.18);
    border-radius: 5px;
    background: #ffffff;
    color: #111111;
    font-size: 16px;
    box-shadow: none;
  }

  .sarky-filter-drawer__panel .price-facet__input:is(:hover, :focus) {
    border-color: rgb(17 17 17 / 0.36);
    background: #ffffff;
    box-shadow: none;
  }

  .sarky-filter-drawer__panel .price-facet__label {
    padding: 9px 10px;
    color: #6f6865;
    font-size: 13px;
  }

  .sarky-filter-drawer__panel .price-facet__separator,
  .sarky-filter-drawer__panel .price-facet__highest-price {
    color: #6f6865;
    font-size: 11px;
  }
  .sarky-filter-drawer__panel .sorting-filter .facets__status {
    color: #6f6865;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  .sarky-filter-drawer__panel .sorting-filter__container {
    min-height: 52px;
    margin: 0;
    padding: 0 16px;
  }

  .sarky-filter-drawer__panel .sorting-filter__container .facets__label {
    color: #111111;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .sarky-filter-drawer__panel .sorting-filter__select-wrapper {
    min-width: 130px;
    min-height: 44px;
    justify-content: flex-end;
    padding: 0 18px 0 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
  }

  .sarky-filter-drawer__panel .sorting-filter__select-wrapper:has(:focus-visible),
  .sarky-filter-drawer__panel .sorting-filter__select-wrapper:focus-within {
    border: 0;
    outline: none;
    box-shadow: none;
  }

  .sarky-filter-drawer__panel .sorting-filter__select {
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    color: #6f6865;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    outline: none;
    box-shadow: none;
  }

  .sarky-filter-drawer__panel .sorting-filter__select-wrapper > .icon-caret {
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 10px;
    margin: 0;
    color: #111111;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .sarky-filter-drawer__panel .sorting-filter__select-wrapper > .icon-caret svg {
    width: 10px;
    height: 10px;
  }

  .sarky-filter-drawer__panel .facets__drawer-actions {
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(17 17 17 / 0.14);
    background: #f1edec;
    background-image: none;
  }

  .sarky-filter-drawer__panel .facets__see-results,
  .sarky-filter-drawer__panel .facets__clear-all {
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 0;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
  }

  .sarky-filter-drawer__panel .facets__see-results {
    border: 1px solid #111111;
    background: #111111;
    color: #ffffff;
  }

  .sarky-filter-drawer__panel .facets__clear-all {
    border: 1px solid #111111;
    background: transparent;
    color: #111111;
  }

  @media screen and (max-width: 749px) {
    .sarky-filter-drawer__panel {
      width: 100vw;
      max-width: 100vw;
    }

    .sarky-filter-drawer__panel .facets__panel {
      padding-inline: 16px;
    }

    .sarky-filter-drawer__panel :is(.facets__item, .sorting-filter)::before {
      width: calc(100% - 32px);
    }
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:130) */
.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:132) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:133) */
.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:135) */
.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:136) */
.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 (INDEX:138) */
.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:139) */
.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:140) */
.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:143) */
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-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:145) */
.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:146) */
.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:product-title (INDEX:147) */
/* Only rendered for products with NO renderable swatches (see the
     comment above) -- title becomes row 1 in that case, wishlist beside
     it, on the exact same right-edge inset as blocks/swatches.liquid's
     .sarky-card-meta row (both hearts share one CSS recipe, see
     snippets/sarky-wishlist-heart.liquid). align-items: flex-start (not
     center) so a title that wraps to two lines keeps the heart level
     with its FIRST line, matching how a title+bookmark row reads. */
  .sarky-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  /* Title takes all remaining width and is allowed to shrink below its
     content size (min-width: 0 is required for text-wrap/ellipsis to
     work at all inside a flex item) -- it never runs under the heart,
     which stays a fixed-size flex item beside it. */
  .sarky-card-title-row__title {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* DEEP ROOT-CAUSE PASS (re-derived from the clean live baseline, not
     restored from history): the approved Wishlist card's title is a bare
     <span> at 11px -- no generic wrapper, no editable spacing settings.
     This block's title instead renders through snippets/text.liquid,
     which wraps it in a `.text-block` (assets/base.css: a FLEX COLUMN
     container with its own theme-editor-editable padding-block-start/end)
     and inherits the site's base ~14px paragraph size. Two separate
     issues, fixed together:
     1. Size: 11px here matches the Wishlist reference's title-feel
        exactly, instead of the larger inherited body size, which read
        inconsistently next to Wishlist/rail/PDP-adjacent cards.
     2. Structure: forcing the text-block back to plain `display:block`
        with hard-zeroed margin/padding makes this position permanently
        immune to the block's own padding-block-start SETTING (whatever
        a theme editor sets it to) instead of depending on that setting
        being manually kept at zero -- the exact "fragile dependence"
        this kind of drift caused twice already. Scoped to the
        product-card title only; every other .text-block/.rte usage
        sitewide (PDP, other text blocks) keeps its native editable
        behaviour untouched. */
  .sarky-card-title-row__title {
    font-size: 11px;
  }

  .sarky-card-title-row__title .text-block {
    display: block;
    margin: 0;
    padding: 0;
  }

  /* SMALL TARGETED POLISH PASS -- title->price spacing root cause: the
     wishlist heart beside the title is a FIXED 34px box (see
     .sarky-wishlist-heart--card-title-row in
     snippets/sarky-wishlist-heart.liquid), and this row uses
     align-items: flex-start, so the ROW's own flex height was always
     forced to at least 34px regardless of how tall the title text
     actually was. A one-line title (~17.6px) left ~16px of invisible
     leftover space below its own text before the row "ended" and the
     next flex item (price) began -- a two-line title (~35px) already
     meets/exceeds the heart's height, which is why only two-line titles
     ever looked correctly spaced. Confirmed via real 390px Playwright
     measurement: one-line gap-to-price was 21.4px vs. the intended/
     two-line 5px. Fix: take the heart out of the row's height
     calculation entirely (position: absolute, scoped to this title-row
     context only) so the row's rendered height always equals the
     title's OWN rendered text height, for any number of lines -- no
     fixed/min-height reserved anywhere, no product-specific selector. */
  .sarky-card-title-row {
    position: relative;
  }

  /* Reserves the same horizontal space the heart used to occupy as a
     flex sibling (34px box + 8px row gap, minus the 6px negative margin
     that let it overflow past the row's own right edge = 36px net) so
     the title text still wraps at the same point it always did. Scoped
     to cards where the title-row heart is the one actually visible
     (i.e. no swatches row elsewhere already showing its own heart, see
     snippets/sarky-wishlist-heart.liquid's hide rule) -- on cards WITH
     swatches this row's heart is hidden and the title keeps its full
     width, unchanged. */
  product-card:not(:has(.sarky-card-meta)) .sarky-card-title-row__title .text-block,
  .product-card:not(:has(.sarky-card-meta)) .sarky-card-title-row__title .text-block {
    padding-inline-end: 36px;
  }

  .sarky-card-title-row .sarky-wishlist-heart--card-title-row {
    position: absolute;
    top: 0;
    right: -6px;
    margin-inline-end: 0;
  }
/* END_BLOCK:product-title */

/* START_BLOCK:review (INDEX:149) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
  }

  .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:sarky-product-usps (INDEX:150) */
.sarky-product-usps-wrap {
    width: 100%;
    display: block;
  }

  .sarky-product-usps {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    justify-content: start;
    align-items: center;
    column-gap: var(--sarky-usps-column-gap);
    row-gap: var(--sarky-usps-row-gap);
    padding-top: var(--sarky-usps-padding-top);
    padding-bottom: var(--sarky-usps-padding-bottom);
    margin: 0;
    border-top: 1px solid var(--sarky-usps-border-color);
    border-bottom: 1px solid var(--sarky-usps-border-color);
    color: var(--sarky-usps-text-color);
  }

  .sarky-product-usps__item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
  }

  .sarky-product-usps__icon {
    width: var(--sarky-usps-icon-size);
    height: var(--sarky-usps-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sarky-usps-icon-color);
    flex: 0 0 auto;
  }

  .sarky-product-usps__icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sarky-product-usps__text {
    display: inline-block;
    font-size: var(--sarky-usps-font-size-desktop);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .sarky-product-usps__item--4 {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .sarky-product-usps-wrap {
      margin-top: calc(var(--sarky-usps-mobile-pull-up) * -1) !important;
      position: relative;
      z-index: 2;
    }

    .sarky-product-usps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      justify-content: stretch;
    }

    .sarky-product-usps__item {
      width: 100%;
    }

    .sarky-product-usps__item--4 {
      display: inline-flex;
    }

    .sarky-product-usps__text {
      font-size: var(--sarky-usps-font-size-mobile);
    }
  }
/* END_BLOCK:sarky-product-usps */

/* START_BLOCK:social-links (INDEX:152) */
.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:153) */
/* 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:154) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }

  /* SARKY product-card meta row (PepperMayo reference layout): colour
     swatches on the left, wishlist on the right, on one line directly under
     the product photo and above the title. This block is the only card child
     that renders on every shopping surface where swatches are placed, so it
     owns the row.

     DEEP ROOT-CAUSE PASS (re-derived from clean live baseline): align-items
     was `center`, vertically centering the ~16-18px swatch dots inside this
     row's 34px min-height (a height driven by the wishlist heart's own
     tap target, not by the swatches) -- reading as dead space above the
     dots. The Wishlist reference has no such centering anywhere in its
     image-to-first-row relationship. flex-start anchors the dots (and the
     wishlist icon beside them, see the matching change in
     snippets/sarky-wishlist-heart.liquid) flush at the row's own top edge. */
  /* FINAL GLOBAL PRODUCT-CARD SPACING PASS: position:relative added so
     the wishlist heart below can become position:absolute (see that rule
     further down) -- same root cause and same fix as
     blocks/product-title.liquid's title-row heart: a fixed 34px
     tap-target box was forcing this ROW taller than its real visual
     content (swatch dots), which is what pushed the title below it too
     far away. min-height: 34px removed -- it was the row-level half of
     that same forced reservation; with both the heart and the swatch
     label (see .sarky-card-meta .variant-option__button-label below) no
     longer contributing their full tap-target height to this row's
     layout size, the row now naturally hugs the swatch dots' own visual
     height instead. */
  .sarky-card-meta {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }

  .sarky-card-meta__swatches {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    /* Reserves the same horizontal space the heart used to occupy as a
       normal flex sibling, now that it's position: absolute and no
       longer part of this row's flex sizing -- without this, the
       overflow-list's own width measurement (assets/overflow-list.js)
       would think the row is wider than it visually is, fitting more
       swatch dots than there's actually room for before the heart. */
    padding-inline-end: 36px;
  }

  .sarky-card-meta__wishlist {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
  }

  /* FINAL GLOBAL PRODUCT-CARD SPACING PASS: same fix, same technique, as
     blocks/product-title.liquid's `.sarky-card-title-row
     .sarky-wishlist-heart--card-title-row` rule for the title row -- the
     heart is a fixed 34px box; taking it out of this row's normal flow
     entirely (rather than leaving it a static flex sibling) means this
     row's height can never be forced taller than its real content again,
     regardless of the heart's own size. Scoped to .sarky-card-meta only
     -- snippets/sarky-wishlist-heart.liquid's shared base rule (used by
     any OTHER, not-yet-audited context) is untouched. */
  .sarky-card-meta .sarky-wishlist-heart--card-meta-row {
    position: absolute;
    top: 0;
    right: -6px;
    margin-inline-end: 0;
  }

  /* SARKY UX correction pass. Billy's physical iPhone review of the
     visual-polish pass (28px mobile / 30px desktop) found the circles far
     too large and dominant under the product photo. Presentation only --
     the swatch source/precedence in snippets/swatch.liquid (swatch.image ->
     swatch.color -> variant photo fallback) and the native :checked radio
     selection state in snippets/variant-swatches.liquid are completely
     untouched, this only restyles the existing box. Size is set directly on
     --swatch-width/--swatch-height, the same mechanism .swatch--unscaled
     already uses in assets/base.css, rather than through the global
     variant_swatch_width setting -- so nothing outside this one product-card
     row (filters, PDP) is affected. Applies equally to native colour and to
     a not-yet-migrated variant-photo swatch, so every circle in the row
     stays one consistent size regardless of migration state. */
  .sarky-card-meta .swatch {
    --swatch-width: 13px;
    --swatch-height: 13px;
    border: 1px solid rgb(17 17 17 / 0.35);
  }

  @media screen and (min-width: 750px) {
    .sarky-card-meta .swatch {
      --swatch-width: 15px;
      --swatch-height: 15px;
    }
  }

  /* DEEP ROOT-CAUSE PASS -- THE "+1" OVERFLOW ROOT CAUSE:
     assets/overflow-list.js measures REAL rendered widths (getBoundingClientRect)
     to decide what fits on row 1, so it's not a hardcoded count -- but the
     native `.variant-option__button-label` each dot renders inside of
     (assets/base.css, shared by every variant picker: PDP, filters, this
     card) carries `flex: 0 0 3.25em` (~52px FIXED width, ignoring content)
     and `padding-inline: var(--padding-lg)` (16px each side, 32px total) --
     sized for a full PDP variant-picker button, not a 13-15px inline card
     dot. Real per-dot footprint before this fix: ~50px. On a real 2-column
     iPhone card (~189px wide, minus the 34px wishlist box and 10px row
     gap = ~145px usable, minus ~10px of built-in focus-ring padding
     reservation = ~135px), that's only room for 2-3 dots before the "+N"
     indicator's own on-page measurement pass pushes the next dot to
     row 2 -- exactly the "4-5 colors collapse to +1" Billy flagged, and
     the true reason it looked "too large" generally. Fixed by letting the
     label shrink to its actual (now much smaller) content instead of a
     fixed PDP-button size, and cutting its horizontal padding down to a
     small tap buffer. Vertical touch height stays generous (34px, same
     as the wishlist heart's own tap target, via the row's min-height and
     the label's own min-height below) -- only the WIDTH shrinks, since
     width is what the overflow math is measuring. Scoped to
     .sarky-card-meta only: PDP and the filter/sort swatch picker keep the
     native, unmodified 52px button entirely untouched.

     FINAL GLOBAL PRODUCT-CARD SPACING PASS: min-height: 34px removed.
     That SARKY-added value was overriding the NATIVE
     `.variant-option__button-label--has-swatch` rule's own
     `min-height: auto` (assets/base.css) -- a generous tap-target
     reservation this pass's own row-height audit traced as the OTHER
     half (alongside the wishlist heart above) of why the swatches row
     rendered ~30px taller than the dots inside it, pushing the title
     far below where the row visually appeared to end. Removing it lets
     the label revert to the component's own native, content-driven
     height (i.e. the swatch dot's real size) -- no reservation, no
     fixed/min-height, matching every other row's spacing exactly. */
  .sarky-card-meta .variant-option__button-label {
    flex: 0 0 auto;
    padding-block: 0;
    padding-inline: 3px;
    align-items: flex-start;
  }

  /* Real inter-dot gap (assets/overflow-list.css's `[part='list']` uses
     `column-gap: 1rem` (16px) by default; snippets/variant-swatches.liquid
     already scopes this sitewide to `--gap-sm` (0.7rem/11.2px) for every
     swatch picker). Tightened further here (mobile-iPhone UAT: 6px still
     read as spread-out relative to a 13-15px dot), scoped to the card row
     only, so more real colors fit before the "+N" indicator is genuinely
     needed and the row reads as one compact cluster. PDP/filters keep
     --gap-sm unchanged. */
  .sarky-card-meta overflow-list::part(list) {
    align-items: flex-start;
    gap: 4px;
  }

  /* MOBILE-UAT PASS: the swatch picker's own built-in
     --overflow-list-padding-inline (snippets/variant-swatches.liquid --
     product_swatches_padding_left/right + a real focus-outline-offset/
     width reservation, calc()'d per swatch picker) insets the FIRST dot
     from the row's true left edge. On a real ~189px 2-column iPhone card
     that absolute inset reads proportionally much larger than it did on
     the wide desktop card this was last measured on -- exactly the "swatch
     row does not begin at the same left edge as the image" Billy's iPhone
     screenshot shows. Collapsed to a minimal, still-real focus-visible
     buffer (2px) rather than the full calc() -- the :focus-visible ring
     itself draws via `outline` (which paints OUTSIDE the element's layout
     box via outline-offset, consuming no extra layout width), so it does
     not need a large reserved inline padding to stay visible. Scoped to
     .sarky-card-meta -- PDP/filters keep the component's native
     calc()'d reservation untouched.

     FINAL GLOBAL PRODUCT-CARD SPACING PASS: --overflow-list-padding-block
     added, same reasoning as --overflow-list-padding-inline above --
     the component's native calc() (snippets/variant-swatches.liquid)
     also reserves BLOCK (vertical) padding on this same focus-ring
     buffer logic, which measured out to the row-height audit as ~4px of
     extra top+bottom space around the swatch dots (on top of, and
     independent from, the button-label/heart fixes above). Zeroed for
     the same reason: the focus-visible ring draws via `outline`, which
     paints outside the box and needs no reserved padding to stay
     visible. */
  .sarky-card-meta swatches-variant-picker-component {
    --overflow-list-padding-inline: 2px;
    --overflow-list-padding-block: 0px;
  }

  /* The swatch row wrapper clips overflow by default (assets/base.css,
     `product-swatches { overflow: hidden; }`), sized only as tall as one
     swatch. Kept visible so the small selected-state ring below is never cut
     off top/bottom, even though at this smaller size it comfortably fits
     within the row's own min-height already. Scoped to this row only: the
     "+N more" overflow-list mechanism hides items via a JS-set `hidden`
     attribute, not via this CSS clip, so nothing about which swatches
     show/hide changes. */
  .sarky-card-meta product-swatches {
    overflow: visible;
  }

  /* Selected colour must read clearly stronger than the rest: a small, tight
     ring with a gap so it becomes a double ring -- scaled down to match the
     smaller swatch, so it reads as a neat accent rather than a heavy frame. */
  .sarky-card-meta .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: 1.5px solid var(--color-foreground);

    outline: var(--focus-outline);
    outline-offset: 1.5px;
  }

  /* Billy does not want the diagonal unavailable/sold-out slash on product
     cards. Presentation only: snippets/strikethrough-variant.liquid still
     renders it exactly when product_option.available is false (Shopify's
     real availability is untouched, and the PDP -- which does not use
     .sarky-card-meta -- still shows it), this just hides the SVG here. */
  .sarky-card-meta .variant-option__strikethrough {
    display: none;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:157) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:158) */
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:background-media (INDEX:160) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:161) */
.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:162) */
.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:button (INDEX:164) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:buy-buttons-styles (INDEX:165) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

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

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

  .product__pickup-availabilities {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

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

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

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

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

  .volume-pricing__table {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:166) */
.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: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

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

  /* SARKY product-card swipe dots */
  .card-gallery--sarky-dots slideshow-component {
    position: relative;
  }

  .card-gallery--sarky-dots slideshow-slide {
    width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always;
  }

  .card-gallery--sarky-dots .sarky-card-gallery__controls,
  .card-gallery--sarky-dots .sarky-card-gallery__controls[hidden] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  @media screen and (max-width: 749px) {
    .card-gallery[data-sarky-discrete-swipe='true'] slideshow-slides {
      overflow-x: hidden !important;
      scroll-behavior: auto !important;
      touch-action: pan-y;
      overscroll-behavior-inline: contain;
    }
  }

  .card-gallery--sarky-dots .sarky-card-gallery__controls {
    position: absolute !important;
    /* SARKY: one fixed, tight position for every card on the shop (6px from the left edge,
       2px from the bottom edge of the photo), regardless of the per-template dot settings.
       The bag button's bottom edge is 8px above the photo edge, so the whole dot row runs on
       its own line BENEATH the button and never touches it. */
    left: 6px !important;
    right: auto !important;
    bottom: 2px !important;
    z-index: 1 !important;
    width: auto !important;
    min-height: 0 !important;
    height: var(--sarky-card-dot-size) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    mix-blend-mode: normal !important;
    pointer-events: none !important;
  }

  .card-gallery--sarky-dots .sarky-card-gallery__controls .slideshow-controls__dots {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--sarky-card-dot-gap) !important;
    width: auto !important;
    height: var(--sarky-card-dot-size) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .card-gallery--sarky-dots .sarky-card-gallery__controls .slideshow-controls__dots > li {
    width: var(--sarky-card-dot-size) !important;
    height: var(--sarky-card-dot-size) !important;
    flex: 0 0 var(--sarky-card-dot-size) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card-gallery--sarky-dots .sarky-card-gallery__controls .slideshow-control {
    width: var(--sarky-card-dot-size) !important;
    height: var(--sarky-card-dot-size) !important;
    min-width: var(--sarky-card-dot-size) !important;
    min-height: var(--sarky-card-dot-size) !important;
    max-width: var(--sarky-card-dot-size) !important;
    max-height: var(--sarky-card-dot-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
  }

  .card-gallery--sarky-dots .sarky-card-gallery__controls .slideshow-control::after {
    content: '' !important;
    display: block !important;
    opacity: 1 !important;
    width: var(--sarky-card-dot-size) !important;
    height: var(--sarky-card-dot-size) !important;
    border-radius: 50% !important;
    background: var(--sarky-card-dot-inactive) !important;
    box-shadow: none !important;
  }

  .card-gallery--sarky-dots .sarky-card-gallery__controls .slideshow-control[aria-selected='true']::after {
    background: var(--sarky-card-dot-active) !important;
  }

  @media screen and (max-width: 749px) {
    .card-gallery--dots-desktop .sarky-card-gallery__controls {
      display: none !important;
    }
  }

  @media screen and (min-width: 750px) {
    .card-gallery--dots-mobile .sarky-card-gallery__controls {
      display: none !important;
    }

    .card-gallery[data-sarky-card-gallery] slideshow-slides {
      overflow: hidden !important;
      scroll-behavior: auto !important;
      overscroll-behavior-inline: contain;
    }

    .card-gallery[data-sarky-card-gallery] slideshow-slide {
      display: block !important;
      width: 100% !important;
      min-width: 100% !important;
      flex: 0 0 100% !important;
      scroll-snap-align: start !important;
      scroll-snap-stop: always;
    }

    .card-gallery--sarky-desktop-arrows slideshow-arrows {
      display: flex !important;
      inset: 0 !important;
      padding-inline: var(--sarky-card-arrow-side) !important;
      align-items: center !important;
      justify-content: space-between !important;
      mix-blend-mode: normal !important;
      pointer-events: none !important;
      z-index: 25 !important;
    }

    .card-gallery--sarky-desktop-arrows slideshow-arrows .slideshow-control {
      display: grid !important;
      place-items: center !important;
      width: calc(var(--sarky-card-arrow-size) + 20px) !important;
      height: calc(var(--sarky-card-arrow-size) + 20px) !important;
      min-width: 0 !important;
      min-height: 0 !important;
      padding: 10px !important;
      color: var(--sarky-card-arrow-color) !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      opacity: 0 !important;
      animation: none !important;
      transition:
        opacity var(--sarky-card-arrow-fade) ease,
        transform var(--sarky-card-arrow-fade) ease !important;
      pointer-events: auto !important;
    }

    .card-gallery--sarky-desktop-arrows slideshow-arrows .slideshow-control--previous {
      transform: translateX(-6px);
    }

    .card-gallery--sarky-desktop-arrows slideshow-arrows .slideshow-control--next {
      transform: translateX(6px);
    }

    product-card:hover .card-gallery--sarky-desktop-arrows slideshow-arrows .slideshow-control,
    .product-grid__card:hover .card-gallery--sarky-desktop-arrows slideshow-arrows .slideshow-control,
    .card-gallery--sarky-desktop-arrows:hover slideshow-arrows .slideshow-control,
    .card-gallery--sarky-desktop-arrows:focus-within slideshow-arrows .slideshow-control {
      opacity: 1 !important;
      transform: translateX(0) !important;
    }

    .card-gallery--sarky-desktop-arrows slideshow-arrows .slideshow-control:disabled,
    .card-gallery--sarky-desktop-arrows slideshow-arrows .slideshow-control[aria-disabled='true'] {
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    .card-gallery--sarky-desktop-arrows slideshow-arrows .svg-wrapper,
    .card-gallery--sarky-desktop-arrows slideshow-arrows svg {
      width: var(--sarky-card-arrow-size) !important;
      height: var(--sarky-card-arrow-size) !important;
      color: inherit !important;
    }

    .card-gallery--sarky-desktop-arrows slideshow-arrows .icon-caret {
      --icon-stroke-width: var(--sarky-card-arrow-stroke);
    }
  }

  @media screen and (max-width: 749px) {
    .card-gallery--sarky-desktop-arrows slideshow-arrows {
      display: none !important;
    }
  }

  /*
   * 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;
    }
  }
  /* SARKY indicator 'bar' (see the toggle at the top of this file): the dots list becomes a full-width
     3px track along the bottom edge of the photo, split in one equal segment per photo; only the active
     segment is drawn. More photos = a narrower segment; the last -> first swipe puts it back on the left.
     The 'dots' rules above are untouched and take over again when the toggle is set to 'dots'. */
  .card-gallery--sarky-indicator-bar .sarky-card-gallery__controls {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 3px !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .card-gallery--sarky-indicator-bar .sarky-card-gallery__controls .slideshow-controls__dots {
    display: flex !important;
    gap: 0 !important;
    width: 100% !important;
    height: 3px !important;
    pointer-events: none !important;
  }

  .card-gallery--sarky-indicator-bar .sarky-card-gallery__controls .slideshow-controls__dots > li {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 3px !important;
  }

  .card-gallery--sarky-indicator-bar .sarky-card-gallery__controls .slideshow-control {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 3px !important;
    min-height: 3px !important;
    max-height: 3px !important;
    border-radius: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    font-size: 0 !important;
    transition: background-color 180ms ease;
    pointer-events: none !important;
  }

  .card-gallery--sarky-indicator-bar .sarky-card-gallery__controls .slideshow-control::before,
  .card-gallery--sarky-indicator-bar .sarky-card-gallery__controls .slideshow-control::after {
    content: none !important;
    display: none !important;
  }

  .card-gallery--sarky-indicator-bar .sarky-card-gallery__controls .slideshow-control[aria-selected='true'] {
    background: var(--sarky-card-dot-active) !important;
  }
  /* Bar mode on desktop too: the old dots were hidden from 750px up (`--dots-mobile`); the bar is shown on all screens. */
  @media screen and (min-width: 750px) {
    .card-gallery--sarky-indicator-bar.card-gallery--dots-mobile .sarky-card-gallery__controls {
      display: flex !important;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:167) */
.cart-bubble {
    --cart-padding: 0.2em;

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

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

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

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

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-items-component (INDEX:168) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

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

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

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

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

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

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

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

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

/* START_SNIPPET:cart-products (INDEX:169) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

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

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

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

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

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

  .cart-items__table * {
    margin: 0;
  }

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

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

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

    .cart-items__details {
      display: contents;
    }

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

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

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-items__property {
    display: block;
  }

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

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

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

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

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

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

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

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

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

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

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }


  /* SARKY cart drawer clean styles */
  .cart-drawer__heading--empty,
  .cart-drawer__heading-empty,
  #cart-drawer-heading-empty {
    display: none !important;
  }

  .cart-drawer--empty .cart-drawer__inner {
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content,
  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper,
  .cart-page--empty .cart-items__wrapper {
    justify-content: flex-start !important;
    width: 100% !important;
    padding-inline: 0 !important;
    text-align: center !important;
  }

  .sarky-empty-cart {
    width: 100%;
    max-width: 100%;
    padding: 46px 18px 36px;
    margin: 0 auto;
    text-align: center;
  }

  .sarky-empty-cart__title {
    margin: 0 0 5px;
    color: #000;
    font-family: Didot, "Bodoni 72", "Times New Roman", serif;
    display: inline-block;
    font-size: clamp(30px, 6.4vw, 36px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -0.075em;
    transform: scaleX(.82);
    transform-origin: center;
  }

  .sarky-empty-cart__text {
    margin: 0 0 30px;
    color: #000;
    font-family: var(--font-body--family), "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.01em;
  }

  .sarky-empty-cart__links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    width: 100%;
  }

  .sarky-empty-cart__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    width: 100%;
    border: 1px solid #000;
    background: transparent;
    color: #000;
    text-decoration: none;
    font-family: var(--font-body--family), "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transition: opacity .2s ease, background-color .2s ease, color .2s ease;
  }

  .sarky-empty-cart__link--primary {
    background: #000;
    border-color: #000;
    color: #fff;
  }

  .sarky-empty-cart__link:hover {
    opacity: .78;
  }

  .sarky-empty-cart__stylist-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 0, 0, .12);
    color: #000;
    font-family: var(--font-body--family), "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
  }

  .sarky-empty-cart__stylist-link span {
    color: #696461;
    font-size: 13px;
    letter-spacing: 0.01em;
  }

  .sarky-empty-cart__stylist-link strong {
    padding-bottom: 3px;
    border-bottom: 1px solid #000;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
  }

  .sarky-empty-cart__stylist-link:hover {
    opacity: .7;
  }

  .cart-drawer .cart-items__wrapper,
  .cart-drawer .cart-form,
  .cart-drawer .cart-items,
  .cart-drawer .cart-items__table,
  .cart-drawer .cart-items__table tbody {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  /* sarky forced aligned drawer content */
  .cart-drawer .cart-drawer__content,
  .cart-drawer .cart-drawer__items {
    padding-inline: 0 !important;
  }

  .cart-drawer .cart-form {
    padding-top: 13px !important;
  }

  .cart-drawer .cart-items__table {
    width: 100% !important;
    border-spacing: 0 !important;
    display: block !important;
  }

  .cart-drawer .cart-items__table thead {
    display: none !important;
  }

  .cart-drawer .cart-items__table tbody {
    display: block !important;
  }

  .cart-drawer .sarky-filled-cart-row {
    display: grid !important;
    grid-template-columns: var(--sarky-cart-item-image-width, 124px) minmax(0, 1fr) !important;
    grid-template-areas:
      "media details"
      "media quantity"
      "error error" !important;
    column-gap: var(--sarky-cart-item-content-gap, 16px) !important;
    row-gap: 0 !important;
    align-items: start !important;
    position: relative !important;
    width: 100% !important;
    padding: var(--sarky-cart-item-divider-top-gap, 10px) 12px calc(var(--sarky-cart-item-divider-bottom-gap, 10px) + var(--sarky-cart-item-divider-thickness, 1px)) 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .cart-drawer .sarky-filled-cart-row:first-child,
  .cart-drawer .cart-items__table tbody > tr.sarky-filled-cart-row:first-of-type {
    padding-top: 0 !important;
  }

  .cart-drawer .cart-items--dividers .sarky-filled-cart-row,
  .cart-drawer .cart-items__table .sarky-filled-cart-row,
  .cart-drawer .cart-items__table tbody .sarky-filled-cart-row {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .cart-drawer .cart-items--dividers .sarky-filled-cart-row:last-of-type {
    border-bottom: 0 !important;
  }

  .cart-drawer .sarky-filled-cart-row::after {
    content: "" !important;
    position: absolute !important;
    left: calc(12px + var(--sarky-cart-item-divider-inset, 0px)) !important;
    right: calc(12px + var(--sarky-cart-item-divider-inset, 0px)) !important;
    bottom: 0 !important;
    height: var(--sarky-cart-item-divider-thickness, 1px) !important;
    min-height: var(--sarky-cart-item-divider-thickness, 1px) !important;
    background: var(--sarky-cart-item-divider-color, #d8d8d8) !important;
    pointer-events: none !important;
  }

  .cart-drawer .sarky-filled-cart-row > td {
    display: block !important;
    padding: 0 !important;
  }

  .cart-drawer .sarky-filled-cart-row__media {
    grid-area: media !important;
    width: var(--sarky-cart-item-image-width, 124px) !important;
    min-width: var(--sarky-cart-item-image-width, 124px) !important;
  }

  .cart-drawer .sarky-filled-cart-row__image-link {
    display: block !important;
    width: var(--sarky-cart-item-image-width, 124px) !important;
    aspect-ratio: 2 / 3 !important;
    background: #f7f4f1 !important;
    overflow: hidden !important;
  }

  .cart-drawer .sarky-filled-cart-row__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .cart-drawer .sarky-filled-cart-row__details {
    grid-area: details !important;
    min-width: 0 !important;
    width: 100% !important;
    color: #111 !important;
  }

  .cart-drawer .sarky-filled-cart-row__top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .cart-drawer .sarky-filled-cart-row__info {
    min-width: 0 !important;
    width: 100% !important;
    padding-right: 0 !important;
  }

  .cart-drawer .sarky-filled-cart-row__title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    color: #111 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-family: var(--font-body--family), "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: var(--sarky-cart-item-title-font-size, 13px) !important;
    line-height: 1.12 !important;
    font-weight: var(--sarky-cart-item-title-font-weight, 700) !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    transform: none !important;
  }

  .cart-drawer .sarky-filled-cart-row__variant-text,
  .cart-drawer .sarky-filled-cart-row__variant-text span {
    display: block !important;
    margin-top: 2px !important;
    color: #111 !important;
    font-family: var(--font-body--family), "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: var(--sarky-cart-item-variant-font-size, 13px) !important;
    line-height: 1.25 !important;
    font-weight: var(--sarky-cart-item-variant-font-weight, 400) !important;
    text-transform: uppercase !important;
  }

  .cart-drawer .sarky-filled-cart-row__variant-text span:not(:last-child)::after {
    content: " / ";
  }

  .cart-drawer .sarky-filled-cart-row__price {
    display: block !important;
    margin-top: 18px !important;
    color: #111 !important;
    font-family: var(--font-body--family), "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: var(--sarky-cart-item-price-font-size, 13px) !important;
    line-height: 1 !important;
    font-weight: var(--sarky-cart-item-price-font-weight, 400) !important;
  }

  .cart-drawer .sarky-filled-cart-row__price span:not(.visually-hidden),
  .cart-drawer .sarky-filled-cart-row__price s,
  .cart-drawer .sarky-filled-cart-row__price .compare-at-price,
  .cart-drawer .sarky-filled-cart-row__price .money,
  .cart-drawer .sarky-filled-cart-row__price *:not(.visually-hidden) {
    font-size: var(--sarky-cart-item-price-font-size, 13px) !important;
    line-height: 1 !important;
    font-weight: var(--sarky-cart-item-price-font-weight, 400) !important;
  }

  .cart-drawer .sarky-filled-cart-row__price s,
  .cart-drawer .sarky-filled-cart-row__price .compare-at-price,
  .cart-drawer .sarky-cart-recommendations__price s,
  .cart-drawer .sarky-cart-recommendations__price .compare-at-price {
    margin-left: 6px !important;
    color: #111111 !important;
    opacity: 1 !important;
    font-weight: 400 !important;
    text-decoration-color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
  }

  .cart-drawer .sarky-filled-cart-row__price--sale .sarky-filled-cart-row__current-price,
  .cart-drawer .sarky-cart-recommendations__price--sale span:first-child {
    color: var(--sarky-cart-sale-price-color, #c00000) !important;
  }

  .cart-drawer .sarky-filled-cart-row__sale-note {
    display: block !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    color: var(--sarky-cart-sale-price-color, #c00000) !important;
    font-family: var(--font-body--family), "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    font-style: italic !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
  }

  .cart-drawer .sarky-filled-cart-row__remove {
    flex: 0 0 auto !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(var(--sarky-cart-remove-icon-size, 20px) + 8px) !important;
    min-width: calc(var(--sarky-cart-remove-icon-size, 20px) + 8px) !important;
    height: calc(var(--sarky-cart-remove-icon-size, 20px) + 8px) !important;
    min-height: calc(var(--sarky-cart-remove-icon-size, 20px) + 8px) !important;
    padding: 0 !important;
    margin: -2px 0 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #111 !important;
    box-shadow: none !important;
    line-height: 1 !important;
  }

  .cart-drawer .sarky-filled-cart-row__remove span[aria-hidden="true"] {
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 0 !important;
  }

  .cart-drawer .sarky-filled-cart-row__remove::before,
  .cart-drawer .sarky-filled-cart-row__remove::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: var(--sarky-cart-remove-icon-size, 20px) !important;
    height: var(--sarky-cart-remove-icon-thickness, 1px) !important;
    background: currentColor !important;
    transform-origin: center !important;
    border-radius: 999px !important;
  }

  .cart-drawer .sarky-filled-cart-row__remove::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .cart-drawer .sarky-filled-cart-row__remove::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }

  .cart-drawer .sarky-filled-cart-row__quantity {
    grid-area: quantity !important;
    width: 100% !important;
    margin-top: var(--sarky-cart-item-controls-top-gap, 12px) !important;
    align-self: end !important;
  }

  .cart-drawer .sarky-filled-cart-row__quantity-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: calc(var(--sarky-cart-item-controls-gap, 10px) * var(--sarky-cart-control-scale, 1)) !important;
    width: 100% !important;
  }

  .cart-drawer .sarky-filled-cart-row__quantity-controls > .volume-pricing-info {
    display: none !important;
  }


  .cart-drawer .sarky-filled-cart-row__quantity .quantity-selector-wrapper {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 calc(var(--sarky-cart-quantity-width, 92px) * var(--sarky-cart-control-scale, 1)) !important;
    width: calc(var(--sarky-cart-quantity-width, 92px) * var(--sarky-cart-control-scale, 1)) !important;
    min-width: 0 !important;
    max-width: calc(var(--sarky-cart-quantity-width, 92px) * var(--sarky-cart-control-scale, 1)) !important;
    height: calc(var(--sarky-cart-quantity-height, 32px) * var(--sarky-cart-control-scale, 1)) !important;
    min-height: 0 !important;
    max-height: calc(var(--sarky-cart-quantity-height, 32px) * var(--sarky-cart-control-scale, 1)) !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .cart-drawer .sarky-filled-cart-row__size-picker {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    width: calc(var(--sarky-cart-size-picker-width, 86px) * var(--sarky-cart-control-scale, 1)) !important;
    height: calc(var(--sarky-cart-size-picker-height, 32px) * var(--sarky-cart-control-scale, 1)) !important;
    min-height: calc(var(--sarky-cart-size-picker-height, 32px) * var(--sarky-cart-control-scale, 1)) !important;
    position: relative !important;
    background: #f3eee8 !important;
    color: #111 !important;
    overflow: hidden !important;
  }

  .cart-drawer .sarky-filled-cart-row__size-picker::after {
    content: "" !important;
    position: absolute !important;
    right: 14px !important;
    top: 47% !important;
    width: calc(7px * var(--sarky-cart-control-scale, 1)) !important;
    height: calc(7px * var(--sarky-cart-control-scale, 1)) !important;
    border-right: calc(1.4px * var(--sarky-cart-control-scale, 1)) solid #111 !important;
    border-bottom: calc(1.4px * var(--sarky-cart-control-scale, 1)) solid #111 !important;
    transform: translateY(-50%) rotate(45deg) !important;
    pointer-events: none !important;
  }

  .cart-drawer .sarky-filled-cart-row__size-select {
    width: 100% !important;
    height: 100% !important;
    padding: 0 calc(30px * var(--sarky-cart-control-scale, 1)) 0 calc(14px * var(--sarky-cart-control-scale, 1)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111 !important;
    appearance: none !important;
    font-family: var(--font-body--family), "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: calc(var(--sarky-cart-controls-font-size, 13px) * var(--sarky-cart-control-scale, 1)) !important;
    line-height: calc(var(--sarky-cart-size-picker-height, 32px) * var(--sarky-cart-control-scale, 1)) !important;
    font-weight: var(--sarky-cart-controls-font-weight, 400) !important;
    text-align: left !important;
  }

  .cart-drawer .sarky-filled-cart-row__size-select:focus-visible {
    outline: 1px solid #111 !important;
    outline-offset: -1px !important;
  }

  .cart-drawer .sarky-filled-cart-row__quantity .quantity-selector {
    --quantity-selector-width: calc(var(--sarky-cart-quantity-width, 92px) * var(--sarky-cart-control-scale, 1)) !important;
    --minimum-touch-target: calc(var(--sarky-cart-quantity-height, 32px) * var(--sarky-cart-control-scale, 1)) !important;
    flex: 0 0 calc(var(--sarky-cart-quantity-width, 92px) * var(--sarky-cart-control-scale, 1)) !important;
    width: calc(var(--sarky-cart-quantity-width, 92px) * var(--sarky-cart-control-scale, 1)) !important;
    min-width: 0 !important;
    max-width: calc(var(--sarky-cart-quantity-width, 92px) * var(--sarky-cart-control-scale, 1)) !important;
    height: calc(var(--sarky-cart-quantity-height, 32px) * var(--sarky-cart-control-scale, 1)) !important;
    min-height: 0 !important;
    max-height: calc(var(--sarky-cart-quantity-height, 32px) * var(--sarky-cart-control-scale, 1)) !important;
    display: inline-grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    background: #f3eee8 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .cart-drawer .sarky-filled-cart-row__quantity .quantity-selector button,
  .cart-drawer .sarky-filled-cart-row__quantity .quantity-selector input {
    flex: 0 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(var(--sarky-cart-quantity-height, 32px) * var(--sarky-cart-control-scale, 1)) !important;
    min-height: 0 !important;
    max-height: calc(var(--sarky-cart-quantity-height, 32px) * var(--sarky-cart-control-scale, 1)) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #111 !important;
    font-family: var(--font-body--family), "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: calc(var(--sarky-cart-controls-font-size, 13px) * var(--sarky-cart-control-scale, 1)) !important;
    line-height: calc(var(--sarky-cart-quantity-height, 32px) * var(--sarky-cart-control-scale, 1)) !important;
    font-weight: var(--sarky-cart-controls-font-weight, 400) !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .cart-drawer .sarky-filled-cart-row__quantity .quantity-selector .quantity-minus,
  .cart-drawer .sarky-filled-cart-row__quantity .quantity-selector .quantity-plus {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .cart-drawer .sarky-filled-cart-row__quantity .quantity-selector input {
    appearance: textfield !important;
  }

  .cart-drawer .sarky-filled-cart-row__quantity .quantity-selector input::-webkit-outer-spin-button,
  .cart-drawer .sarky-filled-cart-row__quantity .quantity-selector input::-webkit-inner-spin-button {
    appearance: none !important;
    margin: 0 !important;
  }


  .cart-drawer .sarky-filled-cart-row__quantity .quantity-selector .svg-wrapper,
  .cart-drawer .sarky-filled-cart-row__quantity .quantity-selector svg {
    width: calc((var(--sarky-cart-controls-font-size, 13px) + 4px) * var(--sarky-cart-control-scale, 1)) !important;
    height: calc((var(--sarky-cart-controls-font-size, 13px) + 4px) * var(--sarky-cart-control-scale, 1)) !important;
  }

  .cart-drawer .sarky-filled-cart-row__error,
  .cart-drawer .sarky-filled-cart-row__error.hidden,
  .cart-drawer .sarky-filled-cart-row__error .cart-item__error {
    display: none !important;
  }

  .cart-drawer .sarky-cart-recommendations {
    width: 100% !important;
    padding: 24px 12px 28px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.14) !important;
    background: #fff !important;
  }

  .cart-drawer .sarky-cart-recommendations__top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 0 24px !important;
  }

  .cart-drawer .sarky-cart-recommendations__heading {
    margin: 0 !important;
    color: #111 !important;
    font-family: var(--sarky-cart-recommendations-heading-font, var(--font-heading--family), Georgia, "Times New Roman", serif) !important;
    font-size: var(--sarky-cart-recommendations-heading-size-mobile, 21px) !important;
    line-height: 1 !important;
    font-weight: var(--sarky-cart-recommendations-heading-weight, 400) !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
  }

  .cart-drawer .sarky-cart-recommendations__nav {
    display: flex !important;
    align-items: center !important;
    gap: var(--sarky-cart-arrow-gap, 16px) !important;
    flex: 0 0 auto !important;
  }

  .cart-drawer .sarky-cart-recommendations__nav-button {
    position: relative !important;
    width: calc(var(--sarky-cart-arrow-size, 24px) + 6px) !important;
    height: calc(var(--sarky-cart-arrow-size, 24px) + 6px) !important;
    min-width: calc(var(--sarky-cart-arrow-size, 24px) + 6px) !important;
    min-height: calc(var(--sarky-cart-arrow-size, 24px) + 6px) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: currentColor !important;
    line-height: 1 !important;
  }

  .cart-drawer .sarky-cart-recommendations__nav-button span {
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 0 !important;
  }

  .cart-drawer .sarky-cart-recommendations__nav-button::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: calc(var(--sarky-cart-arrow-size, 24px) * 0.42) !important;
    height: calc(var(--sarky-cart-arrow-size, 24px) * 0.42) !important;
    border-right: var(--sarky-cart-arrow-thickness, 1px) solid currentColor !important;
    border-bottom: var(--sarky-cart-arrow-thickness, 1px) solid currentColor !important;
  }

  .cart-drawer [data-sarky-cart-recommendations-prev]::before {
    transform: translate(-35%, -50%) rotate(135deg) !important;
  }

  .cart-drawer [data-sarky-cart-recommendations-next]::before {
    transform: translate(-65%, -50%) rotate(-45deg) !important;
  }

  .cart-drawer .sarky-cart-recommendations__grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - (var(--sarky-recommendation-gap, 2px) * (var(--sarky-recommendation-columns, 3) - 1))) / var(--sarky-recommendation-columns, 3)) !important;
    grid-template-columns: none !important;
    gap: var(--sarky-recommendation-gap, 2px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .cart-drawer .sarky-cart-recommendations__grid::-webkit-scrollbar {
    display: none !important;
  }

  .cart-drawer .sarky-cart-recommendations__card {
    display: block !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }

  .cart-drawer .sarky-cart-recommendations__image-link,
  .cart-drawer .sarky-cart-recommendations__image-placeholder {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    background: #f7f4f1 !important;
    overflow: hidden !important;
  }

  .cart-drawer .sarky-cart-recommendations__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .cart-drawer .sarky-cart-recommendations__content {
    min-width: 0 !important;
    display: block !important;
    padding: var(--sarky-cart-recommendations-content-gap, 7px) 8px 0 0 !important;
  }

  .cart-drawer .sarky-cart-recommendations__title {
    display: block !important;
    overflow: hidden !important;
    color: #111 !important;
    text-decoration: none !important;
    text-transform: none !important;
    font-family: var(--font-body--family), "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: var(--sarky-cart-recommendations-title-size-mobile, 12px) !important;
    line-height: 1.25 !important;
    font-weight: var(--sarky-cart-recommendations-title-weight, 400) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .cart-drawer .sarky-cart-recommendations__price {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 6px !important;
    color: #111 !important;
    font-family: var(--font-body--family), "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: var(--sarky-cart-recommendations-price-size-mobile, 12px) !important;
    line-height: 1 !important;
    font-weight: var(--sarky-cart-recommendations-price-weight, 400) !important;
  }

  @media screen and (min-width: 750px) {
    .cart-drawer .sarky-cart-recommendations__heading {
      font-size: var(--sarky-cart-recommendations-heading-size-desktop, 22px) !important;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:170) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .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-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__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 var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

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

  .cart-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-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:collection-card (INDEX:172) */
.collection-card {
    --fixed-card-height: var(--height-small);

    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__inner {
    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 {
    max-width: 100%;
    --flex-wrap: wrap;
  }

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

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:174) */
.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:175) */
.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:176) */
.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:177) */
.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:178) */
/* 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:182) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:184) */
.sarky-grid-view.column-options-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: fit-content;
    height: auto;
    margin: 0;
  }

  .sarky-grid-view .column-options {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .sarky-grid-view--mobile .column-options {
    gap: var(--sarky-grid-choice-gap-mobile);
  }

  .sarky-grid-view--desktop .column-options {
    gap: var(--sarky-grid-choice-gap-desktop);
  }

  .sarky-grid-view .column-options__option {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
  }

  .sarky-grid-view .column-options__legend {
    margin: 0;
    padding: 0;
  }

  .sarky-grid-view .column-options__option-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }

  .sarky-grid-view .column-picker {
    display: grid !important;
    place-items: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .sarky-grid-view .sarky-grid-cells {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
  }

  .sarky-grid-view--mobile .sarky-grid-cells {
    grid-auto-columns: var(--sarky-grid-cell-width-mobile);
    gap: var(--sarky-grid-cell-gap-mobile);
  }

  .sarky-grid-view--desktop .sarky-grid-cells {
    grid-auto-columns: var(--sarky-grid-cell-width-desktop);
    gap: var(--sarky-grid-cell-gap-desktop);
  }

  .sarky-grid-view .sarky-grid-cell {
    display: block;
    box-sizing: border-box;
    width: 100%;
    background: transparent;
    border: var(--sarky-grid-outline-width) solid var(--sarky-grid-outline-color);
    border-radius: 0;
    transition:
      background-color 140ms ease,
      border-color 140ms ease;
  }

  .sarky-grid-view--mobile .sarky-grid-cell {
    height: var(--sarky-grid-cell-height-mobile);
  }

  .sarky-grid-view--desktop .sarky-grid-cell {
    height: var(--sarky-grid-cell-height-desktop);
  }

  .sarky-grid-view
    .column-options__option-input:checked
    ~ .column-picker
    .sarky-grid-cell {
    background: var(--sarky-grid-active-fill);
    border-color: var(--sarky-grid-active-fill);
  }

  .sarky-grid-view
    .column-options__option-input:focus-visible
    ~ .column-picker {
    outline: 1px solid var(--sarky-grid-outline-color) !important;
    outline-offset: 2px;
  }

  @media screen and (max-width: 749px) {
    .sarky-grid-view--desktop {
      display: none !important;
    }
  }

  @media screen and (min-width: 750px) {
    .sarky-grid-view--mobile {
      display: none !important;
    }
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:185) */
.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:186) */
.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 {
    /* Keep the account action transparent so it inherits the active header state. */
    position: relative;
    background: transparent;
  }

  shopify-account.sarky-account-layout-marker {
    display: none !important;
  }

  .wishlist-button {
    position: relative;
    background: transparent;
  }

  .wishlist-button__link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-account-icon);
    text-decoration: none;
    transition: color var(--header-content-transition-timing), opacity var(--animation-speed) var(--animation-easing);
    -webkit-font-smoothing: antialiased;
  }

  .wishlist-button.header-actions__action .wishlist-button__icon {
    width: 22px;
    height: 22px;
    color: var(--color-account-icon);
  }

  /* Mobile header icons: one optical size (~17.4px ink height) so wishlist, account,
     bag and the search glyph read as one row, plus tight cells (29.5/32/34.1px instead of 44px, ~16px between the drawn icons; the bookmark glyph is narrower, so its cell is smaller to keep the optical gaps equal).
     Measured on device-scale screenshots: centres within 0.4px, gaps 23px. The right
     bookend in sections/header.liquid is sized to match (44px + 12px). */
  @media screen and (max-width: 749px) {
    .wishlist-button .wishlist-button__link {
      width: 29.5px;
    }

    .account-button .account-button__direct-link {
      width: 32px;
    }

    /* keeps the bag's distance to the screen edge (~15px) with the narrower cells */
    header-actions {
      padding-inline-end: 4.5px;
    }

    header-actions .header-actions__action:not(.account-button) .header-actions__cart-icon .svg-wrapper {
      width: 34.1px;
    }

    .header-actions__action:not(.account-button) .header-actions__cart-icon svg {
      width: 23.3px;
      height: 23.3px;
      transform: translateY(0.4px);
    }

    .search-action .header-actions__action:not(.account-button) svg {
      width: 21.8px;
      height: 21.8px;
    }

    .account-button__icon,
    .account-button__signed-in {
      width: 22.7px;
      height: 22.7px;
    }

    .account-button__icon {
      transform: translateY(-0.4px);
    }
  }

  .account-button__direct-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-account-icon);
    text-decoration: none;
    transition: color var(--header-content-transition-timing), opacity var(--animation-speed) var(--animation-easing);
    -webkit-font-smoothing: antialiased;
  }

  .account-button__direct-link:hover {
    color: var(--color-account-icon);
  }

  .account-button--text .account-button__direct-link {
    width: auto;
    min-width: 44px;
  }

  .account-button__signed-in-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111111;
    color: #ffffff;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
  }

  .account-button__signed-in {
    position: relative;
    display: inline-flex;
    width: 22px;
    height: 22px;
  }

  /* Green "signed in" check on the lower-right of the account glyph. The ring
     uses the header's own colour context (white) so it reads on both the
     transparent-over-video and the solid header states. */
  .account-button__check {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1f9d55;
    box-shadow: 0 0 0 1.2px #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  header-actions {
    display: flex;

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

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

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

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

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

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

    position: relative;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* SARKY cart drawer header */
  .sarky-cart-drawer-header {
    min-height: 45px;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.12) !important;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-background);
  }

  .sarky-cart-drawer-header__title {
    margin: 0 !important;
    padding: 0;
    text-align: center;
    justify-content: center;
    font-family: Didot, "Bodoni 72", "Bodoni 72 Smallcaps", "Times New Roman", serif !important;
    font-weight: 300 !important;
    font-size: 17px;
    line-height: .95;
    letter-spacing: -0.035em;
    transform: scaleX(.90);
    transform-origin: center;
    text-transform: uppercase;
  }

  .sarky-cart-drawer-header__close,
  .sarky-cart-drawer-header__bag {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--color-foreground);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .sarky-cart-drawer-header__close::before,
  .sarky-cart-drawer-header__close::after,
  .sarky-cart-drawer-header__bag::before,
  .sarky-cart-drawer-header__bag::after {
    display: none !important;
    content: none !important;
  }

  .sarky-cart-drawer-header__close {
    left: 0;
  }

  .sarky-cart-drawer-header__close:hover,
  .sarky-cart-drawer-header__close:focus,
  .sarky-cart-drawer-header__close:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .sarky-cart-drawer-header__bag {
    right: 0;
    pointer-events: none;
  }

  .sarky-cart-drawer-header__close .svg-wrapper,
  .sarky-cart-drawer-header__bag svg {
    width: 20px;
    height: 20px;
  }

  .sarky-cart-drawer-header__bubble {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-family: var(--font-body--family), "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
  }

  .sarky-cart-drawer-header__bubble.hidden {
    display: none !important;
  }

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

  .cart-drawer--empty .cart-drawer__header {
    justify-content: center !important;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.12) !important;
    padding-bottom: 0 !important;
  }

  .cart-drawer--empty .cart-drawer__content {
    height: calc(100% - 54px);
    justify-content: flex-start !important;
  }

  .cart-drawer__heading--empty {
    display: none !important;
  }

  #cart-drawer-heading-empty.cart-drawer__heading--empty {
    display: none !important;
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:187) */
.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);
  }

  /* Maison: the header menu toggle rendered its glyph in a 13.6px box
     (--icon-size-xs) while account and bag sit at 20px, so the hamburger read
     visibly smaller AND lighter on device -- its stroke scaled down with the
     box to 0.95px against account's 1.40px. Moved to --icon-size-sm (20px) so
     the toggle matches the rest of the header family. This selector only
     covers the summary's own open/close pair; the drawer's internal close
     buttons are not descendants of .header__icon--summary and are unaffected.
     The 44px tap target is set on the parent and does not change. */
  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

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

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

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

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

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

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

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

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

  .menu-drawer__navigation {
    padding: 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }

  /* SARKY header tap cleanup */
  .header__icon,
  .header__icon--summary,
  .header-actions__action,
  .header-actions__action button,
  .header-actions__action a,
  .header-actions__action summary,
  .header-drawer__summary,
  .header-drawer summary,
  summary.header__icon {
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
    outline: none;
    box-shadow: none;
  }

  .header__icon:active,
  .header__icon--summary:active,
  .header-actions__action:active,
  .header-actions__action button:active,
  .header-actions__action a:active,
  .header-actions__action summary:active,
  .header-drawer__summary:active,
  .header-drawer summary:active,
  summary.header__icon:active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:192) */
.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:195) */
.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: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .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 {
    &: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:196) */
/* 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-primary);
    --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-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-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: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .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: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-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:197) */
.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:202) */
.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:203) */
.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;
  }

  .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 {
    /* Maison Signature chevrons live on a square 24-unit grid, so the old
       8x12 box would letterbox them and render the glyph ~30% small. 1.125rem
       (18px) keeps the arrow at the same optical size it had before. */
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;

    /* 1.61u = 1.21px optical at this 18px render. */
    --sarky-maison-stroke-secondary: 1.61;
  }

  .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:204) */
.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:208) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    40% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &:hover {
      opacity: 1;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:209) */
/* 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 {
    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:211) */
.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:212) */
/* MOBILE UAT PASS -- THE REAL LEFT/RIGHT INSET ROOT CAUSE: real
     390px-viewport rendering (Playwright, iPhone emulation -- this
     environment's own browser tool cannot resize, confirmed again this
     pass) proved `.product-card__content` renders with a real
     `padding-inline: 8px` on both sides, even though every
     `--padding-inline-start/end` CSS custom property feeding into it
     (both the block's own inline style and the `.spacing-style`
     class's defaults) computes to 0px. The literal `padding-inline`
     shorthand property is being set to 8px by a rule this investigation
     could not isolate in the compiled/minified theme CSS despite an
     exhaustive source and served-stylesheet search (assets/base.css,
     compiled_assets/styles.css) -- the mismatch between the 0px custom
     properties and the real 8px computed padding indicates it comes from
     a mechanism this file's own source inspection cannot see cleanly
     (the theme's asset pipeline / CSS layering). The gallery/image
     compensates for exactly this 8px with its own `margin-inline: -8px`
     (blocks/_product-card-gallery.liquid's card-gallery wrapper), which
     is why the IMAGE reaches the true card edge while title/swatches/
     price do not -- confirmed via direct DOM measurement: image left ==
     content wrapper's own left, but every text-content child inside it
     sits 8px further in. Forcing the padding back to 0 here, scoped
     narrowly to this one wrapper, makes title/swatches/price flush with
     the image on every surface using this shared component (collection,
     search, homepage native list, recommendations) without touching
     whatever upstream mechanism sets the 8px, and without needing to
     understand or risk breaking that mechanism itself. */
  .product-card__content.product-card__content.product-card__content {
    /* !important justified: proven (via real 390px Playwright rendering)
       that neither a plain class selector nor tripled specificity
       (0,3,0) was enough to win -- the actual winning rule could not be
       isolated in the compiled/minified theme CSS despite an exhaustive
       search, meaning it very likely carries !important itself (or a
       higher-specificity mechanism this investigation could not surface
       in minified output). This is the documented last resort after
       that investigation, not a first-reach shortcut. */
    padding-inline: 0 !important;
  }

  /* The native card-gallery wrapper (blocks/_product-card-gallery.liquid's
     rendered `.card-gallery`) carries its OWN compensating
     `margin-inline: -8px` (also proven at real 390px viewport, also not
     traceable to a single readable source rule in the compiled CSS) --
     specifically sized to cancel out the exact 8px padding just removed
     above, so the image could bleed to the true card edge while the
     padded content stayed inset. With that padding now zero, the
     uncompensated -8px margin pushed the image 8px PAST the card edge
     (negative left offset, confirmed live) instead of flush with it.
     Neutralizing it here keeps image and content on the exact same
     edges -- the originally-intended "edge-to-edge image" effect is no
     longer needed now that content matches the image's edge directly. */
  .product-card__content.product-card__content .card-gallery {
    margin-inline: 0 !important;
    width: 100% !important;
  }

  /* DEEP ROOT-CAUSE PASS (re-derived from clean live baseline): the price
     block's "h6" type preset resolves to the Subheading font role
     (config/settings_data.json: type_font_h6 -> poppins_n5, weight 500),
     rendering product-card prices BOLDER than the title (title inherits
     the paragraph-weight token, 400) -- inverting the Wishlist card's
     hierarchy, where price is secondary to title (no weight override at
     all there). <product-price> also carries the generic `.text-block`
     class (flex column, own editable padding-block-start/end), the same
     structural fragility already fixed for the title above. Scoped to
     `product-price` inside `product-card` only -- PDP/cart price
     instances using the same shared block and the same h6 preset
     elsewhere are unaffected. */
  product-card product-price.h6.h6 {
    font-weight: var(--font-paragraph--weight);
    display: block;
    margin: 0;
    padding: 0;
  }

  .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:213) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    width: 100%;
    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-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: 0;

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

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

  .main-collection-grid__empty--sarky {
    min-height: clamp(320px, 46vw, 520px);
    justify-content: center;
    gap: 10px;
    padding-block: 72px;
  }

  .main-collection-grid__empty--sarky .main-collection-grid__empty-title {
    font-family: var(--font-heading--family);
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 400;
    line-height: 1;
  }

  .main-collection-grid__empty-copy {
    max-width: 420px;
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.5;
  }

  @media screen and (max-width: 749px) {
    .main-collection-grid__empty--sarky {
      min-height: 380px;
      padding-inline: 24px;
      padding-block: 64px;
    }

    .main-collection-grid__empty--sarky .main-collection-grid__empty-title {
      font-size: 42px;
    }

    .main-collection-grid__empty-copy {
      font-size: 14px;
    }
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:214) */
.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:215) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

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

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

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

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

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

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

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

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

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

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:216) */
.sarky-product-media-gallery-wrap {
    position: relative;
  }

.sarky-product-sale-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  min-width: 48px;
  height: 30px;
  padding: 0 10px;
  background: #b90000;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  pointer-events: none;
}

@media screen and (min-width: 750px) {
  .sarky-product-sale-badge {
    top: 12px;
    right: 12px;
    bottom: auto;
    min-width: 44px;
    height: 28px;
    padding: 0 9px;
    font-size: 12px;
  }
}

@media screen and (max-width: 749px) {
  .sarky-product-sale-badge {
    top: auto;
    right: 12px;
    bottom: 12px;
    min-width: 48px;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
  }
}
  .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;
  }
  /* SARKY gallery dots */
  .sarky-product-media-gallery-wrap media-gallery slideshow-component {
    position: relative !important;
  }

  .sarky-product-media-gallery-wrap media-gallery slideshow-controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 15px !important;
    z-index: 18 !important;
    width: 100% !important;
    max-width: none !important;
    height: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    pointer-events: none !important;
    transform: none !important;
  }

  .sarky-product-media-gallery-wrap media-gallery slideshow-controls[pagination-position='center'],
  .sarky-product-media-gallery-wrap media-gallery slideshow-controls[pagination-position='left'],
  .sarky-product-media-gallery-wrap media-gallery slideshow-controls[pagination-position='right'] {
    left: 0 !important;
    right: 0 !important;
    justify-content: flex-start !important;
  }

  .sarky-product-media-gallery-wrap media-gallery ol.slideshow-controls__dots {
    position: absolute !important;
    left: 18px !important;
    right: auto !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: auto !important;
    height: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .sarky-product-media-gallery-wrap media-gallery ol.slideshow-controls__dots > li {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    min-height: 5px !important;
    max-width: 5px !important;
    max-height: 5px !important;
    margin: 0 11px 0 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    display: block !important;
    flex: 0 0 5px !important;
  }

  .sarky-product-media-gallery-wrap media-gallery ol.slideshow-controls__dots > li:last-child {
    margin-right: 0 !important;
  }

.sarky-product-media-gallery-wrap media-gallery ol.slideshow-controls__dots button.slideshow-control,
.sarky-product-media-gallery-wrap media-gallery ol.slideshow-controls__dots button.slideshow-control[aria-selected='true'] {
  width: 5px !important;
  height: 5px !important;
  min-width: 5px !important;
  min-height: 5px !important;
  max-width: 5px !important;
  max-height: 5px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: #bdbdbd !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  display: block !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

.sarky-product-media-gallery-wrap media-gallery ol.slideshow-controls__dots button.slideshow-control[aria-selected='false'] {
  background: #111111 !important;
}
  .sarky-product-media-gallery-wrap media-gallery ol.slideshow-controls__dots button.slideshow-control * {
    display: none !important;
  }

  .sarky-product-media-gallery-wrap media-gallery ol.slideshow-controls__dots button.slideshow-control::before,
  .sarky-product-media-gallery-wrap media-gallery ol.slideshow-controls__dots button.slideshow-control::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  @media screen and (min-width: 750px) {
    .sarky-product-media-gallery-wrap media-gallery slideshow-controls {
      bottom: 15px !important;
    }

    .sarky-product-media-gallery-wrap media-gallery ol.slideshow-controls__dots {
      left: 18px !important;
    }
  }

  @media screen and (max-width: 749px) {
    .sarky-product-media-gallery-wrap media-gallery slideshow-controls {
      bottom: 15px !important;
    }

    .sarky-product-media-gallery-wrap media-gallery ol.slideshow-controls__dots {
      left: 18px !important;
    }
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:217) */
.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:218) */
.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:219) */
#quick-add-dialog {
    display: contents;
  }

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

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* SARKY: "View full product" link -- shown on mobile AND desktop
     (was previously hidden on mobile here; see the later blanket-hide
     rule below, also relaxed for the same reason). */

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

  /* SARKY: on a phone the cross sits level with the modal's 20px content padding */
  @media screen and (max-width: 749px) {
    .quick-add-modal__close {
      right: -2px;
    }
  }

  .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) {
      /*
       * SARKY correction pass: this was `repeat(4, 1fr)` with the photo
       * pinned to column 1 of 4 (25% width) and the title to columns
       * 2-4 -- a real bug, not a taste choice (found via Billy's iPhone
       * recording: "kleine productthumbnail, samengedrukte informatie").
       * A single column lets every child (media, header, variant-picker,
       * product-form-component, view-more-details) stack full-width in
       * DOM order -- photo first and prominent, then info below it,
       * matching the PepperMayo reference. See the full-width rules
       * further down for the elements that used to have a narrow,
       * hardcoded span.
       */
      grid-template-columns: 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;
      gap: 2px;
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }

  .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,
  .quick-add-modal__content .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  /*
   * SARKY correction pass: the real bug behind the "kleine
   * productthumbnail" complaint -- this was `grid-column: 1 / span 1`
   * (the DESKTOP default, 1 of 4/7 narrow side columns) with no mobile
   * override at all, so the photo rendered at ~25% width on a phone.
   */
  .quick-add-modal__content .product-information__media {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }

  .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,
      .sarky-pdp-title-row,
      .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);
  }

  /* SARKY: on the real PDP the details group sits inside .sarky-pdp-title-row (title/heart row).
     The same wrapper also arrives inside this modal, so the rules above that target
     `.product-details > .group-block` need the wrapper-aware equivalent. Desktop only -- the
     phone layout has its own rules and is left exactly as it was. */
  @media screen and (min-width: 750px) {
    .quick-add-modal__content .product-details > .sarky-pdp-title-row {
      flex-grow: 1;
      align-items: stretch;
    }

    .quick-add-modal__content .product-details > .sarky-pdp-title-row > .group-block {
      flex-grow: 1;
      width: auto;
      padding-block: var(--padding-3xl) 0;
    }

    .quick-add-modal__content
      :where(.product-details > .sarky-pdp-title-row > .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) {
    display: none;
  }

  /* SARKY: real "View full product" link, finishing the .view-more-details
     styling that already existed in this file with no markup ever wired to
     it. Sits after the buy-buttons in DOM order (see assets/quick-add.js
     and blocks/_product-details.liquid), which already reads correctly
     as "below the primary action" -- no `order` override needed, and one
     less thing that can silently fight the grid-column fix above. */
  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    margin-block: 10px 2px;
  }

  .quick-add-modal__content .view-more-details {
    font-size: var(--font-size--sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
  }

  @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:221) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }

  /*
   * SARKY: PepperMayo-style black square trigger, replacing Horizon's
   * default white pill. Always visible (not hover-only) on every
   * breakpoint -- a touch device has no hover state to reveal it.
   * Kept purely as a CSS re-skin of the existing quick-add-component /
   * quick-add-dialog architecture: no new button, no new JS, no new
   * add-to-cart logic.
   */
  .quick-add__button {
    display: var(--quick-add-mobile-display, flex) !important;
    opacity: 1 !important;
    background: #111111 !important;
    border: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    width: 30px;
    height: 30px !important;
    padding: 0 !important;
    scale: 1 !important;

    /* SARKY: anchor the square hard into the bottom-right corner of the
       photo. Horizon derives right/bottom from --quick-add-offset plus the
       card padding and then pads again for its own border-radius, which left
       the badge visibly floating. This square has no radius, so it can sit
       tight. Overridden explicitly rather than by retuning --quick-add-offset,
       which also drives other Horizon quick-add variants. */
    right: 5px !important;
    bottom: 5px !important;
  }

  .quick-add[stay-visible] .quick-add__button {
    display: flex !important;
  }

  @media screen and (min-width: 750px) {
    .quick-add__button {
      display: var(--quick-add-display, flex) !important;
      opacity: 1 !important;
    }
  }

  /*
   * SARKY correction pass: real bug found via an interactive Playwright
   * test on the preview -- TWO black squares rendered stacked on a
   * product card (both the "Add" and "Choose" button variants visible
   * at once). Horizon's own exclusivity rules
   * ([data-quick-add-button='choose'] add-to-cart-component and
   * [data-quick-add-button='add'] .quick-add__button--choose, both in
   * assets/base.css) hide whichever variant isn't active, but every
   * `!important` display override above (needed to beat the OTHER
   * native rules that hide this button until hover) also beat THOSE,
   * since `!important` ignores selector specificity entirely. Re-assert
   * the exclusivity explicitly, same importance, so only one button --
   * styled as the one black square -- is ever visible per card.
   */
  [data-quick-add-button='choose'] add-to-cart-component .quick-add__button {
    display: none !important;
  }

  [data-quick-add-button='add'] .quick-add__button--choose {
    display: none !important;
  }

  .quick-add__button .add-to-cart-text {
    background: transparent;
    width: 30px;
    height: 30px;
    border-radius: 0;
    display: grid;
    place-items: center;
  }

  .quick-add__button .add-to-cart-text__content,
  .quick-add__button:is(:hover, :focus-visible) .add-to-cart-text__content {
    display: none !important;
  }

  .quick-add__button .add-to-cart-icon {
    width: 30px !important;
    height: 30px !important;
    display: grid;
    place-items: center;
    color: #ffffff;
  }

  /* Hide the shared cart-plus glyph and mask in the real, approved SARKY
     bag icon (assets/icon-cart.svg) instead -- keeps add-to-cart-button.liquid
     and its icon completely untouched for the PDP / sticky-ATC, which are
     out of scope for this round's icon usage. */
  .quick-add__button .add-to-cart-icon svg {
    display: none;
  }

  .quick-add__button:hover {
    scale: 1 !important;
  }

  .quick-add__button:hover::before {
    content: none !important;
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:223) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:224) */
.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:225) */
.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:sarky-header-search (INDEX:230) */
.sarky-header-search {
    display: flex;
    align-items: center;
    /* Default (desktop-inline) width - a usable size without unbalancing
       the header's left/right grid columns, which share the remaining
       space equally (see .header__columns in sections/header.liquid).
       The mobile row modifier overrides this to full width below. */
    width: clamp(200px, 18vw, 280px);
  }

  /* Desktop: the header actions grew by one 44px icon (wishlist), so the inline
     search gives up the same 44px to keep the bag icon inside the viewport. */
  @media screen and (min-width: 750px) {
    .sarky-header-search:not(.sarky-header-search--row) {
      width: clamp(156px, calc(18vw - 44px), 236px);
    }
  }

  .sarky-header-search--row.search-action {
    width: 100%;
  }

  .sarky-header-search__animate {
    display: flex;
    width: 100%;
  }

  .sarky-header-search__form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    border-radius: 5px;
    /* Genuinely transparent by default - no fill, no backdrop-blur, so
       it never reads as a coloured surface over the video. Switched to a
       quiet light-on-white surface below once the header is scrolled. */
    background: transparent;
    border: 1px solid rgb(255 255 255 / 0.6);
    transition: background-color 180ms ease, border-color 180ms ease;
  }

  .sarky-header-search__trigger {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
  }

  .sarky-header-search__form:has(.sarky-header-search__trigger:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* Maison: this glyph is sized with the rest of the header family. It began
     as a hardcoded 15px box (ink 10.96px against account 14.17px -- visibly
     small on device), went to 20px, and is now 22px as part of the sitewide
     +12% pass. Scoped to this component only, so the search modal, desktop
     search and any other compact search control are untouched. The 44px field
     height is unchanged -- only the inline start of the text moves, which the
     animated overlay below is kept in sync with. */
  .sarky-header-search__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-inline-start: 14px;
    flex-shrink: 0;
    color: #ffffff;
    transition: color 180ms ease;
  }

  .sarky-header-search__icon svg {
    width: 100%;
    height: 100%;
  }

  .sarky-header-search__input {
    flex: 1;
    height: 100%;
    min-width: 0;
    padding-inline: 8px 14px;
    border: 0;
    /* !important: assets/base.css has an unscoped `input:hover,
       textarea:hover { background-color: var(--color-input-hover-background); }`
       rule. Its specificity (0,1,1 - the :hover pseudo-class plus the
       bare `input` type selector) beats a plain `.sarky-header-search__input`
       class rule (0,1,0), so on hover the browser was silently repainting
       this input with whatever --color-input-hover-background resolves to
       for the active color scheme, overriding the transparent background
       below. snippets/header-drawer.liquid's own search input already
       guards against this exact rule with !important - this brings the
       header instance in line with that existing, proven pattern. */
    background: transparent !important;
    background-image: none;
    /* Without this, WebKit/Safari renders input[type="search"] with its
       own native "searchfield" appearance - a translucent dark/grey
       system chrome that ignores the `background: transparent` above and
       reads exactly as a dark inner fill, independent of any of our own
       CSS. This is the concrete fix for that. */
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-body--family);
    font-size: 12px;
    color: #ffffff;
    outline: none;
    transition: color 180ms ease;
  }

  /* Static fallback only (prefers-reduced-motion, or if the overlay's own
     CSS below fails to load) - the animated state renders in the overlay
     instead, never in the placeholder. */
  .sarky-header-search__input::placeholder {
    color: rgb(255 255 255 / 0.88);
    transition: color 180ms ease;
  }

  .sarky-header-search__input::-webkit-search-cancel-button {
    filter: invert(1);
  }

  /* Decorative typing overlay (assets/sarky-animated-search.js) -
     positioned to match exactly where the real input's own text starts:
     icon width (22px) + icon margin-inline-start (14px) + input's own
     padding-inline-start (8px) = 44px; input's own padding-inline-end
     (14px) on the trailing side. Never intercepts clicks/typing, and
     never adds its own background or height. */
  .sarky-header-search__form .sarky-animated-search__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding-inline: 44px 14px;
    pointer-events: none;
    font-family: var(--font-body--family);
    font-size: 12px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    transition: color 180ms ease;
  }

  /* Light-on-white pair once the header is in its scrolled/opaque state.
     Keyed off the SAME state attribute the site's existing header
     transparent/white controller already uses and proved working
     (sections/header-announcements.liquid: data-sarky='top' at the very
     top of the page, anything else once scrolled) - NOT Horizon's own
     enable_sticky_header/data-sticky-state, which that controller
     deliberately leaves untouched (enable_sticky_header stays "never").
     !important matches that controller's own convention, since these
     rules are joining its cascade. */
  body.sarky-grouped:has(.header[transparent]) #header-group:not([data-sarky='top']) .sarky-header-search__form {
    background: rgb(17 17 17 / 0.04) !important;
    border-color: rgb(17 17 17 / 0.2) !important;
  }

  body.sarky-grouped:has(.header[transparent]) #header-group:not([data-sarky='top']) .sarky-header-search__icon {
    color: #111111 !important;
  }

  body.sarky-grouped:has(.header[transparent]) #header-group:not([data-sarky='top']) .sarky-header-search__input,
  body.sarky-grouped:has(.header[transparent]) #header-group:not([data-sarky='top']) .sarky-header-search__form .sarky-animated-search__overlay {
    color: #111111 !important;
  }

  body.sarky-grouped:has(.header[transparent]) #header-group:not([data-sarky='top']) .sarky-header-search__input::placeholder {
    color: #77716e !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .sarky-header-search__form,
    .sarky-header-search__icon,
    .sarky-header-search__input,
    .sarky-header-search__input::placeholder {
      transition: none;
    }
  }
/* END_SNIPPET:sarky-header-search */

/* START_SNIPPET:sarky-hero-search-tabs (INDEX:231) */
.sarky-hero-tabs-overlay {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--layer-raised);
    display: flex;
    justify-content: center;
    padding: 16px clamp(12px, 4vw, 32px) calc(20px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 100%);
    pointer-events: none;
  }

  /* Blockified so its child nav can actually take the full width below -
     flex items are already blockified per spec, this is just explicit. */
  sarky-hero-tabs {
    display: block;
    width: 100%;
  }

  /* Grid instead of a content-hugging centered flex row: spreads the
     three labels across nearly the full usable hero width (matching the
     PepperMayo reference) instead of clustering them in the middle.
     Each tab still centers within its own third via justify-items, and
     `.sarky-hero-overlay__tab` itself (and everything under it - the
     ::after indicator, is-active, hover/focus rules) is completely
     untouched below, so `left: 50%` on the indicator still centers
     correctly under whichever tab's own box is active. */
  .sarky-hero-overlay__tabs {
    pointer-events: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    column-gap: 12px;
    width: 100%;
    overflow: visible;
  }

  .sarky-hero-overlay__tab {
    position: relative;
    flex: 0 0 auto;
    padding-block: 6px 8px;
    color: #ffffff;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.7;
    transition: opacity 180ms ease;
  }

  .sarky-hero-overlay__tab:hover,
  .sarky-hero-overlay__tab:focus-visible {
    opacity: 1;
  }

  .sarky-hero-overlay__tab.is-active {
    opacity: 1;
  }

  /* Vertical connector mark - not a horizontal underline, and not a
     short mark floating in isolation either. `top: 100%` starts it
     right where the tab's own bottom padding ends (a small, deliberate
     gap under the text); `bottom` is the overlay's own real
     padding-block-end, negated - the exact same
     `20px + env(safe-area-inset-bottom)` value used on
     `.sarky-hero-tabs-overlay` below, just mirrored, so the two numbers
     can never drift apart. With both `top` and `bottom` set, the
     browser computes the height itself, so the bar always spans
     precisely from the tab's text to the hero's actual bottom edge -
     on any device, without measuring anything at runtime.
     transform-origin: top makes it visually grow DOWN from the active
     tab toward that edge. Shown on hover/focus too (not just the
     active tab) as a light discoverability affordance, matching the
     reference. */
  .sarky-hero-overlay__tab::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    bottom: calc(-1 * (20px + env(safe-area-inset-bottom)));
    width: 2px;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    transition: opacity 200ms ease, transform 200ms ease;
  }

  .sarky-hero-overlay__tab.is-active::after,
  .sarky-hero-overlay__tab:hover::after,
  .sarky-hero-overlay__tab:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }

  @media screen and (max-width: 749px) {
    .sarky-hero-tabs-overlay {
      padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    }

    .sarky-hero-overlay__tab {
      font-size: 11px;
    }

    .sarky-hero-overlay__tab::after {
      bottom: calc(-1 * (14px + env(safe-area-inset-bottom)));
    }
  }

  /* PEPPERMAYO-FEEL PASS 6 (desktop only - reported regression from PASS
     5 above): a 3-column `1fr` grid at `width: 100%` has no upper bound
     on how wide a column gets, so on a wide desktop viewport the three
     tabs end up spread across nearly the entire hero width - visually
     the same outcome as `justify-content: space-between`, even though
     that property was never used. Mobile isn't affected the same way
     (a narrow viewport keeps `width: 100%` itself narrow) and is
     reportedly correct as-is, so the grid rule above is intentionally
     left untouched - this only reverts desktop specifically back to a
     compact, centered, natural-width row. `gap: 2.5rem` (40px) restores
     PepperMayo's own real measured desktop tab gap (see PASS 2 above -
     this was SARKY's actual desktop value before PASS 5 replaced it
     with the grid). */
  @media screen and (min-width: 750px) {
    .sarky-hero-overlay__tabs {
      display: flex;
      justify-content: center;
      width: auto;
      gap: 2.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sarky-hero-overlay__tab,
    .sarky-hero-overlay__tab::after {
      transition: none;
    }
  }
/* END_SNIPPET:sarky-hero-search-tabs */

/* START_SNIPPET:sarky-mobile-purchase-bar (INDEX:232) */
.sarky-mobile-bar {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .sarky-mobile-bar {
      display: flex;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      width: 100%;
      padding-bottom: env(safe-area-inset-bottom, 0px);
      background: #ffffff;
      border-top: 1px solid #e5e5e5;
    }

    .sarky-mobile-bar__select,
    .sarky-mobile-bar__add {
      flex: 1 1 50%;
      min-width: 0;
      min-height: 52px;
      margin: 0;
      padding: 0 12px;
      border: 0;
      border-radius: 0;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.2;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sarky-mobile-bar__select {
      background: #ffffff;
      color: #111111;
      border-right: 1px solid #e5e5e5;
      text-align: left;
    }

    .sarky-mobile-bar__add {
      background: #111111;
      color: #ffffff;
      text-align: center;
    }

    .sarky-mobile-bar__add--solo {
      flex: 1 1 100%;
    }

    .sarky-mobile-bar__add:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    /* Page content (product info, footer) must never end up hidden behind
       the always-fixed bar. */
    body:has(.sarky-mobile-bar) {
      padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    }

    /* SARKY floating stylist launcher (snippets/sarky-floating-stylist.liquid)
       is fixed bottom-right sitewide -- pushed up above this bar on the PDP
       only, so the two never visually or physically overlap. Its own
       z-index (2147481000) is left completely untouched; only its bottom
       offset changes. */
    body:has(.sarky-mobile-bar) .sarky-floating-stylist {
      bottom: calc(52px + 18px + env(safe-area-inset-bottom, 0px));
    }
  }
/* END_SNIPPET:sarky-mobile-purchase-bar */

/* START_SNIPPET:sarky-rail-product-card (INDEX:234) */
.sarky-rail-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* DEEP ROOT-CAUSE PASS: 14px -> 8px, matching the approved Wishlist
       card's own image-to-first-row density
       (.sarky-wishlist__item-title-row's margin-top: 8px) -- 14px reads
       as nearly double that, directly contradicting Billy's "same
       compact top spacing" requirement across surfaces. Applies
       uniformly to photo -> meta-row (swatches) or photo -> info
       (no-swatch), same single mechanism as the native cards. */
    gap: 8px;
  }

  .sarky-rail-card__link {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .sarky-rail-card__media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f1edec;
  }

  .sarky-rail-card__media-link {
    position: absolute;
    inset: 0;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
  }

  .sarky-rail-card__media-link img {
    -webkit-user-drag: none;
    user-select: none;
  }

  .sarky-rail-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    -webkit-user-drag: none;
    user-select: none;
  }

  .sarky-rail-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sarky-rail-card__image--placeholder .placeholder-svg {
    width: 60%;
    height: 60%;
    color: #cecccc;
  }

  .sarky-rail-card__badge {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 5px 8px;
    background: #f1edec;
    border: 1px solid #111111;
    color: #111111;
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    z-index: 2;
  }

  .sarky-rail-card__badge--sale {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
  }

  .sarky-rail-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-inline: 2px;
  }

  .sarky-rail-card__title {
    /* DEEP ROOT-CAUSE PASS: 13px -> 11px, matching the Wishlist
       reference's .sarky-wishlist__item-title exactly, for the same
       "title feel" consistency across every product-card surface. */
    font-size: 11px;
    /* 600 -> the canonical regular product-card weight (same
       var(--font-paragraph--weight) token native cards already inherit)
       -- this was the one hardcoded, out-of-place bold override left on
       any product-card title after the baseline reset; every other
       surface was already 400. */
    font-weight: var(--font-paragraph--weight);
    color: #111111;
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Self-contained here rather than relying on
     blocks/product-title.liquid's stylesheet -- this rail renders on
     pages (e.g. the homepage) that may never include that block at all,
     so its CSS bundle can't be assumed present. Same visual recipe
     (flex-start so a 2-line title stays level with the heart's first
     line, min-width: 0 on the title so it can never push into the fixed-
     size heart). */
  .sarky-rail-card__title-row {
    /* FINAL GLOBAL PRODUCT-CARD SPACING PASS: position:relative + the
       heart override below mirror blocks/product-title.liquid's
       identical fix for the same row (same fixed-34px-heart-inflating-
       row-height bug) -- kept self-contained here rather than relying on
       that file's own stylesheet bundle being present, same reasoning as
       this rule's own original doc comment above. */
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  .sarky-rail-card__title-row .sarky-rail-card__title {
    flex: 1 1 auto;
    min-width: 0;
    /* Reserves the space the heart used to occupy as a flex sibling, now
       that it's position: absolute below. */
    padding-inline-end: 36px;
  }

  .sarky-rail-card__title-row .sarky-wishlist-heart--card-title-row {
    position: absolute;
    top: 0;
    right: -6px;
    margin-inline-end: 0;
  }

  .sarky-rail-card__title:hover {
    text-decoration: underline;
  }

  .sarky-rail-card__price {
    font-size: 11px;
    color: #696461;
  }

  .sarky-rail-card__price .price {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
  }

  /* .sarky-rail-card__link (above) is an invisible position:absolute;
     inset:0 card-wide click target with z-index:0. .sarky-card-meta itself
     is plain flow content from blocks/swatches.liquid and would otherwise
     paint BELOW that positioned sibling regardless of DOM order -- exactly
     the bug this pass found and fixed for .sarky-rail-card__info (see the
     doc comment above). position:relative puts this row in the same
     stacking bucket, later in the DOM, so it wins and its swatches/
     wishlist are genuinely reachable. */
  .sarky-rail-card .sarky-card-meta {
    position: relative;
    padding-inline: 2px;
  }
/* END_SNIPPET:sarky-rail-product-card */

/* START_SNIPPET:sarky-wishlist-heart (INDEX:236) */
/* Single canonical SARKY wishlist accent token. Every heart (product
     card, PDP, Wishlist page) reads from this one source instead of the
     literal hex being copied across files. */
  :root {
    /* SARKY: the wishlist mark is BLACK, not pink -- unsaved is a black
       outline, saved is filled black. Billy could not read the pink on a
       real screen. One token still drives outline, fill and focus ring. */
    --sarky-wishlist-accent: #111111;
  }

  /* Give the heart's positioning context without touching the shared
     card-gallery/product-information markup itself -- only applies to
     instances that actually contain a heart, so galleries rendered
     without one (e.g. this block reused somewhere without a product) are
     completely unaffected. */
  .card-gallery:has(.sarky-wishlist-heart),
  .product-information__media:has(.sarky-wishlist-heart),
  .product-details:has(.sarky-wishlist-heart) {
    position: relative;
  }

  /* SARKY hard rule: the heart never sits over the product photo as a
     stand-in for a missing meta row. blocks/product-title.liquid always
     renders a heart beside the title (.sarky-card-title-row) -- so
     .card-gallery's own on-image "card" heart (the default, size-less
     variant) is hidden whenever that row exists at all, which is
     effectively every real product card, regardless of whether a
     swatches block is even configured in this particular card layout. */
  product-card:has(.sarky-wishlist-heart--card-title-row) .card-gallery .sarky-wishlist-heart,
  .product-card:has(.sarky-wishlist-heart--card-title-row) .card-gallery .sarky-wishlist-heart {
    display: none !important;
  }

  /* Only one heart is ever visible below the image: when the product
     genuinely has renderable swatches, blocks/swatches.liquid renders a
     real, populated .sarky-card-meta row with its own heart beside the
     swatches -- in that case the title row's own heart (always rendered
     unconditionally, see blocks/product-title.liquid) is the redundant
     one and gets hidden here instead, leaving swatches+heart as row 1
     and a plain title as row 2, per spec. */
  product-card:has(.sarky-card-meta) .sarky-card-title-row .sarky-wishlist-heart,
  .product-card:has(.sarky-card-meta) .sarky-card-title-row .sarky-wishlist-heart {
    display: none !important;
  }

  .sarky-wishlist-heart {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 5;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .sarky-wishlist-heart__icon {
    position: relative;
    width: 25px;
    height: 25px;
    fill: none;
    stroke: var(--sarky-wishlist-accent, #111111);
    /* Maison Signature: 24u grid rendered at 25px (was 22px). 1.39u keeps the
       optical weight at ~1.45px while the mark itself gets bigger. Retune
       weight on this one line; the path geometry never changes. */
    --sarky-maison-stroke-primary: 1.39;
    stroke-width: var(--sarky-maison-stroke-primary, 1.58);
    stroke-linejoin: round;
    stroke-linecap: square;
  }

  /* Saved and unsaved share the exact same <path> geometry -- only the
     fill toggles, never the shape. */
  .sarky-wishlist-heart.is-saved .sarky-wishlist-heart__icon {
    fill: var(--sarky-wishlist-accent, #111111);
  }

  /* REDESIGN WISHLIST VARIANT SELECTION: assets/sarky-wishlist-sheet.js
     now resolves the product (and whether it even needs the sheet)
     before showing anything, so a brief moment can pass with no visible
     change at all after the tap - a subtle dim on the heart itself is
     enough feedback that the tap registered, without a spinner
     overtaking the whole card. */
  .sarky-wishlist-heart.is-loading {
    opacity: 0.45;
  }

  .sarky-wishlist-heart:focus-visible {
    outline: 2px solid var(--sarky-wishlist-accent, #111111);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sarky-wishlist-heart.is-animating .sarky-wishlist-heart__icon {
      animation: sarky-wishlist-heart-pop 200ms ease;
    }
  }

  @keyframes sarky-wishlist-heart-pop {
    0% {
      transform: scale(1);
    }

    40% {
      transform: scale(1.22);
    }

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

  .sarky-wishlist-heart--pdp {
    top: 8px;
    right: 8px;
  }

  @media screen and (min-width: 750px) {
    .sarky-wishlist-heart--pdp {
      top: 12px;
      right: 12px;
    }
  }

  /* SARKY: real flex sibling inside .sarky-pdp-title-row
     (blocks/_product-details.liquid) -- no longer an absolute overlay on
     the product photo/gallery. flex-start alignment on the row puts this
     level with the title's own top line; margin-inline-end pulls the
     visual right edge in line with the touch target the same way the
     card-row hearts below do. */
  .sarky-wishlist-heart--pdp-title {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-inline-end: -6px;
  }

  .sarky-wishlist-heart--pdp-title .sarky-wishlist-heart__icon {
    width: 22px;
    height: 22px;
  }

  /* The two below-image meta-zone variants (Item A: beside swatches:
     Item B: beside the title when there are none) share one exact
     visual recipe -- same size, same static-in-flow behaviour, same
     right-edge inset -- so the heart's right alignment reads identical
     regardless of which row it ends up in. Declared together so they
     can never drift apart from separate maintenance.

     DEEP ROOT-CAUSE PASS (re-derived from the current, unmodified,
     approved Wishlist reference -- sections/sarky-wishlist.liquid's
     .sarky-wishlist__item-title-row > .sarky-wishlist-heart): that rule
     uses an 18px icon, flush-right (justify-content: flex-end +
     padding-inline-end matching the box's own outward margin), and
     top-aligned (align-items: flex-start) rather than this shared base
     rule's inherited centering. Porting that exact recipe here so every
     product-card surface using these two variants (collection, search,
     recommendations, homepage rail) matches the Wishlist card's own
     bookmark placement precisely, instead of the larger/centered shared
     default. The Wishlist page itself keeps its own page-scoped override
     at higher selector specificity, so it continues to win there
     unchanged -- this promotion cannot regress it. */
  .sarky-wishlist-heart--card-meta-row,
  .sarky-wishlist-heart--card-title-row {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-inline-end: -6px;
    justify-content: flex-end;
    padding-inline-end: 6px;
    align-items: flex-start;
  }

  .sarky-wishlist-heart--card-meta-row .sarky-wishlist-heart__icon,
  .sarky-wishlist-heart--card-title-row .sarky-wishlist-heart__icon {
    width: 18px;
    height: 18px;
  }
/* END_SNIPPET:sarky-wishlist-heart */

/* START_SNIPPET:sarky-wishlist-sheet (INDEX:237) */
#sarky-wishlist-dialog {
    display: contents;
  }

  .sarky-wishlist-sheet {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));
    width: min(380px, 92vw);
    /* This element is deliberately given programmatic focus right after
       opening (assets/sarky-wishlist-sheet.js focusDialogSurface()) as a
       plain focus sink, specifically so the close button doesn't end up
       as the browser's own default auto-focus target - it's never meant
       to show its own indicator. */
    outline: none;

    @media screen and (max-width: 749px) {
      /*
       * SARKY correction pass: the real cause of the "large empty zone
       * below the action" -- assets/base.css's shared .dialog-modal
       * rule sets an unconditional `height: 100dvh` on mobile for every
       * dialog using that class. `max-height` alone only caps a
       * conflicting explicit `height`, it doesn't replace it, so the
       * box still rendered at min(100dvh, max-height) -- a large fixed
       * box with mostly-empty padding below the (much shorter) actual
       * content. `height: fit-content` is exactly what
       * quick-add-modal-styles.liquid already does for the same
       * shared-class conflict; `max-height` then only matters as a
       * ceiling if a product ever has many size options.
       */
      position: fixed;
      margin: auto 0 0 0;
      width: 100%;
      max-width: 100%;
      height: fit-content;
      max-height: min(78vh, 620px);
      border-radius: 0;
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
      padding-bottom: env(safe-area-inset-bottom);
      overflow-y: auto;
    }
  }

  .sarky-wishlist-sheet[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .sarky-wishlist-sheet.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .sarky-wishlist-sheet__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    z-index: var(--layer-raised);
  }

  .sarky-wishlist-sheet__content {
    padding: var(--padding-2xl);
    padding-top: calc(var(--padding-2xl) + 12px);
  }

  /*
   * SARKY correction pass -- THE runtime bug behind "spinner and Try
   * again stay visible while the product already shows" and the
   * "almost full-screen white panel with a lot of empty space": an
   * author-stylesheet `display: flex` on a class always wins over the
   * browser's own default `[hidden] { display: none }` UA rule,
   * regardless of selector specificity (author styles beat UA styles
   * in the cascade, full stop). assets/sarky-wishlist-sheet.js was
   * already correctly toggling the `hidden` DOM property for loading/
   * error/product -- these three rules just silently ignored it, so
   * all three sections rendered stacked on top of each other at once.
   * `:not([hidden])` makes the CSS actually respect the state JS sets.
   * The same pattern already bit this codebase once before elsewhere
   * this session -- see CLAUDE.md's reminder to toggle visibility with
   * `el.hidden`, never `style.display`, which is exactly what the JS
   * side already did right; the CSS side is what was missing the guard.
   */
  .sarky-wishlist-sheet__loading:not([hidden]) {
    display: flex;
    justify-content: center;
    padding-block: var(--padding-3xl);
  }

  .sarky-wishlist-sheet__spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgb(var(--color-foreground-rgb) / var(--opacity-15));
    border-top-color: var(--color-foreground);
    animation: sarky-wishlist-sheet-spin 0.7s linear infinite;
  }

  @keyframes sarky-wishlist-sheet-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .sarky-wishlist-sheet__error:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-md);
    padding-block: var(--padding-lg);
  }

  .sarky-wishlist-sheet__product:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .sarky-wishlist-sheet__header {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  /* WISHLIST SHEET POLISH: 56x74 -> 72x96, then this pass -> 80x106
     (+11%, same ~3:4 ratio) - a further, smaller step so the photo
     keeps gaining presence without unbalancing the still-compact
     header (fixed-size image + two lines of text, never a mini PDP). */
  .sarky-wishlist-sheet__media {
    flex: 0 0 auto;
    width: 80px;
    height: 106px;
    background: var(--color-background-secondary, #f1edec);
    overflow: hidden;
  }

  .sarky-wishlist-sheet__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sarky-wishlist-sheet__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  /* WISHLIST SHEET POLISH: bumped one step up the existing type scale
     (--font-size--sm -> --font-size--md, 14px -> 16px) so the title
     reads with more presence next to the now-larger photo - price stays
     on --font-size--sm, unchanged, so it stays visually subordinate. */
  .sarky-wishlist-sheet__title {
    font-size: var(--font-size--md);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
  }

  .sarky-wishlist-sheet__price {
    font-size: var(--font-size--sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
    margin: 0;
  }

  /* Shared section shell for both COLOR and SIZE -- a bare <fieldset>
     reset (no native border/padding) plus consistent internal spacing,
     so the two sections always read as one visual rhythm and neither
     ever renders as an empty gap when its own [hidden] is set (the
     SMART FLOW requirement: a section only exists in the DOM at all,
     with its own margin/gap, when it has something to show). */
  .sarky-wishlist-sheet__section {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .sarky-wishlist-sheet__section:not([hidden]) {
    display: flex;
  }

  /* Everything in the sheet must respect the hidden attribute (a class-level display: flex used to
     override it, which left an empty "COLOR" label on products without a colour choice). */
  .sarky-wishlist-sheet [hidden] {
    display: none !important;
  }

  /* Nothing in the product column may grow or shrink: the sheet height is exactly its content. */
  .sarky-wishlist-sheet__product > * {
    flex: 0 0 auto;
  }

  .sarky-wishlist-sheet__label {
    display: block;
    font-size: var(--font-size--2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  /* COLOR: the actual dots are the real, shared snippets/swatch.liquid
     markup (fetched server-rendered, see assets/sarky-wishlist-sheet.js)
     - only the wrapping <button> (a plain tap target, since these are
     never native radio inputs here) and the selected-state ring are
     this sheet's own. Sized via the same CSS custom-property mechanism
     blocks/swatches.liquid already uses to resize the shared .swatch
     for the product-card context, not a re-implementation of the
     swatch itself. */
  .sarky-wishlist-sheet__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* MICRO POLISH: the COLOR label and the dot row sat right on top of
       each other at the shared --gap-xs (8px) .sarky-wishlist-sheet__section
       gap - scoped to .swatches (only ever rendered in the color section)
       rather than raising that shared gap, so SIZE's label-to-buttons
       spacing is untouched. +4px reads as a tight, deliberate breath, not
       an airy gap. */
    margin-top: 4px;
  }

  /* WISHLIST SHEET MICRO POLISH: was padding(2px) + outline-offset(1px)
     = 3px total gap between the ring and the dot's own edge - tightened
     one more notch to padding(1px) + outline-offset(0.5px) = 1.5px, so
     the ring hugs the dot closely while still leaving a hair of its own
     tap-target padding beyond the visible dot. Swatch size/color-source/
     click-behavior/selected-semantics are all untouched. */
  .sarky-wishlist-sheet__swatch {
    display: flex;
    padding: 1px;
    margin: -1px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
  }

  .sarky-wishlist-sheet__swatch .swatch {
    --swatch-width: 22px;
    --swatch-height: 22px;

    border: 1px solid rgb(17 17 17 / 0.35);
  }

  .sarky-wishlist-sheet__swatch[aria-pressed='true'] {
    outline: 1.5px solid var(--color-foreground);
    outline-offset: 0.5px;
  }

  .sarky-wishlist-sheet__swatch:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .sarky-wishlist-sheet__sizes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .sarky-wishlist-sheet__size {
    min-width: 40px;
    height: 34px;
    padding-inline: 10px;
    border: 1px solid var(--color-foreground);
    background: transparent;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    cursor: pointer;
  }

  /* WISHLIST SHEET MICRO POLISH: --color-foreground resolves to
     rgb(0 0 0 / 0.81) (confirmed live) - 81% black, not solid - which is
     why the selected size read visibly duller/grayer next to the CTA's
     literal solid #111111. Matched to the exact same solid black/white
     pair the CTA and its own saved-state already use, so "selected"
     reads with the same weight everywhere in this sheet. */
  .sarky-wishlist-sheet__size[aria-pressed='true'] {
    background: #111111;
    color: #ffffff;
  }

  .sarky-wishlist-sheet__size:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
  }

  .sarky-wishlist-sheet__note {
    font-size: var(--font-size--sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
    margin: 0;
  }

  /* WISHLIST SHEET POLISH: was min-height:48px with the stock .button
     class's own inherited padding-block (16px top+bottom), rendering at
     ~52.8px total - explicit padding-block:0 plus flex-centering here
     removes that inherited padding entirely, so min-height alone now
     controls the box. calc(--minimum-touch-target + 4px) = 48px: a
     clean, token-derived value (not an arbitrary number) sitting in the
     middle of the requested ~46-50px range, still comfortably above the
     theme's own 44px minimum comfortable touch target. */
  .sarky-wishlist-sheet__save {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: calc(var(--minimum-touch-target) + 4px);
    padding-block: 0;
    padding-inline: 24px;
    background: #111111;
    color: #ffffff;
    border: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--font-size--xs);
    font-weight: 700;
    cursor: pointer;
  }

  .sarky-wishlist-sheet__save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .sarky-wishlist-sheet__save-icon {
    display: none;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  .sarky-wishlist-sheet__save-icon svg {
    width: 100%;
    height: 100%;
  }

  /* WISHLIST SHEET POLISH: was a muted, desaturated #2f6b3c that also
     inherited the :disabled rule's opacity:0.5 (the save button is
     disabled the instant a save succeeds, to block a duplicate click
     while the sheet is closing) - reading as a faded/disabled button
     rather than a confirmation. Now uses the theme's own existing
     success token (--color-success, #006400 - see
     snippets/theme-styles-variables.liquid, already used by
     .icon-success in assets/base.css) at full opacity, with the
     checkmark icon shown alongside the "Saved to Wishlist" label set by
     assets/sarky-wishlist-sheet.js. Declared after the :disabled rule
     above so its opacity:1 correctly wins at equal specificity. */
  .sarky-wishlist-sheet__save[data-state='saved'] {
    background: var(--color-success);
    color: #ffffff;
    opacity: 1;
  }

  .sarky-wishlist-sheet__save[data-state='saved'] .sarky-wishlist-sheet__save-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ------------------------------------------------------------------
     SARKY taste pass (mobile bottom sheet + desktop card, one shared design)
     ------------------------------------------------------------------ */
  .sarky-wishlist-sheet__handle {
    display: none;
  }

  @keyframes sarky-sheet-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @keyframes sarky-sheet-out {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(100%);
    }
  }

  @media screen and (max-width: 749px) {
    .sarky-wishlist-sheet {
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
    }

    .sarky-wishlist-sheet[open] {
      animation: sarky-sheet-in 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .sarky-wishlist-sheet.dialog-closing {
      animation: sarky-sheet-out 220ms ease-in forwards;
    }

    /* Use the full width of the sheet: 12px at the sides for everything inside (photo, text, colours, sizes,
       save button), instead of the 24px content padding. */
    .sarky-wishlist-sheet__content {
      padding-inline: 12px;
    }

    .sarky-wishlist-sheet__handle {
      display: block;
      position: absolute;
      top: 8px;
      left: 50%;
      width: 36px;
      height: 4px;
      margin-left: -18px;
      border-radius: 2px;
      background: rgb(var(--color-foreground-rgb) / 0.18);
    }
  }

  .sarky-wishlist-sheet__header {
    gap: 16px;
  }

  /* Photo frame: soft light-grey backdrop and a hairline border, so the photo has a visible top edge and the
     title starts level with it (header items are top-aligned instead of centred). */
  .sarky-wishlist-sheet__header {
    align-items: flex-start;
  }

  .sarky-wishlist-sheet__media {
    width: 96px;
    height: 128px;
    background: #f4f1ee;
    border: 1px solid rgb(17 17 17 / 0.1);
    box-sizing: border-box;
  }

  .sarky-wishlist-sheet__info {
    padding-top: 1px;
  }

  .sarky-wishlist-sheet__title {
    font-size: 17px;
  }

  .sarky-wishlist-sheet__color-name {
    margin: 4px 0 0;
    font-size: var(--font-size--sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .sarky-wishlist-sheet__color-name:empty {
    display: none;
  }

  .sarky-wishlist-sheet__swatches {
    gap: 12px;
    margin-top: 6px;
  }

  .sarky-wishlist-sheet__swatch .swatch {
    --swatch-width: 26px;
    --swatch-height: 26px;
  }

  .sarky-wishlist-sheet__sizes-list {
    gap: 10px;
    margin-top: 2px;
  }

  .sarky-wishlist-sheet__size {
    min-width: 48px;
    height: 42px;
    padding-inline: 14px;
    font-weight: 500;
    font-family: inherit;
  }

  .sarky-wishlist-sheet__save {
    min-height: 52px;
  }

  /* "View wishlist" is always in the layout (so the sheet never changes height on save) and only
     fades in once the save has happened. */
  .sarky-wishlist-sheet__view {
    display: block;
    text-align: center;
    line-height: 18px;
    font-size: var(--font-size--xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--color-foreground);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease;
  }

  .sarky-wishlist-sheet__save[data-state='saved'] ~ .sarky-wishlist-sheet__view {
    opacity: 1;
    visibility: visible;
  }
/* END_SNIPPET:sarky-wishlist-sheet */

/* START_SNIPPET:search-modal (INDEX:239) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .sarky-search-modal__brandbar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    min-height: 58px;
    padding: 10px 52px;
    background: #ffffff;
  }

  .sarky-search-modal__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 32px;
    color: #111111;
    text-decoration: none;
  }

  .sarky-search-modal__logo-image {
    display: block;
    width: auto;
    max-width: 160px;
    height: 28px;
    max-height: 28px;
    object-fit: contain;
  }

  .sarky-search-modal__logo-text {
    font-family: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
    font-size: 31px;
    line-height: 1;
    letter-spacing: 0.01em;
  }

  .sarky-search-modal__close.predictive-search__close-modal-button {
    position: absolute;
    inset-inline-end: 8px;
    top: 7px;
    margin: 0;
    color: #111111;
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

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

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

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

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  .sarky-search-discovery {
    display: grid;
    gap: 16px;
    padding: 12px 16px 4px;
    background: var(--color-background);
  }

  .sarky-search-discovery__section {
    display: grid;
    gap: 7px;
  }

  /* SEARCH OVERLAY FINAL POLISH: font-weight bumped from 500 to 600 to
     read clearly as a heading rather than body text - the same weight
     already used for this exact kind of small-caps section label
     elsewhere in the theme (sections/sarky-footer.liquid
     .sarky-footer__eyebrow). Size/spacing/layout otherwise unchanged.

     VERIFY TOP/RECENT SEARCHES TYPOGRAPHY pass: computed font-family was
     actually the theme's SERIF heading font ("New York"/Iowan Old
     Style/... - var(--font-heading--family)), not the SARKY sans-serif
     body/UI font every other small-caps label in the theme uses
     (confirmed live: .sarky-footer__eyebrow and this block's own
     .sarky-search-discovery__terms buttons both compute to
     Poppins/var(--font-body--family)). This <h3> was silently picking up
     Shopify base.css's default heading-element font-family instead of
     inheriting the page's body font, since nothing here ever declared
     one explicitly. Fixed by declaring the same token the rest of the
     theme's eyebrow-style labels use. */
  .sarky-search-discovery__heading {
    margin: 0;
    color: #111111;
    font-family: var(--font-body--family);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .sarky-search-discovery__terms,
  .sarky-search-discovery__recent {
    display: flex;
    align-items: center;
    gap: 13px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sarky-search-discovery__terms::-webkit-scrollbar,
  .sarky-search-discovery__recent::-webkit-scrollbar {
    display: none;
  }

  .sarky-search-discovery__terms button,
  .sarky-search-discovery__recent button {
    flex: 0 0 auto;
    padding: 0 0 3px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: #4f4a48;
    font: inherit;
    font-size: 9px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
  }

  .sarky-search-discovery__terms button:hover,
  .sarky-search-discovery__terms button:focus-visible,
  .sarky-search-discovery__recent button:hover,
  .sarky-search-discovery__recent button:focus-visible {
    border-bottom-color: #111111;
    color: #111111;
    outline: none;
  }

  .sarky-search-discovery__recent > span {
    color: #77716e;
    font-size: 9px;
    line-height: 1.3;
  }

  /* Billy's explicit, superseding decision: TOP SEARCHES/RECENT SEARCHES
     stay visible at all times (empty query and active query alike),
     matching PepperMayo. The previous hide-on-query mechanism (both the
     JS side in assets/sarky-search-overlay.js and this rule) has been
     removed entirely - .sarky-search-discovery no longer has any hidden
     state to represent. */

  .sarky-search-modal__utility {
    display: none;
  }

  /* SEARCH OVERLAY FINAL POLISH: the animation is wanted here, matching
     the same <sarky-animated-search> component used on the homepage
     header bar and burger-menu drawer (same data-prefix/data-phrases/
     data-static-text, same assets/sarky-animated-search.js). The real
     bug was the overlay showing only its bare, un-animated prefix for a
     stretch after first opening - fixed at the root in
     assets/sarky-animated-search.js (an immediate tick on the dialog's
     own 'dialog:open' event, plus pausing purely on the input having a
     value instead of on focus).

     Billy's explicit, superseding rule: the animation must be the
     default state any time the bar isn't actually being used, including
     the very first frame after entering search - it may only disappear
     once a shopper genuinely taps/clicks the bar. A plain
     :has(.search-input:focus) rule here used to drive that, but :focus
     matches ANY focus, including the native <dialog>.showModal() auto-
     focus that can land on this input before the shopper has touched
     anything (same root cause already diagnosed for the wishlist
     sheet's close-button ring) - silently hiding the overlay on open
     with nothing to undo it. Hiding on real engagement is now entirely
     JS-driven instead (assets/sarky-animated-search.js only hides this
     overlay on a focus event it can trace back to a genuine pointerdown
     on this exact input; any other focus gets rejected/blurred outright),
     via the same `[hidden]`-is-authoritative mechanism below. */
  .search-modal .sarky-search-modal__animate {
    display: block;
    width: 100%;
  }

  .search-modal .predictive-search-form__header-inner {
    position: relative;
  }

  .search-modal .predictive-search-form__header-inner .sarky-animated-search__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 50px;
    pointer-events: none;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
  }

  /* The overlay's own JS (assets/sarky-animated-search.js) sets the
     `hidden` attribute the instant the real input has a value - but the
     plain-class display:flex rule above has higher specificity than the
     browser's default `[hidden]{display:none}`, so it would otherwise
     silently win and leave the placeholder visibly overlapping real
     typed text. This makes the JS's own hidden state authoritative. */
  .search-modal .predictive-search-form__header-inner .sarky-animated-search__overlay[hidden] {
    display: none;
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

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

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

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

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

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

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

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

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

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

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

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

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

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  /* Maison: this glyph renders in a 15px box, so the 20px-calibrated token
     landed at 1.05px against the header search 1.40px. Measured, not assumed. */
  .predictive-search__icon {
    --sarky-maison-stroke-primary: 2.05; /* 1.28px at a 15px box */
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

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

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

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

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

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

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

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

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

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

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

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }

  @media screen and (max-width: 749px) {
    .search-modal__content,
    .dialog-modal[open].search-modal__content {
      position: fixed;
      inset: 0;
      width: 100vw;
      max-width: none;
      height: 100dvh;
      max-height: none;
      margin: 0;
      padding: 0;
      border: 0;
      flex-direction: column;
      /* PepperMayo reference (Billy's explicit design decision for this
         modal): one continuous white surface, not the earlier two-tone
         white-header/warm-content split. The warm #f1edec token is now
         reused only as the search field's own fill (see
         .predictive-search-form__header-inner below), not as a page
         background. */
      background: #ffffff;
      box-shadow: none;
    }

    .dialog-modal[open].search-modal__content {
      animation: sarky-search-panel-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }

    .dialog-modal.search-modal__content.dialog-closing {
      animation: sarky-search-panel-out 220ms ease forwards;
    }

    .search-modal predictive-search-component {
      flex: 1 1 auto;
      min-height: 0;
      align-items: stretch;
      background: #ffffff;
    }

    .search-modal .predictive-search-form {
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
      background: #ffffff;
    }

    .search-modal .predictive-search-form__header {
      position: relative;
      flex: 0 0 auto;
      padding: 4px 16px 18px;
      border: 0;
      background: #ffffff;
    }

    .search-modal .sarky-search-modal__animate {
      display: block;
      width: 100%;
    }

    /* SEARCH OVERLAY: TRUE REUSE OF THE BURGER DRAWER SEARCH BAR.
       The wrapper/icon/input above now carry the SAME classes as
       snippets/header-drawer.liquid's .sarky-menu-drawer__search field
       (sarky-menu-drawer__search / -icon / -input) - that file's already-
       proven, unscoped CSS (height 44px, 1px border, white fill, 5px
       radius, 15px icon at margin-inline-start:14px, input padding
       "0 14px 0 8px", 12px text, normal FLEXBOX row layout for icon/
       input) is now the single, literal source for both surfaces on
       mobile, not a second hand-copied implementation - editing that one
       rule changes both. Two genuinely unavoidable differences remain,
       both scoped as narrowly as possible:
       1) This field has a real clear/reset button; the drawer has no
          equivalent to reuse. It's a normal flex sibling of the icon
          and the input's own wrapper (icon | input-wrap:flex-1 |
          reset-button), so the wrap's flex-1 sizing shrinks to make
          room for it automatically the moment it re-enters the row - no
          manual padding/inset math needed to keep typed text clear of
          it, matching the drawer's own flex-row technique instead of
          the previous overlay-based approach.
       2) This field is real and focusable; the drawer's is
          readonly/tabindex=-1 and purely decorative, so it can safely
          declare a real 12px. A real, focusable input declaring under
          16px triggers iOS Safari's zoom-on-focus (it only reads the
          DECLARED size, never the rendered one) - confirmed live on
          Billy's iPhone as the actual visible-text-too-large bug the
          previous 16px-declared/16px-rendered compromise caused. Fixed
          the same way blocks/_search-input.liquid's field once was,
          but scoped this time to ONLY the input itself, never its
          siblings: the real <input> lives in its own
          .sarky-search-modal__input-wrap (position: relative, the same
          flex-1 slot the plain input used to fill directly), declares
          16px, and is scaled visually down to the drawer's true 12px
          with `transform: scale(0.75)` + a 133.333%-oversized box so
          the post-scale box exactly refills its wrap - `transform-
          origin: top left` keeps that box's own top-left corner pinned
          to the wrap's, so nothing shifts position. The icon and reset-
          button are ordinary, independent flex siblings with no
          position/size relationship to this at all (unlike the original
          pre-this-whole-effort implementation, where the icon and reset-
          button's own absolute positions were hand-calculated in lockstep
          with this exact scale math, which is what actually broke on a
          real device before). */
    .search-modal .sarky-search-modal__input-wrap {
      position: relative;
      display: block;
      flex: 1;
      min-width: 0;
      height: 100%;
      overflow: hidden;
    }

    .search-modal .search-input.sarky-menu-drawer__search-input {
      position: absolute;
      inset: 0;
      width: 133.333% !important;
      height: 133.333% !important;
      padding-inline: 10.667px 18.667px !important;
      font-size: 16px !important;
      transform: scale(0.75);
      transform-origin: top left;
    }

    /* Two things this icon still needed fixing beyond adding the shared
       class: (1) the base (unscoped, desktop-and-mobile) .predictive-
       search__icon rule further up this file declares `position:
       absolute; left: var(--margin-xl);` - equal specificity to
       .sarky-menu-drawer__search-icon's own `display: inline-flex` (no
       position at all), so without an explicit override here it's a
       cascade-order coin flip across two different files whether the
       icon stays a real flex child or reverts to an absolute-positioned
       overlay, which would silently break the flex-row layout below.
       (2) this markup's DOM order is label/input/hidden-input/icon/
       reset-button (input before icon) - fine for the old absolute
       overlay technique, which never depended on source order, but a
       real flex row lays siblings out left-to-right BY source order,
       which put the magnifying glass after the typed text instead of
       before it. `order: -1` fixes the visual position without moving
       the icon in the DOM, so tab order/ARIA are unaffected - the
       drawer's own icon-before-input markup never needed this because
       it was never reordered to begin with. */
    .search-modal .predictive-search__icon.sarky-menu-drawer__search-icon {
      position: static;
      order: -1;
    }

    /* This element is inserted by assets/sarky-animated-search.js as
       `this.input`'s next DOM sibling, which is now
       .sarky-search-modal__input-wrap's other child (the real <input>
       being the first) - not a direct child of the outer bar anymore.
       It anchors `position: absolute; inset: 0` to that wrap (the
       nearest positioned ancestor), i.e. exactly the input's own real,
       unscaled 12px-equivalent slot - not the icon's space, which now
       lives entirely outside this wrap as its own flex sibling. So this
       needs only the input's own visual padding (8px/14px, matching
       .sarky-menu-drawer__search-input's real padding exactly, no scale
       math of its own needed since - unlike the input - this decorative,
       never-focusable span can just declare the drawer's real 12px
       directly), not the old 37px calc that used to account for the
       icon sitting in the same anchor box. */
    .search-modal .predictive-search-form__header-inner .sarky-animated-search__overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      padding-inline: 8px 14px;
      pointer-events: none;
      color: #111111;
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
    }

    .search-modal .predictive-search-form__header-inner .sarky-animated-search__overlay[hidden] {
      display: none;
    }

    .search-modal .predictive-search__reset-button {
      flex: 0 0 36px;
      width: 36px;
      height: 36px;
      margin: 0;
      padding: 0;
      opacity: 1;
      -webkit-tap-highlight-color: transparent;
    }

    /* The base [hidden] rule further up this file only sets opacity/
       visibility/pointer-events (visibility:hidden still reserves layout
       space, unlike display:none) - harmless under the old absolute-
       positioned technique, but now that this button is a real flex
       sibling of the input, an empty field would otherwise still lose
       36px of input width to an invisible reserved slot. */
    .search-modal .predictive-search__reset-button[hidden] {
      display: none;
    }

    .search-modal .predictive-search__reset-button:hover,
    .search-modal .predictive-search__reset-button:focus,
    .search-modal .predictive-search__reset-button:active {
      background: transparent;
    }

    .search-modal .sarky-search-modal__reset-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
    }

    .search-modal .sarky-search-modal__reset-icon svg {
      width: 100%;
      height: 100%;
    }

    .search-modal .predictive-search-form__header:has(.predictive-search__reset-button:not([hidden]))::before {
      content: none;
    }

    .search-modal .predictive-search-form__content-wrapper {
      position: relative;
      top: auto;
      left: auto;
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      /* Guaranteed clearance above the utility row (HELP/WISHLIST/
         ACCOUNT, a separate flex sibling below this scroll container -
         see .sarky-search-modal__utility) regardless of which state is
         showing here (discovery, results, no-results). Living on the
         scroll container itself instead of only on
         .predictive-search-form__footer means every state gets the same
         bottom breathing room, not just the "has real results" one. */
      padding-bottom: 20px;
      border-radius: 0;
      background: #ffffff;
    }

    .search-modal .predictive-search-form__content {
      max-height: none;
      overflow: visible;
      background: #ffffff;
    }

    /* The PepperMayo reference reads as one continuous white surface -
       discovery and the product rail below it share the same background
       as the rest of the modal now, so there is nothing left to force
       here (previously all four of these repeated the same #f1edec). */

    /* Edge-to-edge, matching the reference and the same pattern already
       used by the approved homepage product rail (sections/sarky-product-rail.liquid)
       - no side padding on the products wrapper itself, no divider above
       it, so discovery flows straight into the rail as one surface. */
    .search-modal .predictive-search-results__products {
      padding-inline: 0;
      margin-top: 14px;
    }

    /* The reference has no heading above its product rail. Kept in the
       DOM (screen readers still get "Products"/"Recommended for you")
       but visually hidden rather than removed, since this same title
       element is shared with the empty-state/recommended partial and
       isn't safe to distinguish per-state with CSS alone. */
    .search-modal .predictive-search-results__title {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* RECOMMENDATIONS: Shopify's own predictive-search "suggested search
       terms" resource (predictive_search.resources.queries in
       sections/predictive-search.liquid) - real, query-relevant search
       suggestions with real search-result URLs, not a hand-built
       feature. Only ever renders when Shopify actually returns
       suggestions for the current query (empty query -> nothing here at
       all, matching Billy's requirement with zero extra logic). Restyled
       from the stock filled pill/chip look to flat text links, matching
       TOP SEARCHES/RECENT SEARCHES exactly. */
    .search-modal .predictive-search-results__queries-heading {
      margin: 12px 0 9px;
      padding-inline: 16px;
      color: #111111;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .search-modal .predictive-search-results__wrapper-queries {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-inline: 16px;
      margin: 0 0 18px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .search-modal .predictive-search-results__wrapper-queries::-webkit-scrollbar {
      display: none;
    }

    .search-modal .predictive-search-results__card--query {
      flex: 0 0 auto;
    }

    .search-modal .predictive-search-results__pill {
      display: block;
      padding: 0 0 3px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #4f4a48;
      font-size: 11px;
      line-height: 1.2;
      white-space: nowrap;
      border-bottom: 1px solid transparent;
      min-width: 0;
    }

    /* Explicit resets, not just added color: the base predictive-search
       stylesheet (snippets/predictive-search-styles.liquid, loaded
       separately) has its own same-specificity hover/focus/selected pill
       rule (background, outline, border) - matching that rule's exact
       selector shape here (:hover/:focus-visible/:focus-within and
       [aria-selected='true'] on the parent <li>) guarantees this one
       wins regardless of stylesheet load order, instead of a load-order
       coin flip. */
    .search-modal .predictive-search-results__pill:hover,
    .search-modal .predictive-search-results__pill:focus,
    .search-modal .predictive-search-results__pill:focus-visible,
    .search-modal .predictive-search-results__card--query:is([aria-selected='true'], :focus-within)
      .predictive-search-results__pill {
      background-color: transparent;
      border: 0;
      border-bottom: 1px solid #111111;
      outline: none;
      color: #111111;
      text-decoration: none;
    }

    .search-modal .predictive-search-results__wrapper-products {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      padding-block: 0 20px;
      scroll-snap-type: none;
      overscroll-behavior-inline: contain;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: auto;
      touch-action: auto;
      user-select: none;
      -webkit-user-select: none;
      scrollbar-width: none;
    }

    .search-modal .predictive-search-results__wrapper-products.is-dragging {
      scroll-snap-type: none;
      cursor: grabbing;
    }

    .search-modal .predictive-search-results__wrapper-products::-webkit-scrollbar {
      display: none;
    }

    .search-modal .predictive-search-results__wrapper-products > .predictive-search-results__card {
      /* Recomputed for edge-to-edge (.predictive-search-results__products
         above no longer has side padding): (100vw - 1.4 gaps) / 2.4
         cards, same 2.4-cards-visible ratio as before, same 10px gap -
         only the now-removed 32px of side padding changed, giving each
         card a little more width to make product photos read as
         dominant, matching the PepperMayo reference. */
      flex: 0 0 calc((100vw - 1.4 * 10px) / 2.4);
      scroll-snap-align: start;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-drag: none;
      user-select: none;
    }

    /* Shopify's default search-card hover/focus rules add negative margins,
       padding, a background and scale. A touch swipe on iOS activates those
       rules, making one card jump forward. Search-overlay cards stay entirely
       static: the rail is the only element allowed to move. */
    .search-modal .predictive-search-results__wrapper-products > .predictive-search-results__card,
    .search-modal .predictive-search-results__wrapper-products > .predictive-search-results__card:hover,
    .search-modal .predictive-search-results__wrapper-products > .predictive-search-results__card:focus,
    .search-modal .predictive-search-results__wrapper-products > .predictive-search-results__card:focus-visible,
    .search-modal .predictive-search-results__wrapper-products > .predictive-search-results__card:focus-within,
    .search-modal .predictive-search-results__wrapper-products > .predictive-search-results__card:active,
    .search-modal .predictive-search-results__wrapper-products > .predictive-search-results__card[aria-selected='true'] {
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      animation: none !important;
    }

    .search-modal .resource-card,
    .search-modal .resource-card:hover,
    .search-modal .resource-card:focus,
    .search-modal .resource-card:focus-within,
    .search-modal .resource-card:active {
      --resource-card-primary-image-opacity: 1;
      --resource-card-secondary-image-opacity: 0;

      row-gap: 8px;
      opacity: 1;
      transform: none;
      transition: none;
      animation: none;
      -webkit-user-drag: none;
      user-select: none;
    }

    .search-modal .resource-card__link,
    .search-modal .resource-card__media,
    .search-modal .resource-card__image {
      -webkit-user-drag: none;
      user-select: none;
    }

    .search-modal .resource-card__image--secondary {
      display: none;
    }

    .search-modal .resource-card__image {
      border-radius: 0;
    }

    .search-modal .resource-card__content {
      gap: 5px;
    }

    .search-modal .resource-card__title,
    .search-modal .resource-card__title.paragraph {
      font-size: 13px;
      font-weight: 400;
      line-height: 1.3;
    }

    .search-modal .resource-card__content .price {
      font-size: 12px;
      font-weight: 400;
    }

    .search-modal .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
      > .predictive-search-form__content {
      padding-block-end: 0;
    }

    .search-modal .predictive-search-form__footer {
      position: static;
      /* Bottom clearance now comes from the scroll container's own
         padding-bottom (.predictive-search-form__content-wrapper above)
         so it applies uniformly to every state, not just this one. */
      padding: 2px 16px 20px;
      background: #ffffff;
    }

    .search-modal .predictive-search__search-button {
      width: 100%;
      min-height: 42px;
      border: 1px solid #111111;
      border-radius: 0;
      background: transparent;
      color: #111111;
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      box-shadow: none;
    }

    .sarky-search-modal__utility {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      column-gap: clamp(24px, 6vw, 36px);
      flex: 0 0 auto;
      padding: 16px 10px calc(16px + env(safe-area-inset-bottom));
      border-top: 1px solid rgb(17 17 17 / 0.1);
      background: #ffffff;
    }

    .sarky-search-modal__utility a {
      color: #111111;
      font-size: 11px;
      font-weight: 400;
      text-decoration: none;
    }

    .sarky-search-discovery {
      gap: 16px;
      padding: 16px 16px 6px;
    }

    .sarky-search-discovery__section {
      gap: 9px;
    }

    .sarky-search-discovery__heading {
      font-size: 12px;
    }

    .sarky-search-discovery__terms,
    .sarky-search-discovery__recent {
      gap: 16px;
    }

    .sarky-search-discovery__terms button,
    .sarky-search-discovery__recent button,
    .sarky-search-discovery__recent > span {
      font-size: 11px;
    }

    .sarky-search-modal__utility a:first-child {
      justify-self: end;
    }

    .sarky-search-modal__utility a:nth-child(2) {
      justify-self: center;
    }

    .sarky-search-modal__utility a:last-child {
      justify-self: start;
    }
  }

  /* Restores this modal's own, separate, token-based desktop treatment
     - the sarky-menu-drawer__search* classes above carry the drawer's
     unscoped, !important-heavy mobile styling (see the mobile block
     above), and the drawer itself only ever renders on mobile/tablet,
     so nothing about that rule was ever meant to reach desktop widths.
     Higher-specificity + !important where the drawer rule also uses
     !important, so this wins regardless of the two files' load order. */
  @media screen and (min-width: 750px) {
    .search-modal .predictive-search-form__header-inner.sarky-menu-drawer__search {
      height: auto;
      padding: 0;
      border: var(--search-border-width) solid var(--color-border) !important;
      border-radius: var(--style-border-radius-popover) !important;
      background: var(--color-background) !important;
      box-shadow: none !important;
      color: var(--color-foreground);
      font-family: inherit;
    }

    .search-modal .predictive-search__icon.sarky-menu-drawer__search-icon {
      display: block;
      position: absolute;
      left: var(--margin-md);
      top: auto;
      width: var(--icon-size-lg) !important;
      height: var(--icon-size-lg) !important;
      margin-inline-start: 0;
      flex: initial;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    }

    .search-modal .predictive-search__icon.sarky-menu-drawer__search-icon svg {
      width: var(--icon-size-md) !important;
      height: var(--icon-size-md) !important;
      stroke-width: initial;
    }

    /* Makes the wrap's own box disappear entirely for layout/positioning
       purposes, so the real <input> inside it behaves exactly as if it
       were still a direct child of the outer bar - i.e. exactly as it
       did before .sarky-search-modal__input-wrap existed. Desktop never
       needed the mobile-only scale-compensation technique below (this
       field's desktop font-size was never under 16px to begin with). */
    .search-modal .sarky-search-modal__input-wrap {
      display: contents;
    }

    .search-modal .search-input.sarky-menu-drawer__search-input {
      display: block;
      flex: initial;
      padding: 0 !important;
      padding-block: var(--padding-sm) !important;
      padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0 !important;
      border-radius: var(--style-border-radius-inputs) !important;
      color: var(--color-foreground) !important;
      font-family: var(--font-body--family) !important;
      font-size: var(--font-size--md) !important;
      font-weight: 400 !important;
      letter-spacing: normal !important;
      text-transform: none;
    }

    .search-modal .search-input.sarky-menu-drawer__search-input::placeholder {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)) !important;
    }
  }

  @keyframes sarky-search-panel-in {
    from {
      opacity: 0;
      transform: translateX(24px);
    }

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

  @keyframes sarky-search-panel-out {
    from {
      opacity: 1;
      transform: translateX(0);
    }

    to {
      opacity: 0;
      transform: translateX(24px);
    }
  }
/* END_SNIPPET:search-modal */

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

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

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

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

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

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:243) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:245) */
.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:246) */
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:247) */
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:249) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    * {
      pointer-events: none;
    }
  }

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

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

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

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

    50% {
      opacity: 1;
    }

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

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

    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:251) */
.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 (INDEX:259) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:268) */
.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));
  }

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

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

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

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

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

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

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

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

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

  .sarky-variant-picker .variant-option--sarky-pills {
    border: 0;
    padding: 0;
    margin: 0;
  }

.sarky-variant-picker .sarky-variant-label {
  display: block;
  margin: 0 0 3px;
  padding: 0;
  font-size: 12px;
  line-height: 1.2;
  font-weight: var(--sarky-selected-label-weight) !important;
  color: var(--sarky-selected-label-color) !important;
}

.sarky-variant-picker .sarky-variant-label__selected {
  font-weight: inherit !important;
  color: inherit !important;
}

  /* SARKY: PDP swatches (Color option) refined further to a ~18-20px
     visual circle (was 23px, before that 30px) -- the theme's global
     variant_swatch_width/height setting (34px) is far too large here, and
     this override is scoped to .sarky-variant-picker only, so card
     swatches (their own scoped rule in blocks/swatches.liquid) and any
     other swatch usage are unaffected. */
  .sarky-variant-picker .variant-option--swatches .swatch {
    --swatch-width: 20px;
    --swatch-height: 20px;
  }

  /* SARKY: Billy's approved Color-label -> swatch spacing (the
     .sarky-variant-label margin-bottom rules above/below) is intentionally
     untouched by this rule -- that gap lives INSIDE this fieldset (between
     its legend and its own row) and this margin only adds space AFTER the
     fieldset ends. Fieldset-to-fieldset spacing was previously measured at
     0px (the Size fieldset's own `.variant-option--sarky-pills { margin: 0
     }` reset wins over the generic `.variant-option + .variant-option`
     rule in assets/base.css), so the only thing separating the swatch
     circles from "Size" was the swatch label's own 4px bottom padding.
     Adding margin-bottom directly on the swatches FIELDSET (not the label,
     not the row, not the legend) is the one place that can grow only this
     specific gap without touching anything upstream of it -- combined
     with that existing 4px padding, this lands the swatch-to-"Size" gap
     at ~8px, the requested 6-8px range. */
  .sarky-variant-picker .variant-option--swatches {
    margin-bottom: 4px;
  }

  /* PepperMayo direction: a clean, visible (not near-invisible) thin
     border on the UNSELECTED circle -- the theme's own default swatch
     border (assets/base.css) resolves to ~10% black here, too faint to
     read as a "flat, bordered" chip. Native swatch.image/swatch.color
     data and precedence are completely untouched; this only strengthens
     the presentation border color/width. */
  .sarky-variant-picker .variant-option--swatches .swatch {
    border: 1px solid rgb(0 0 0 / 0.35);
  }

  /* Touch target: padding around the smaller visual circle, instead of
     sizing the circle itself to touch-target size -- padding is symmetric
     so the circle lands centered inside it with no extra flex/centering
     rules needed. Tightened from 5px to 4px this round (20px circle + 2 *
     4px = 28px touch target, still tappable) -- this same padding also
     drives the vertical gap from the circle down to the "Size" heading
     below (fieldset-to-fieldset margin here is already 0, so that gap IS
     this padding), and combines with the row gap below to produce the
     on-screen swatch-to-swatch spacing. */
  .sarky-variant-picker .variant-option--swatches .variant-option__button-label {
    margin: 0;
    padding: 4px;
  }

  /* SARKY: the native selected-ring rule in assets/base.css
     (.variant-option__button-label--has-swatch:has(:checked)) outlines the
     whole label -- the padded touch target, not the smaller circle, which
     would read as an oversized, loose ring instead of a tight "premium"
     one. Suppressed here and re-applied directly to the swatch span
     instead, so the ring hugs just the circle (20px + 2 * (1px width +
     1px offset) = 24px total) -- a single subtle line, not a thick/doubled
     halo. */
  .sarky-variant-picker .variant-option--swatches .variant-option__button-label--has-swatch:has(:checked) {
    outline: none;
  }

  .sarky-variant-picker .variant-option--swatches label:has(input:checked) .swatch {
    outline: 1px solid var(--color-foreground);
    outline-offset: 1px;
  }

  /* Billy (desktop, mouse hover): the native label-level hover ring in
     assets/base.css (.variant-option__button-label--has-swatch:hover)
     is the same loose, whole-label outline the selected-ring rule above
     was already suppressing - just on :hover instead of :checked. Left
     alone until now since it was a separate, lower-priority ring; Billy
     has now flagged it as ugly on its own, so it's removed the same way,
     scoped to this PDP picker only (assets/base.css's rule is shared with
     product-card swatches, quick-add, and the filter drawer's color
     filter, none of which are in scope here). */
  .sarky-variant-picker .variant-option--swatches .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  /* SARKY: root cause of the space Billy STILL saw on his iPhone despite
     several previous rounds tightening .sarky-variant-label's margin-
     bottom (12px -> 8px -> 6px -> 4px -> 3px) -- every one of those edits
     only touched the desktop-scoped declaration above. A pre-existing,
     separate mobile-only override further down this same file
     (`@media (max-width: 749px) { .sarky-variant-label { margin-bottom:
     10px } }`, shared by both the Color and Size legends and never
     touched by those rounds) has equal selector specificity and comes
     later in source order, so it silently won on every mobile viewport
     the whole time -- Billy's iPhone was always showing 10px, never the
     3px the desktop rule claimed. Fixed here with a MORE specific
     selector (one extra class) that beats both the desktop rule and the
     mobile override at every viewport width, without editing either of
     them -- so the Size legend's own mobile spacing (still 10px) is
     completely unaffected. */
  .sarky-variant-picker .variant-option--swatches .sarky-variant-label {
    margin-bottom: 2px;
  }

  /* Row gap kept distinct from the Size/plain-pill row below (which still
     uses the shared --sarky-pill-gap setting). The ACTUAL on-screen
     swatch-to-swatch spacing is this gap PLUS each side's own label
     padding (4px + 4px, see above). Set very low (1px) so the real total
     lands around 9px (1 + 4 + 4), a visibly tighter, more compact rhythm
     than the previous 13px, without shrinking the circles' own 28px
     touch target further. */
  .sarky-variant-picker .variant-option--swatches .sarky-variant-pill-row {
    gap: 1px;
  }

  /* SARKY: root cause of the dead space before the first circle -- the
     touch-target padding above (symmetric on all sides of EVERY swatch
     label so the circle sits centered in its tap area) inevitably also
     pushes the FIRST circle in from the row's own left edge, since
     there's no neighbouring swatch on that side to visually absorb it.
     Pulling the whole row left by that same padding amount lines the
     first circle up flush with "Color -- <value>" above it, while every
     swatch's own touch target, border, selected ring, and the gap between
     circles are unaffected -- this only shifts where the row as a whole
     starts, not what's inside it. MUST stay equal to the label padding
     above (now 4px) or the first swatch drifts back right of the label.
     Scoped to the swatches row only; the Size/plain-pill row (different
     padding recipe, not built with this touch-target technique) is
     untouched. */
  .sarky-variant-picker .variant-option--swatches .sarky-variant-pill-row {
    margin-inline-start: -4px;
  }

  .sarky-variant-picker .sarky-variant-pill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sarky-pill-gap);
    width: 100%;
  }

  .sarky-variant-picker .variant-option--sarky-pills .variant-option__button-label {
    position: relative;
    min-width: var(--sarky-pill-min-width);
    height: var(--sarky-pill-height) !important;
    min-height: var(--sarky-pill-height) !important;
    max-height: var(--sarky-pill-height) !important;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--sarky-unselected-border);
    border-radius: var(--sarky-pill-radius);
    background: var(--sarky-unselected-bg);
    color: var(--sarky-unselected-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--sarky-pill-font-size);
    line-height: 1 !important;
    font-weight: 400;
    cursor: pointer;
    overflow: hidden;
  }

  .sarky-variant-picker .variant-option--sarky-pills .variant-option__button-label:has(input:checked) {
    border-color: var(--sarky-selected-bg);
    background: var(--sarky-selected-bg);
    color: var(--sarky-selected-text);
  }

  .sarky-variant-picker .variant-option--sarky-pills .variant-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    height: var(--sarky-pill-height) !important;
    min-height: var(--sarky-pill-height) !important;
    max-height: var(--sarky-pill-height) !important;
  }

  .sarky-variant-picker .variant-option--sarky-pills .variant-option__button-label__pill {
    display: none !important;
  }

  .sarky-variant-picker .variant-option--sarky-pills .variant-option__button-label__text {
    position: relative;
    z-index: 1;
    color: inherit;
    font-size: inherit;
    line-height: 1 !important;
    font-weight: inherit;
  }

  .sarky-variant-picker .variant-option--sarky-pills .variant-option__button-label:has(input[aria-disabled='true']) {
    opacity: 0.35;
    cursor: not-allowed;
  }

  @media screen and (max-width: 749px) {
    .sarky-variant-picker .sarky-variant-label {
      font-size: 12px;
      margin-bottom: 10px;
    }

    .sarky-variant-picker .sarky-variant-pill-row {
      gap: calc(var(--sarky-pill-gap) * 0.8);
    }
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:269) */
/* The selected colour has a ring 3px outside its dot; with the first dot on the card edge the ring
     would be cut by the card's own overflow, so let the card content overflow by a few px. */
  .product-card__content {
    overflow: clip !important;
    overflow-clip-margin: 4px !important;
  }

  swatches-variant-picker-component {
    display: flex;
    width: 100%;
    /* SARKY: the first colour dot starts exactly on the card's left edge. The row carries
       2px (list inset) + 3px (touch-target padding) before the drawn circle; pull it back. */
    margin-inline-start: -5px;
    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);
    }
  }

  /* When the FIRST dot is the selected one, its ring (2px outside the dot) would be cut by the card edge in
     browsers without overflow-clip-margin (Safari): shift the row so the outer edge of the ring sits on the
     card edge instead (dot 2px in). */
  swatches-variant-picker-component:has(.variant-option__swatch:first-child input:checked) {
    margin-inline-start: -3px;
  }

  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:video (INDEX:270) */
.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:271) */
.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-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-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */