/** Shopify CDN: Minification failed

Line 7653:2 Unexpected "{"
Line 7653:3 Expected identifier but found "%"
Line 7653:58 Unexpected "{"
Line 7653:59 Unexpected "{"
Line 7653:76 Expected ":"
Line 7653:79 Unexpected "{"
Line 7653:80 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .utilities > * {
    text-align: center;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    position: relative;

    /* Overwrite color from section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:hero (INDEX:14) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

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

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

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

    min-height: 600px;
  }

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

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

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

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

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

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

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

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

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

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

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

  /* Mobile/Desktop media visibility */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    > a {
      display: flex;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Quick add button */
  .hotspot-dialog {
    .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.add-to-cart-button {
      width: calc(var(--button-size-md) - 8px);
      position: relative;
      padding-block: 0;
      padding-inline-end: var(--padding-sm);
      justify-self: flex-end;
      height: fit-content;
      border: none;
      color: var(--quick-add-foreground, var(--color-foreground));
      background-color: var(--quick-add-background, var(--color-background));
      pointer-events: all;
      opacity: 1;
      overflow: hidden;
      outline: 2px solid transparent;

      @media (prefers-reduced-motion: no-preference) {
        transition: width var(--animation-speed) var(--ease-out-cubic),
          outline-color var(--animation-speed) var(--ease-out-cubic) var(--animation-speed-slow);
      }

      &:is(:hover, :active) {
        outline-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
      }

      &:focus-visible {
        outline-color: currentcolor;
        transition-delay: 0s;
      }
    }

    .quick-add__button.add-to-cart-button[data-added='true'] {
      color: transparent;
    }
  }

  @media screen and (min-width: 750px) {
    .hotspot-dialog {
      .quick-add__button:is(:hover, :focus-visible) {
        width: max-content;
      }
    }
  }
/* END_SECTION:product-hotspots */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:sd-header (INDEX:35) */
sd-header { display: block; }

  /* ============ sticky containing block ============
     Horizon does NOT scroll the window at >=990px — `.page-wrapper` is the scroll
     container (overflow-y: auto, base.css). `position: sticky` only pins against an
     ancestor scroll port, so a sticky <header> nested inside #header-group and the
     section wrapper just scrolls away with them.

     Horizon's own header solves this with `#header-group:has(#header-component[sticky])
     { display: contents }` (sections/header.liquid) — the sticky element is hoisted to
     be a direct child of .page-wrapper. The mega header needs the same treatment, so
     the wrapper chain between .page-wrapper and .sd-header is flattened whenever this
     section is in sticky mode. Scoped with :has() so a non-sticky header (and the
     stock header, which owns its own rule) is untouched. */
  #header-group:has(.sd-header:not(.sd-header--static)),
  #header-group:has(.sd-header:not(.sd-header--static)) > .shopify-section,
  #header-group:has(.sd-header:not(.sd-header--static)) > .shopify-section > sd-header {
    display: contents;
  }

  /* The separate Horizon `header-announcements` section sits ABOVE this header
     as its own sibling. Flattening the wrapper chain above hoists the header to
     be a direct child of the scroll port, but the announcement section is left
     behind as a normal block — so it scrolled away while the header pinned,
     which reads as the bar disappearing and the header "half visible".

     Sticking it at top:0 with the header stacked below it keeps the pair
     together: the bar holds the top strip, the header pins directly under it.
     Only applied when this header is in sticky mode, so a static header leaves
     the bar exactly as it was. */
  #header-group:has(.sd-header:not(.sd-header--static)) > .shopify-section:has(.announcement-bar) {
    display: block;
    position: sticky;
    top: 0;
    z-index: 61;
  }
  /* The header then pins BELOW the bar rather than at the very top, so the two
     never overlap. --sd-announce-bar-h is measured from the bar itself by
     sd-header.js; the token is the fallback for a no-JS render. */
  #header-group:has(.sd-header:not(.sd-header--static)) .sd-header {
    top: var(--sd-announce-bar-h, 0px);
  }

  /* §11: visible focus everywhere, anchored to the brand setting (mockup rule,
     scoped). The cart badge inherits the violet through the existing
     #header-group skin, so all five rebrand surfaces track one setting. */
  sd-header :where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--sd-violet);
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* ============ announcement ============ */
  /* THE COLLAPSE MUST NOT CHANGE THE DOCUMENT HEIGHT — this caused a real bug.

     The bar used to animate `height` to 0 on scroll. That pulled ~38px out of
     the flow; the page got shorter, the browser pulled scrollTop back up, which
     dropped scroll under the collapse threshold, so the bar re-expanded and the
     page grew again. The header visibly vibrated in a narrow band just past the
     trigger point and only settled once the shopper scrolled clear of it.

     A JS hysteresis band does NOT fix this — the rebound lands at scrollTop 0,
     so any dead zone reaching the top still re-triggers. Measured: the old rule
     lost 37px of document height per collapse and produced 9 direction flips
     across twelve 5px wheel nudges.

     The fix removes the layout change entirely. The bar keeps its height for
     ever, and the whole sticky header slides up by that height instead. A
     transform on a sticky element does not affect layout, so the document
     height is constant (measured: 0px shift, 0 flips) while the nav row still
     ends up flush at the viewport top.

     Do not reintroduce an animated height/max-height here. */
  .sd-announce {
    display: block;
    block-size: var(--sd-announce-h);
    overflow: hidden;
    background: var(--sd-veil);
    border-bottom: 1px solid var(--sd-hairline);
    text-decoration: none;
  }
  .sd-announce__inner {
    display: flex; align-items: center; justify-content: center;
    block-size: var(--sd-announce-h);
    font-family: var(--font-body--family);
    font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
    color: var(--sd-ink);
  }
  /* The slide. Paired with the fixed height above — see the note there.
     Gated on --has-announce: with no bar of its own there is nothing to tuck
     away, and sliding would move the header itself off the top of the screen. */
  .sd-header--has-announce.is-scrolled {
    transform: translateY(calc(var(--sd-announce-h) * -1));
  }

  /* ============ header shell ============ */
  .sd-header {
    /* Desktop row height from the section setting, falling back to the global token.
       Set here rather than inline on <sd-header> so the <=1024px rule below (which
       swaps in the mobile height) can still win — an inline custom property would
       outrank it. */
    --sd-header-h: var(--sd-header-h-lg, 76px);
    position: sticky; top: 0; z-index: 60;
    background: var(--sd-canvas);
    /* §10.2.1 — settles on scroll: hairline + shadow fade in, nothing resizes. */
    border-bottom: 1px solid var(--sd-hairline);
    box-shadow: 0 0 0 rgba(51, 47, 43, 0);
    /* transform carries the announcement collapse (see the note above it). */
    transform: translateY(0);
    transition: box-shadow 0.3s var(--sd-ease),
                transform var(--sd-reveal-duration) var(--sd-ease);
  }
  .sd-header--static { position: relative; }
  .sd-header.is-stuck { box-shadow: 0 8px 24px -20px rgba(51, 47, 43, 0.35); }

  .sd-wrap { max-width: var(--sd-container); margin: 0 auto; padding: 0 var(--sd-gutter); }
  .sd-header-inner {
    display: grid;
    /* 1fr auto 1fr keeps the wordmark optically centred whatever the left column
       holds (§6.3). Do not change to flex space-between. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--sd-header-h);
    gap: 24px;
  }

  .sd-nav-left { display: flex; align-items: center; gap: 30px; }
  .sd-trigger, .sd-navlink {
    position: relative;
    /* the mockup's global button reset, ported locally */
    background: none; border: 0; cursor: pointer;
    display: inline-flex; align-items: center;
    min-height: var(--sd-tap);
    padding: 0 2px;
    font-family: var(--font-body--family);
    /* Size is merchant-set; the literal is the fallback, so the header still
       reads correctly if the inline custom property is ever missing. */
    font-size: var(--sd-nav-size, 14px); font-weight: 500; letter-spacing: 0.05em;
    color: var(--sd-ink);
    text-decoration: none;
    transition: color 0.25s var(--sd-ease);
  }
  .sd-trigger::after, .sd-navlink::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 12px;
    height: 1.5px; background: currentColor;
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.35s var(--sd-ease);
  }
  /* §11: the text is narrower than 44px ("shop" measures 43) — an invisible
     ::before widens the HIT AREA without moving layout or the underline. */
  .sd-trigger::before, .sd-navlink::before {
    content: ""; position: absolute; inset: 0 -8px;
  }
  .sd-trigger:hover, .sd-navlink:hover { color: var(--sd-violet); }
  .sd-trigger:hover::after, .sd-navlink:hover::after,
  .sd-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
  .sd-trigger[aria-expanded="true"] { color: var(--sd-violet); }
  /* No caret — removed by client amendment, 29 Jul. */

  .sd-logo { display: block; justify-self: center; padding: 10px 4px; }
  .sd-logo .sd-logo-svg, .sd-logo svg { height: var(--sd-logo-h, 24px); width: auto; display: block; }
  .sd-logo svg path { fill: var(--sd-ink); transition: fill 0.3s var(--sd-ease); }
  .sd-logo:hover svg path { fill: var(--sd-violet); }
  /* Uploaded logo image: same height tokens as the wordmark, so swapping one for the
     other does not change the header row height. */
  .sd-logo .sd-logo-img {
    height: var(--sd-logo-h, 24px); width: auto; max-width: 100%;
    display: block; object-fit: contain;
  }

  .sd-nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
  .sd-nav-right--no-account .header-actions shopify-accounts,
  .sd-nav-right--no-account .header-actions [data-testid="account"] { display: none; }
  .sd-icon {
    width: var(--sd-tap); height: var(--sd-tap);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: none; border: 0; cursor: pointer; padding: 0;
    transition: background 0.3s var(--sd-ease), transform 0.3s var(--sd-ease);
  }
  .sd-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--sd-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .sd-icon:hover { background: var(--sd-whisper-lilac); }
  .sd-icon:active { transform: scale(0.92); }
  /* Skin the native search/account/cart triggers to the same 44px circles. */
  .sd-nav-right .header-actions { display: flex; align-items: center; gap: 6px; }
  .sd-nav-right button, .sd-nav-right a { min-width: var(--sd-tap); min-height: var(--sd-tap); }
  .sd-burger { display: none; }

  /* ============ the one tree: dropdown ≥1025 ============ */
  .sd-mega {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--sd-whisper-lilac);
    border-bottom: 1px solid var(--sd-hairline);
    box-shadow: 0 24px 48px -28px rgba(51, 47, 43, 0.22);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-14px);
    transition: opacity 0.38s var(--sd-ease), transform 0.5s var(--sd-ease), visibility 0s linear 0.5s;
  }
  .sd-mega.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.38s var(--sd-ease), transform 0.55s var(--sd-ease), visibility 0s linear 0s;
  }
  /* §7.1 belt-and-braces, BOTH guards, do not "tidy" these away: an active
     panel sets visibility:visible on itself, and a descendant may override a
     hidden ancestor. Desktop survives on opacity alone; the mobile drawer is
     held off screen by transform ONLY, and reduced-motion neutralises
     transforms — without these two lines a full menu paints over the page. */
  .sd-mega:not(.is-open) { pointer-events: none; }
  .sd-mega:not(.is-open) .sd-panel { visibility: hidden; }

  .sd-mega-inner { padding: 34px 0 44px; }
  /* §10.2.2 veil behind the cards; the token is anchor-derived. */
  .sd-mega-inner { position: relative; }
  .sd-mega-inner::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: var(--sd-veil);
    opacity: 0; transition: opacity 0.7s var(--sd-ease);
    pointer-events: none;
  }
  .sd-mega.is-open .sd-mega-inner::before { opacity: 1; }
  .sd-mega-wrap { position: relative; z-index: 1; }

  /* Drawer-only furniture. Hidden at every width by default and switched on
     inside the <=1024 block, so it can never leak into the desktop dropdown. */
  .sd-drawer-top, .sd-drawer-foot, .sd-drawer-nav { display: none; }

  /* ============ tabs ============ */
  .sd-tabs {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    gap: 38px;
    padding-bottom: 14px;
    margin-bottom: 32px;
  }
  .sd-tabs::before {
    content: ""; position: absolute; left: 50%; bottom: 0;
    width: min(100%, 760px); transform: translateX(-50%);
    height: 1px; background: var(--sd-hairline);
  }
  .sd-tab {
    position: relative;
    min-height: var(--sd-tap);
    display: inline-flex; align-items: center;
    background: none; border: 0; cursor: pointer; padding: 0;
    font-family: var(--font-body--family);
    font-size: var(--sd-tab-size, 11.5px); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--sd-ink-soft);
    white-space: nowrap;
    transition: color 0.3s var(--sd-ease);
  }
  .sd-tab:hover { color: var(--sd-ink); }
  .sd-tab[aria-selected="true"] { color: var(--sd-ink); }
  /* §10.2.3 hover ghost — teaches that the underline is the moving part. */
  .sd-tab::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--sd-violet); opacity: 0;
    transform: scaleX(0); transform-origin: 50% 50%;
    transition: transform 0.35s var(--sd-ease), opacity 0.35s var(--sd-ease);
  }
  .sd-tab:hover::after { opacity: 0.3; transform: scaleX(1); }
  .sd-tab[aria-selected="true"]::after { opacity: 0; }
  .sd-tab-underline {
    position: absolute; bottom: 0; left: 0; height: 2px;
    background: var(--sd-violet); border-radius: 2px;
    transform: translateX(var(--sd-x, 0));
    width: var(--sd-w, 0);
    transition: transform 0.45s var(--sd-ease), width 0.45s var(--sd-ease);
  }

  /* ============ stacked panels ============ */
  .sd-panels { display: grid; }
  .sd-panel {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.3s var(--sd-ease), visibility 0s linear 0.3s;
  }
  .sd-panel.is-active {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 0.35s var(--sd-ease) 0.06s, visibility 0s linear 0s;
  }

  /* ============ cards ============ */
  .sd-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .sd-card {
    --i: 0;
    display: flex; flex-direction: column;
    background: var(--sd-canvas);
    border: 1px solid var(--sd-hairline);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none; color: inherit;
    opacity: 0;
    transform: translateY(var(--sd-reveal-distance));
    transition: opacity 0.5s var(--sd-ease), transform 0.55s var(--sd-ease),
                border-color 0.3s var(--sd-ease), box-shadow 0.35s var(--sd-ease);
  }
  .sd-panel.is-active .sd-card {
    opacity: 1; transform: translateY(0);
    transition-delay: calc(var(--i) * var(--sd-stagger));
  }
  .sd-card:hover { border-color: var(--sd-violet); box-shadow: 0 18px 34px -22px rgba(51, 47, 43, 0.3); }
  .sd-card:active { transform: translateY(0) scale(0.988); }

  .sd-card-media { position: relative; aspect-ratio: 1 / 1; background: var(--sd-veil); overflow: hidden; }
  .sd-card-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 0.8s var(--sd-ease); }
  .sd-card:hover .sd-card-media img { transform: scale(1.055); }

  .sd-badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: inline-flex; align-items: center;
    height: 26px; padding: 0 12px;
    background: var(--sd-ink); color: var(--sd-canvas);
    font-family: var(--font-body--family);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
    border-radius: 100px;
    transform: translateY(-4px); opacity: 0;
    transition: transform 0.45s var(--sd-ease) 0.12s, opacity 0.45s var(--sd-ease) 0.12s;
  }
  .sd-panel.is-active .sd-badge { transform: translateY(0); opacity: 1; }
  .sd-badge.is-save { background: var(--sd-rose-deep); }

  /* factual magnification mark, not an award (§12) */
  .sd-roundel {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px;
    background: var(--sd-violet); color: var(--sd-canvas);
    transform: scale(0.82); opacity: 0;
    transition: transform 0.5s var(--sd-ease) 0.18s, opacity 0.4s var(--sd-ease) 0.18s;
  }
  .sd-panel.is-active .sd-roundel { transform: scale(1); opacity: 1; }
  .sd-roundel i { font-style: normal; font-size: 8px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
  .sd-roundel b { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; }
  .sd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  .sd-card-body { padding: 18px 20px 22px; }
  .sd-card-body h3 {
    font-family: var(--font-heading--family); font-weight: 400;
    font-size: 19px; line-height: 1.2; letter-spacing: 0.005em;
    margin: 0 0 5px; color: var(--sd-ink);
    transition: transform 0.4s var(--sd-ease), color 0.3s var(--sd-ease);
  }
  /* §10.2.4 — 2px, not 4: at 4 it reads as a glitch. */
  .sd-card:hover .sd-card-body h3 { transform: translateX(2px); color: var(--sd-violet); }
  .sd-card-body p {
    font-family: var(--font-body--family);
    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
    color: var(--sd-ink-soft); line-height: 1.45; margin: 0;
  }
  .sd-card-body em { font-family: var(--font-accent--family); font-style: italic; color: var(--sd-rose-deep); font-weight: 500; }

  /* ============ pill CTA ============ */
  .sd-cta-row { display: flex; justify-content: center; margin-top: 32px; }
  .sd-pill {
    position: relative; overflow: hidden; z-index: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--sd-tap);
    padding: 0 40px;
    border: 1.5px solid var(--sd-ink);
    border-radius: 100px;
    background: transparent; color: var(--sd-ink);
    text-decoration: none;
    font-family: var(--font-body--family);
    font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.5s var(--sd-ease), transform 0.5s var(--sd-ease),
                color 0.3s var(--sd-ease), border-color 0.3s var(--sd-ease);
  }
  .sd-panel.is-active .sd-pill { opacity: 1; transform: translateY(0); transition-delay: calc(4 * var(--sd-stagger)); }
  /* §10.2.5 — fill left→right; white on the anchor violet is 7.86:1. */
  .sd-pill::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--sd-violet);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.45s var(--sd-ease);
  }
  .sd-pill:hover::before { transform: scaleX(1); }
  .sd-pill:hover { color: var(--sd-canvas); border-color: var(--sd-violet); }
  .sd-pill:active { transform: translateY(0) scale(0.97); }

  /* ============ scrim ============ */
  .sd-scrim {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(51, 47, 43, 0.28);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.38s var(--sd-ease), visibility 0s linear 0.38s;
  }
  .sd-scrim.is-on { opacity: 1; visibility: visible; transition: opacity 0.38s var(--sd-ease), visibility 0s linear 0s; }

  /* ============ short laptops (§13.1 — 1366×768 must not scroll) ============ */
  @media (min-width: 1025px) and (max-height: 840px) {
    .sd-card-media { aspect-ratio: 4 / 3; }
    .sd-mega-inner { padding: 26px 0 34px; }
    .sd-tabs { margin-bottom: 24px; }
    .sd-card-body { padding: 15px 18px 18px; }
    .sd-cta-row { margin-top: 26px; }
  }
  @media (max-width: 1180px) {
    .sd-nav-left { gap: 22px; }
    .sd-tabs { gap: 26px; }
  }
  @media (min-width: 1025px) {
    .sd-drawer-top, .sd-drawer-foot, .sd-drawer-nav { display: none !important; }
  }

  /* ============ the one tree: drawer ≤1024 ============ */
  @media (max-width: 1024px) {
    /* Mobile row height. Wins over the .sd-header desktop rule above by source order
       at equal specificity; both target the same element, so nothing inherits stale. */
    .sd-header { --sd-header-h: var(--sd-header-h-sm, 64px); }

    /* ROOT CAUSE, 23 Aug 2026 — the "white strip" drawer.
       `transform` on .sd-header (added for the announcement collapse, see the
       long note at .sd-announce) creates a CONTAINING BLOCK for fixed-position
       descendants. .sd-mega is a descendant, so at <=1024px its
       `position: fixed; top:0; bottom:0` resolved against the HEADER, not the
       viewport. Measured on 127.0.0.1:9292 at 390px: drawer 102px tall against
       a 103px header and an 844px viewport — a 64px .sd-drawer-top rendering
       inside a 102px box IS the reported white strip. Content was never the
       problem; no stylesheet below this line could have fixed it either.

       An identity transform still creates the containing block, which is why
       `transform: matrix(1,0,0,1,0,0)` measured earlier looked healthy: it was
       adjacent to the fault, not the fault. The number that would have to
       change was the HEIGHT, and nobody had measured it.

       Sticky `top` gives the identical tuck-away — the bar sticks above the
       viewport edge and the nav row lands flush at 0 — WITHOUT creating a
       containing block. Like the transform it changes no layout, so the
       document-height vibration that .sd-announce warns about cannot return
       (verified: expanded top 0px / collapsed sticky top -38px, 0 layout
       shift). Desktop >=1025 keeps the transform exactly as authored.

       Do NOT put a transform, filter, backdrop-filter, perspective, contain or
       will-change back on .sd-header, or any ancestor of .sd-mega, at <=1024px.
       Any one of them re-traps the drawer and the strip returns. */
    .sd-header {
      transform: none;
      transition: box-shadow 0.3s var(--sd-ease),
                  top var(--sd-reveal-duration) var(--sd-ease);
    }
    /* THE DUPLICATED SELECTOR IS DELIBERATE. Read this before touching it.

       The first line mirrors, verbatim, the rule ~40 lines above in THIS file:

           #header-group:has(.sd-header:not(.sd-header--static)) .sd-header
           { top: var(--sd-announce-bar-h, 0px); }

       That rule pins the header below the separate Horizon `header-announcements`
       section. It carries an ID (specificity 1,2,0), so it beats a plain
       `.sd-header--has-announce.is-scrolled` (0,2,0) NO MATTER the source order.
       The class-only form alone therefore loses `top` and silently resolves to
       the 0px fallback — measured on live 205434028371 at 390px: is-scrolled
       applied, header stayed at top 0, collapse dead. Matching the ID selector
       is the only way to win without !important.

       IF THAT RULE MOVES, this one dies silently and the collapse stops with no
       error: nothing here fails loudly, the header simply never tucks. The
       coupling is to our OWN rule above, not to Horizon internals — but it does
       depend on Horizon keeping the section-group wrapper id `header-group`.
       If either changes, update BOTH selectors together.

       `top` composes the two offsets rather than replacing one with the other:
       the header pins below the Horizon bar (--sd-announce-bar-h, measured by
       sd-header.js) and then collapses by its own bar's height (--sd-announce-h).
       With no Horizon bar the first term is 0 and this is a plain -38px, which
       is exactly what the desktop transform produced. */
    #header-group:has(.sd-header:not(.sd-header--static)) .sd-header--has-announce.is-scrolled,
    .sd-header--has-announce.is-scrolled {
      transform: none;
      top: calc(var(--sd-announce-bar-h, 0px) - var(--sd-announce-h));
    }
    .sd-nav-left .sd-trigger, .sd-nav-left .sd-navlink { display: none; }
    /* burger glyph edge on the gutter line (§6.3) */
    .sd-nav-left { gap: 0; margin-left: -12px; }
    .sd-burger { display: inline-flex; }
    .sd-logo .sd-logo-svg, .sd-logo svg, .sd-logo .sd-logo-img { height: var(--sd-logo-h-sm, 21px); }

    .sd-mega {
      position: fixed; top: 0; left: 0; bottom: 0; right: auto;
      width: min(100%, 460px);
      display: flex; flex-direction: column;
      background: var(--sd-canvas);
      border-bottom: 0;
      box-shadow: 14px 0 44px -26px rgba(51, 47, 43, 0.28);
      opacity: 1;                       /* drawer hides by transform, not opacity */
      transform: translateX(-100%);
      visibility: hidden; pointer-events: none;
      transition: transform 0.5s var(--sd-ease), visibility 0s linear 0.5s;
      z-index: 70;
    }
    .sd-mega.is-open {
      transform: translateX(0);
      visibility: visible; pointer-events: auto;
      transition: transform 0.55s var(--sd-ease), visibility 0s linear 0s;
    }

    .sd-drawer-top {
      display: flex; align-items: center; justify-content: flex-start; gap: 10px;
      height: var(--sd-header-h);
      padding: 0 var(--sd-gutter);
      margin-left: -12px;               /* close button sits where the burger was */
      border-bottom: 1px solid var(--sd-hairline);
      flex: 0 0 auto;
    }
    .sd-drawer-top .sd-logo--drawer { padding: 10px 4px; }

    .sd-mega-inner {
      flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding: 0 0 32px;
      background: var(--sd-whisper-lilac);
    }
    .sd-mega-inner::before { display: none; }  /* the drawer body IS the surface */
    .sd-mega-wrap { padding: 0; max-width: none; }

    /* The tab strip stays put while the panel scrolls under it. Its background
       must be OPAQUE and cover the full strip, or cards passing beneath show
       through and read as clipped — the strip is the same colour as the drawer
       body, so a partial cover is invisible until content slides into it.

       The padding alone makes the background span the drawer's full width while
       the tabs stay on the same gutter line as the panel below.

       NO negative inline margin here — 24 Aug 2026. It previously carried
       `margin-inline: calc(var(--sd-gutter) * -1)` alongside the equal padding.
       That pull-out/push-in pair is only correct when the PARENT supplies the
       padding being cancelled; `.sd-mega-wrap` is `padding: 0` at this
       breakpoint (see the rule above), so there was nothing to cancel. The two
       values simply annulled each other and the first tab landed at x=0 while
       the cards sat on the gutter. Measured on live at 390px: first tab 0,
       first card 18, misaligned by 18px, and the strip itself hung 18px past
       BOTH drawer edges (-18 to 408 against a 0-390 drawer).

       With the margin removed: strip 0-390, first tab 18, cards 18, aligned,
       and the strip still scrolls (98px of overflow at 390px). If
       `.sd-mega-wrap` is ever given inline padding again, the negative margin
       comes back with it — the two belong together or not at all. */
    .sd-tabs {
      position: sticky; top: 0; z-index: 3;
      justify-content: flex-start;
      gap: 26px;
      padding: 10px var(--sd-gutter) 12px;
      margin-bottom: 22px;
      background: var(--sd-whisper-lilac);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .sd-tabs::-webkit-scrollbar { display: none; }
    .sd-tabs::before { left: 0; width: 100%; transform: none; }
    .sd-panels { padding: 0 var(--sd-gutter); }
    .sd-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .sd-card-body { padding: 14px 14px 18px; }
    .sd-card-body h3 { font-size: 16px; }
    .sd-card-body p { font-size: 12px; }
    /* narrow cards: badge drops to the bottom so it can never run under the
       roundel; its reveal flips to travel from below (+6px), toward rest. */
    .sd-badge {
      top: auto; bottom: 10px; left: 10px;
      height: 24px; padding: 0 10px; font-size: 10px; letter-spacing: 0.06em;
      white-space: nowrap; transform: translateY(6px);
    }
    .sd-roundel { width: 44px; height: 44px; top: 8px; right: 8px; }
    .sd-roundel i { font-size: 7px; }
    .sd-roundel b { font-size: 10px; }
    .sd-cta-row { margin-top: 26px; }
    .sd-pill { width: calc(100% - var(--sd-gutter) * 2); margin: 0 var(--sd-gutter); padding: 0 20px; }

    /* Top-level nav links inside the drawer. Larger and heavier than the "more"
       footer below: these are the main menu, the footer is secondary. */
    .sd-drawer-nav {
      display: grid; gap: 2px;
      margin-top: 26px; padding: 22px var(--sd-gutter) 0;
      border-top: 1px solid var(--sd-hairline);
    }
    .sd-drawer-nav a {
      display: flex; align-items: center;
      min-height: var(--sd-tap);
      font-family: var(--font-body--family);
      font-size: 17px; font-weight: 600; letter-spacing: 0.01em;
      color: var(--sd-ink); text-decoration: none;
      opacity: 0; transform: translateY(10px);
      transition: opacity 0.4s var(--sd-ease), transform 0.4s var(--sd-ease), color 0.2s var(--sd-ease);
    }
    .sd-mega.is-open .sd-drawer-nav a {
      opacity: 1; transform: none;
      transition-delay: calc(var(--i, 0) * 60ms + 160ms);
    }
    .sd-drawer-nav a:hover { color: var(--sd-violet); }

    .sd-drawer-foot {
      display: grid; gap: 2px;
      margin-top: 30px; padding: 24px var(--sd-gutter) 0;
      border-top: 1px solid var(--sd-hairline);
    }
    .sd-drawer-foot a {
      display: flex; align-items: center;
      min-height: var(--sd-tap);
      font-family: var(--font-body--family);
      font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
      color: var(--sd-ink); text-decoration: none;
      /* §10.2.6 — footer links fade up at 60ms per item once open */
      opacity: 0; transform: translateY(10px);
      transition: opacity 0.4s var(--sd-ease), transform 0.4s var(--sd-ease), color 0.2s var(--sd-ease);
    }
    .sd-mega.is-open .sd-drawer-foot a {
      opacity: 1; transform: none;
      transition-delay: calc(var(--i, 0) * 60ms + 200ms);
    }
    .sd-drawer-foot a:hover { color: var(--sd-violet); }
    .sd-drawer-foot span {
      font-family: var(--font-body--family);
      font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--sd-ink-soft); margin-bottom: 6px;
    }
  }
  @media (max-width: 420px) {
    .sd-header, sd-header { --sd-gutter: var(--sd-gutter-sm); }
    .sd-cards { gap: 12px; }
    .sd-card-body h3 { font-size: 15px; }
  }

  /* burger → X */
  .sd-burger-lines { width: 20px; height: 14px; position: relative; }
  .sd-burger-lines span {
    position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 2px;
    background: var(--sd-ink);
    transition: transform 0.45s var(--sd-ease), opacity 0.25s var(--sd-ease);
  }
  .sd-burger-lines span:nth-child(1) { top: 0; }
  .sd-burger-lines span:nth-child(2) { top: 6.2px; }
  .sd-burger-lines span:nth-child(3) { top: 12.4px; }
  .sd-burger[aria-expanded="true"] .sd-burger-lines span:nth-child(1) { transform: translateY(6.2px) rotate(45deg); }
  .sd-burger[aria-expanded="true"] .sd-burger-lines span:nth-child(2) { opacity: 0; }
  .sd-burger[aria-expanded="true"] .sd-burger-lines span:nth-child(3) { transform: translateY(-6.2px) rotate(-45deg); }

  /* ============ reduced motion (§10.3 + §7.1) ============ */
  @media (prefers-reduced-motion: reduce) {
    sd-header *, sd-header *::before, sd-header *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      transition-delay: 0ms !important;
      scroll-behavior: auto !important;
    }
    .sd-panel, .sd-card, .sd-pill, .sd-badge, .sd-roundel { transform: none !important; }
    .sd-card, .sd-pill, .sd-badge, .sd-roundel { opacity: 1 !important; }
    .sd-drawer-foot a { opacity: 1 !important; transform: none !important; }
    .sd-card:hover .sd-card-media img { transform: none !important; }
  }
  /* §7.1: the closed DRAWER is held off screen by transform alone, so .sd-mega
     is deliberately ABSENT from the blanket transform reset above. Only the
     open state may have its transform neutralised, and only below the
     breakpoint — on desktop the closed panel's translateY is harmless because
     opacity:0 holds it. Written as ONE flat media query (not nested) so an
     engine without CSS nesting cannot silently drop the guard and park a full
     menu over the page — that exact bug was live in the mockup. */
  @media (prefers-reduced-motion: reduce) and (max-width: 1024px) {
    .sd-mega { transform: translateX(-100%) !important; }
    .sd-mega.is-open { transform: none !important; }
  }
/* END_SECTION:sd-header */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:sorandi-about-marquee (INDEX:41) */
.sd-awm {
    overflow: hidden;
    padding-block: 28px;
    border-block: 1px solid rgba(51, 47, 43, 0.06);
  }
  .sd-awm__viewport { display: block; width: 100%; overflow: hidden; }
  .sd-awm__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: sd-awm-scroll 38s linear infinite;
  }
  .sd-awm__viewport:hover .sd-awm__track { animation-play-state: paused; }
  .sd-awm__word {
    flex: none;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 52px);
    text-transform: lowercase;
    color: var(--sd-ink);
    margin-inline: 18px;
    white-space: nowrap;
  }
  .sd-awm__sparkle {
    flex: none;
    font-style: normal;
    font-size: clamp(14px, 1.6vw, 22px);
    color: var(--sd-violet);
  }
  @keyframes sd-awm-scroll { to { transform: translateX(-50%); } }

  @media (prefers-reduced-motion: reduce) {
    .sd-awm__track { animation: none; flex-wrap: wrap; justify-content: center; }
  }
/* END_SECTION:sorandi-about-marquee */

/* START_SECTION:sorandi-before-after (INDEX:42) */
.sd-ba {
    padding-block: var(--sd-ba-pt) var(--sd-ba-pb);
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-ba {
      padding-block: var(--sd-ba-pt-mobile, var(--sd-ba-pt)) var(--sd-ba-pb-mobile, var(--sd-ba-pb));
    }
  }
  /* FULL-BLEED, per the mockup: no container, no column gap, 520px floor, so
     the comparison frame meets the viewport edge. The inset moves to the copy. */
  /* HONESTY GATE. With no real before/after photography set, the native block
     falls back to Shopify's generic "product-apparel" placeholder graphics —
     two unrelated stock illustrations presented under the copy "the same face,
     the same morning, only the light changes". That reads as a fabricated
     comparison, which is worse than showing nothing, so the whole section is
     hidden on the storefront until a genuine pair is supplied. Always visible in
     the theme editor. A pair of unrelated stand-ins must NOT be used here: a
     before/after has to be the same subject, or it is a false claim.
     Tracked in CONTENT-TODO — client owes lit/unlit photography of one face. */
  .sd-ba:not(.sd-ba--editor):has(.comparison-slider__placeholder) {
    display: none;
  }

  .sd-ba__inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 0;
    min-height: 520px;
    width: 100%;
  }
  .sd-ba--slider-left .sd-ba__inner { direction: rtl; }
  .sd-ba--slider-left .sd-ba__copy,
  .sd-ba--slider-left .sd-ba__slider { direction: ltr; }

  .sd-ba__copy {
    text-align: center;
    padding-block: clamp(32px, 5vw, 56px);
    padding-inline: clamp(24px, 5vw, 72px);
  }
  .sd-ba__title {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.15;
    color: var(--sd-ink);
    margin: 0 0 14px;
  }
  .sd-ba__accent {
    font-family: var(--font-accent--family);
    font-style: italic;
    font-weight: 500;
    color: var(--sd-violet);
  }
  .sd-ba__body {
    font-family: var(--font-body--family);
    font-size: 15px;
    line-height: 1.7;
    color: var(--sd-ink-soft);
    max-width: 380px;
    margin: 0 auto;
  }
  .sd-ba__slider { min-width: 0; }

  @media (max-width: 860px) {
    .sd-ba__inner { grid-template-columns: 1fr; }
    .sd-ba--slider-left .sd-ba__inner { direction: ltr; }
  }
/* END_SECTION:sorandi-before-after */

/* START_SECTION:sorandi-belief-band (INDEX:43) */
.sd-belief { padding-block: var(--sd-belief-pt) var(--sd-belief-pb); text-align: center; }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-belief {
      padding-block: var(--sd-belief-pt-mobile, var(--sd-belief-pt)) var(--sd-belief-pb-mobile, var(--sd-belief-pb));
    }
  }
  .sd-belief__inner { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }
  .sd-belief__eyebrow {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--sd-violet); margin-block-end: 18px;
  }
  .sd-belief__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.12;
    color: var(--sd-ink);
    margin: 0 0 20px;
  }
  .sd-belief__accent { font-family: var(--font-accent--family); font-style: italic; font-weight: 500; color: var(--sd-violet); }
  .sd-belief__body {
    font-family: var(--font-body--family);
    font-size: 16px;
    line-height: 1.7;
    color: var(--sd-ink-soft);
    max-width: 56ch;
    margin-inline: auto;
  }
/* END_SECTION:sorandi-belief-band */

/* START_SECTION:sorandi-best-sellers (INDEX:44) */
.sd-bs {
    padding-block: var(--sd-bs-pt) var(--sd-bs-pb);
  }
  /* Mobile padding is its own pair of settings: the desktop values are tuned for
     a wide, airy row, and carrying them down to a phone wastes a large slice of
     a short viewport. The breakpoint is 860px, matching the one the card grid
     already switches at, so spacing and layout change together.
     Only the two custom properties differ — the padding-block declaration is
     restated rather than duplicated per side, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-bs {
      padding-block: var(--sd-bs-pt-mobile, var(--sd-bs-pt)) var(--sd-bs-pb-mobile, var(--sd-bs-pb));
    }
  }
  /* Merchant background override. Only bites when a colour was actually picked,
     so the .sd-surface--* token default (and the rebrand path) is untouched
     otherwise. */
  .sd-bs--bg-custom {
    background: var(--sd-bs-bg);
  }
  /* Hide the whole section on the live store when no card actually renders
     (e.g. all referenced products are unpublished). Always shown in the editor. */
  .sd-bs:not(.sd-bs--editor):not(:has(.sd-bs__card)) {
    display: none;
  }
  .sd-bs__inner {
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
    position: relative;
  }
  .sd-bs__head {
    text-align: center;
    margin-block-end: 40px;
  }
  .sd-bs__eyebrow {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sd-violet);
    margin-block-end: 10px;
  }
  .sd-bs__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--sd-ink);
    margin: 0;
  }

  .sd-bs__slider { display: block; position: relative; }
  .sd-bs__track {
    display: grid;
    grid-auto-flow: column;
    /* Cards per row is a merchant setting (2-4). The gap budget is one gap
       fewer than the card count, so N cards fill the row exactly. */
    --sd-bs-gap: 20px;
    grid-auto-columns: calc(
      (100% - (var(--sd-bs-per-row, 3) - 1) * var(--sd-bs-gap)) / var(--sd-bs-per-row, 3)
    );
    gap: var(--sd-bs-gap);
    /* THE hover-expand bug: the track is a one-row grid, and a grid item's
       default align-self is `stretch`. So when the hovered card's quick-add row
       expanded, the single row grew — and every other card stretched to the new
       row height with it, making the whole shelf look like it expanded.

       `start` lets each card size to its own content, so only the hovered one
       grows. The always-visible modes re-assert stretch below, where equal
       heights ARE wanted (every card shows its button, so they should line up). */
    align-items: start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: 4px;
  }
  /* Equal heights only where every card shows its quick-add row at rest. */
  .sd-bs--qa-always .sd-bs__track,
  .sd-bs--qa-desktop .sd-bs__track {
    align-items: stretch;
  }
  .sd-bs__track::-webkit-scrollbar { display: none; }

  /* The card is a <sd-card> custom element, not an <a>: the title carries a
     stretched link so the whole tile is clickable while the swatches and
     quick-add stay independently clickable, with no interactive element nested
     inside an anchor. */
  /* A column, not a plain block, so the quick-add row can be pushed to the
     card's bottom edge in the always-visible modes (see the margin rule below).
     Height is NOT forced here: in hover mode the card must size to its own
     content, or every unhovered card would stretch to the tallest one in the
     row and show a gap under the price. The always-visible modes opt into
     equal heights themselves, just below. */
  .sd-bs__card {
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--sd-canvas);
    border-radius: 20px;
    padding: 8px 8px 20px;
    color: inherit;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--card-border-focus);
  }
  /* Pin the quick-add row to the bottom of the card, so the Add to cart buttons
     line up across cards whose titles wrap to different heights.

     ONLY in the always-visible modes. In hover mode the row is collapsed at
     rest, and an auto start-margin would still claim all the leftover height —
     pushing the collapsed row to the card's bottom edge and leaving a visible
     gap under the price on every unhovered card. There the card sizes to its
     content instead, which is what the reference shows. */
  .sd-bs--qa-always .sd-bs__card,
  .sd-bs--qa-desktop .sd-bs__card {
    height: 100%;
  }
  .sd-bs--qa-always .sd-bs__card > .sd-bs__qa,
  .sd-bs--qa-desktop .sd-bs__card > .sd-bs__qa {
    margin-block-start: auto;
  }
  .sd-bs__card:hover { transform: translateY(-4px); }
  /* The focus ring belongs to the link, but must read as the CARD being focused. */
  .sd-bs__card:has(.sd-bs__link:focus-visible) {
    outline: 2px solid var(--sd-violet);
    outline-offset: 3px;
  }

  /* Fixed frame: aspect-ratio reserves the space before the image loads, so the
     grid never shifts (zero CLS). Padding is on the CARD, not the tile, so the
     product fills the frame instead of floating in a thick margin.

     The ratio is a single custom property because the pill overlay mirrors this
     exact box to sit on the image — hardcoding it in both places let the two
     drift apart, which pushed the button off the tile. Change it here only. */
  .sd-bs {
    --sd-bs-ratio: 1 / 1;
  }
  .sd-bs__img-tile {
    position: relative;
    aspect-ratio: var(--sd-bs-ratio, 1 / 1);
    border-radius: 14px;
    overflow: hidden;
    background: var(--sd-whisper-lilac);
    margin-block-end: 12px;
  }
  .sd-bs__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s, opacity 0.3s;
  }
  .sd-bs__card:hover .sd-bs__img { transform: scale(1.04); }
  .sd-bs__img--placeholder { background: var(--sd-whisper-lilac); }

  /* Second image on hover — desktop only. Hidden from AT: it is the same
     product, and announcing it twice adds nothing. */
  .sd-bs__img--hover { opacity: 0; }
  @media (hover: hover) and (min-width: 861px) {
    .sd-bs__card:hover .sd-bs__img--hover { opacity: 1; }
  }
  @media (hover: none), (max-width: 860px) {
    .sd-bs__img--hover { display: none; }
  }

  /* ---- Badges ---- */
  .sd-bs__badge,
  .sd-bs__save {
    position: absolute;
    top: 10px;
    z-index: 2;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    border-radius: 100px;
    pointer-events: none;
  }
  .sd-bs__badge {
    inset-inline-start: 10px;
    background: var(--sd-canvas);
    color: var(--sd-ink);
    border: 1px solid var(--sd-hairline);
  }
  /* Top-LEFT by default. Colours fall back to the brand violet, so a section
     with nothing picked still follows the anchor on a rebrand; the overrides
     arrive as inline custom properties on the section root. */
  .sd-bs__save {
    inset-inline-start: 10px;
    background: var(--sd-bs-save-bg, var(--sd-violet));
    color: var(--sd-bs-save-fg, #fff);
  }
  /* Position = "Top right". Both sides are reset rather than only the new one
     set: `inset-inline-start` stays in effect otherwise and the badge would be
     pinned to both edges, stretching it across the whole tile. */
  .sd-bs--save-end .sd-bs__save {
    inset-inline-start: auto;
    inset-inline-end: 10px;
  }

  /* ---- Quick add: a row UNDER the card body, revealed on card hover ----
     It used to float over the image; it now sits below the price/rating row and
     expands the card downwards, so the stepper and the button both have room and
     neither covers the photo. */
  .sd-bs__qa {
    /* Not display:none — a collapsed grid row animates, and the button stays
       focusable so keyboard users reach it (see :focus-within below). */
    padding-inline: 12px;
    z-index: 3;
    position: relative;
  }
  /* ---- Undo Horizon's floating-pill quick add ----
     snippets/quick-add-styles.liquid is built for a quick-add that FLOATS over a
     <product-card>: `.quick-add` is position:absolute; inset:0; pointer-events:
     none, and `button.quick-add__button` is display:none / opacity:0 / a
     collapsed pill, revealed only by `product-card:is(:hover, :focus-within)`.

     This card is <sd-card>, so that reveal selector can never match and the
     button stayed invisible no matter what the section's own rules said — the
     "ATC not showing" bug. The row here is a normal in-flow element under the
     card body, so every one of those assumptions has to be undone explicitly:
     static positioning, real display, full opacity, natural width. */
  .sd-bs__qa .quick-add,
  .sd-bs__qa .quick-add__product-form-component,
  .sd-bs__qa form {
    display: block;
    position: static;
    inset: auto;
    pointer-events: auto;
  }
  /* Stepper hard left, Add to cart hard right, gap between — the reference
     layout. space-between rather than a stretched button: both controls keep
     their natural width and the leftover space falls in the middle, which is
     what the comp shows. */
  .sd-bs__qa .quick-add__product-form-component form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .sd-bs__qa .sd-qa__qty {
    flex: none;
    gap: 0;
  }
  /* add-to-cart-button.liquid wraps the button in <add-to-cart-component>, a
     custom element with no display of its own — so it defaults to inline and
     the button inside it never becomes a flex item of the row. Making the
     wrapper the flex child instead is what lets the button take the leftover
     width beside the stepper. */
  .sd-bs__qa add-to-cart-component {
    display: block;
    /* flex:none, not 1 1 auto: the button sits at the row's right edge at its
       own width rather than stretching across the gap, so space-between on the
       form actually has space to distribute. min-width:0 still lets it shrink
       on a narrow card instead of overflowing. */
    flex: 0 1 auto;
    min-width: 0;
  }
  /* The stepper. `quantity-selector-component` is a custom element, so it needs
     an explicit display or it stays inline and the -/+/input row collapses. The
     wrapper around it is flex:none so a long product title never squeezes the
     stepper into slivers — the button beside it absorbs the width instead. */
  .sd-bs__qa .quantity-selector-wrapper {
    flex: none;
    display: block;
  }
  .sd-bs__qa .quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--sd-hairline);
    border-radius: 100px;
    overflow: hidden;
    height: 40px;
  }
  .sd-bs__qa .quantity-selector button {
    width: 32px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--sd-ink);
    padding: 0;
  }
  .sd-bs__qa .quantity-selector button:hover { color: var(--sd-violet); }
  .sd-bs__qa .quantity-selector input {
    width: 30px;
    height: 100%;
    border: 0;
    background: none;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 13px;
    color: var(--sd-ink);
    /* The spinner arrows would sit on top of our own +/- buttons. */
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .sd-bs__qa .quantity-selector input::-webkit-outer-spin-button,
  .sd-bs__qa .quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  /* The button. `button.quick-add__button` in Horizon's sheet is an
     element+class selector, so it outranks a bare `.quick-add__button` here —
     these are written element-qualified too, and the `display`/`opacity`/
     `position` triplet is restated rather than inherited, because those three
     are exactly what kept it invisible inside a non-product-card. */
  .sd-bs__qa button.quick-add__button,
  .sd-bs__qa button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    position: static;
    inset: auto;
    /* Horizon collapses the pill to a fixed icon width and animates it open on
       its own hover. This button sizes to its label instead — the reveal is
       owned by the .sd-bs__qa wrapper (which animates its height and opacity on
       CARD hover), not by the button, so the two never fight: opacity:1 here is
       inside a wrapper that is itself still opacity:0.

       flex:none keeps it at its natural width so the form's space-between can
       push it to the right edge; stretching it would eat the gap. */
    flex: none;
    width: auto;
    max-inline-size: none;
    min-inline-size: 0;
    height: auto;
    min-height: 40px;
    overflow: visible;
    backdrop-filter: none;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 11px 14px;
    border-radius: 100px;
    border: 0;
    background: var(--sd-ink);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
  }
  /* The cart icon Horizon puts inside the pill is redundant next to a full
     "Add to cart" label, and it is what forces the collapsed width. */
  .sd-bs__qa button.quick-add__button .add-to-cart-icon {
    display: none;
  }
  /* Hover scale would fight the card's own lift; keep the button calm. */
  .sd-bs__qa button.quick-add__button:hover { scale: none; }

  /* The Choose-options path. It renders when the store setting "Add to cart
     without choosing options" is off, or on a subscription product, which
     always goes to the picker. Horizon hides the Add form in that state via
     [data-quick-add-button='choose'] — that rule is correct and stays; this
     just makes the Choose button itself full-width in the row, since it is
     then the only control and there is no stepper beside it. */
  .sd-bs__qa .quick-add__button--choose {
    width: 100%;
    flex: 1 1 auto;
  }
  .sd-bs__qa .quick-add__button:hover,
  .sd-bs__qa button[type="submit"]:hover { background: var(--sd-violet); }
  /* Sold-out colourway: <sd-card> disables the button when the selected swatch
     has no available variant, so the state is visible rather than a click that
     silently fails. */
  .sd-bs__qa button[type="submit"]:disabled,
  .sd-bs__qa .quick-add__button:disabled {
    background: var(--sd-hairline);
    color: var(--sd-ink-soft);
    cursor: not-allowed;
  }
  .sd-bs__qa button[type="submit"]:disabled:hover,
  .sd-bs__qa .quick-add__button:disabled:hover { background: var(--sd-hairline); }

  /* Hover-revealed on desktop by default; touch always shows it (no hover to
     reveal with). The section can force it always-on via .sd-bs--qa-always.

     grid-template-rows 0fr -> 1fr is the collapse: it animates a row from no
     height to its content height without needing a fixed px value, so a card
     with a Choose button (one line) and one with a stepper both work. The inner
     wrapper needs min-height:0 and overflow:hidden or the content refuses to
     compress to zero. */
  @media (hover: hover) and (min-width: 861px) {
    .sd-bs:not(.sd-bs--qa-always):not(.sd-bs--qa-desktop) .sd-bs__qa {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      padding-block: 0;
      transition: grid-template-rows 0.3s var(--sd-ease, ease), opacity 0.25s, padding-block 0.3s;
    }
    .sd-bs:not(.sd-bs--qa-always):not(.sd-bs--qa-desktop) .sd-bs__qa > * {
      min-height: 0;
      overflow: hidden;
    }
    .sd-bs:not(.sd-bs--qa-always):not(.sd-bs--qa-desktop) .sd-bs__card:hover .sd-bs__qa,
    .sd-bs:not(.sd-bs--qa-always):not(.sd-bs--qa-desktop) .sd-bs__qa:focus-within {
      grid-template-rows: 1fr;
      opacity: 1;
      padding-block: 0 12px;
    }
  }
  /* Touch and the always-on setting: plain spacing, no collapse. */
  .sd-bs--qa-always .sd-bs__qa,
  .sd-bs__qa { padding-block: 0 12px; }

  /* ---- Desktop-only quick add (Quick add = "Desktop only") ----
     Removed entirely below 861px rather than hidden: `display: none` would
     still leave the stepper and the Add to cart button in the DOM, where a
     screen reader and the tab order both still reach them. On a phone the card
     is a plain tile that opens the product page, per the design.

     `!important` is deliberate here and nowhere else in this file — the
     hover-reveal block above sets padding-block on a bare .sd-bs__qa, and this
     rule has to beat that flat selector at the same specificity regardless of
     which order Shopify concatenates the two stylesheets in. */
  @media (max-width: 860px) {
    .sd-bs--qa-desktop .sd-bs__qa {
      display: none !important;
      padding-block: 0 !important;
    }
  }
  /* Above the breakpoint the row is permanent — no hover needed. This is the
     same end state the hover rule animates to, so the two agree on spacing. */
  @media (min-width: 861px) {
    .sd-bs--qa-desktop .sd-bs__qa {
      display: block;
      grid-template-rows: none;
      opacity: 1;
      padding-block: 0 12px;
    }
    .sd-bs--qa-desktop .sd-bs__qa > * {
      min-height: 0;
      overflow: visible;
    }
  }

  /* ---- Title grows on card hover ----
     Desktop only: it needs a real hover, and on a narrow card the extra size
     would reflow the grid. transform is used rather than font-size so the text
     scales without relayouting the card (font-size would push the price down
     and fight the quick-add row's own animation). */
  @media (hover: hover) and (min-width: 861px) {
    .sd-bs__card .sd-bs__title {
      transform-origin: left center;
      transition: transform 0.3s var(--sd-ease, ease), color 0.25s;
      will-change: transform;
    }
    .sd-bs__card:hover .sd-bs__title {
      transform: scale(var(--sd-bs-title-hover-scale, 1.08));
    }
  }

  /* ---- Swatches ---- */
  /* The 44x44 buttons carry ~9px of transparent padding around a 26px dot (the
     touch-target floor). That padding is invisible but still occupies layout, so
     the row read as a band of dead space. Collapse the surplus with negative
     block margins: the hit area is untouched, only the space it CLAIMS shrinks
     to the dot's own height. */
  .sd-bs__sw {
    display: flex;
    /* nowrap here too: the dots stay one row, never stacking internally. */
    flex-wrap: nowrap;
    gap: 2px;
    /* Sits beside the title. Pull back the button's transparent padding —
       (button - dot) / 2, i.e. 4px at 28/20 — so the dots claim no dead height
       and the last dot lines up with the card's right edge rather than floating
       4px inside it. Keep in step with the button and dot sizes. */
    /* -4px pull-back, plus a nudge down so the dots sit on the optical centre
       of the title's FIRST line rather than its very top (the row is
       align-items:flex-start so a wrapped title keeps them beside line one). */
    margin-block: -1px -4px;
    margin-inline-end: -4px;
    /* flex:none stops the row being compressed by a long title — without it
       flex-shrink would squash the dots into slivers. */
    flex: none;
  }
  /* The visual dot is 26px but the BUTTON is 44x44 via transparent padding, so
     the touch target clears the accessibility floor without a huge dot. */
  /* Compact by default (pointer devices): the button is only slightly larger
     than the dot, so the row reads tight. Touch devices get the full 44x44
     target back in the media query below — a fine target is a mouse luxury, and
     dropping it on a phone would make the swatches genuinely hard to hit. */
  .sd-bs__sw-btn {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  @media (hover: none) {
    .sd-bs__sw-btn {
      width: 44px;
      height: 44px;
    }
    /* Bigger buttons mean more transparent padding to absorb: (44 - 20) / 2. */
    .sd-bs__sw {
      margin-block: -9px -12px;
      margin-inline-end: -12px;
    }
  }
  .sd-bs__sw-btn:focus-visible {
    outline: 2px solid var(--sd-violet);
    outline-offset: -4px;
    border-radius: 50%;
  }
  /* THE inset hairline is what makes a white colour legible on a white card.
     Without it the chip is invisible — the original bug. */
  .sd-bs__sw-dot {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sd-whisper-lilac);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s;
  }
  .sd-bs__sw-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Selected ring: 2px with a 1.5px gap would crowd a 20px dot, so the halo is
     tightened to sit right off the edge. */
  .sd-bs__sw-btn.is-on .sd-bs__sw-dot {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 1.5px var(--sd-violet);
  }
  /* Colour name: never at rest, only on hover/focus. The aria-label carries it
     for assistive tech at all times. */
  /* Below the dot, not above: the row now sits under the title, and an upward
     tooltip covered it. */
  .sd-bs__sw-name {
    position: absolute;
    top: calc(100% - 4px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    color: var(--sd-ink);
    background: var(--sd-canvas);
    border: 1px solid var(--sd-hairline);
    border-radius: 100px;
    padding: 3px 9px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 4;
  }
  .sd-bs__sw-btn:hover .sd-bs__sw-name,
  .sd-bs__sw-btn:focus-visible .sd-bs__sw-name { opacity: 1; }

  /* ---- Title + stretched link ---- */
  /* Title and swatches share one row: name left, colours pushed right. They
     wrap onto separate lines rather than colliding on a narrow card or a long
     title. align-items:center keeps the dots optically level with the first
     line of the title. */
  /* nowrap: the swatches must STAY on the title's line, never drop below it.
     The title absorbs the pressure instead — it wraps to a second line and the
     dots stay pinned to the right of the first. */
  .sd-bs__namerow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    margin-block-end: 6px;
  }

  /* ---- Block mode: two visual rows out of one flat block list ----
     In collection mode the card's parts are separate child blocks, and Liquid
     hands them over as a single flat sequence in whatever order the merchant
     dragged them. The design still wants two rows — title/swatches, then
     price/rating — so the container is a two-column grid and each part names
     its own cell. DOM order is therefore irrelevant: drag the blocks into any
     order and the card still reads correctly; delete one and nothing else
     moves, because nothing is positioned relative to a sibling that might not
     exist. (Flex with order/negative margins would have worked too, but the
     rating's pull-up would have been tied to the price's line-height — a number
     that breaks the moment a font-size setting changes.)

     Column 2 is `auto`, so it takes only what the swatches and rating need and
     the title keeps the rest. Rows are implicit: a row with nothing placed in
     it never materialises, so a card with no price and no rating has no empty
     track under the title. Scoped to .sd-bs__card--b, which only the block-built
     card carries: manual-mode cards use the same .sd-bs__namerow class and would
     otherwise have their flex layout swapped out from under them. */
  .sd-bs__card--b > .sd-bs__namerow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 6px;
  }
  .sd-bs__card--b > .sd-bs__namerow > .sd-bs__title {
    grid-column: 1;
    grid-row: 1;
  }
  .sd-bs__card--b > .sd-bs__namerow > .sd-bs__sw {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .sd-bs__card--b > .sd-bs__namerow > .sd-bs__price {
    grid-column: 1;
    grid-row: 2;
  }
  .sd-bs__card--b > .sd-bs__namerow > .sd-bs__rating {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  /* ---- Variant name (per-variant cards only) ----
     Spans both columns on its own row between the title row and the price row,
     so it reads as a subtitle. Explicit grid placement rather than source order,
     matching how every other part of this row is positioned — the merchant can
     reorder the blocks and this stays put. Muted and smaller than the title so
     it never competes with it. */
  .sd-bs__vname {
    grid-column: 1 / -1;
    grid-row: 2;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--sd-ink-soft, var(--sd-ink));
    opacity: 0.72;
  }
  /* The name takes row 2, so price and rating move down one. */
  .sd-bs__card--b > .sd-bs__namerow:has(> .sd-bs__vname) > .sd-bs__price,
  .sd-bs__card--b > .sd-bs__namerow:has(> .sd-bs__vname) > .sd-bs__rating {
    grid-row: 3;
  }

  /* ---- Stacked layout (Card layout = "Rating first") ----
     The reference arrangement: rating and swatches share the top row, then the
     title, then the price — three full-width rows instead of the paired
     two-row grid above.

     Same principle as the default: every part names its own cell, so DOM order
     stays irrelevant and removing a block leaves no empty track behind. Only
     the row assignments change, and the rating moves to column 1 because it
     LEADS its row here rather than being pushed right by a price beside it.
     The swatches keep column 2 so they still sit hard right, as in the comp. */
  .sd-bs--stacked .sd-bs__card--b > .sd-bs__namerow > .sd-bs__rating {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    /* The default rule pushes the rating right with an auto start-margin; in
       this layout it leads the row, so that has to be undone explicitly. */
    margin-inline-start: 0;
  }
  .sd-bs--stacked .sd-bs__card--b > .sd-bs__namerow > .sd-bs__sw {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .sd-bs--stacked .sd-bs__card--b > .sd-bs__namerow > .sd-bs__title {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .sd-bs--stacked .sd-bs__card--b > .sd-bs__namerow > .sd-bs__price {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  /* Every part removed — no stray gap under the image. */
  .sd-bs__namerow:empty {
    display: none;
    margin-block-end: 0;
  }
  .sd-bs__title {
    font-family: var(--font-heading--family);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sd-ink);
    margin: 0;
    /* Take the leftover width so the swatches sit hard right, and allow the
       title to shrink below its content width rather than shoving them off. */
    flex: 1 1 auto;
    min-width: 0;
  }
  .sd-bs__link {
    color: inherit;
    text-decoration: none;
  }
  /* The image's own anchor (see _sd-bs-card.liquid). An <a> defaults to inline,
     which would collapse around the tile and break the card's column layout, so
     it is made a block that simply passes its box through to the tile inside.

     z-index is deliberately NOT set: it stays at auto so the pill (3) and the
     swatches (4) keep painting above it and stay clickable, while the photo
     itself is a real link rather than an overlay that anything above can steal. */
  .sd-bs__img-link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  .sd-bs__img-link:focus-visible { outline: none; }
  /* Covers the whole card so the tile is one click target. Sits BELOW the
     swatches and quick-add (z-index 2/3), which stay clickable. */
  .sd-bs__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 20px;
  }
  .sd-bs__link:focus-visible { outline: none; }

  /* ---- Price + rating share one row ----
     Value on the left, social proof pushed to the right edge. They wrap onto
     separate lines rather than colliding when the card is narrow (2-up mobile,
     or a long "From $X" string). */
  .sd-bs__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  /* ---- Rating ---- */
  .sd-bs__rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body--family);
    font-size: 12.5px;
    color: var(--sd-ink-soft);
    /* Pushed right by .sd-bs__meta; margin-inline-start:auto keeps it right even
       when the price wraps to its own line. */
    margin-inline-start: auto;
  }

  /* Partial stars via a clipped gradient, so 4.7 reads as 4.7 — not 5.

     The fill percentage must be measured against the STARS ONLY. letter-spacing
     appends a trailing gap after the fifth star, and that gap is part of the
     element's width, so a naive 94% landed beyond the last star and every star
     looked full (the bug). Two fixes together:
       - the trailing space is removed with a negative inline margin, so the box
         ends exactly at the fifth star's right edge;
       - the gradient hard-stops at --sd-rating with no interpolation, so a
         part-filled star is cut cleanly rather than faded. */
  .sd-bs__stars {
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 1.5px;
    margin-inline-end: -1.5px;
    background-image: linear-gradient(
      90deg,
      var(--sd-violet) 0,
      var(--sd-violet) var(--sd-rating, 100%),
      rgba(51, 47, 43, 0.2) var(--sd-rating, 100%),
      rgba(51, 47, 43, 0.2) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Safari needs an explicit transparent fill for background-clip:text. */
    -webkit-text-fill-color: transparent;
  }
  .sd-bs__rating-avg {
    font-weight: 600;
    color: var(--sd-ink);
    font-size: 12.5px;
  }
  .sd-bs__rating-count { color: var(--sd-ink-soft); }

  /* ---- Price ---- */
  /* Both colours fall back to their brand token, so a section with no colour
     picked still follows the anchor on a rebrand. The overrides arrive as
     inline custom properties on the section root. */
  .sd-bs__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 700;
    color: var(--sd-bs-price, var(--sd-ink));
  }
  /* The old price is context, not the offer — it must recede so the live price
     reads first. Lighter weight, smaller, and a thinner rule than the default
     strikethrough, which rendered as a heavy bar competing with the real price. */
  .sd-bs__was {
    font-weight: 400;
    font-size: 12.5px;
    color: var(--sd-bs-was, var(--sd-ink-soft));
    text-decoration-thickness: 1px;
    /* Tied to the text colour rather than a fixed ink tint: a merchant who
       picks a compare-price colour would otherwise get their colour struck
       through with the old brown-grey line. currentColor keeps the rule in
       step, and the 45% mix preserves the thin, receding look.
       House pattern — static fallback first, derived line second, so browsers
       without color-mix keep the original ink rule. */
    text-decoration-color: rgba(51, 47, 43, 0.45);
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  }

  /* Arrow treatment matches sorandi-radiant-split: hairline ring on canvas,
     filling to the violet anchor on hover/focus. One slider look across the
     theme, and the hover colour follows the brand anchor rather than ink. */
  .sd-bs__arrow {
    position: absolute;
    top: 38%;
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--sd-hairline);
    background: var(--sd-canvas);
    box-shadow: 0 2px 12px rgba(51, 47, 43, 0.14);
    color: var(--sd-ink);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
  }
  .sd-bs__arrow:hover,
  .sd-bs__arrow:focus-visible {
    background: var(--sd-violet);
    color: #fff;
    border-color: var(--sd-violet);
  }
  .sd-bs__arrow--prev { left: -8px; }
  .sd-bs__arrow--next { right: -8px; }

  .sd-bs__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-block-start: 22px;
  }
  .sd-bs__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(51, 47, 43, 0.2);
    cursor: pointer;
    transition: background 0.25s;
  }
  /* 44px hit area without changing the visual size — rule 7, audience 50-68.
     The dot stays 8px; an invisible inset pseudo-element carries the touch
     target, so nothing moves and nothing looks bigger. */
  .sd-bs__dot { position: relative; }
  .sd-bs__dot::after {
    content: "";
    position: absolute;
    inset: -18px;
  }

  .sd-bs__dot[data-active] { background: var(--sd-violet); }

  /* When the cards already fit one desktop row there is nothing to page, so the
     arrows/dots would be dead controls. Hidden on desktop only — mobile is
     always 2-up and still scrolls, so it keeps its dots. */
  @media (min-width: 861px) {
    .sd-bs__arrow--idle,
    .sd-bs__dots--idle { display: none; }
  }

  /* Mobile is fixed at 2-up per the mockup — the desktop setting doesn't apply. */
  @media (max-width: 860px) {
    /* ONE card per screen on mobile. At 2-up the cards were too narrow: the
       title wrapped to two lines and the swatches dropped below it instead of
       sitting beside it, and the image was too small to read. A single card
       gets the full width, so the name row stays on one line. */
    .sd-bs__track {
      --sd-bs-gap: 12px;
      grid-auto-columns: 100%;
    }
    /* Arrows stay, but tuck inside the gutter so they never sit over a card
       edge on a narrow screen. Mobile is 1-up and always scrollable (whenever
       there is more than one card), so unlike desktop there is no "idle" case
       to hide them for. */
    .sd-bs__arrow {
      width: 36px;
      height: 36px;
      font-size: 13px;
    }
    .sd-bs__arrow--prev { left: -4px; }
    .sd-bs__arrow--next { right: -4px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sd-bs__card,
    .sd-bs__img,
    .sd-bs__arrow,
    .sd-bs__qa,
    .sd-bs__sw-dot,
    .sd-bs__sw-name,
    .sd-bs__dot { transition: none; }
    .sd-bs__card:hover { transform: none; }
    .sd-bs__card:hover .sd-bs__img { transform: none; }
    /* Quick add must not depend on a transition to become visible. */
    @media (hover: hover) and (min-width: 861px) {
      .sd-bs__card:hover .sd-bs__qa { transform: none; }
    }
    .sd-bs__track { scroll-behavior: auto; }
  }

  /* ================= Quick add: floating pill =================
     "Quick add style = Floating pill". A single rounded button sitting on the
     product photo, bottom-right, instead of the stepper + button row under the
     card body.

     The markup is NOT moved for this — the row lives after the name row in the
     DOM either way, so the tab order stays image -> title -> button and the
     capture in _sd-bs-card has one call site. Only the painting changes: the
     row is taken out of flow and pinned to the card's padding box (the card is
     already position:relative), then offset to sit inside the image tile.

     Everything here is written to beat the row rules above, which are more
     specific than they look (element-qualified, restating display/opacity/
     position to undo Horizon's own floating pill). Hence --pill on the wrapper
     and the same element qualification on the button. */
  .sd-bs__qa--pill {
    position: absolute;
    /* Matches the image tile exactly by mirroring its box: the tile is the
       card's first child at 4:5, so an overlay pinned to the card's top with the
       same aspect-ratio covers precisely the tile — no fixed height needed, and
       it stays correct while the image is still loading (the tile reserves its
       space via aspect-ratio too, so the two can never disagree).
       `inset-inline` follows the card's own padding, which differs between row
       mode (8px) and pill mode (0). */
    top: 0;
    inset-inline: 0;
    aspect-ratio: var(--sd-bs-ratio, 1 / 1);
    padding: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    /* The tile has 14px radius and overflow:hidden; this sits above it, so it
       must not swallow clicks meant for the image link. */
    pointer-events: none;
    z-index: 3;
  }
  /* THE image-not-clickable bug. `> *` handed pointer-events:auto to
     <quick-add-component class="quick-add">, which the rule below makes
     display:block — so it spans the overlay's FULL width and ate every click
     landing on the photo beside and below the pill. The overlay's own
     pointer-events:none was therefore undone by its only child.

     Only the button itself needs to receive clicks, so the opt-in is pushed all
     the way down to it. The wrapper chain (quick-add-component, product-form-
     component, form, add-to-cart-component) stays transparent, so the rest of
     the photo falls through to the card's stretched link. */
  .sd-bs__qa--pill > *,
  .sd-bs__qa--pill .quick-add,
  .sd-bs__qa--pill .quick-add__product-form-component,
  .sd-bs__qa--pill form,
  .sd-bs__qa--pill add-to-cart-component {
    pointer-events: none;
  }
  .sd-bs__qa--pill button {
    pointer-events: auto;
  }
  .sd-bs__qa--pill .quick-add,
  .sd-bs__qa--pill .quick-add__product-form-component,
  .sd-bs__qa--pill form {
    display: block;
    position: static;
    inset: auto;
  }
  /* No stepper in this mode (the card renders quick-add without it), so the
     form is just the button — no space-between row to lay out. */
  .sd-bs__qa--pill .quick-add__product-form-component form {
    display: flex;
    justify-content: flex-end;
    gap: 0;
  }
  .sd-bs__qa--pill add-to-cart-component {
    display: block;
    flex: none;
  }
  /* The pill itself: white on the photo, ink text, cart icon kept (unlike the
     row, where a full "Add to cart" label made the icon redundant). */
  .sd-bs__qa--pill button.quick-add__button,
  .sd-bs__qa--pill button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    opacity: 1;
    position: static;
    inset: auto;
    flex: none;
    width: auto;
    max-inline-size: none;
    min-inline-size: 0;
    height: auto;
    min-height: var(--sd-tap, 44px);
    /* Tucked into the image's bottom-right corner, clear of the rounding. */
    margin: 16px;
    padding: 0;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 100px;
    background: var(--sd-bs-qa-bg, var(--sd-canvas, #fff));
    color: var(--sd-bs-qa-fg, var(--sd-ink));
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    /* The reference reads as words, not a shouty label — no uppercasing. */
    text-transform: none;
    white-space: nowrap;
    overflow: visible;
    backdrop-filter: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    transition: background 0.2s var(--sd-ease, ease), color 0.2s, box-shadow 0.2s;
  }
  /* The icon is the point of this design — undo the row rule that hides it. */
  .sd-bs__qa--pill button.quick-add__button .add-to-cart-icon,
  .sd-bs__qa--pill button[type="submit"] .add-to-cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
  }
  .sd-bs__qa--pill button.quick-add__button .add-to-cart-icon svg {
    width: 100%;
    height: 100%;
  }
  .sd-bs__qa--pill button.quick-add__button:hover,
  .sd-bs__qa--pill button[type="submit"]:hover,
  .sd-bs__qa--pill button.quick-add__button:focus-visible,
  .sd-bs__qa--pill button[type="submit"]:focus-visible {
    background: var(--sd-bs-qa-bg-h, var(--sd-ink));
    color: var(--sd-bs-qa-fg-h, var(--sd-canvas, #fff));
    scale: none;
  }
  /* Sold out: stays the white circle of the design rather than turning into a
     grey slab — the icon dims and the cursor says it is not clickable, which is
     enough signal at this size. */
  .sd-bs__qa--pill button[type="submit"]:disabled,
  .sd-bs__qa--pill .quick-add__button:disabled {
    background: var(--sd-canvas, #fff);
    color: var(--sd-ink-soft, var(--sd-ink));
    opacity: 0.55;
    cursor: not-allowed;
  }
  .sd-bs__qa--pill button[type="submit"]:disabled:hover,
  .sd-bs__qa--pill .quick-add__button:disabled:hover {
    background: var(--sd-canvas, #fff);
    color: var(--sd-ink-soft, var(--sd-ink));
  }
  /* Choose-options path: same pill, not the row's full-width treatment. */
  .sd-bs__qa--pill .quick-add__button--choose {
    width: auto;
    flex: none;
  }

  /* Reveal. The row mode animates a collapsing grid row; a pill cannot use that
     (it is out of flow), so it fades and lifts instead. Same triggers, so the
     two behave identically from the shopper's side: hover the card, or focus
     the button by keyboard. */
  @media (hover: hover) and (min-width: 861px) {
    .sd-bs:not(.sd-bs--qa-always) .sd-bs__qa--pill {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.25s var(--sd-ease, ease), transform 0.25s var(--sd-ease, ease);
    }
    .sd-bs:not(.sd-bs--qa-always) .sd-bs__card:hover .sd-bs__qa--pill,
    .sd-bs:not(.sd-bs--qa-always) .sd-bs__qa--pill:focus-within {
      opacity: 1;
      transform: none;
    }
  }
  /* Touch has no hover to reveal with, and the collapsing-row override in the
     row rules does not apply out of flow — always visible there. */
  @media (max-width: 860px), (hover: none) {
    .sd-bs__qa--pill {
      opacity: 1;
      transform: none;
    }
    .sd-bs__qa--pill button.quick-add__button,
    .sd-bs__qa--pill button[type="submit"] {
      margin: 12px;
      padding: 0;
      width: 46px;
      height: 46px;
      gap: 0;
    }
    /* Circle on touch too — the label would not fit a small card. */
    .sd-bs__qa--pill button .add-to-cart-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-bs__qa--pill { transition: none; }
  }

  /* The card grows on hover and the row mode reserves height for the revealed
     row; in pill mode there is no row to reserve, so the card must not stretch
     for one. */
  /* Those two modifiers push the in-flow quick-add row to the bottom of the
     card with margin-block-start:auto. An absolutely-positioned overlay must not
     inherit that — it would shift the pill off the image. */
  .sd-bs--qa-always .sd-bs__card > .sd-bs__qa--pill,
  .sd-bs--qa-desktop .sd-bs__card > .sd-bs__qa--pill {
    margin-block-start: 0;
  }

  /* ================= Pill mode: card chrome =================
     The reference card is borderless with the controls sitting ON the photo:
     swatches bottom-left, add-to-cart pill bottom-right, then title / variant
     name / price left-aligned underneath. These rules only apply when the
     section is in pill mode, so the row-mode card is untouched. */
  .sd-bs--qa-pill .sd-bs__card {
    /* Hairline border + canvas ground: the card reads as a defined tile rather
       than art floating on the page. Padding is back on the card so the border
       sits clear of the image instead of hugging it. */
    border: 1px solid var(--sd-hairline);
    background: var(--sd-canvas);
    border-radius: 20px;
    padding: 10px 10px 18px;
    /* Transition BOTH properties here, so the lift eases in and out. Putting it
       on :hover only would snap the card back on exit. */
    transition: transform 0.28s var(--sd-ease, ease), box-shadow 0.28s var(--sd-ease, ease),
      border-color 0.28s var(--sd-ease, ease);
  }
  /* Lifts on hover with a soft shadow beneath — the shadow is offset downward
     and blurred wide so the card reads as raised, not outlined. */
  .sd-bs--qa-pill .sd-bs__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(51, 47, 43, 0.13);
    border-color: transparent;
  }
  /* The lift is decoration; honour the OS setting and the store's Motion switch.
     The shadow still appears, so hover feedback is not lost — only the movement.
     Targets jump to their final state rather than easing (house rule). */
  @media (prefers-reduced-motion: reduce) {
    .sd-bs--qa-pill .sd-bs__card,
    .sd-bs--qa-pill .sd-bs__card:hover {
      transition: none;
      transform: none;
    }
  }
  .sd-motion-minimal .sd-bs--qa-pill .sd-bs__card,
  .sd-motion-minimal .sd-bs--qa-pill .sd-bs__card:hover {
    transition: none;
    transform: none;
  }
  /* The tile carried the card's 8px inset; with no card padding it owns its own
     rounding and is the positioning context for both overlays. */
  .sd-bs--qa-pill .sd-bs__img-tile {
    border-radius: 18px;
    margin-block-end: 14px;
    /* No tinted plate behind the packshot — these are cut-outs on white, so the
       lilac wash read as a grey box around the product. */
    background: transparent;
  }
  /* The pill was offset for the card's 8px padding — remove it now that the
     tile IS the card's full width. */
  /* Pill-mode cards have no padding, so the overlay already lines up with the
     tile; row-mode cards inset it by the card's 8px padding. */
  /* Follows the card's padding so the overlay still lines up with the image
     tile exactly. This MUST track .sd-bs--qa-pill .sd-bs__card's padding — the
     overlay reconstructs the tile's box, so a padding change here without a
     matching change there pushes the button off the image. */
  .sd-bs--qa-pill .sd-bs__qa--pill {
    margin: 10px;
  }
  .sd-bs:not(.sd-bs--qa-pill) .sd-bs__qa--pill {
    margin: 8px;
  }

  /* Swatches over the image, bottom-left, mirroring the pill on the right.
     Lifted out of the name row by position rather than by reordering the
     markup, so the block order the merchant set still describes the card and
     the keyboard order stays title -> swatches -> price. */
  .sd-bs--qa-pill .sd-bs__card--b > .sd-bs__namerow > .sd-bs__sw {
    position: absolute;
    left: 14px;
    /* Sits on the image: the tile is 4:5 of the card width, and the name row
       starts 14px below it. Anchoring from the row's top edge upward keeps the
       swatches inside the photo without needing the tile's pixel height. */
    bottom: calc(100% + 14px);
    z-index: 4;
    justify-self: start;
    margin: 0;
  }
  .sd-bs--qa-pill .sd-bs__card--b > .sd-bs__namerow {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }
  /* ---- Pill mode: no stretched overlay ----
     The rule directly above makes the name row a positioned element (so the
     swatches can hang over the photo). That silently re-parents the Title
     block's `.sd-bs__link::after` overlay to the name row, so it covers only the
     text and leaves the photo inert — the "image not clickable" bug.

     The overlay is dropped here rather than re-aimed at the card. An overlay is
     the wrong tool in this layout: pinned to the card it would paint above the
     photo's own anchor and steal its clicks, and it loses to any wrapper that
     picks up pointer-events. The photo is a real <a> instead (see
     _sd-bs-card.liquid), and the title is a real <a> too, so both are clickable
     because they ARE links — no stacking or positioning to get wrong.

     Trade-off, stated plainly: the blank space AROUND the title and price is no
     longer a click target in pill mode. The photo and the title text are, which
     is what the design's tap targets actually are. */
  .sd-bs--qa-pill .sd-bs__card--b > .sd-bs__namerow .sd-bs__link::after {
    content: none;
  }
  /* Every part now stacks in one left-aligned column: title, variant name,
     price. Explicit rows, since the two-column pairing above no longer applies. */
  .sd-bs--qa-pill .sd-bs__card--b > .sd-bs__namerow > .sd-bs__title { grid-row: 1; }
  .sd-bs--qa-pill .sd-bs__vname { grid-row: 2; }
  .sd-bs--qa-pill .sd-bs__card--b > .sd-bs__namerow > .sd-bs__price {
    grid-row: 3;
    justify-self: start;
  }
  .sd-bs--qa-pill .sd-bs__card--b > .sd-bs__namerow > .sd-bs__title,
  .sd-bs--qa-pill .sd-bs__card--b > .sd-bs__namerow > .sd-bs__price {
    grid-column: 1;
    text-align: left;
  }

  /* ---- Type scale, matched to the reference ----
     Title is the loudest thing under the image, the variant name is a quiet
     grey line, and the price is bold and slightly larger than the name. The
     rhythm between them is tight (4px / 6px), so the three read as one block
     rather than three separate rows. Sizes are stated here rather than left to
     the blocks' own settings so the card holds its proportions regardless of
     what the title/price blocks were configured with. */
  .sd-bs--qa-pill .sd-bs__card--b > .sd-bs__namerow {
    row-gap: 0;
  }
  /* Class-doubled so it outranks _sd-bs-title's own .sd-bs__title.sd-bs__title--b
     rule, which reads the block's font-weight setting. Without the extra class
     the two tie on specificity and the winner depends on stylesheet order. */
  .sd-bs--qa-pill .sd-bs__title.sd-bs__title--b {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin-block-end: 4px;
  }
  /* No hover treatment on the title in this layout. The card-wide scale is a
     carousel affordance; here the card is a quiet grid tile and the only thing
     that should react to the cursor is the add button. Overriding both the
     transform and its transition, so nothing animates back either. */
  .sd-bs--qa-pill .sd-bs__card:hover .sd-bs__title,
  .sd-bs--qa-pill .sd-bs__card:hover .sd-bs__title--b {
    transform: none;
    transition: none;
  }
  .sd-bs--qa-pill .sd-bs__vname {
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.3;
    opacity: 1;
    color: var(--sd-ink-soft, #8A8A8A);
    margin-block-end: 6px;
  }
  /* Plain price: same size as the title, regular weight, no chip or badge —
     it is a fact on the card, not a shout. */
  .sd-bs--qa-pill .sd-bs__price.sd-bs__price--b,
  .sd-bs--qa-pill .sd-bs__card--b > .sd-bs__namerow > .sd-bs__price {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--sd-ink);
    gap: 6px;
  }

  /* Swatches stay visible at rest here — they are part of the card's identity in
     this design, not a hover affordance. */
  .sd-bs--qa-pill .sd-bs__sw {
    opacity: 1;
    visibility: visible;
  }

  /* The product must sit INSIDE the frame, not be cropped to fill it — these are
     packshots on white, so cover was slicing the stand and the mirror edges. */
  .sd-bs--qa-pill .sd-bs__img {
    object-fit: contain;
  }
  .sd-bs--qa-pill .sd-bs__card:hover .sd-bs__img {
    transform: none;
  }

  /* ---- Pill: icon at rest, full label on card hover ----
     Collapsed to a circle showing just the cart icon; entering the card expands
     it to the width of "Add to cart". The label is animated with max-width
     rather than display, so it stays in the accessible name at every size and
     the transition has something to interpolate. */
  @media (hover: hover) and (min-width: 861px) {
    /* Resting size is set once, in the base rule above (52px). This only adds
       the transition — restating the width here as well meant two rules owned
       the same value and the second silently won, shrinking the button below
       the size the design calls for. */
    .sd-bs--qa-pill button.quick-add__button,
    .sd-bs--qa-pill button[type="submit"] {
      transition: width 0.28s var(--sd-ease, ease), padding 0.28s var(--sd-ease, ease),
        gap 0.28s var(--sd-ease, ease), background 0.2s, color 0.2s;
    }
    /* The label text Horizon renders inside the button. */
    .sd-bs--qa-pill button .add-to-cart-label {
      display: inline-block;
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      opacity: 0;
      transition: max-width 0.28s var(--sd-ease, ease), opacity 0.2s var(--sd-ease, ease);
    }
    /* A circle at rest; hovering the CARD (not just the button) expands it to
       the full "Add to cart" pill, and keyboard focus does the same so the
       control is reachable without a pointer. Hovering the card rather than the
       button means the label is already open by the time the cursor arrives —
       expanding only on button hover would make it a moving target. */
    .sd-bs--qa-pill .sd-bs__card:hover button.quick-add__button,
    .sd-bs--qa-pill .sd-bs__card:hover button[type="submit"],
    .sd-bs--qa-pill .sd-bs__qa--pill:focus-within button.quick-add__button,
    .sd-bs--qa-pill .sd-bs__qa--pill:focus-within button[type="submit"] {
      width: auto;
      gap: 9px;
      padding: 11px 22px;
    }
    .sd-bs--qa-pill .sd-bs__card:hover button .add-to-cart-label,
    .sd-bs--qa-pill .sd-bs__qa--pill:focus-within button .add-to-cart-label {
      max-width: 12rem;
      opacity: 1;
    }
    /* The pill itself no longer fades in — it is always there as an icon, and
       only its LABEL is the hover reveal. */
    .sd-bs--qa-pill .sd-bs__qa--pill {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-bs--qa-pill button.quick-add__button,
    .sd-bs--qa-pill button[type="submit"],
    .sd-bs--qa-pill button .add-to-cart-label {
      transition: none;
    }
  }
/* END_SECTION:sorandi-best-sellers */

/* START_SECTION:sorandi-callouts-diagram (INDEX:45) */
.sd-cod {
    display: block;
    padding-block: var(--cod-pt) var(--cod-pb);
    /* Named container so the layout responds to the SECTION's width, not the
       viewport's — correct inside a padded or sidebarred template. */
    container-type: inline-size;
    container-name: sd-cod;
  }
  .sd-cod__inner {
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-cod__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.15;
    color: var(--cod-heading);
    text-align: center;
    margin: 0 0 clamp(32px, 4vw, 56px);
  }

  /* ---- Three columns: callouts / product / callouts ---- */
  .sd-cod__grid {
    display: grid;
    grid-template-columns: minmax(0, 27fr) minmax(0, 46fr) minmax(0, 27fr);
    align-items: center;
    column-gap: clamp(12px, 2.5vw, 40px);
  }
  .sd-cod__col {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 6cqi, 96px);
    /* min-width:0 lets the column shrink instead of forcing overflow. */
    min-width: 0;
  }

  /* Aspect-ratio wrapper: reserves the space before the image loads, so the
     section contributes zero CLS. */
  .sd-cod__media {
    position: relative;
    aspect-ratio: 1 / 1;
    min-width: 0;
  }
  .sd-cod__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain: this is a product cut-out; cover would crop the very thing the
       callouts point at. */
    object-fit: contain;
  }
  .sd-cod__img--placeholder { background: var(--sd-whisper-lilac); }

  /* ---- One callout ---- */
  .sd-cod__item { min-width: 0; }

  /* The connector row. The line is a flex child with flex:1, so it grows into
     whatever space remains — no fixed widths, no negative margins.
     align-items:center is what sits the label on the line's axis. */
  .sd-cod__row {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
  }
  /* Right column: identical markup, reversed. One rule instead of a mirrored
     duplicate rule set. */
  .sd-cod__item--right .sd-cod__row { flex-direction: row-reverse; }

  .sd-cod__label {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: clamp(14px, 1.4cqi, 17px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--sd-ink);
    background: var(--cod-label-bg);
    border: 1px solid var(--cod-label-border);
    border-radius: 3px;
    padding: 10px 16px;
    margin: 0;
    /* Shrinks before the connector does, so a long title wraps rather than
       squeezing the line out of existence. */
    min-width: 0;
    flex: 0 1 auto;
  }

  .sd-cod__line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--cod-line);
    /* Never let the line collapse entirely on a narrow column. */
    min-width: 12px;
  }
  .sd-cod__dot {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--cod-line);
    /* transparent, not a colour: reads as hollow on ANY section background. */
    background: transparent;
  }

  .sd-cod__body {
    font-family: var(--font-body--family);
    /* 15px floor per spec. */
    font-size: max(15px, 0.15cqi);
    line-height: 1.55;
    color: var(--cod-body);
    max-width: 260px;
    margin: 12px 0 0;
  }
  .sd-cod__item--left .sd-cod__body { text-align: left; }
  .sd-cod__item--right .sd-cod__body {
    text-align: right;
    margin-inline-start: auto;
  }

  /* ---- Motion (opt-in) ----
     Hidden state is applied only when .sd-cod--animate is present AND the
     visitor has not asked for reduced motion, so with the setting off, JS off,
     or reduced motion, everything is visible with no animation. */
  @media (prefers-reduced-motion: no-preference) {
    .sd-cod--animate .sd-cod__item {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.5s var(--sd-ease, ease), transform 0.5s var(--sd-ease, ease);
      transition-delay: calc(var(--cod-i, 0) * 60ms);
    }
    .sd-cod--animate .sd-cod__line {
      transform: scaleX(0);
      transition: transform 0.5s var(--sd-ease, ease);
      transition-delay: calc(var(--cod-i, 0) * 60ms + 120ms);
    }
    /* Lines draw outward FROM the dot: the origin is the end nearest the
       product, which is the right edge on the left column and vice versa. */
    .sd-cod__item--left .sd-cod__line { transform-origin: right center; }
    .sd-cod__item--right .sd-cod__line { transform-origin: left center; }

    .sd-cod--animate .sd-cod__item.is-in {
      opacity: 1;
      transform: none;
    }
    .sd-cod--animate .sd-cod__item.is-in .sd-cod__line { transform: none; }
  }

  /* ---- Responsive, single DOM ----
     900px: two-up callout grid under the image. Chosen over going straight to
     one column because the callouts are short; at tablet width a single column
     leaves a lot of dead space beside 260px of text. */
  @container sd-cod (max-width: 900px) {
    .sd-cod__grid {
      grid-template-columns: 1fr;
      row-gap: clamp(24px, 4vw, 40px);
    }
    /* Image first, callouts after — source order already puts the left column
       first, so it is reordered rather than moved in the DOM. */
    .sd-cod__media { order: -1; max-width: 420px; margin-inline: auto; width: 100%; }
    .sd-cod__col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(20px, 3vw, 32px);
    }
    /* Connectors only make sense pointing AT the image. Side by side under it,
       they point at nothing, so they are removed rather than left as
       decoration. The 600px layout below puts them back, rotated. */
    .sd-cod__line,
    .sd-cod__dot { display: none; }
    .sd-cod__item--right .sd-cod__row { flex-direction: row; }
    .sd-cod__item--left .sd-cod__body,
    .sd-cod__item--right .sd-cod__body {
      text-align: left;
      margin-inline-start: 0;
      max-width: none;
    }
    /* The per-block "Nudge down" staggers callouts against the product on the
       three-column layout only. Stacked, it is just a stray gap — and it is an
       inline style, so only !important can override it. The schema already
       promises it is ignored here. */
    .sd-cod__item { margin-block-start: 0 !important; }
  }

  /* ---- Phone: the diagram rebuilt vertically ----
     Rather than degrading to a plain stacked list, the diagram is preserved:
     the left column sits ABOVE the image and the right column BELOW it, and
     each connector rotates a quarter turn so the line drops (or rises) toward
     the image instead of pointing across at nothing.

     The whole effect is a flex-direction change on the row plus an order swap
     on the columns — the markup is untouched, so reading order stays
     label → body per callout and the two-column DOM is reused as
     "above the image" and "below the image". */
  @container sd-cod (max-width: 600px) {
    .sd-cod__col {
      display: flex;
      flex-direction: column;
      gap: clamp(28px, 7cqi, 44px);
    }
    /* Left column above the image, right column below. The media's order:-1
       from the 900px block would pull it to the top, so it is reset to sit
       between the two. */
    .sd-cod__col--left { order: -1; }
    .sd-cod__media { order: 0; }
    .sd-cod__col--right { order: 1; }

    /* Connectors back on, now vertical. */
    .sd-cod__line,
    .sd-cod__dot { display: block; }

    /* The connector column: [label] above [line] above [dot], the line
       stretching down toward the image. Cross-axis alignment is what pins the
       stack to the left or right edge, mirroring the reference's zigzag. */
    .sd-cod__row {
      flex-direction: column;
      align-items: flex-start;
    }
    /* Left-column callouts sit above the image, so their line runs DOWNWARD:
       label first, then line, then dot nearest the image. Markup order is
       already label → line → dot, so column needs no reversal. */
    .sd-cod__item--right .sd-cod__row {
      /* Right-column callouts sit BELOW the image, so the dot must be at the
         TOP (nearest the image) and the label at the bottom. column-reverse
         flips the same markup rather than adding a second rule set. */
      flex-direction: column-reverse;
      align-items: flex-end;
    }

    /* Horizontal line becomes a vertical one: swap the fixed and flexible
       axes. The height is what gives the diagram its airy leader-line look. */
    .sd-cod__line {
      width: 1px;
      height: clamp(48px, 14cqi, 88px);
      flex: none;
      min-width: 0;
      /* Centres the line under the label's first character rather than the
         box, so it reads as dropping from the label, not from the column. */
      margin-inline-start: 28px;
    }
    .sd-cod__item--right .sd-cod__line {
      margin-inline-start: 0;
      margin-inline-end: 28px;
    }
    /* The dot sits on the line's axis, so it needs the same inset minus half
       its own width (14px / 2 = 7px, less the 1px line ⇒ 21.5px). */
    .sd-cod__dot { margin-inline-start: 21.5px; }
    .sd-cod__item--right .sd-cod__dot {
      margin-inline-start: 0;
      margin-inline-end: 21.5px;
    }

    /* Body copy hugs its own side, matching the label above it. */
    .sd-cod__item--left .sd-cod__body {
      text-align: left;
      max-width: 34ch;
    }
    .sd-cod__item--right .sd-cod__body {
      text-align: right;
      margin-inline-start: auto;
      max-width: 34ch;
    }
    /* Below the image the body reads BEFORE its label visually (the label is
       pushed to the bottom by column-reverse), so the gap belongs above it. */
    .sd-cod__item--right .sd-cod__body { margin-block: 12px 0; }

    /* The line draws along its new axis. Without this the phone layout would
       inherit scaleX and the vertical lines would never appear.
       Nested inside the same reduced-motion guard as the desktop rules — the
       hidden scaleY(0) state must never apply to a visitor who will not get
       the transition that reveals it, or the lines would simply be missing. */
    @media (prefers-reduced-motion: no-preference) {
      .sd-cod--animate .sd-cod__line { transform: scaleY(0); }
      /* Origin is the end nearest the image: the bottom of an above-image
         line, the top of a below-image one. */
      .sd-cod--animate .sd-cod__item--left .sd-cod__line { transform-origin: top center; }
      .sd-cod--animate .sd-cod__item--right .sd-cod__line { transform-origin: bottom center; }
      .sd-cod--animate .sd-cod__item.is-in .sd-cod__line { transform: none; }
    }
  
    /* Zigzag override — alternate each callout left/right WITHIN its group
       rather than pinning a whole column to one edge, matching the reference.
       Placed last in this block so it beats the --left/--right rules above
       without editing each of them. nth-child works for any callout count. */
    .sd-cod__item:nth-child(odd) .sd-cod__row { align-items: flex-start; }
    .sd-cod__item:nth-child(even) .sd-cod__row { align-items: flex-end; }
    .sd-cod__item:nth-child(odd) .sd-cod__line { margin-inline: 28px 0; }
    .sd-cod__item:nth-child(even) .sd-cod__line { margin-inline: 0 28px; }
    .sd-cod__item:nth-child(odd) .sd-cod__dot { margin-inline: 21.5px 0; }
    .sd-cod__item:nth-child(even) .sd-cod__dot { margin-inline: 0 21.5px; }
    .sd-cod__item .sd-cod__body { max-width: 34ch; }
    .sd-cod__item:nth-child(odd) .sd-cod__body {
      text-align: left; margin-inline-start: 0; margin-inline-end: auto;
    }
    .sd-cod__item:nth-child(even) .sd-cod__body {
      text-align: right; margin-inline-start: auto; margin-inline-end: 0;
    }
  }

  /* Viewport fallback, ALSO applied where container queries are supported.
     It used to be wrapped in `@supports not (container-type: inline-size)`, so
     on any modern phone it never ran and the diagram was left in the flat
     >=600px layout whenever the container query did not resolve as expected
     (a full-bleed section, a re-render through the Section Rendering API, or a
     stale compiled sheet). The viewport rules are a strict subset of the
     container ones and set identical values, so running both is safe — the
     later one simply wins with the same result. */
  @supports (container-type: inline-size) or (not (container-type: inline-size)) {
    @media (max-width: 900px) {
      .sd-cod__grid { grid-template-columns: 1fr; row-gap: 32px; }
      .sd-cod__media { order: -1; max-width: 420px; margin-inline: auto; width: 100%; }
      .sd-cod__col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
      .sd-cod__line,
      .sd-cod__dot { display: none; }
      .sd-cod__item--right .sd-cod__row { flex-direction: row; }
      .sd-cod__item--left .sd-cod__body,
      .sd-cod__item--right .sd-cod__body { text-align: left; margin-inline-start: 0; max-width: none; }
      .sd-cod__item { margin-block-start: 0 !important; }
    }
    /* Mirrors the @container 600px block above. Kept as a copy rather than a
       shared class because the two must key off different things (container vs
       viewport); if you change one, change both. */
    @media (max-width: 600px) {
      .sd-cod__col { display: flex; flex-direction: column; gap: 32px; }
      .sd-cod__col--left { order: -1; }
      .sd-cod__media { order: 0; }
      .sd-cod__col--right { order: 1; }

      .sd-cod__line,
      .sd-cod__dot { display: block; }

      /* Zigzag: alternate each callout left/right WITHIN its group, rather than
         pinning a whole column to one edge. The reference staggers them — first
         callout left, second right, both above the image, then the same below —
         so the connectors read as pointing in at the product from four corners
         instead of two stacked columns.

         nth-child on the item, so it works for any number of callouts and needs
         no extra markup or per-block setting. */
      .sd-cod__row { flex-direction: column; }
      .sd-cod__item--right .sd-cod__row { flex-direction: column-reverse; }

      /* ODD items hug the left edge, EVEN items the right. */
      .sd-cod__item:nth-child(odd) .sd-cod__row { align-items: flex-start; }
      .sd-cod__item:nth-child(even) .sd-cod__row { align-items: flex-end; }

      .sd-cod__line { width: 1px; height: 64px; flex: none; min-width: 0; }
      .sd-cod__item:nth-child(odd) .sd-cod__line { margin-inline: 28px 0; }
      .sd-cod__item:nth-child(even) .sd-cod__line { margin-inline: 0 28px; }
      .sd-cod__item:nth-child(odd) .sd-cod__dot { margin-inline: 21.5px 0; }
      .sd-cod__item:nth-child(even) .sd-cod__dot { margin-inline: 0 21.5px; }

      /* Copy follows its own side, and is capped so a long line does not run the
         full width and lose the staggered read. */
      .sd-cod__item .sd-cod__body { max-width: 34ch; }
      .sd-cod__item:nth-child(odd) .sd-cod__body {
        text-align: left; margin-inline-start: 0; margin-inline-end: auto;
      }
      .sd-cod__item:nth-child(even) .sd-cod__body {
        text-align: right; margin-inline-start: auto; margin-inline-end: 0;
      }
      /* Callouts below the image put their label under the copy, so the gap
         belongs on top rather than the bottom. */
      .sd-cod__item--right .sd-cod__body { margin-block: 12px 0; }

      @media (prefers-reduced-motion: no-preference) {
        .sd-cod--animate .sd-cod__line { transform: scaleY(0); }
        .sd-cod--animate .sd-cod__item--left .sd-cod__line { transform-origin: top center; }
        .sd-cod--animate .sd-cod__item--right .sd-cod__line { transform-origin: bottom center; }
        .sd-cod--animate .sd-cod__item.is-in .sd-cod__line { transform: none; }
      }
    }
  }
/* END_SECTION:sorandi-callouts-diagram */

/* START_SECTION:sorandi-callouts (INDEX:46) */
.sd-co {
    padding-block: var(--sd-co-pt) var(--sd-co-pb);
    text-align: center;
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-co {
      padding-block: var(--sd-co-pt-mobile, var(--sd-co-pt)) var(--sd-co-pb-mobile, var(--sd-co-pb));
    }
  }
  .sd-co__inner {
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-co__eyebrow {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sd-violet);
    margin-block-end: 10px;
  }
  .sd-co__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.15;
    color: var(--sd-ink);
    margin: 0 0 40px;
  }
  /* Optional bracket rule: left/right/top only, open at the bottom, so the
     heading sits in a three-sided frame that the diagram below appears to drop
     out of. Opt-in per section — a strong device that does not suit every page. */
  .sd-co--bracket .sd-co__heading {
    border-inline: 2px solid var(--sd-ink);
    border-block-start: 2px solid var(--sd-ink);
    padding: clamp(24px, 3vw, 40px) clamp(16px, 3vw, 32px) 0;
  }

  /* Two callout columns flanking a centred product image, each label joined to
     the image by a leader line ending in a small ring.

     Items are placed by nth-child so the blocks loop stays untouched: the FIRST
     HALF of the blocks fill the left column top-to-bottom, the rest fill the
     right. With 4 callouts that is 1,2 left / 3,4 right — matching the
     reference, where reading order runs down one side then down the other. */
  .sd-co__stage {
    display: grid;
    grid-template-columns: 1fr minmax(0, 1.15fr) 1fr;
    /* start, not center: the callouts' own stagger positions them, and centring
       each row would cancel that offset out. */
    align-items: start;
    column-gap: clamp(24px, 4vw, 64px);
    row-gap: clamp(32px, 5vw, 64px);
    margin-block-start: 48px;
  }
  /* The image spans every callout row, so it stays centred however many
     callouts there are. */
  .sd-co__media {
    grid-column: 2;
    grid-row: 1 / -1;
    position: relative;
    aspect-ratio: 1 / 1.15;
    align-self: center;
  }
  .sd-co__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain, not cover: this is a product cut-out, and cropping it would slice
       the mirror the callouts are pointing at. */
    object-fit: contain;
  }
  .sd-co__img--placeholder { background: transparent; }

  .sd-co__items { display: contents; }
  .sd-co__item {
    position: relative;
    grid-column: 3;
    text-align: left;
  }
  /* First half -> left column, right-aligned so the text runs toward the image. */
  .sd-co__item:nth-child(-n + 2) {
    grid-column: 1;
    text-align: right;
  }

  /* ---- Leader line + ring ----
     The line runs from the label chip's outer edge toward the image, ending in
     a ring. Both are anchored to the LABEL's vertical centre (top: 22px ~= half
     the chip height) so they stay level with the chip, not the whole block. */
  .sd-co__item::after {
    content: "";
    position: absolute;
    top: 22px;
    width: clamp(28px, 4vw, 68px);
    height: 1px;
    background: var(--sd-ink);
    opacity: 0.75;
  }
  .sd-co__item::before {
    content: "";
    position: absolute;
    top: 17px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1.5px solid var(--sd-ink);
    background: var(--sd-canvas);
    z-index: 2;
  }
  /* Left column: line leaves the chip's right edge, ring sits at its far end. */
  .sd-co__item:nth-child(-n + 2)::after { left: 100%; }
  .sd-co__item:nth-child(-n + 2)::before {
    left: 100%;
    margin-inline-start: clamp(28px, 4vw, 68px);
  }
  /* Right column mirrors it. */
  .sd-co__item:nth-child(n + 3)::after { right: 100%; }
  .sd-co__item:nth-child(n + 3)::before {
    right: 100%;
    margin-inline-end: clamp(28px, 4vw, 68px);
  }
  /* The lower callout in each column drops further down, so the four labels
     stagger around the product instead of sitting at two equal heights — the
     reference's offset. Applied to the 2nd and 4th blocks (one per column). */
  .sd-co__item:nth-child(2),
  .sd-co__item:nth-child(4) {
    margin-block-start: clamp(40px, 9vw, 130px);
  }

  /* Filled chip with near-square corners — the reference's solid tinted plate,
     not a soft pill. The fill follows the rose whisper token so a rebrand
     re-skins it rather than stranding a hardcoded pink. */
  /* Outlined, filled chip — the reference draws a 1px rule around the plate so
     it reads as a label tag rather than a soft highlight. Sits ABOVE the leader
     line (z-index) so the line appears to run behind and terminate at it. */
  .sd-co__label {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: clamp(14px, 1.3vw, 17px);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: var(--sd-ink);
    background: var(--sd-whisper-rose);
    border: 1px solid var(--sd-ink);
    border-radius: 3px;
    padding: 11px 18px;
    margin-block-end: 14px;
    max-width: 100%;
  }
  .sd-co__desc {
    font-family: var(--font-body--family);
    font-size: clamp(13px, 1.1vw, 14.5px);
    line-height: 1.55;
    color: var(--sd-ink-soft);
    margin: 0;
    max-width: 270px;
  }
  /* Left column: copy hugs the image side, matching its right-aligned chip. */
  .sd-co__item:nth-child(-n + 2) .sd-co__desc { margin-inline-start: auto; }

  @media (max-width: 860px) {
    .sd-co__stage {
      grid-template-columns: 1fr;
      row-gap: 32px;
      margin-block-start: 40px;
    }
    .sd-co__media {
      grid-column: 1;
      grid-row: 1;
      max-width: 340px;
      margin-inline: auto;
      width: 100%;
    }
    .sd-co__items {
      display: grid;
      grid-template-columns: 1fr;
      gap: 26px;
      grid-column: 1;
    }
    /* One column of callouts under the image. The two-column split and its
       leader lines only make sense flanking the image, so both are dropped
       rather than shrunk into something ambiguous. */
    .sd-co__item,
    .sd-co__item:nth-child(-n + 2),
    .sd-co__item:nth-child(n + 3) {
      grid-column: auto;
      text-align: left;
    }
    .sd-co__item:nth-child(-n + 2) .sd-co__desc { margin-inline-start: 0; }
    .sd-co__desc { max-width: none; }
    /* The stagger only exists to dodge the image in the 3-column layout. */
    .sd-co__item:nth-child(2),
    .sd-co__item:nth-child(4) { margin-block-start: 0; }
    .sd-co__item::before,
    .sd-co__item::after { display: none; }
  }
/* END_SECTION:sorandi-callouts */

/* START_SECTION:sorandi-capsule-filters (INDEX:47) */
.sd-caps {
    position: sticky;
    top: 64px;
    z-index: 40;
    background: var(--sd-canvas);
    border-block-end: 1px solid var(--sd-hairline);
  }
  .sd-caps__row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 1420px;
    margin-inline: auto;
    padding: 14px clamp(16px, 4vw, 24px);
  }
  .sd-caps__row::-webkit-scrollbar { display: none; }
  .sd-caps__pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    min-height: 44px;
    padding: 11px 22px;
    border: 1px solid rgba(51, 47, 43, 0.1);
    border-radius: var(--sd-radius-pill);
    background: var(--sd-canvas);
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 500;
    color: var(--sd-ink);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
  }
  .sd-caps__pill svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .sd-caps__pill:hover { border-color: rgba(51, 47, 43, 0.35); }
  .sd-caps__pill--on {
    background: var(--sd-violet);
    border-color: var(--sd-violet);
    color: #fff;
  }

  /* Collection panels — sit where the native grid would, only one ever visible. */
  .sd-caps-panels { max-width: 1420px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }
  .sd-caps-panel[hidden] { display: none; }
  /* <collection-component> is a custom element (display:inline by default), so the
     [hidden] the component sets on it while a panel shows would not take effect. */
  collection-component[hidden] { display: none; }
  .sd-caps-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px 16px;
    list-style: none;
    margin: 0;
    padding: 0 0 32px;
  }
  .sd-caps-panel__empty {
    font-family: var(--font-body--family);
    font-size: 15.5px;
    color: var(--sd-ink-soft);
    text-align: center;
    padding-block: 56px;
    margin: 0;
  }

  /* Panel card — the sorandi card spec (see snippets/sorandi-collection-card.liquid),
     restated here because that snippet is a CSS-only restyle of Horizon's native
     .product-card and is scoped to .collection-wrapper, which these panels are not. */
  .sd-caps-card {
    display: block;
    height: 100%;
    background: var(--sd-canvas);
    border: 1px solid var(--sd-hairline);
    border-radius: 24px;
    padding: 18px 18px 26px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s var(--sd-ease, ease), box-shadow 0.3s var(--sd-ease, ease);
  }
  .sd-caps-card:hover,
  .sd-caps-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(51, 47, 43, 0.10);
  }
  .sd-caps-card__tile {
    background: var(--sd-whisper-lilac);
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1 / 1.02;
    margin-block-end: 18px;
  }
  .sd-caps-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--sd-ease, ease);
  }
  .sd-caps-card:hover .sd-caps-card__img { transform: scale(1.03); }
  .sd-caps-card__title {
    font-family: var(--font-body--family);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sd-ink);
    margin: 0 0 4px;
  }
  .sd-caps-card__price {
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 600;
    color: var(--sd-ink);
  }
  .sd-caps-card__soldout {
    display: inline-block;
    margin-inline-start: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sd-ink-soft);
  }

  @media (max-width: 860px) {
    .sd-caps__row { justify-content: flex-start; }
    .sd-caps-panel__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-caps__pill,
    .sd-caps-card,
    .sd-caps-card__img { transition: none; }
    .sd-caps-card:hover { transform: none; }
    .sd-caps-card:hover .sd-caps-card__img { transform: none; }
  }
/* END_SECTION:sorandi-capsule-filters */

/* START_SECTION:sorandi-collage (INDEX:48) */
.sd-clg {
    padding-block: var(--sd-clg-pt) var(--sd-clg-pb);
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-clg {
      padding-block: var(--sd-clg-pt-mobile, var(--sd-clg-pt)) var(--sd-clg-pb-mobile, var(--sd-clg-pb));
    }
  }
  .sd-clg__inner {
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-clg__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--sd-ink);
    margin: 0 0 28px;
  }

  /* Rows GROW with the block count instead of being pinned at two.
     The old grid-template-rows: 1fr 1fr declared exactly two rows, so any block
     mix that did not total 4x2 cells spilled into an implicit row of a
     different height — a lone tile stranded under the mosaic. Merchants add and
     remove tiles freely from the editor, so the row count cannot be a constant.
     grid-auto-rows keeps every row the same height however many there are.
     Columns are symmetric too: the old 1.5/0.9/0.8/0.8 ramp only balanced for
     one specific arrangement. */
  .sd-clg__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(250px, 1fr);
    grid-auto-flow: row dense;
  }
  /* Big tile is one column wide and two rows tall. Its min-height matches two
     rows plus the gap, so it stays flush with the pair beside it. */
  .sd-clg__tile--big {
    grid-row: span 2;
    min-height: 516px;
  }
  .sd-clg__tile--quote { grid-column: span 2; }

  .sd-clg__tile {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: var(--sd-whisper-lilac);
    min-height: 250px;
  }
  /* object-position is per-tile so a merchant can steer the crop. `cover`
     centres by default, which slices through anything near an image's top or
     bottom edge — including copy baked into a supplied product render. Moving
     the focal point is the only fix available from CSS; the text itself lives
     in the image file and cannot be removed here. */
  .sd-clg__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--sd-clg-focus, 50% 50%);
    display: block;
  }
  .sd-clg__media--placeholder { background: var(--sd-whisper-lilac); }

  .sd-clg__video-wrap { display: block; height: 100%; }
  .sd-clg__trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
  }
  .sd-clg__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  .sd-clg__play::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 15px solid var(--sd-ink);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    margin-left: 4px;
  }
  sd-video[data-playing] .sd-clg__play { opacity: 0; }

  /* Quote tile */
  .sd-clg__tile--quote {
    background: var(--sd-whisper-rose);
    display: flex;
    align-items: center;
    min-height: 0;
  }
  .sd-clg__quote {
    padding: clamp(24px, 3vw, 40px);
  }
  .sd-clg__quote-text {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.3;
    color: var(--sd-ink);
    margin: 0 0 12px;
  }
  .sd-clg__quote-by {
    font-family: var(--font-body--family);
    font-size: 13px;
    color: var(--sd-ink-soft);
  }

  @media (max-width: 860px) {
    .sd-clg__grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: none;
    }
    .sd-clg__tile--big { grid-row: span 2; grid-column: span 2; min-height: 320px; }
    .sd-clg__tile--quote { grid-column: span 2; }
  }
/* END_SECTION:sorandi-collage */

/* START_SECTION:sorandi-collection-banner (INDEX:49) */
.sd-cban { padding-block: var(--sd-cban-pt) var(--sd-cban-pb); overflow: hidden; }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-cban {
      padding-block: var(--sd-cban-pt-mobile, var(--sd-cban-pt)) var(--sd-cban-pb-mobile, var(--sd-cban-pb));
    }
  }
  .sd-cban__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 20px;
    padding: 9px 18px;
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-pill);
    font-family: var(--font-body--family);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sd-ink);
    background: var(--sd-canvas);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
  }
  .sd-cban__chip:hover,
  .sd-cban__chip:focus-visible { border-color: var(--sd-violet); color: var(--sd-violet); }
  @media (prefers-reduced-motion: reduce) { .sd-cban__chip { transition: none; } }
  .sd-cban__inner {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    min-height: 360px;
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-cban--img-left .sd-cban__inner { direction: rtl; }
  .sd-cban--img-left .sd-cban__copy,
  .sd-cban--img-left .sd-cban__media { direction: ltr; }

  .sd-cban__copy { text-align: center; padding: 44px 24px; }
  .sd-cban__eyebrow {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--sd-violet); margin-block-end: 10px;
  }
  .sd-cban__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(34px, 3.8vw, 54px);
    line-height: 1.1;
    color: var(--sd-ink);
    margin: 0 0 8px;
  }
  .sd-cban__accent { font-family: var(--font-accent--family); font-style: italic; font-weight: 500; color: var(--sd-violet); }
  .sd-cban__sub { font-family: var(--font-body--family); font-size: 15.5px; color: var(--sd-ink-soft); margin: 0; }

  .sd-cban__media { align-self: end; display: flex; justify-content: center; }
  .sd-cban__img {
    max-height: 330px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 36px rgba(51, 47, 43, 0.16));
  }
  /* 24px matches the theme's other large content images. The real image is a
     free-floating cut-out with a drop shadow and no radius, so only the
     placeholder tile is rounded. */
  .sd-cban__img--placeholder { width: 100%; max-height: none; aspect-ratio: 4/3; background: var(--sd-whisper-lilac); border-radius: 24px; filter: none; }

  /* ---- Mobile art direction ----
     Both images are in the DOM; CSS picks one. Default (no mobile image set):
     the desktop image shows at every width and the mobile tag was never
     rendered, so this costs nothing for banners that don't use it. */
  .sd-cban__img--mobile { display: none; }

  @media (max-width: 860px) {
    .sd-cban__inner {
      grid-template-columns: 1fr;
      min-height: 0;
      /* The rtl trick that flips the columns on desktop has no meaning in a
         single column, and left it reversing inline content — reset it. */
      direction: ltr;
      row-gap: 4px;
    }
    .sd-cban--img-left .sd-cban__inner { direction: ltr; }

    /* Stack order. Grid `order` rather than DOM order, so the reading order
       stays copy-then-image for a screen reader regardless of the visual
       choice. */
    .sd-cban--m-image_first .sd-cban__media { order: 1; }
    .sd-cban--m-image_first .sd-cban__copy { order: 2; }
    .sd-cban--m-copy_first .sd-cban__copy { order: 1; }
    .sd-cban--m-copy_first .sd-cban__media { order: 2; }

    /* When a mobile image exists, swap which one paints. */
    .sd-cban--has-mobile-img .sd-cban__img--desktop { display: none; }
    .sd-cban--has-mobile-img .sd-cban__img--mobile { display: block; }

    /* Roomier than the old flat 200px cap: that squashed a portrait lineup
       shot into a letterbox. Capped by viewport height too so the copy is
       never pushed off the first screen. */
    .sd-cban__img {
      max-height: min(46vh, 320px);
      max-width: 100%;
    }
    .sd-cban__copy { padding: 24px 16px 32px; }
    .sd-cban__heading { font-size: clamp(28px, 8vw, 38px); }
    .sd-cban__sub { font-size: 14.5px; }
    /* The media cell is bottom-aligned on desktop so the lineup sits on the
       baseline; centred is right once it is its own stacked row. */
    .sd-cban__media { align-self: center; }
  }
/* END_SECTION:sorandi-collection-banner */

/* START_SECTION:sorandi-collection-marquee (INDEX:50) */
.sd-wmq {
    padding-block: 40px;
    overflow: hidden;
    position: relative;
    border-block-start: 1px solid rgba(51, 47, 43, 0.05);
  }
  .sd-wmq__track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
  }
  /* SEAMLESS LOOP (29 Jul, supersedes the 27 Jul right-entry start).
     The track is rendered once and cloned by <sd-word-marquee>, so it is exactly
     2x the unique run; translating 0 -> -50% lands the clone precisely where the
     original was. The row is therefore FULL at first paint and loops with no gap
     and no jump. The previous lead-in spacer started the belt one viewport to the
     right, which read as a loading defect on a real page load.
     --ready is added only once the clones exist, so the animation can never
     start against a half-built track. */
  .sd-wmq--ready .sd-wmq__track {
    animation: sd-wmq-belt var(--sd-wmq-duration, 40s) linear infinite;
  }
  @keyframes sd-wmq-belt {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  /* Calm on hover so a reader can catch a word. */
  .sd-wmq:hover .sd-wmq__track { animation-play-state: paused; }
  /* Scrolled out of view: stop the belt entirely. The component toggles this
     from an IntersectionObserver, so an off-screen marquee costs neither
     compositor nor main-thread work — it is off screen for most of a mobile
     visit. */
  .sd-wmq--paused .sd-wmq__track { animation-play-state: paused; }


  .sd-wmq__item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    /* Width comes from the label, never a fixed box — a fixed width forced
       long labels ("the trifold") to wrap into the reveal image. */
    padding-inline: 32px;
    min-height: 190px;
  }
  .sd-wmq__word {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(48px, 6vw, 92px);
    line-height: 1.1;
    /* Never wrap: one label = one line, whatever its length. */
    white-space: nowrap;
    text-transform: lowercase;
    letter-spacing: 0.01em;
    text-decoration: none;
    /* Rule 7 / 18 Jul decision: inactive words are ink-soft precisely BECAUSE
       the mockup's pale lilac fails AA. A 0.35 opacity on top of ink-soft
       undid that — it measured 1.65:1 on 60px link text, below even the 3:1
       large-text floor. Full opacity is 5.7:1 and clears the 4.5:1 rule.
       The centred word is distinguished by the anchor colour and its reveal
       image, not by making every other word unreadable. */
    color: var(--sd-ink-soft);
    transition: color 0.4s;
    position: relative;
    z-index: 2;
  }
  /* Reveal sits BEHIND the word, centred on the item — it never participates
     in layout, so it can neither push the label nor make it unreadable. */
  .sd-wmq__reveal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 190px;
    height: 150px;
    border-radius: 16px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s;
    z-index: 1;
    pointer-events: none;
  }
  .sd-wmq__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sd-wmq__item--center .sd-wmq__word {
    color: var(--sd-violet);
  }
  /* Must keep the SAME translate as the base rule (-50%,-50%) — only the scale
     changes. Mismatching the sign here slid the image a full width sideways as
     it revealed. */
  .sd-wmq__item--center .sd-wmq__reveal {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  @media (max-width: 860px) {
    .sd-wmq__item {
      padding-inline: 20px;
      min-height: 140px;
    }
    .sd-wmq__word {
      font-size: 12vw;
    }
    .sd-wmq__reveal {
      width: 130px;
      height: 100px;
    }
  }

  /* Static under reduced motion: no belt, row full and readable. */
  @media (prefers-reduced-motion: reduce) {
    .sd-wmq--ready .sd-wmq__track { animation: none; }
    .sd-wmq__track { justify-content: center; flex-wrap: wrap; width: auto; }
    .sd-wmq__word,
    .sd-wmq__reveal {
      transition: none;
    }
  }
/* END_SECTION:sorandi-collection-marquee */

/* START_SECTION:sorandi-compare-table (INDEX:51) */
.sd-cmp {
    padding-block: var(--sd-cmp-pt) var(--sd-cmp-pb);
    text-align: center;
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-cmp {
      padding-block: var(--sd-cmp-pt-mobile, var(--sd-cmp-pt)) var(--sd-cmp-pb-mobile, var(--sd-cmp-pb));
    }
  }
  .sd-cmp__inner {
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-cmp__eyebrow {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sd-violet);
    margin-block-end: 10px;
  }
  .sd-cmp__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.15;
    color: var(--sd-ink);
    margin: 0 0 40px;
  }
  .sd-cmp__scroll { overflow-x: auto; max-width: 100%; }
  .sd-cmp__table {
    width: 100%;
    min-width: 480px;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-body--family);
    font-size: 14.5px;
    min-width: 480px;
  }
  .sd-cmp__corner { background: transparent; border: 0; }
  .sd-cmp__head {
    padding: 16px 18px;
    font-weight: 600;
    color: var(--sd-ink);
    text-align: center;
  }
  .sd-cmp__head--us {
    color: #fff;
    background: linear-gradient(160deg, var(--sd-violet) 0%, var(--sd-violet-hover) 100%);
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
  }
  /* Optional header images (mockup .hcell/.him — laifen pattern) */
  .sd-cmp__hcell { display: block; }
  .sd-cmp__hcell b { display: block; }
  .sd-cmp__him {
    display: block;
    position: relative;
    height: 150px;
    max-width: 220px;
    margin: 10px auto 4px;
    border-radius: 12px;
    overflow: hidden;
  }
  .sd-cmp__him-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media (max-width: 860px) {
    .sd-cmp__him { height: 90px; }
  }
  .sd-cmp__row .sd-cmp__label {
    text-align: left;
    padding: 14px 18px;
    font-weight: 600;
    color: var(--sd-ink);
    border-block-end: 1px solid var(--sd-hairline);
  }
  .sd-cmp__row .sd-cmp__us {
    padding: 14px 18px;
    text-align: center;
    color: var(--sd-ink);
    background: var(--sd-whisper-lilac);
    border-block-end: 1px solid var(--sd-hairline);
  }
  .sd-cmp__row:last-child .sd-cmp__us {
    border-end-start-radius: 16px;
    border-end-end-radius: 16px;
  }
  .sd-cmp__row .sd-cmp__them {
    padding: 14px 18px;
    text-align: center;
    color: var(--sd-ink-soft);
    border-block-end: 1px solid var(--sd-hairline);
  }
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
/* END_SECTION:sorandi-compare-table */

/* START_SECTION:sorandi-confidence (INDEX:52) */
.sd-conf {
    padding-block: var(--sd-conf-pt) var(--sd-conf-pb);
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-conf {
      padding-block: var(--sd-conf-pt-mobile, var(--sd-conf-pt)) var(--sd-conf-pb-mobile, var(--sd-conf-pb));
    }
  }
  .sd-conf__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: clamp(36px, 5vw, 64px);
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-conf--img-left .sd-conf__inner { direction: rtl; }
  .sd-conf--img-left .sd-conf__copy,
  .sd-conf--img-left .sd-conf__media { direction: ltr; }

  .sd-conf__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.12;
    color: var(--sd-ink);
    margin: 0 0 8px;
  }
  .sd-conf__sub {
    font-family: var(--font-body--family);
    font-size: 15.5px;
    color: var(--sd-ink-soft);
    margin-block-end: 28px;
  }

  /* Card background/border default to the brand tokens so the section still
     re-skins with settings.sd_anchor_option. The pickers below only override
     when the merchant actually sets one — leaving them blank keeps the card on
     the derived whisper tint rather than freezing a hex into the theme. */
  .sd-conf__card {
    background: var(--sd-conf-card-bg, var(--sd-whisper-lilac));
    border: 1px solid var(--sd-conf-card-border, var(--sd-hairline));
    border-radius: 20px;
    padding: 30px 32px;
  }
  .sd-conf__card-h {
    display: block;
    font-family: var(--font-body--family);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--sd-ink);
    margin-block-end: 2px;
  }
  /* Card description — sits directly under the card heading. */
  .sd-conf__card-desc {
    font-family: var(--font-body--family);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sd-ink-soft);
    margin-block-end: 16px;
  }
  .sd-conf__bnpl {
    font-family: var(--font-body--family);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sd-ink-soft);
    margin-block-end: 16px;
  }
  /* When both lines show, they read as one paragraph rather than two blocks. */
  .sd-conf__card-desc + .sd-conf__bnpl {
    margin-block-start: -10px;
  }
  /* One wrapping flex row holding both block types (a single content_for
     'blocks' is the only way to emit editor blocks). The two visual rows come
     from `order`: chips are order 1, the line break is order 2, trust items are
     order 3 — so the card reads chips-then-trust no matter how the blocks are
     sorted in the sidebar. */
  .sd-conf__blocks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .sd-conf__chip { order: 1; }
  .sd-conf__trust { order: 3; }
  /* Full-width pseudo-element between the two groups = a hard line break. */
  .sd-conf__blocks::after {
    content: "";
    order: 2;
    flex-basis: 100%;
    height: 0;
  }
  /* Pay chips are logo artwork only — no text label. line-height:0 stops the
     <i> imposing a text baseline on the image. Height is per-chip
     (--sd-chip-logo-h) since provider logos are not optically equal at one
     fixed size. */
  .sd-conf__chip {
    display: inline-flex;
    align-items: center;
    font-style: normal;
    line-height: 0;
    border-radius: 8px;
    background: var(--sd-canvas);
    border: 1px solid rgba(51, 47, 43, 0.1);
  }
  .sd-conf__chip-img {
    display: block;
    height: var(--sd-chip-logo-h, 20px);
    width: auto;
    max-width: 120px;
    object-fit: contain;
  }
  /* Trust items sit side by side on the line below the chips. */
  .sd-conf__trust {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-block-start: 14px;
    margin-inline-end: 22px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--sd-ink-soft);
  }
  /* Badge artwork. Height is per-item (--sd-trust-icon-h) since badge marks are
     not optically equal at one fixed size. */
  .sd-conf__trust-img {
    display: block;
    height: var(--sd-trust-icon-h, 34px);
    width: auto;
    max-width: 28px;
    object-fit: contain;
    flex: none;
  }
  .sd-conf__trust-label {
    display: block;
  }

  .sd-conf__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    overflow: hidden;
  }
  .sd-conf__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sd-conf__img--placeholder { background: var(--sd-whisper-lilac); }

  /* Image aspect ratio (Image ▸ Aspect ratio). "landscape" is the default and
     the historic behaviour — the 4/3 box the section has always used. */
  .sd-conf--ar-square .sd-conf__media { aspect-ratio: 1 / 1; }
  .sd-conf--ar-portrait45 .sd-conf__media { aspect-ratio: 4 / 5; }
  .sd-conf--ar-portrait34 .sd-conf__media { aspect-ratio: 3 / 4; }

  /* Natural: the image's own proportions decide the box, so it flows instead of
     being absolutely positioned. The placeholder SVG has no intrinsic size, so
     it keeps the default box. */
  .sd-conf--ar-natural .sd-conf__media { aspect-ratio: auto; }
  .sd-conf--ar-natural .sd-conf__img {
    position: static;
    height: auto;
    object-fit: contain;
  }
  .sd-conf--ar-natural .sd-conf__media:has(.sd-conf__img--placeholder) {
    aspect-ratio: 4 / 3;
  }

  @media (max-width: 860px) {
    .sd-conf__inner { grid-template-columns: 1fr; gap: 36px; }
    .sd-conf--img-left .sd-conf__inner { direction: ltr; }
  }
/* END_SECTION:sorandi-confidence */

/* START_SECTION:sorandi-faq (INDEX:53) */
.sd-faq {
    padding-block: var(--sd-faq-pt) var(--sd-faq-pb);
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-faq {
      padding-block: var(--sd-faq-pt-mobile, var(--sd-faq-pt)) var(--sd-faq-pb-mobile, var(--sd-faq-pb));
    }
  }
  .sd-faq__inner {
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-faq__eyebrow {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sd-faq-eb, var(--sd-violet));
    margin-block-end: 10px;
  }
  .sd-faq__heading {
    /* The reference centres this heading. */
    text-align: center;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--sd-faq-h, var(--sd-ink));
    margin: 0 0 44px;
  }

  .sd-faq__cat {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: 16px;
    color: var(--sd-faq-h, var(--sd-ink));
    margin: 28px 0 12px;
  }
  .sd-faq__cat:first-child {
    margin-block-start: 0;
  }

  /* Each colour falls back to the token it used before, so an unset setting is
     byte-for-byte the previous appearance. */
  .sd-faq__item {
    background: var(--sd-faq-item-bg, var(--sd-whisper-lilac));
    border: var(--sd-faq-item-border-w, 1px) solid var(--sd-faq-item-border, var(--sd-hairline));
    border-radius: 12px;
    padding: 6px 24px;
    margin-block-end: 14px;
  }
  .sd-faq__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: 15px;
    color: var(--sd-faq-q, var(--sd-ink));
    cursor: pointer;
    list-style: none;
  }
  /* Hide the native disclosure triangle across engines. */
  .sd-faq__q::-webkit-details-marker {
    display: none;
  }
  .sd-faq__marker {
    flex: none;
    width: 20px;
    height: 20px;
    position: relative;
  }
  .sd-faq__marker::before,
  .sd-faq__marker::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background: var(--sd-ink);
    transform: translateY(-50%);
    transition: opacity 0.2s;
  }
  .sd-faq__marker::after {
    inset: 0 50% auto 50%;
    width: 1.5px;
    height: 20px;
    transform: translateX(-50%);
  }
  .sd-faq__item[open] .sd-faq__marker::after {
    opacity: 0;
  }
  .sd-faq__a {
    font-family: var(--font-body--family);
    font-size: 14px;
    line-height: 1.7;
    color: var(--sd-faq-a, var(--sd-ink-soft));
    padding-block-start: 12px;
  }
  .sd-faq__a > * + * {
    margin-block-start: 10px;
  }

  @media (prefers-reduced-motion: reduce) {
    .sd-faq__marker::before,
    .sd-faq__marker::after {
      transition: none;
    }
  }
/* END_SECTION:sorandi-faq */

/* START_SECTION:sorandi-feature-spotlight (INDEX:54) */
.sd-fsp {
    padding-block: var(--sd-fsp-pt) var(--sd-fsp-pb);
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-fsp {
      padding-block: var(--sd-fsp-pt-mobile, var(--sd-fsp-pt)) var(--sd-fsp-pb-mobile, var(--sd-fsp-pb));
    }
  }
  .sd-fsp__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(40px, 5vw, 72px);
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-fsp--img-right .sd-fsp__inner {
    direction: rtl;
  }
  .sd-fsp--img-right .sd-fsp__copy,
  .sd-fsp--img-right .sd-fsp__media {
    direction: ltr;
  }

  .sd-fsp__media {
    position: relative;
    background: var(--sd-canvas);
    border-radius: 24px;
    padding: 34px;
    box-shadow: 0 24px 60px rgba(51, 47, 43, 0.12);
  }
  .sd-fsp__img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
  }
  /* The placeholder has no intrinsic size, so it needs a box of its own — but
     only when no explicit ratio is set, or it would beat the choice below. */
  .sd-fsp--ar-natural .sd-fsp__img--placeholder {
    aspect-ratio: 1 / 1;
  }
  .sd-fsp__img--placeholder {
    background: var(--sd-whisper-lilac);
  }

  /* Image aspect ratio (Image ▸ Aspect ratio). "natural" is the default and is
     the historic behaviour — the image flows at its own proportions inside the
     raised card. The fixed ratios lock the box and crop with object-fit. */
  .sd-fsp--ar-square .sd-fsp__img,
  .sd-fsp--ar-portrait45 .sd-fsp__img,
  .sd-fsp--ar-portrait34 .sd-fsp__img {
    height: 100%;
    object-fit: cover;
  }
  .sd-fsp--ar-square .sd-fsp__img { aspect-ratio: 1 / 1; }
  .sd-fsp--ar-portrait45 .sd-fsp__img { aspect-ratio: 4 / 5; }
  .sd-fsp--ar-portrait34 .sd-fsp__img { aspect-ratio: 3 / 4; }

  .sd-fsp__rating {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    color: var(--sd-ink-soft);
    margin-block-end: 12px;
  }
  .sd-fsp__stars {
    color: var(--sd-violet);
    letter-spacing: 0.08em;
  }
  .sd-fsp__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.1;
    color: var(--sd-ink);
    margin: 0 0 18px;
  }
  .sd-fsp__body {
    font-family: var(--font-body--family);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--sd-ink-soft);
    max-width: 460px;
    margin: 0 0 26px;
  }
  .sd-fsp__list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    margin: 0 0 34px;
    padding: 0;
  }
  .sd-check {
    display: flex;
    gap: 11px;
    align-items: center;
    font-family: var(--font-body--family);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--sd-ink);
  }
  .sd-check__mark {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sd-violet);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex: none;
  }

  .sd-fsp__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 15px 36px;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--sd-violet);
    border: 1.5px solid var(--sd-violet);
    border-radius: var(--sd-radius-pill);
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s;
  }
  .sd-fsp__cta:hover,
  .sd-fsp__cta:focus-visible {
    background: var(--sd-violet-hover);
    border-color: var(--sd-violet-hover);
  }

  @media (max-width: 860px) {
    .sd-fsp__inner {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .sd-fsp--img-right .sd-fsp__inner {
      direction: ltr;
    }

    /* ---- Centred on mobile ----
       Stacked single column, so the copy reads better centred under the image.
       Each part needs its own treatment: text-align handles the inline text,
       the body's max-width needs auto margins to sit centrally rather than
       hugging the left edge, and the CTA is inline-flex so it centres via the
       column's align-items rather than text-align.

       .sd-fsp__copy is <sd-reveal>, a custom element, so it defaults to
       display:inline and align-items would be inert — the flex column has to
       be declared here for the CTA to centre. */
    .sd-fsp__copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .sd-fsp__rating {
      justify-content: center;
    }
    .sd-fsp__body {
      margin-inline: auto;
    }

    /* Two narrow columns: let a long label wrap rather than overflow its cell.
       align-items goes to flex-start so the tick stays beside the first line of a
       wrapped label instead of floating to its vertical centre. */
    .sd-fsp__list .sd-check {
      min-width: 0;
      align-items: flex-start;
      gap: 9px;
    }
    .sd-fsp__list .sd-check__mark {
      /* Optical nudge so the circle centres on the label's first line. */
      margin-block-start: 1px;
    }

    /* The checklist is the one part that stays LEFT-aligned, and it keeps the
       desktop 2-up grid on mobile (items 1|2 on the first row, 3|4 on the second).
       Rows align to a shared left edge so the ticks line up per column; centring
       each row instead would stagger them, since the labels differ in length.
       text-align:start undoes the inherited centring from .sd-fsp__copy.

       Note: no width:max-content here. With two columns that resolves to the widest
       row pair and can push past a narrow viewport — equal 1fr columns plus a tighter
       gap keep the pair inside the screen and let long labels wrap instead. */
    .sd-fsp__list {
      grid-template-columns: 1fr 1fr;
      justify-items: start;
      gap: 14px 16px;
      max-width: 100%;
      margin-inline: auto;
      text-align: start;
    }
  }
/* END_SECTION:sorandi-feature-spotlight */

/* START_SECTION:sorandi-featured-product (INDEX:55) */
.sd-fp { padding-block: var(--sd-fp-pt) var(--sd-fp-pb); }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-fp {
      padding-block: var(--sd-fp-pt-mobile, var(--sd-fp-pt)) var(--sd-fp-pb-mobile, var(--sd-fp-pb));
    }
  }

  .sd-fp__head {
    display: block;
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
    margin-block-end: 40px;
    text-align: center;
  }
  .sd-fp__eyebrow {
    display: block;
    font-family: var(--font-body--family);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sd-ink-soft);
    margin-block-end: 12px;
  }
  .sd-fp__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.15;
    color: var(--sd-ink);
    margin: 0;
  }

  /* Editor-only misconfiguration notice — never rendered for a shopper. */
  .sd-fp__warn {
    max-width: 1420px;
    margin: 0 auto 24px;
    padding: 12px clamp(16px, 4vw, 24px);
    font-family: var(--font-body--family);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sd-ink);
    background: var(--sd-whisper-rose);
    border-radius: 12px;
  }

  /* The PDP grid, verbatim — same 1.08fr/0.92fr split and 56px gutter, so the
     section reads as the product page it mirrors. */
  .sd-fp__grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 56px;
    align-items: start;
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-fp__grid > * { min-width: 0; }
  @media (max-width: 860px) {
    .sd-fp__head { margin-block-end: 28px; }
    .sd-fp__grid { grid-template-columns: 1fr; gap: 40px; }
  }
/* END_SECTION:sorandi-featured-product */

/* START_SECTION:sorandi-footer (INDEX:56) */
.sd-foot {
    background: var(--sd-violet);
    color: #fff;
    padding-block-end: 24px;
  }
  .sd-foot__wrap {
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }

  /* Trust icon row */
  .sd-foot__trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding-block: 52px;
   
    text-align: center;
  }
  .sd-foot__trust-item {
    padding-inline: 8px;
  }
  .sd-foot__trust-item + .sd-foot__trust-item {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
  }

  /* Trust slider (mobile only — see the max-width:860px block for the swipe track).
     Desktop: the wrapper is inert and the dots are hidden, so the row inside renders
     as the same 4-up grid it always was. */
  .sd-foot__trust-slider {
    display: block;
    position: relative;
  }
  .sd-foot__trust-dots {
    display: none;
  }
  .sd-foot__icon {
    width: 34px;
    height: 34px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.4;
    margin: 0 auto 12px;
    display: block;
  }
  .sd-foot__trust-title {
    display: block;
    font-family: var(--font-body--family);
    font-size: 15.5px;
    font-weight: 600;
    margin-block-end: 4px;
    color: #fff;
  }
  .sd-foot__trust-sub {
    font-family: var(--font-body--family);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
  }

  /* Link columns + newsletter */
  .sd-foot__cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.6fr;
    gap: 48px;
    padding-block: 56px 24px;
  }
  .sd-foot__col-h {
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 600;
    margin-block-end: 18px;
    color: #fff;
    /* Desktop: a <summary> that reads as a plain heading — no pointer, no marker. */
    list-style: none;
    cursor: default;
  }
  /* Hide the native disclosure triangle across engines. */
  .sd-foot__col-h::-webkit-details-marker {
    display: none;
  }
  .sd-foot__col-marker {
    display: none;
  }
  /* Desktop keeps every panel open regardless of the details state, so toggling
     at mobile width and resizing up can never leave a column collapsed.

     `display: block` on the panel is NOT enough on its own. A closed <details>
     hides its non-summary children through the UA stylesheet's
     `content-visibility: hidden` on the slot that wraps them — a mechanism no
     `display` value on the child can reach. That is why columns whose merchant
     toggle is off (no `open` attribute) rendered as a bare heading on desktop
     with the links present in the DOM but invisible.

     Forcing `content-visibility: visible` on the element itself is what
     actually reveals them; `display` is kept for older engines that hid the
     slot the old way. */
  @media (min-width: 861px) {
    .sd-foot__col > .sd-foot__col-links {
      display: block !important;
      content-visibility: visible !important;
    }
    /* Belt and braces: some engines expose the slot as ::details-content. */
    .sd-foot__col::details-content {
      content-visibility: visible;
      display: block;
    }
    /* The reliable one. `display: block` on the <details> itself drops the
       element's built-in disclosure box, so the closed state has no slot left
       to hide and both children lay out normally. This is plain CSS 2 behaviour
       and needs no support for content-visibility or ::details-content, so it
       carries the older engines the two rules above miss. */
    .sd-foot__col {
      display: block;
    }
    /* The disclosure triangle/marker is meaningless when nothing collapses. */
    .sd-foot__col > .sd-foot__col-h { cursor: default; }
    .sd-foot__col-marker { display: none; }
  }
  .sd-foot__col a {
    font-family: var(--font-body--family);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s;
    /* 44px tap target (rule 7, audience 50-68) — height, not a bigger font. */
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .sd-foot__col a:hover,
  .sd-foot__col a:focus-visible {
    color: #fff;
  }

  .sd-foot__news-h {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.2;
    margin-block-end: 10px;
    color: #fff;
  }
  .sd-foot__news-p {
    font-family: var(--font-body--family);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    margin-block-end: 22px;
  }
  .sd-foot__news-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  /* Translucent input on the violet footer (mockup design). The 2-class selector
     (.sd-foot .sd-foot__news-input) beats the base theme's input[type="email"]
     reset that otherwise forces a solid-white background (which hid white text).
     White text/placeholder on the dark violet band passes AA comfortably. */
  .sd-foot .sd-foot__news-input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--sd-radius-pill);
    padding: 14px 22px;
    font-family: var(--font-body--family);
    font-size: 14px;
    color: #fff;
    outline: none;
  }
  .sd-foot .sd-foot__news-input::placeholder {
    color: rgba(255, 255, 255, 0.78);
    opacity: 1;
  }
  .sd-foot .sd-foot__news-input:focus-visible {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
  }
  /* keep text visible on browser autofill (autofill would otherwise force a light bg) */
  .sd-foot .sd-foot__news-input:-webkit-autofill,
  .sd-foot .sd-foot__news-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    transition: background-color 9999s ease-in-out 0s;
  }
  .sd-foot__news-btn {
    padding: 14px 26px;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: var(--sd-radius-pill);
    background: #fff;
    border: 1.5px solid #fff;
    color: var(--sd-violet);
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
    min-height: 44px;
  }
  .sd-foot__news-btn:hover,
  .sd-foot__news-btn:focus-visible {
    background: rgba(255, 255, 255, 0.86);
  }
  .sd-foot__news-ok {
    font-family: var(--font-body--family);
    font-size: 14px;
    color: #fff;
  }

  /* Giant wordmark */
  .sd-foot__giant {
    padding-block: 26px 20px;
  }
  .sd-foot__wordmark {
    width: 100%;
    height: auto;
    display: block;
    color: #fff;
  }

   /* Free text box (richtext section setting). Sized and capped by inline custom
     properties so the merchant can tune it without a code edit. */
  .sd-foot__textbox {
    font-family: var(--font-body--family);
    font-size: var(--sd-foot-tb-size, 14px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
    max-width: var(--sd-foot-tb-max, 720px);
    padding-block: 24px;
  }
  .sd-foot__textbox--start  { text-align: start; }
  .sd-foot__textbox--center { text-align: center; margin-inline: auto; }
  .sd-foot__textbox--end    { text-align: end; margin-inline-start: auto; }

  /* richtext emits <p>; the theme's own paragraph spacing is not assumed. */
  .sd-foot__textbox p { margin-block: 0 0.75em; }
  .sd-foot__textbox p:last-child { margin-block-end: 0; }
  .sd-foot__textbox strong { color: #fff; font-weight: 600; }
  .sd-foot__textbox em { font-style: italic; }
  /* Inline prose links: underlined rather than colour-only, since 0.75 white on
     violet cannot carry the distinction on its own. */
  .sd-foot__textbox a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .sd-foot__textbox a:hover,
  .sd-foot__textbox a:focus-visible {
    text-decoration-thickness: 2px;
  }
  .sd-foot__textbox--boxed {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--sd-radius-card);
    padding: 20px 24px;
  }
   /* In-grid variant: the cell already sets the width, so the merchant's max-width
     and the centring auto-margins are dropped — they would otherwise fight the
     column track. Top padding is zeroed so the text starts level with the
     neighbouring column headings. */
  .sd-foot__textbox--col {
    max-width: none;
    margin-inline: 0;
    padding-block: 0;
  }
  .sd-foot__textbox--col.sd-foot__textbox--boxed {
    padding: 20px 24px;
  }

  {%- if section.settings.textbox_position == 'middle' -%}{{ sd_foot_textbox }}{%- endif -%}

  /* Copyright */
  /* Horizon's social-links block ships its own icon styling; only the footer's
     own spacing and colour inheritance are set here. --color-utilities is what
     that block paints its icons with, so pointing it at the footer's ink keeps
     them legible on the violet surface. */
  .sd-foot__copy .social-icons__wrapper {
    --color-utilities: currentColor;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .sd-foot__copy .social-icons__icon-label { display: none; }

  /* Uploaded logo replaces the giant wordmark. Capped by the section's
     `Logo max width` so a large file cannot stretch across the full bleed the
     way the SVG wordmark deliberately does. */
  /* An uploaded logo behaves exactly like the built-in wordmark: full-bleed by
     default (width: 100%), so swapping one for the other does not change the
     layout. `Logo width` scales it down from there — 100% is the wordmark's own
     look, lower values centre a smaller mark in the same band. */
  .sd-foot__logo-wrap {
    display: flex;
    justify-content: center;
  }
  .sd-foot__logo-img {
    width: var(--sd-foot-logo-w, 100%);
    height: auto;
    display: block;
  }

  .sd-foot__copy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--font-body--family);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    padding-block-start: 18px;
  }

  @media (max-width: 860px) {
     /* Stacked with the accordions: give it back the vertical rhythm the columns
       get from their summary padding, and a matching divider. */
    .sd-foot__textbox--col {
      padding-block: 22px;
      border-block-end: 1px solid rgba(255, 255, 255, 0.16);
    }
    .sd-foot__trust {
      grid-template-columns: 1fr 1fr;
    }
    .sd-foot__trust-item:nth-child(odd) {
      border-inline-start: none;
    }
       .sd-foot__textbox {
      padding-block: 20px;
      max-width: none;
    }
    .sd-foot__textbox--boxed { padding: 16px 18px; }

    /* ---- Trust row as a swipe slider (opt-in via "Swipeable trust row on mobile") ----
       The grid becomes a scroll-snap flex track. One item per view; the dividing rules
       are dropped because each card is its own slide. This is a plain scrollable strip
       without JS — <sd-slider> only adds the dot sync and tap-to-jump. */
    .sd-foot__trust-slider .sd-foot__trust {
      display: flex;
      grid-template-columns: none;
      gap: 0;
      padding-block: 40px 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      /* Bleed to the screen edges so a slide can sit flush while the wrap keeps its
         gutter — the negative margin is cancelled by matching item padding below. */
      margin-inline: calc(clamp(16px, 4vw, 24px) * -1);
    }
    .sd-foot__trust-slider .sd-foot__trust::-webkit-scrollbar {
      display: none;
    }
    /* One card per view: flex-basis 100% resolves against the TRACK, which is the
       viewport plus the two bled gutters — so basis must add those back, or each
       slide comes out narrower than a full screen and the next card peeks in. */
    .sd-foot__trust-slider .sd-foot__trust-item {
      flex: 0 0 100%;
      min-width: 100%;
      box-sizing: border-box;
      scroll-snap-align: center;
      scroll-snap-stop: always;
      padding-inline: calc(clamp(16px, 4vw, 24px) + 8px);
    }
    /* No vertical rules between slides — each is a discrete card. */
    .sd-foot__trust-slider .sd-foot__trust-item + .sd-foot__trust-item {
      border-inline-start: 0;
    }

    .sd-foot__trust-slider .sd-foot__trust-dots {
      display: flex;
      gap: 8px;
      justify-content: center;
      padding-block-end: 36px;
    }
    .sd-foot__trust-dot {
      position: relative;
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.34);
      cursor: pointer;
      transition: background 0.25s, width 0.25s;
    }
    /* 44px touch target without changing the visual size — matches the radiant
       slider's approach (rule 7, audience 50-68). */
    .sd-foot__trust-dot::after {
      content: "";
      position: absolute;
      inset: -18px;
    }
    .sd-foot__trust-dot[data-active] {
      background: #fff;
      width: 24px;
      border-radius: 4px;
    }
    .sd-foot__trust-dot:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 4px;
    }
    /* Nav columns become full-width stacked accordions; the newsletter keeps its
       own row below them rather than sharing a 2-up grid with a collapsed column.
       Centring is applied per-part below rather than inherited from here, so the
       left-aligned accordion headings are not fighting a cascaded text-align. */
    .sd-foot__cols {
      grid-template-columns: 1fr;
      gap: 0;
      padding-block: 36px 40px;
    }
    .sd-foot__news {
      padding-block-start: 32px;
      
    }

    .sd-foot__col {
      border-block-end: 1px solid rgba(255, 255, 255, 0.16);
    }
    /* Line above the first column so it is framed like the ones below it, whose top
       line is really the previous column's bottom border. */
    .sd-foot__col:first-child {
      border-block-start: 1px solid rgba(255, 255, 255, 0.16);
    }

    /* The summary is the tap target: 44px min height (rule 7, audience 50-68).
       Heading sits flush left; the +/− marker stays parked at the inline end, so the
       row reads label-left / icon-right like a standard mobile accordion. */
    .sd-foot__col-h {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-align: start;
      gap: 10px;
      min-height: 52px;
      margin-block-end: 0;
      /* Only end padding — clears the marker; no start inset so the label is flush. */
      padding-inline: 0 34px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    /* base.css has a global `summary:hover` that swaps in the dark page foreground
       colour, which reads as black on this violet band. Hold the heading white. */
    .sd-foot .sd-foot__col-h:hover {
      color: #fff;
    }
    .sd-foot__col-h:focus-visible {
      outline: 2px solid #fff;
      outline-offset: -2px;
      border-radius: var(--sd-radius-card);
    }

    .sd-foot__col-marker {
      display: block;
      position: absolute;
      inset-inline-end: 4px;
      inset-block-start: 50%;
      width: 16px;
      height: 16px;
      transform: translateY(-50%);
    }
    .sd-foot__col-marker::before,
    .sd-foot__col-marker::after {
      content: "";
      position: absolute;
      inset: 50% 0 auto 0;
      height: 1.5px;
      background: #fff;
      transform: translateY(-50%);
      transition: opacity 0.2s;
    }
    .sd-foot__col-marker::after {
      inset: 0 50% auto 50%;
      width: 1.5px;
      height: 16px;
      transform: translateX(-50%);
    }
    /* The +/− tracks the real [open] state, which is now the single source of
       truth for whether a column is expanded — set initially by the merchant's
       "Open accordions by default" setting, then owned by the shopper's taps.
       No companion rule is needed for the collapsed case: without [open] the
       native <details> already hides the panel. */
    .sd-foot__col[open] .sd-foot__col-marker::after {
      opacity: 0;
    }

    .sd-foot__col-links {
      padding-block-end: 12px;
    }
    /* Links align with the heading above them, so the panel reads as one left stack. */
    .sd-foot__col a {
      justify-content: flex-start;
      min-height: 40px;
    }

    .sd-foot__news-form {
      justify-content: center;
    }
  }

  @media (max-width: 860px) and (prefers-reduced-motion: reduce) {
    .sd-foot__col-marker::before,
    .sd-foot__col-marker::after {
      transition: none;
    }
    .sd-foot__trust-dot {
      transition: none;
    }
    .sd-foot__trust-slider .sd-foot__trust {
      scroll-behavior: auto;
    }
  }
/* END_SECTION:sorandi-footer */

/* START_SECTION:sorandi-help-cards (INDEX:57) */
.sd-help { padding-block: var(--sd-help-pt) var(--sd-help-pb); }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-help {
      padding-block: var(--sd-help-pt-mobile, var(--sd-help-pt)) var(--sd-help-pb-mobile, var(--sd-help-pb));
    }
  }
  .sd-help__inner { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }
  .sd-help__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(26px, 3vw, 40px);
    color: var(--sd-ink);
    text-align: center;
    margin: 0 0 36px;
  }
  .sd-help__grid {
    display: grid;
    grid-template-columns: repeat(var(--sd-help-cols, 3), 1fr);
    gap: 24px;
  }
  .sd-help__card {
    display: block;
    background: var(--sd-whisper-lilac);
    border: 1px solid var(--sd-hairline);
    border-radius: 16px;
    padding: 44px 32px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .sd-help__card:hover, .sd-help__card:focus-visible {
 
    background: var(--sd-canvas);
  }
  .sd-help__icon { width: 30px; height: 30px; stroke: var(--sd-violet); fill: none; stroke-width: 1.5; margin-block-end: 16px; }
  .sd-help__title { font-family: var(--font-body--family); font-size: 17px; font-weight: 600; color: var(--sd-ink); margin: 0 0 8px; }
  .sd-help__desc { font-family: var(--font-body--family); font-size: 14px; line-height: 1.6; color: var(--sd-ink-soft); margin: 0 0 14px; }
  .sd-help__link { font-family: var(--font-body--family); font-size: 13.5px; font-weight: 600; color: var(--sd-violet); }

  @media (max-width: 860px) {
    .sd-help__grid { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-help__card { transition: none; }
  }
/* END_SECTION:sorandi-help-cards */

/* START_SECTION:sorandi-hero-split (INDEX:58) */
.sd-hero {
    padding-block: var(--sd-hero-pt) var(--sd-hero-pb);
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-hero {
      padding-block: var(--sd-hero-pt-mobile, var(--sd-hero-pt)) var(--sd-hero-pb-mobile, var(--sd-hero-pb));
    }
  }
  /* FULL-BLEED. The mockup runs this hero edge-to-edge with no gutter and no
     column gap, so the image meets the viewport edge. Boxing it in the 1420px
     container (with a gap) left a visible margin the reference does not have.
     The inset lives on the copy pane instead, so text never touches the edge. */
  .sd-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: stretch;
    min-height: min(78vh, 720px);
    gap: 0;
    width: 100%;
  }
  /* Rounded-image hero (e.g. About): the image is an aspect-ratio card, centered —
     not a full-height fill, so it keeps the container and a gap. Home (not
     rounded) fills its column to the min-height, edge to edge. */
  .sd-hero__inner:has(.sd-hero__media--rounded) {
    align-items: center;
    min-height: 0;
    gap: clamp(32px, 5vw, 72px);
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-hero--img-left .sd-hero__inner {
    direction: rtl;
  }
  .sd-hero--img-left .sd-hero__copy,
  .sd-hero--img-left .sd-hero__media {
    direction: ltr;
  }

  .sd-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* Carries the inset the full-bleed grid no longer provides. The larger
       inline value keeps the copy roughly on the old 1420px text column while
       the media runs to the viewport edge. */
    padding-block: clamp(8px, 6vw, 72px);
    padding-inline: clamp(24px, 6vw, 88px);
  }
  /* The rounded (About) variant keeps the container, so it must not double up. */
  .sd-hero__inner:has(.sd-hero__media--rounded) .sd-hero__copy {
    padding-inline: 0;
  }

  /* Eyebrow */
  .sd-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sd-violet);
    margin-block-end: 18px;
  }
  .sd-hero__eyebrow--dash::before {
    content: "";
    width: 26px;
    height: 1.5px;
    background: var(--sd-violet);
  }

  /* Rating line */
  .sd-hero__rating {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 500;
    color: var(--sd-ink-soft);
    margin-block-end: 22px;
  }
  /* The drawn stars are styled store-wide in base.css (.sd-stars), shared with the
     video reviews and the PDP buy box. Only the legacy typed-glyph fallback is
     styled here — it is the one thing unique to this section. */
  .sd-hero__stars {
    color: var(--sd-hero-star, var(--sd-violet));
    letter-spacing: 0.08em;
  }
  .sd-hero__rating-count {
    font-variant-numeric: tabular-nums;
  }

  /* Heading */
  .sd-hero__title {
    margin: 0 0 18px;
    color: var(--sd-ink);
  }
  .sd-hero--h-serif .sd-hero__title {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(40px, 4.6vw, 68px);
    line-height: 1.12;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .sd-hero--h-sans .sd-hero__title {
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: clamp(38px, 4.6vw, 66px);
    line-height: 1.08;
    letter-spacing: 0;
  }
  .sd-hero__accent {
    font-family: var(--font-accent--family);
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    color: var(--sd-violet);
  }

  /* Body */
  .sd-hero__body {
    font-family: var(--font-body--family);
    font-size: 17px;
    line-height: 1.7;
    color: var(--sd-ink-soft);
    max-width: 420px;
    margin: 0 0 32px;
  }

  /* CTA row — primary + optional outline button, wrapping on narrow copy panes. */
  .sd-hero__ctas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* CTA — primary violet button */
  .sd-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 15px 36px;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--sd-violet);
    border: 1.5px solid var(--sd-violet);
    border-radius: var(--sd-radius-pill);
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
  }
  .sd-hero__cta:hover,
  .sd-hero__cta:focus-visible {
    background: var(--sd-violet-hover);
    border-color: var(--sd-violet-hover);
  }

  /* Secondary — outline. Violet text on the section surface; fills violet on hover so
     the pair reads as one system rather than two unrelated styles. */
  .sd-hero__cta--outline {
    color: var(--sd-violet);
    background: transparent;
    border-color: var(--sd-violet);
  }
  .sd-hero__cta--outline:hover,
  .sd-hero__cta--outline:focus-visible {
    color: #fff;
    background: var(--sd-violet);
    border-color: var(--sd-violet);
  }

  /* Reassurance row — overlapping avatars + text */
  .sd-hero__social {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-start: 32px;
  }
  .sd-hero__avatars {
    display: inline-flex;
    align-items: center;
    flex: none;
  }
  .sd-hero__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    /* Ring in the section surface colour so the faces read as a stack. currentColor
       would inherit the ink, so the canvas token is used explicitly. */
    border: 2px solid var(--sd-canvas);
    background: var(--sd-whisper-lilac);
    display: block;
  }
  .sd-hero__avatar + .sd-hero__avatar {
    margin-inline-start: -12px;
  }
  .sd-hero__social-text {
    font-family: var(--font-body--family);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sd-ink-soft);
   
  }
img.sd-hero__avatar.sd-hero__avatar-2 {
    z-index: 5;
}
  /* Media — fills its grid column (mockup pattern: stretch to the grid min-height,
     image absolute inset 0 object-fit cover). Aspect-ratio only kicks in on mobile
     when the grid stacks. */
  .sd-hero__media {
    position: relative;
    overflow: hidden;
    min-height: 100%;
  }
  .sd-hero__media--rounded {
    border-radius: 36px;
    aspect-ratio: 4 / 4.3;
    min-height: 0;
    align-self: center;
  }
  .sd-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sd-hero__img--placeholder {
    background: var(--sd-whisper-lilac);
  }

  /* Desktop/mobile image swap. Only present when a Mobile image is picked; otherwise
     the single desktop image has no --mobile sibling and these are inert. */
  .sd-hero__img--mobile {
    display: none;
  }

  /* Image aspect ratio (Image ▸ Aspect ratio). "fill" is the default and keeps
     the historic behaviour: the media stretches to the grid's min-height, or to
     the 4/4.3 card when Rounded is on — so these rules must beat both, hence
     they sit after --rounded and repeat min-height.

     Scoped to >=861px because the mobile ratio (--mar-*) governs below that; the
     two sets are otherwise identical declarations that would collide. */
  @media (min-width: 861px) {
    .sd-hero--ar-square .sd-hero__media,
    .sd-hero--ar-portrait45 .sd-hero__media,
    .sd-hero--ar-portrait34 .sd-hero__media {
      min-height: 0;
      align-self: center;
    }
    .sd-hero--ar-square .sd-hero__media { aspect-ratio: 1 / 1; }
    .sd-hero--ar-portrait45 .sd-hero__media { aspect-ratio: 4 / 5; }
    .sd-hero--ar-portrait34 .sd-hero__media { aspect-ratio: 3 / 4; }

    /* Natural: the image's own proportions decide the box, so it can no longer be
       absolutely positioned — it flows and gives the media its height. */
    .sd-hero--ar-natural .sd-hero__media {
      aspect-ratio: auto;
      min-height: 0;
      align-self: center;
    }
    .sd-hero--ar-natural .sd-hero__img {
      position: static;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  @media screen and (min-width: 749px){
       .sd-hero__social-text{
 max-width: 400px;
    }
  }
   @media screen and (max-width: 749px){
    .sd-hero__social-text {
   
    font-size: 12.5px;
   
}
.sd-hero__avatar{
  width: 28px;
  height: 28px;
}
   }


  @media (max-width: 860px) {
    .sd-hero__inner {
      grid-template-columns: 1fr;
      min-height: 0;
      gap: 8px;
    }
    .sd-hero--img-left .sd-hero__inner {
      direction: ltr;
    }
    .sd-hero__media {
      order: -1;
      min-height: 0;
    }
 

    /* ---- Image swap ----
       When a Mobile image is picked, show it and drop the desktop crop. */
    .sd-hero--has-mobile-img .sd-hero__img--desktop {
      display: none;
    }
    .sd-hero--has-mobile-img .sd-hero__img--mobile {
      display: block;
    }

    /* ---- Mobile aspect ratio (Image ▸ Mobile aspect ratio) ----
       Mirrors the desktop set but keyed off --mar-*. "fill" keeps the historic
       stacked-mobile letterbox; anything else is honoured verbatim. */
    .sd-hero--mar-fill .sd-hero__media {
      aspect-ratio: 4 / 3.4;
    }
    .sd-hero--mar-fill .sd-hero__media--rounded {
      aspect-ratio: 4 / 4.3;
    }
    .sd-hero--mar-square .sd-hero__media,
    .sd-hero--mar-portrait45 .sd-hero__media,
    .sd-hero--mar-portrait34 .sd-hero__media,
    .sd-hero--mar-landscape32 .sd-hero__media {
      min-height: 0;
      align-self: center;
    }
    .sd-hero--mar-square .sd-hero__media { aspect-ratio: 1 / 1; }
    .sd-hero--mar-portrait45 .sd-hero__media { aspect-ratio: 4 / 5; }
    .sd-hero--mar-portrait34 .sd-hero__media { aspect-ratio: 3 / 4; }
    .sd-hero--mar-landscape32 .sd-hero__media { aspect-ratio: 3 / 2; }

    /* Natural on mobile: image flows and sets the box height. Needs max-width so a
       statically-positioned image cannot push the grid past the viewport. */
    .sd-hero--mar-natural .sd-hero__media {
      aspect-ratio: auto;
      min-height: 0;
      align-self: center;
    }
    .sd-hero--mar-natural .sd-hero__img {
      position: static;
      width: 100%;
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
    .sd-hero__copy {
      align-items: center;
      text-align: center;
    }
    .sd-hero__body {
      margin-inline: auto;
    }
    /* Both new rows follow the centred copy. */
    .sd-hero__ctas,
    .sd-hero__social {
      justify-content: center;
    }
    .sd-hero__social {
      text-align: start;
    }
  }

  /* Narrow phones: a wrapped button pair looks ragged at differing widths, so both
     buttons go full width and stack cleanly. */
  @media (max-width: 460px) {
    .sd-hero__ctas {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      gap: 10px;
    }
    .sd-hero__cta {
      width: 100%;
    }
  }
/* END_SECTION:sorandi-hero-split */

/* START_SECTION:sorandi-icon-text (INDEX:59) */
.sd-it {
    padding-block: var(--sd-it-pt) var(--sd-it-pb);
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-it {
      padding-block: var(--sd-it-pt-mobile, var(--sd-it-pt)) var(--sd-it-pb-mobile, var(--sd-it-pb));
    }
  }
  /* Merchant background override. Only bites when a colour was picked, so the
     .sd-surface--* token default (and the rebrand path) is otherwise untouched. */
  .sd-it--bg-custom { background: var(--sd-it-bg); }
  .sd-it--hairline {
    border-block-start: 1px solid var(--sd-hairline);
    border-block-end: 1px solid var(--sd-hairline);
  }

  .sd-it__inner {
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  /* position:relative anchors the absolutely-positioned arrows to the row. */
  .sd-it__slider { display: block; position: relative; }

  /* ---- Desktop: an even N-column grid ----
     A grid, not a flex row, so every item gets exactly 1/N of the width and the
     labels line up regardless of how long each one is. Nothing overflows, so
     the slider's scroll behaviour never engages here. */
  .sd-it__track {
    display: grid;
    grid-template-columns: repeat(var(--sd-it-cols, 3), minmax(0, 1fr));
    align-items: center;
    gap: 16px;
  }

  .sd-it__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
  }
  .sd-it__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
  }
  /* The built-in SVGs stroke with currentColor via the icon token; an uploaded
     image is sized to the same 32px box so mixing the two never shifts the
     labels. object-fit stops a non-square upload stretching. */
  .sd-it__icon svg,
  .sd-it__icon .sd-usp__icon {
    width: 32px;
    height: 32px;
    stroke: var(--sd-it-icon, var(--sd-violet));
    fill: none;
    stroke-width: 1.5;
  }
  .sd-it__icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
  }
  .sd-it__label {
    font-family: var(--font-body--family);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sd-it-text, var(--sd-ink));
  }

  /* Arrows and dots belong to the mobile slider only — above the breakpoint the
     whole row is visible, so they would be dead controls. */
  .sd-it__arrow,
  .sd-it__dots { display: none; }

  /* ---- Mobile: one-up arrow slider ---- */
  @media (max-width: 860px) {
    /* Scroll-snap slider, swipe-driven: the shopper drags, the dots below show
       position. No arrows — a 28px chevron is a poor tap target next to a track
       that already responds to the natural gesture, and removing them lets the
       item use the full width instead of being inset to clear them. */
    .sd-it__track {
      display: flex;
      gap: 0;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      /* No arrow insets — the item spans the track edge to edge. */
      padding-inline: 0;
      box-sizing: border-box;
    }
    .sd-it__track::-webkit-scrollbar { display: none; }

    .sd-it__item {
      flex: 0 0 100%;
      scroll-snap-align: center;
    }

    /* Arrows off on mobile; the dots are the only control. */
    .sd-it__arrow { display: none !important; }

    .sd-it__dots {
      display: flex;
      justify-content: center;
      gap: 7px;
      margin-block-start: 12px;
    }
    .sd-it__dot {
      width: 7px;
      height: 7px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: var(--sd-hairline);
      cursor: pointer;
      transition: background 0.2s var(--sd-ease, ease), transform 0.2s var(--sd-ease, ease);
    }
    .sd-it__dot[data-active] {
      background: var(--sd-violet);
      transform: scale(1.25);
    }
    @media (prefers-reduced-motion: reduce) {
      .sd-it__dot { transition: none; }
    }


  }

  .sd-it--empty {
    padding: 24px;
    text-align: center;
    color: var(--sd-ink-soft);
    font-family: var(--font-body--family);
    font-size: 14px;
    border: 1px dashed var(--sd-hairline);
    border-radius: var(--sd-radius-card, 12px);
    margin: 24px auto;
    max-width: 640px;
  }
/* END_SECTION:sorandi-icon-text */

/* START_SECTION:sorandi-image-logo-marquee (INDEX:60) */
.sd-ilm {
    padding-block: var(--sd-ilm-pt) var(--sd-ilm-pb);
    overflow: hidden;
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-ilm {
      padding-block: var(--sd-ilm-pt-mobile, var(--sd-ilm-pt)) var(--sd-ilm-pb-mobile, var(--sd-ilm-pb));
    }
  }

  .sd-ilm__heading {
    margin: 0 0 24px;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sd-ink-soft);
  }

  .sd-ilm__viewport {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .sd-ilm__track {
    display: flex;
    align-items: center;
    width: max-content;
  }

  /* The animation only starts once <sd-logo-marquee> has built the mirrored
     second half (it adds --ready). Animating a half-built track is what makes a
     marquee visibly jump on first paint. */
  .sd-ilm--ready .sd-ilm__track {
    animation: sd-ilm-scroll var(--sd-ilm-duration, 40s) linear infinite;
  }

  /* Direction. Reversing the ANIMATION rather than reordering the DOM keeps the
     merchant's authored order intact for screen readers. */
  .sd-ilm--right .sd-ilm__track {
    animation-direction: reverse;
  }

  .sd-ilm--pause-hover .sd-ilm__viewport:hover .sd-ilm__track,
  .sd-ilm--pause-hover .sd-ilm__viewport:focus-within .sd-ilm__track {
    animation-play-state: paused;
  }

  .sd-ilm__item {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: calc(var(--sd-ilm-gap, 56px) / 2);
    color: var(--sd-ink-soft);
    text-decoration: none;
    white-space: nowrap;
  }

  .sd-ilm__logo {
    display: block;
    height: var(--sd-ilm-item-h, 26px);
    width: auto;
    max-width: none;
    opacity: var(--sd-ilm-opacity, 1);
    transition: opacity 0.3s var(--sd-ease, ease), filter 0.3s var(--sd-ease, ease);
  }

  /* Text fallback for a logo with no image, matching the sibling text band. */
  .sd-ilm__text {
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: var(--sd-ilm-opacity, 1);
  }

  .sd-ilm--grey .sd-ilm__logo {
    filter: grayscale(1);
  }

  /* Hover lift applies to the real, linked logos only — clones are inert. */
  .sd-ilm__item[href]:hover .sd-ilm__logo {
    opacity: 1;
    filter: grayscale(0);
  }

  /* Soften both edges so logos enter and leave instead of popping at the border. */
  .sd-ilm--fade .sd-ilm__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  }

  @keyframes sd-ilm-scroll {
    to {
      transform: translateX(-50%);
    }
  }

  .sd-ilm--empty {
    padding: 24px;
    text-align: center;
    color: var(--sd-ink-soft);
    font-family: var(--font-body--family);
    font-size: 14px;
    border: 1px dashed var(--sd-hairline);
    border-radius: var(--sd-radius-card, 12px);
    margin: 24px auto;
    max-width: 520px;
  }

  /* ---- Motion gate ----
     Both halves of the house rule (OS preference AND the store Motion setting)
     land on the same static presentation: no animation, and the single authored
     run wraps into a centred row instead of overflowing off screen. The JS makes
     the matching decision and skips cloning entirely. */
  @media (prefers-reduced-motion: reduce) {
    .sd-ilm .sd-ilm__track,
    .sd-ilm--ready .sd-ilm__track {
      animation: none;
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 20px;
    }
  }

  .sd-motion-minimal .sd-ilm .sd-ilm__track,
  .sd-motion-minimal .sd-ilm--ready .sd-ilm__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
  }
/* END_SECTION:sorandi-image-logo-marquee */

/* START_SECTION:sorandi-image-marquee (INDEX:61) */
.sd-imq {
    padding-block: var(--sd-imq-pt) var(--sd-imq-pb);
    overflow: hidden;
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-imq {
      padding-block: var(--sd-imq-pt-mobile, var(--sd-imq-pt)) var(--sd-imq-pb-mobile, var(--sd-imq-pb));
    }
  }
  .sd-imq--bg-custom { background: var(--sd-imq-bg); }

  .sd-imq__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.15;
    text-align: center;
    color: var(--sd-imq-heading, var(--sd-ink));
    margin: 0 0 28px;
    padding-inline: clamp(16px, 4vw, 24px);
  }

  /* Full-bleed by default — the belt reads as endless precisely because it runs
     off both edges. Contained is the opt-in. */
  .sd-imq__viewport {
    display: block;
    width: 100%;
    overflow: hidden;
    /* The tiles size against THIS box, not the track: the track is
       width:max-content and grows with every clone, so a % basis there would
       shrink the tiles as the belt got longer. */
    container-type: inline-size;
    container-name: sd-imq;
  }
  .sd-imq--contained .sd-imq__viewport {
    max-width: 1420px;
    margin-inline: auto;
  }

  .sd-imq__track {
    display: flex;
    align-items: stretch;
    gap: var(--sd-imq-gap, 16px);
    width: max-content;
  }

  /* The animation waits for data-sd-marquee-ready, which <sd-logo-marquee> sets
     once it has mirrored the run. Animating a half-built track is what makes a
     marquee visibly jump on first paint.
     -50% is exact because the component builds the track as two identical
     halves, so the reset lands on a pixel-identical frame. */
  [data-sd-marquee-ready] .sd-imq__track {
    animation: sd-imq-scroll var(--sd-imq-duration, 40s) linear infinite;
  }
  .sd-imq--reverse [data-sd-marquee-ready] .sd-imq__track {
    animation-direction: reverse;
  }
  .sd-imq__viewport:hover .sd-imq__track,
  .sd-imq__viewport:focus-within .sd-imq__track {
    animation-play-state: paused;
  }
  @keyframes sd-imq-scroll {
    to { transform: translateX(-50%); }
  }

  /* N tiles across the visible belt. The gap is subtracted rather than added,
     or N tiles would overflow by one gap's worth and the last one would sit
     half-clipped at the edge.
     The breakpoint switches --sd-imq-active only, so the sizing formula lives
     in ONE place and the two counts cannot drift apart. */
  .sd-imq__item {
    --sd-imq-active: var(--sd-imq-cols, 4);
    flex: 0 0 calc(
      (100cqw - (var(--sd-imq-active) - 1) * var(--sd-imq-gap, 16px)) / var(--sd-imq-active)
    );
    display: block;
    aspect-ratio: var(--sd-imq-ar, 3 / 4);
    border-radius: var(--sd-imq-radius, 16px);
    overflow: hidden;
    background: var(--sd-whisper-lilac);
  }
  .sd-imq__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media (max-width: 860px) {
    .sd-imq__item { --sd-imq-active: var(--sd-imq-cols-mobile, 2); }
  }

  /* Hard motion gate, matching the house rule: nothing is cloned by the
     component in these cases, so only the authored tiles are present — they
     wrap into a static grid instead of a belt. */
  @media (prefers-reduced-motion: reduce) {
    .sd-imq__track,
    [data-sd-marquee-ready] .sd-imq__track {
      animation: none;
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  .sd-motion-minimal .sd-imq__track,
  .sd-motion-minimal [data-sd-marquee-ready] .sd-imq__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .sd-imq--empty {
    padding: 24px;
    text-align: center;
    color: var(--sd-ink-soft);
    font-family: var(--font-body--family);
    font-size: 14px;
    border: 1px dashed var(--sd-hairline);
    border-radius: var(--sd-radius-card, 12px);
    margin: 24px auto;
    max-width: 640px;
  }
/* END_SECTION:sorandi-image-marquee */

/* START_SECTION:sorandi-join-cta (INDEX:62) */
.sd-join { padding-block: var(--sd-join-pt) var(--sd-join-pb); text-align: center; }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-join {
      padding-block: var(--sd-join-pt-mobile, var(--sd-join-pt)) var(--sd-join-pb-mobile, var(--sd-join-pb));
    }
  }
  .sd-join__inner { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }
  .sd-join__eyebrow {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--sd-violet); margin-block-end: 14px;
  }
  .sd-join__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(34px, 4.2vw, 58px);
    line-height: 1.12;
    color: var(--sd-ink);
    margin: 0 0 14px;
  }
  .sd-join__accent { font-family: var(--font-accent--family); font-style: italic; font-weight: 500; color: var(--sd-violet); }
  .sd-join__body {
    font-family: var(--font-body--family);
    font-size: 16px; line-height: 1.7; color: var(--sd-ink-soft);
    max-width: 48ch; margin: 0 auto 30px;
  }
  .sd-join__cta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    padding: 15px 36px; font-family: var(--font-body--family); font-size: 15px; font-weight: 500; letter-spacing: .04em;
    color: #fff; background: var(--sd-violet); border: 1.5px solid var(--sd-violet); border-radius: var(--sd-radius-pill); text-decoration: none; transition: background .25s, border-color .25s;
  }
  .sd-join__cta:hover, .sd-join__cta:focus-visible { background: var(--sd-violet-hover); border-color: var(--sd-violet-hover); }
/* END_SECTION:sorandi-join-cta */

/* START_SECTION:sorandi-knockout (INDEX:63) */
.sd-knockout {
    padding-block: var(--sd-knockout-pt) var(--sd-knockout-pb);
    text-align: center;
    overflow: hidden;
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-knockout {
      padding-block: var(--sd-knockout-pt-mobile, var(--sd-knockout-pt)) var(--sd-knockout-pb-mobile, var(--sd-knockout-pb));
    }
  }
  .sd-knockout__stage {
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-knockout__title {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(48px, 9vw, 110px);
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0 auto;
    max-width: 1100px;
    color: var(--sd-ink);
  }

  /* Photo-into-text — only where supported; otherwise solid ink text above.
     background-color: ink is a fallback FILL so the letters are never invisible
     if the image is slow or fails to load (it also clips to the text). Focal
     position is editable via --sd-knockout-focal. */
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .sd-knockout__title--fill {
      background-color: var(--sd-ink);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: var(--sd-knockout-focal, center center);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
  }

  /* Reveal: hidden only while the component is armed (JS present + motion allowed). */
  @media (prefers-reduced-motion: no-preference) {
    sd-knockout[data-armed] .sd-knockout__stage {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s cubic-bezier(0.22, 0.8, 0.3, 1), transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
    }
    sd-knockout.sd-knockout--in[data-armed] .sd-knockout__stage {
      opacity: 1;
      transform: none;
    }
  }
/* END_SECTION:sorandi-knockout */

/* START_SECTION:sorandi-logo-marquee (INDEX:64) */
.sd-lm {
    padding-block: var(--sd-lm-pt) var(--sd-lm-pb);
    overflow: hidden;
    border-block-start: 1px solid rgba(51, 47, 43, 0.05);
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-lm {
      padding-block: var(--sd-lm-pt-mobile, var(--sd-lm-pt)) var(--sd-lm-pb-mobile, var(--sd-lm-pb));
    }
  }
  .sd-lm__viewport {
    display: block;
    width: 100%;
    overflow: hidden;
  }
  .sd-lm__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: sd-lm-scroll 30s linear infinite;
  }
  .sd-lm__viewport:hover .sd-lm__track {
    animation-play-state: paused;
  }
  .sd-lm__item {
    flex: none;
    display: inline-flex;
    align-items: center;
    margin-inline: 28px;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sd-ink-soft);
    white-space: nowrap;
  }
  .sd-lm__logo {
    height: 26px;
    width: auto;
    display: block;
  }

  @keyframes sd-lm-scroll {
    to { transform: translateX(-50%); }
  }

  .sd-lm--empty {
    padding: 24px;
    text-align: center;
    color: var(--sd-ink-soft);
    font-family: var(--font-body--family);
    font-size: 14px;
    border: 1px dashed var(--sd-hairline);
    border-radius: 12px;
    margin: 24px auto;
    max-width: 480px;
  }

  @media (prefers-reduced-motion: reduce) {
    .sd-lm__track {
      animation: none;
      flex-wrap: wrap;
      justify-content: center;
    }
  }
/* END_SECTION:sorandi-logo-marquee */

/* START_SECTION:sorandi-media-text (INDEX:65) */
.sd-mt { padding-block: var(--sd-mt-pt) var(--sd-mt-pb); }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-mt {
      padding-block: var(--sd-mt-pt-mobile, var(--sd-mt-pt)) var(--sd-mt-pb-mobile, var(--sd-mt-pb));
    }
  }
  .sd-mt__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(36px, 5vw, 64px);
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-mt--media-right .sd-mt__inner { direction: rtl; }
  .sd-mt--media-right .sd-mt__copy,
  .sd-mt--media-right .sd-mt__media { direction: ltr; }

  /* Media shape. The ratio is a custom property so the modifier classes below
     only restate the value, not the whole rule. 4:3 stays the default — it is
     the shape every existing placement was authored against.
     "Auto" is the one option that drops aspect-ratio entirely and lets the
     media keep its natural proportions; with it the media is no longer
     absolutely positioned, so nothing crops. */
  .sd-mt__media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: var(--sd-mt-ar, 4 / 3);
  }
  .sd-mt--mr-square .sd-mt__media { --sd-mt-ar: 1 / 1; }
  .sd-mt--mr-portrait34 .sd-mt__media { --sd-mt-ar: 3 / 4; }
  .sd-mt--mr-portrait45 .sd-mt__media { --sd-mt-ar: 4 / 5; }
  .sd-mt--mr-landscape43 .sd-mt__media { --sd-mt-ar: 4 / 3; }
  .sd-mt--mr-landscape32 .sd-mt__media { --sd-mt-ar: 3 / 2; }
  .sd-mt--mr-landscape169 .sd-mt__media { --sd-mt-ar: 16 / 9; }

  /* Auto — no fixed shape, so the media dictates its own height. The absolute
     fill that makes object-fit: cover work must be undone here, otherwise the
     container would collapse to zero height. */
  .sd-mt--mr-auto .sd-mt__media { aspect-ratio: auto; }
  .sd-mt--mr-auto .sd-mt__el {
    position: static;
    height: auto;
    /* object-fit is meaningless once the box is intrinsically sized, but the
       stand-in <img> fallback carries a hardcoded width/height that would
       otherwise force a square. Overriding height and letting the aspect come
       from the file keeps that path honest too. */
    aspect-ratio: auto;
    object-fit: contain;
  }
  /* The video tile keeps its own fill chain, so restore height through it. */
  .sd-mt--mr-auto .sd-mt__video-wrap,
  .sd-mt--mr-auto .sd-mt__trigger { height: auto; }
  .sd-mt__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .sd-mt__el--placeholder { background: var(--sd-whisper-lilac); }
  .sd-mt__video-wrap { display: block; height: 100%; }
  .sd-mt__trigger { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
  .sd-mt__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
    width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity .25s;
  }
  .sd-mt__play::after { content: ""; width: 0; height: 0; border-left: 15px solid var(--sd-ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
  sd-video[data-playing] .sd-mt__play { opacity: 0; }

  .sd-mt__eyebrow { display: inline-block; font-family: var(--font-body--family); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sd-violet); margin-block-end: 10px; }
  .sd-mt__heading { font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; color: var(--sd-ink); margin: 0 0 16px; }
  .sd-mt__accent { font-family: var(--font-accent--family); font-style: italic; font-weight: 500; color: var(--sd-violet); }
  .sd-mt__body { font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: var(--sd-ink-soft); max-width: 460px; }
  .sd-mt__body > * + * { margin-block-start: 14px; }
  .sd-mt__cta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-block-start: 26px;
    padding: 14px 32px; font-family: var(--font-body--family); font-size: 15px; font-weight: 500; letter-spacing: .04em;
    color: var(--sd-violet); background: transparent; border: 1.5px solid var(--sd-violet); border-radius: var(--sd-radius-pill); text-decoration: none; transition: background .25s, color .25s;
  }
  .sd-mt__cta:hover, .sd-mt__cta:focus-visible { background: var(--sd-violet); color: #fff; }

  @media (max-width: 860px) {
    .sd-mt__inner { grid-template-columns: 1fr; gap: 32px; }
    .sd-mt--media-right .sd-mt__inner { direction: ltr; }
  }
/* END_SECTION:sorandi-media-text */

/* START_SECTION:sorandi-pdp-main (INDEX:66) */
.sd-pdp { padding-block: var(--sd-pdp-pt) var(--sd-pdp-pb); }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-pdp {
      padding-block: var(--sd-pdp-pt-mobile, var(--sd-pdp-pt)) var(--sd-pdp-pb-mobile, var(--sd-pdp-pb));
    }
  }
  .sd-pdp__grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 56px;
    align-items: start;
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-pdp__grid > * { min-width: 0; }
  @media (max-width: 860px) {
    .sd-pdp__grid { grid-template-columns: 1fr; gap: 40px; }
  }

  /* Sticky ATC (mockup §11): fixed bottom bar, slides up when the buy-box ATC scrolls out. */
  .sd-satc {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: block;
    background: var(--sd-satc-bg, rgba(255, 255, 255, 0.97));
    backdrop-filter: blur(10px);
    border-block-start: 1px solid var(--sd-hairline);
    transform: translateY(110%);
    /* Translated off-screen is still hit-testable and still focusable, so without
       these the hidden bar swallowed clicks along the bottom edge of the page and
       put a tab stop on a button nobody could see. visibility is delayed by the
       length of the slide so it flips only once the bar is actually gone —
       without the delay it snaps to hidden on frame 1 and the slide-out never
       reads. It still animates back in immediately (0s delay in --show). */
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.35s var(--sd-ease, ease), visibility 0s linear 0.35s;
  }
  .sd-satc--show {
    transform: none;
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.35s var(--sd-ease, ease), visibility 0s linear 0s;
  }
  .sd-satc__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1420px;
    margin-inline: auto;
    padding: 10px clamp(16px, 4vw, 24px);
  }
  .sd-satc__img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
  /* Each colour falls back to the token it used before, so an unset setting is
     byte-for-byte the previous appearance and a rebrand still re-skins the bar. */
  .sd-satc__name { font-family: var(--font-heading--family); font-weight: 400; font-size: 18px; color: var(--sd-satc-title, var(--sd-ink)); }
  .sd-satc__price { font-family: var(--font-body--family); font-weight: 700; font-size: 16px; color: var(--sd-satc-price, var(--sd-ink)); }
  .sd-satc__btn {
    margin-inline-start: auto;
    min-height: 44px;
    padding: 13px 30px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--sd-violet);
    border: 1.5px solid var(--sd-violet);
    border-radius: var(--sd-radius-pill);
    cursor: pointer;
    transition: background 0.25s var(--sd-ease, ease);
  }
  .sd-satc__btn:hover, .sd-satc__btn:focus-visible { background: var(--sd-violet-hover); border-color: var(--sd-violet-hover); }
  @media (max-width: 860px) {
    .sd-satc__name { display: none; }
    .sd-satc__btn { flex: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    /* No slide, so there is nothing for the visibility delay to wait for — both
       states cut straight to their end position. Listed on both selectors because
       --show now carries its own transition and would otherwise re-introduce it. */
    .sd-satc,
    .sd-satc--show { transition: none; }
  }
/* END_SECTION:sorandi-pdp-main */

/* START_SECTION:sorandi-pin-slider (INDEX:67) */
.sd-pin {
    display: block;
    position: relative;
  }

  /* The scroll budget: slide count x the per-slide distance. This height is the
     only thing that decides how long the pane stays pinned — the component reads
     its geometry rather than being told a duration, so the two cannot drift. */
  .sd-pin__scroll {
    position: relative;
    height: var(--sd-pin-scroll);
  }

  .sd-pin__pane {
    position: sticky;
    top: 0;
    height: var(--sd-pin-height);
    overflow: hidden;
  }

  .sd-pin__stack {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--sd-ink);
  }

  .sd-pin__column {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  .sd-pin__slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .sd-pin__media {
    position: absolute;
    top: 0;
    height: 100%;
    overflow: hidden;
    background: var(--sd-ink);
  }

  /* Full layout — one frame stretched across both columns, each column showing
     its own half, so the picture reads as a single image rather than a pair. */
  .sd-pin__slide--full .sd-pin__media {
    width: 200%;
  }
  .sd-pin__column--left .sd-pin__slide--full .sd-pin__media {
    left: 0;
  }
  .sd-pin__column--right .sd-pin__slide--full .sd-pin__media {
    right: 0;
  }

  /* Sides layout — each column carries its own picture, filling that column. */
  .sd-pin__slide--sides .sd-pin__media {
    width: 100%;
    left: 0;
  }

  .sd-pin__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
  }
  /* Show-the-whole-image: the component also drops the zoom to 1 in this mode,
     since scaling a letterboxed frame would crop what it was chosen to reveal. */
  .sd-pin--fit-contain .sd-pin__media img {
    object-fit: contain;
  }

  /* Veil — carries the copy's contrast over unknown photography. Opacity is a
     section setting because a dark image needs far less of it than a pale one. */
  .sd-pin__veil {
    position: absolute;
    inset: 0;
    background: var(--sd-ink);
    opacity: var(--sd-pin-veil, 0.5);
    pointer-events: none;
  }

  /* Copy spans both columns for the same reason the media does, so a centred
     title reads as one line across the seam instead of being cut in half.
     200%, never 100vw: a classic scrollbar makes the two differ by its width,
     which shifts the centre and clips the middle letters. */
  .sd-pin__copy {
    position: absolute;
    top: 0;
    width: 200%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    padding-inline: clamp(16px, 4vw, 24px);
    text-align: center;
    color: var(--sd-canvas);
    pointer-events: none;
    will-change: transform;
  }
  .sd-pin__column--left .sd-pin__copy {
    left: 0;
  }
  .sd-pin__column--right .sd-pin__copy {
    right: 0;
  }
  /* Dark tone for slides set over pale imagery. Both tones are neutral — the
     violet anchor stays reserved for the one saturated element on a screen. */
  .sd-pin__slide--tone-dark .sd-pin__copy {
    color: var(--sd-ink);
  }

  .sd-pin__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight, 400);
    font-size: var(--sd-pin-title-size);
    line-height: 1.04;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .sd-pin__tags {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.85;
  }

  /* The one interactive element in the pane, so it re-enables pointer events the
     copy layer switched off and keeps a 44px tap target. */
  .sd-pin__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--sd-tap);
    padding: 12px 32px;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: inherit;
    text-decoration: none;
    border: 1.5px solid currentColor;
    border-radius: var(--sd-radius-pill);
    pointer-events: auto;
    transition: background 0.25s var(--sd-ease), color 0.25s var(--sd-ease);
  }
  .sd-pin__link:hover,
  .sd-pin__link:focus-visible {
    background: var(--sd-canvas);
    color: var(--sd-ink);
  }
  .sd-pin__slide--tone-dark .sd-pin__link:hover,
  .sd-pin__slide--tone-dark .sd-pin__link:focus-visible {
    background: var(--sd-ink);
    color: var(--sd-canvas);
  }

  /* Title scale — the two presets want very different weights of statement.
     A clamp() per step so one token covers both breakpoints. */
  .sd-pin--copy-hero .sd-pin__title {
    --sd-pin-title-size: clamp(40px, 9vw, 150px);
  }
  .sd-pin--copy-editorial .sd-pin__title {
    --sd-pin-title-size: clamp(32px, 5.4vw, 84px);
  }

  /* Blocks contribute settings only — the component renders the slides, so the
     emitted block elements must take up no space. Kept in the DOM (not
     display:none) so the theme editor can still scroll to and highlight one. */
  .sd-pin__blocks {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  @media (max-width: 860px) {
    .sd-pin__pane {
      height: var(--sd-pin-height-mobile, var(--sd-pin-height));
    }
    /* One column on phones: at half a narrow viewport neither the image nor the
       title is legible, so the stack shows the left column full width and the
       right one is left empty. */
    .sd-pin__column--right {
      display: none;
    }
    .sd-pin__slide--full .sd-pin__media,
    .sd-pin__copy {
      width: 100%;
    }
  }

  /* ---- Motion off ----
     No rAF loop runs in this state, so a sticky pane would strand the reader in
     a tall dead scroll region. The pin is dropped entirely and the slides read
     as a plain stacked sequence. Mirrors sd-pin-slider.js's static path — the
     component adds .sd-pin--static, and this is the CSS half of that contract. */
  .sd-pin--static .sd-pin__scroll {
    height: auto;
  }
  .sd-pin--static .sd-pin__pane {
    position: static;
    height: auto;
  }
  .sd-pin--static .sd-pin__stack {
    display: block;
    height: auto;
  }
  .sd-pin--static .sd-pin__column {
    height: auto;
  }
  .sd-pin--static .sd-pin__column--right {
    display: none;
  }
  .sd-pin--static .sd-pin__slide {
    position: relative;
    inset: auto;
    height: var(--sd-pin-height);
  }
  .sd-pin--static .sd-pin__slide--full .sd-pin__media,
  .sd-pin--static .sd-pin__copy {
    width: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    .sd-pin__media img,
    .sd-pin__copy {
      transform: none !important;
    }
    .sd-pin__link {
      transition: none;
    }
  }
/* END_SECTION:sorandi-pin-slider */

/* START_SECTION:sorandi-product-banner (INDEX:68) */
.sd-pb { padding-block: var(--sd-pb-pt) var(--sd-pb-pb); }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-pb {
      padding-block: var(--sd-pb-pt-mobile, var(--sd-pb-pt)) var(--sd-pb-pb-mobile, var(--sd-pb-pb));
    }
  }
  .sd-pb__inner { width: 100%; max-width: 1420px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }
  /* The photo bleeds to the card edge: an even 50/50 split, min-height 560px,
     no padding on the CARD (the copy pane carries it) and no column gap.
     Padding on the card plus a contained image left the photo as a letterboxed
     floating square instead of filling its half.
     minmax(0, 1fr) rather than a bare 1fr: a grid column's default min-width is
     auto, so long copy or a wide feature label could push the text column past
     half and shrink the photo below it. */
  .sd-pb__card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    min-height: 560px;
    background: var(--sd-gradient-whisper);
    /* border: 1px solid var(--sd-hairline); */
    /* 20px matches sorandi-media-text's media panel. This banner and media-text
       sit on the same page at the same ratio, so their corners are compared
       directly; the 24px used by story-split / feature-spotlight read as a
       visible mismatch next to it. */
    border-radius: 20px;
    overflow: hidden;
  }
  .sd-pb__copy { padding: clamp(28px, 4vw, 56px); align-self: center; }
  .sd-pb__quote {
    font-family: var(--font-accent--family);
    font-style: italic;
    font-size: 15px;
    color: var(--sd-violet);
    margin-block-end: 14px;
  }
  .sd-pb__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.15;
    color: var(--sd-ink);
    margin: 0 0 20px;
  }
  .sd-pb__feats { list-style: none; margin: 0 0 26px; padding: 0; }
  /* Legacy check-list layout (single column of ticks). */
  .sd-pb__feats--list { display: flex; flex-direction: column; gap: 12px; }
  /* 2×2 benefit grid (v2.1 §05b: icon + bold heading + description per cell). */
  .sd-pb__feats--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
  .sd-pb__benefit { display: flex; gap: 12px; align-items: flex-start; }
  .sd-pb__benefit .sd-usp__icon,
  .sd-pb__benefit svg { width: 24px; height: 24px; stroke: var(--sd-violet); fill: none; stroke-width: 1.5; flex: none; margin-block-start: 2px; }
  .sd-pb__benefit-h { display: block; font-family: var(--font-body--family); font-size: 15px; font-weight: 600; color: var(--sd-ink); margin-block-end: 4px; }
  .sd-pb__benefit-d { font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.55; color: var(--sd-ink-soft); margin: 0; }
  .sd-pb__cta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    padding: 15px 36px; font-family: var(--font-body--family); font-size: 15px; font-weight: 500; letter-spacing: .04em;
    color: #fff; background: var(--sd-violet); border: 1.5px solid var(--sd-violet); border-radius: var(--sd-radius-pill); text-decoration: none; transition: background .25s, border-color .25s;
  }
  .sd-pb__cta:hover, .sd-pb__cta:focus-visible { background: var(--sd-violet-hover); border-color: var(--sd-violet-hover); }
  /* The image is a standalone rounded panel, not a bleed — it reads as the same
     object as sorandi-media-text's media panel when the two sit on one page.
     That means its own 20px radius on all four corners (the card's overflow
     clip only ever rounded the two outer ones) and a margin so the panel floats
     inside the card instead of touching its edges. The margin matches the copy
     pane's padding, so the image and the text block share one inset. */
  .sd-pb__media {
    position: relative;
    min-height: 100%;
    margin: clamp(28px, 4vw, 56px);
    /* The copy pane already carries this padding on its own side; without
       removing it here the gutter between the two panes would be doubled. */
    margin-inline-start: 0;
    border-radius: 20px;
    overflow: hidden;
  }
  .sd-pb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

  /* Media shape — same ratio vocabulary as sorandi-media-text, so a placement
     can be matched across the two sections by picking the same option.
     The photo bleeds to the card edge here, so the ratio has to govern the CARD
     height, not just the media box: with a ratio active the card's fixed
     min-height is dropped and the media's aspect-ratio becomes what sizes the
     row. Without that the image would be a correctly-shaped box floating inside
     a taller card, which is the thing this setting exists to avoid.
     "Fill" is the legacy behaviour (no ratio, 560px card) kept as an option so
     existing placements can be restored. */
  .sd-pb--mr-square .sd-pb__media { --sd-pb-ar: 1 / 1; }
  .sd-pb--mr-portrait34 .sd-pb__media { --sd-pb-ar: 3 / 4; }
  .sd-pb--mr-portrait45 .sd-pb__media { --sd-pb-ar: 4 / 5; }
  .sd-pb--mr-landscape43 .sd-pb__media { --sd-pb-ar: 4 / 3; }
  .sd-pb--mr-landscape32 .sd-pb__media { --sd-pb-ar: 3 / 2; }
  .sd-pb--mr-landscape169 .sd-pb__media { --sd-pb-ar: 16 / 9; }
  .sd-pb__media { aspect-ratio: var(--sd-pb-ar, auto); }
  /* min-height: 100% against a card with no set height would resolve to auto
     anyway, but stating it keeps the ratio as the only height source. */
  .sd-pb--mr-square .sd-pb__media,
  .sd-pb--mr-portrait34 .sd-pb__media,
  .sd-pb--mr-portrait45 .sd-pb__media,
  .sd-pb--mr-landscape43 .sd-pb__media,
  .sd-pb--mr-landscape32 .sd-pb__media,
  .sd-pb--mr-landscape169 .sd-pb__media { min-height: 0; }
  .sd-pb--mr-square .sd-pb__card,
  .sd-pb--mr-portrait34 .sd-pb__card,
  .sd-pb--mr-portrait45 .sd-pb__card,
  .sd-pb--mr-landscape43 .sd-pb__card,
  .sd-pb--mr-landscape32 .sd-pb__card,
  .sd-pb--mr-landscape169 .sd-pb__card { min-height: 0; }
  /* No radius of its own: the card clips it (overflow:hidden), and a second,
     smaller radius here showed as a mismatched corner inside the card's. */
  .sd-pb__img--placeholder { background: var(--sd-whisper-lilac); }

  @media (max-width: 860px) {
    .sd-pb__card { grid-template-columns: 1fr; }
    /* Stacked: the media is full-width, so it keeps the chosen ratio and falls
       back to 4:3 only when the section is set to Fill (no ratio variable).
       The panel is now above the copy rather than beside it, so the asymmetric
       inline-start margin from the two-column layout is restored to an even
       inset and the bottom margin is dropped — the copy pane's own top padding
       supplies the gap. */
    .sd-pb__media {
      order: -1;
      aspect-ratio: var(--sd-pb-ar, 4 / 3);
      min-height: 0;
      margin: clamp(28px, 4vw, 56px);
      margin-block-end: 0;
    }
    .sd-pb__feats--grid { grid-template-columns: 1fr; gap: 18px; }
  }
/* END_SECTION:sorandi-product-banner */

/* START_SECTION:sorandi-questions-band (INDEX:69) */
.sd-qb { padding-block: var(--sd-qb-pt) var(--sd-qb-pb); }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-qb {
      padding-block: var(--sd-qb-pt-mobile, var(--sd-qb-pt)) var(--sd-qb-pb-mobile, var(--sd-qb-pb));
    }
  }
  .sd-qb__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
    border-radius: 24px;
    background: var(--sd-gradient-whisper);
    border: 1px solid var(--sd-hairline);
  }
  .sd-qb__heading {
    display: block;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(22px, 2.6vw, 32px);
    color: var(--sd-ink);
    margin-block-end: 4px;
  }
  .sd-qb__hours {
    font-family: var(--font-body--family);
    font-size: 14px;
    color: var(--sd-ink-soft);
    margin: 0;
  }
  .sd-qb__cta {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    padding: 15px 34px; font-family: var(--font-body--family); font-size: 15px; font-weight: 500; letter-spacing: .04em;
    color: #fff; background: var(--sd-violet); border: 1.5px solid var(--sd-violet); border-radius: var(--sd-radius-pill); text-decoration: none; transition: background .25s, border-color .25s;
  }
  .sd-qb__cta:hover, .sd-qb__cta:focus-visible { background: var(--sd-violet-hover); border-color: var(--sd-violet-hover); }

  @media (max-width: 600px) {
    .sd-qb__inner { flex-direction: column; align-items: flex-start; text-align: left; }
  }
/* END_SECTION:sorandi-questions-band */

/* START_SECTION:sorandi-radiant-split (INDEX:70) */
/* Contained to the same 1420px as the rest of the sorandi sections, so this
     band lines up with the content above and below it instead of running edge
     to edge.
     The cap goes on the GRID itself rather than on an inner wrapper (the usual
     house shape) because the two panels ARE the grid columns — wrapping them
     would need a second grid to pass the sizing through.
     margin-inline, not padding-inline: each panel paints its own background to
     its own edge, and padding here would inset those backgrounds instead of the
     section, leaving two gaps down the middle of the band. */
.sd-rd-main {
    background: #F9F9FB;
}
  .sd-rd {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
    min-height: 560px;
    overflow: hidden;
    max-width: 1420px;
    /* Matches the padding-inline every other section uses, so the band's edges
       sit on the same line as their content on narrow screens. */
    margin-inline: clamp(16px, 4vw, 24px);
  }
  /* 1420 + 2x24 — past this the fixed margin would keep the band pinned left of
     centre, so hand the spare space back to auto and let it centre. */
  @media (min-width: 1468px) {
    .sd-rd { margin-inline: auto; }
  }

  /* Full-width opt-out: edge to edge, no cap and no side margin. Written after
     the media query above so it also wins on wide screens, where that query
     would otherwise re-apply the auto margin. */
  .sd-rd--full {
    max-width: none;
    margin-inline: 0;
  }

  /* Left slider panel */
  .sd-rd__left {
    background: var(--sd-gradient-whisper);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 32px;
    position: relative;
  }
  .sd-rd__slider {
    display: block;
    width: min(340px, 100%);
    position: relative;
  }
  .sd-rd__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sd-rd__track::-webkit-scrollbar { display: none; }
  .sd-rd__card {
    flex: 0 0 100%;
    scroll-snap-align: center;
    background: var(--sd-canvas);
    border-radius: 20px;
    padding: 22px 22px 18px;
    text-align: left;
  }

  /* Linked variant. The card is an <a> only when it has a destination, so these
     rules never apply to a card that would go nowhere.
     display:block because an <a> is inline by default, which would collapse the
     flex-basis above and let the tile size to its content instead of the slide.
     color:inherit keeps the title ink and the price violet — the card's own
     type scale already carries the hierarchy, and a blanket link colour would
     flatten it. */
  .sd-rd__card--link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.28s var(--sd-ease, ease), box-shadow 0.28s var(--sd-ease, ease);
  }
  /* Lift on hover — the affordance that says "this goes somewhere", since the
     card carries no other link styling. */
  .sd-rd__card--link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(51, 47, 43, 0.12);
  }
  .sd-rd__card--link:focus-visible {
    outline: 2px solid var(--sd-violet);
    outline-offset: 3px;
  }
  /* The image is the largest part of the card, so it carries the hover with a
     gentle push-in. Contained by the tile's own overflow:hidden. */
  .sd-rd__card--link .sd-rd__img {
    transition: transform 0.4s var(--sd-ease, ease);
  }
  .sd-rd__card--link:hover .sd-rd__img {
    transform: scale(1.04);
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-rd__card--link,
    .sd-rd__card--link .sd-rd__img {
      transition: none;
    }
    .sd-rd__card--link:hover {
      transform: none;
    }
    .sd-rd__card--link:hover .sd-rd__img {
      transform: none;
    }
  }
  /* Store Motion setting = minimal, same gate the rest of the brand layer uses.
     The lift is decoration; the card stays fully clickable without it. */
  .sd-motion-minimal .sd-rd__card--link,
  .sd-motion-minimal .sd-rd__card--link .sd-rd__img {
    transition: none;
  }
  .sd-motion-minimal .sd-rd__card--link:hover,
  .sd-motion-minimal .sd-rd__card--link:hover .sd-rd__img {
    transform: none;
  }
  .sd-rd__img-tile {
    background: var(--sd-whisper-lilac);
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    margin-block-end: 16px;
  }
  img.sd-rd__img {
    object-fit: contain;
}
  .sd-rd__img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .sd-rd__img--placeholder { background: var(--sd-whisper-lilac); }
  .sd-rd__title {
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 600;
    color: var(--sd-ink);
    margin: 0 0 4px;
  }
  .sd-rd__price {
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 700;
    color: var(--sd-violet);
  }

  .sd-rd__arrow {
    position: absolute;
    top: 40%;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--sd-hairline);
    background: var(--sd-canvas);
    color: var(--sd-ink);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s;
  }
  .sd-rd__arrow:hover,
  .sd-rd__arrow:focus-visible { background: var(--sd-violet); color: #fff; border-color: var(--sd-violet); }
  .sd-rd__arrow--prev { left: -8px; }
  .sd-rd__arrow--next { right: -8px; }

  .sd-rd__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-block-start: 18px;
  }
  .sd-rd__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(51, 47, 43, 0.2);
    cursor: pointer;
    transition: background 0.25s;
  }
  /* 44px hit area without changing the visual size — rule 7, audience 50-68.
     The dot stays 8px; an invisible inset pseudo-element carries the touch
     target, so nothing moves and nothing looks bigger. */
  .sd-rd__dot { position: relative; }
  .sd-rd__dot::after {
    content: "";
    position: absolute;
    inset: -18px;
  }

  .sd-rd__dot[data-active] { background: var(--sd-violet);  width: 24px;
  border-radius: 4px;}

  /* Right media panel */
  .sd-rd__right {
    position: relative;
    overflow: hidden;
    min-height: 400px;
  }
  .sd-rd__media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sd-rd__media-img--placeholder { background: var(--sd-whisper-lilac); }

  /* Media aspect ratio (Right media ▸ Aspect ratio). "fill" is the default and
     the historic behaviour — the panel fills the grid row and the media covers
     it. The ratio drives the PANEL, not just the image, so the bottom-anchored
     overlay keeps sitting on the media edge rather than detaching from it. */
  .sd-rd--ar-square .sd-rd__right,
  .sd-rd--ar-portrait45 .sd-rd__right,
  .sd-rd--ar-portrait34 .sd-rd__right,
  .sd-rd--ar-natural .sd-rd__right {
    min-height: 0;
    align-self: center;
  }
  .sd-rd--ar-square .sd-rd__right { aspect-ratio: 1 / 1; }
  .sd-rd--ar-portrait45 .sd-rd__right { aspect-ratio: 4 / 5; }
  .sd-rd--ar-portrait34 .sd-rd__right { aspect-ratio: 3 / 4; }

  /* Natural: the image's own proportions decide the panel height, so it flows
     instead of being absolutely positioned. Video has no intrinsic box here
     (it is inside an inset:0 wrapper), so it keeps a sane 16/9 fallback. */
  .sd-rd--ar-natural .sd-rd__right { aspect-ratio: auto; }
  .sd-rd--ar-natural img.sd-rd__media-img {
    position: static;
    height: auto;
    object-fit: contain;
    /* Static (not inset:0) means this image contributes its intrinsic width to the
       grid item's min-content size. Without these caps a wide/large image refuses
       to shrink and pushes the whole section past the viewport (sideways scroll). */
    max-width: 100%;
    max-height: 100%;
  }
  .sd-rd--ar-natural .sd-rd__right:has(.sd-rd__video-wrap) { aspect-ratio: 16 / 9; }

  /* Video media (click-to-play via <sd-video>; no autoplay = reduced-motion safe) */
  .sd-rd__video-wrap { position: absolute; inset: 0; display: block; }
  .sd-rd__video-trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: var(--sd-whisper-lilac);
    cursor: pointer;
  }
  .sd-rd__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  .sd-rd__video-play::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 15px solid var(--sd-ink);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    margin-left: 4px;
  }
  sd-video[data-playing] .sd-rd__video-play { opacity: 0; }
  .sd-rd__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(24px, 4vw, 48px);
    background: linear-gradient(to top, rgba(51, 47, 43, 0.55), transparent);
    color: #fff;
  }
  .sd-rd__overlay-h {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(24px, 3vw, 38px);
    margin: 0 0 6px;
    color: #fff;
  }
  .sd-rd__overlay-p {
    font-family: var(--font-body--family);
    font-size: 15px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    max-width: 46ch;
  }

  @media (max-width: 860px) {
    .sd-rd { grid-template-columns: minmax(0, 1fr); }
    /* Both panels must be allowed to shrink below their content's min-content width,
       or a natural-ratio image widens the single column and the page scrolls sideways.
       Grid items default to min-width:auto, which the minmax(0,…) track alone cannot
       overcome once a child is statically positioned. */
    .sd-rd__left,
    .sd-rd__right { min-width: 0; }
    /* Only the fill default gets the stacked-mobile floor — an explicit ratio
       choice is honoured at every width. */
    .sd-rd--ar-fill .sd-rd__right { min-height: 340px; }
  }
  @media (max-width: 420px) {
    .sd-rd__left { padding: 40px 20px; }
    .sd-rd__slider { width: 100%; max-width: 100%; }
    .sd-rd__arrow--prev { left: 2px; }
    .sd-rd__arrow--next { right: 2px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-rd__arrow, .sd-rd__dot, .sd-rd__video-play { transition: none; }
    .sd-rd__track { scroll-behavior: auto; }
  }
/* END_SECTION:sorandi-radiant-split */

/* START_SECTION:sorandi-reviews (INDEX:71) */
.sd-rev { padding-block: var(--sd-rev-pt) var(--sd-rev-pb); }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-rev {
      padding-block: var(--sd-rev-pt-mobile, var(--sd-rev-pt)) var(--sd-rev-pb-mobile, var(--sd-rev-pb));
    }
  }
  .sd-rev__inner { width: 100%; max-width: 1000px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }

  /* Honesty gate: keep the Judge.me mount in the DOM (Judge.me needs it to
     populate), but hide the whole section on the storefront while the widget is
     still empty (no reviews injected). Never show an empty "reviews" heading.
     Always visible in the theme editor. */
  .sd-rev:not(.sd-rev--editor):has(.jdgm-review-widget:empty) {
    display: none;
  }
  .sd-rev__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.15;
    color: var(--sd-ink);
    text-align: center;
    margin: 0 0 32px;
  }
  .sd-rev__empty {
    text-align: center;
    color: var(--sd-ink-soft);
    font-family: var(--font-body--family);
    font-size: 14px;
    border: 1px dashed var(--sd-hairline);
    border-radius: 12px;
    padding: 28px;
    max-width: 560px;
    margin-inline: auto;
  }
/* END_SECTION:sorandi-reviews */

/* START_SECTION:sorandi-stats (INDEX:72) */
.sd-stats {
    padding-block: var(--sd-stats-pt) var(--sd-stats-pb);
    text-align: center;
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-stats {
      padding-block: var(--sd-stats-pt-mobile, var(--sd-stats-pt)) var(--sd-stats-pb-mobile, var(--sd-stats-pb));
    }
  }
  /* Honesty gate: on the live storefront, hide the whole section when it has no
     real (verified-number) stat. In the editor (.sd-stats--editor) it always shows. */
  .sd-stats:not(.sd-stats--editor):not(:has(.sd-stats__value)) {
    display: none;
  }
  .sd-stats__item--hint {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
  }
  .sd-stats__hint {
    font-family: var(--font-body--family);
    font-size: 13px;
    line-height: 1.5;
    color: var(--sd-ink-soft);
    max-width: 22ch;
  }
  .sd-stats__inner {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-stats__eyebrow {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sd-violet);
    margin-block-end: 10px;
  }
  .sd-stats__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.12;
    color: var(--sd-ink);
    margin: 0;
  }
  .sd-stats__row {
    display: grid;
    grid-template-columns: repeat(var(--sd-stats-cols, 3), 1fr);
    max-width: 1100px;
    margin-block-start: 52px;
  }
  .sd-stats__item {
    padding-inline: 20px;
  }
  .sd-stats__item + .sd-stats__item {
    border-inline-start: 1px solid rgba(51, 47, 43, 0.1);
  }
  /* Heading face, matching .sd-stats__heading above and the hero/ring numbers
     below — every figure in this section now reads as one family. It was on the
     body face at 700, which showed up as a different typeface beside the
     heading it sits under. */
  .sd-stats__value {
    display: block;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(48px, 5.5vw, 76px);
    line-height: 1;
    color: var(--sd-violet);
    margin-block-end: 14px;
  }
  .sd-stats__label {
    font-family: var(--font-body--family);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--sd-ink-soft);
  }

  @media (max-width: 860px) {
    .sd-stats__row {
      grid-template-columns: 1fr;
    }
    .sd-stats__item + .sd-stats__item {
      border-inline-start: none;
      border-block-start: 1px solid rgba(51, 47, 43, 0.1);
      margin-block-start: 26px;
      padding-block-start: 26px;
    }
  }

  /* ---- Hero stat: one oversized number + the sentence it belongs to ---- */
  .sd-stats__hero { margin-block-start: 44px; }
  .sd-stats__hero-value {
    display: block;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(64px, 8vw, 118px);
    line-height: 1;
    color: var(--sd-violet);
  }
  .sd-stats__hero-text {
    font-family: var(--font-body--family);
    font-size: clamp(14px, 1.3vw, 16.5px);
    line-height: 1.6;
    color: var(--sd-ink-soft);
    max-width: 62ch;
    margin: 18px auto 0;
  }
  .sd-stats__hero-text b { color: var(--sd-ink); font-weight: 600; }

  /* ---- Ring style: each stat becomes a card with a progress donut ---- */
  .sd-stats__row--ring {
    gap: 20px;
    margin-block-start: 44px;
  }
  /* No border: the cards read as open space around each ring rather than as
     boxed tiles. The canvas background is kept so a card still separates itself
     from a whisper/rose surface. */
  .sd-stats__row--ring .sd-stats__item--card {
    background: var(--sd-canvas);
    border-radius: var(--sd-radius-card);
    padding: 34px 24px 30px;
  }
  /* The dividers belong to the flat row only — cards carry their own edges. */
  .sd-stats__row--ring .sd-stats__item + .sd-stats__item { border-inline-start: 0; }

  .sd-stats__ring {
    position: relative;
    width: clamp(128px, 12vw, 156px);
    margin: 0 auto 18px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }
  .sd-stats__ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Start the sweep at 12 o'clock instead of 3 o'clock. */
    transform: rotate(-90deg);
  }
  .sd-stats__ring-track,
  .sd-stats__ring-value {
    fill: none;
    stroke-width: 7;
    /* pathLength=100 in the markup, so the dash array IS a percentage scale. */
    stroke-dasharray: 100;
  }
  .sd-stats__ring-track { stroke: var(--sd-whisper-lilac); }
  .sd-stats__ring-value {
    stroke: var(--sd-violet);
    stroke-linecap: round;
    /* Fully empty until JS counts it up; the number beside it is authored text,
       so a JS-less visitor still gets the real figure. */
    stroke-dashoffset: 100;
  }
  /* No JS / no <sd-count>: show the ring complete rather than an empty circle
     that would read as 0%. :has is progressive — where unsupported the ring is
     simply empty and the authored number still carries the truth. */
  .sd-stats__ring:not(:has(sd-count)) .sd-stats__ring-value { stroke-dashoffset: 0; }

  .sd-stats__ring .sd-stats__value {
    position: relative;
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: clamp(30px, 3vw, 40px);
    margin-block-end: 0;
  }

  .sd-stats__title {
    display: block;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.3;
    color: var(--sd-ink);
    margin-block-end: 8px;
  }

  /* ---- Closing quote ---- */
  .sd-stats__quote {
    font-family: var(--font-accent--family);
    font-style: var(--font-accent--style, italic);
    font-size: clamp(17px, 2vw, 25px);
    line-height: 1.45;
    color: var(--sd-ink);
    max-width: 46ch;
    margin: 46px auto 0;
  }

  @media (max-width: 860px) {
    .sd-stats__row--ring { gap: 16px; }
    /* Cards already separate themselves; the flat-row divider rules would add a
       second, doubled edge on mobile. */
    .sd-stats__row--ring .sd-stats__item + .sd-stats__item {
      border-block-start: 0;
      margin-block-start: 0;
      padding-block-start: 34px;
    }
  }

  /* Accent numerals: violet by default, deep rose the one alternative.
     Both contrast-validated against this section's ground. */
  .sd-stats--num-rose .sd-stats__value,
  .sd-stats--num-rose .sd-stats__hero-value { color: var(--sd-rose-deep); }
  .sd-stats--num-rose .sd-stats__ring-value { stroke: var(--sd-rose-deep); }
/* END_SECTION:sorandi-stats */

/* START_SECTION:sorandi-step-carousel (INDEX:73) */
.sd-swc {
    padding-block: var(--sd-swc-pt) var(--sd-swc-pb);
    overflow: hidden;
    position: relative;
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-swc {
      padding-block: var(--sd-swc-pt-mobile, var(--sd-swc-pt)) var(--sd-swc-pb-mobile, var(--sd-swc-pb));
    }
  }
  /* Merchant background override. Only bites when a colour was picked, so the
     .sd-surface--* token default (and the rebrand path) is otherwise untouched. */
  .sd-swc--bg-custom {
    background: var(--sd-swc-bg);
  }
  .sd-swc--hairline {
    border-block-start: 1px solid var(--sd-hairline);
  }

  /* Container for the slot sizing below. Slots are a fraction of THIS box, not
     of 100vw: the section may sit inside a page-width wrapper, and vw units
     would then make each slot wider than the band — which shows up as one more
     word on screen than was asked for, spilling past both edges. */
  .sd-swc__viewport {
    display: block;
    width: 100%;
    overflow: hidden;
    container-type: inline-size;
    container-name: sd-swc;
  }

  /* Spacing is single-sourced on the ITEM (padding-inline below), not here.
     A flex `gap` on top of that padding double-spaces every slot and makes the
     merchant's Gap setting a no-op, so there is deliberately no gap here. */
  .sd-swc__track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
  }

  /* STEPPED, NOT A BELT.
     <sd-step-carousel> owns the transform: it jumps one item, rests, then jumps
     again, so a word parks at the centre long enough for its image to read. A
     constant-rate keyframe cannot hold that pause, so there is deliberately no
     animation here — only the easing and timings the component reads.
     Pause-on-hover and the off-screen stop are handled in JS for the same
     reason: there is no CSS animation to set animation-play-state on. */
  .sd-swc__track {
    --sd-swc-ease: cubic-bezier(0.45, 0, 0.25, 1);
  }

  /* EXACTLY N SLOTS ON SCREEN (default 3).
     Width is 100/N of the BAND (cqw, not vw) so the count holds whether the
     section is full-bleed or inside a page-width wrapper. Every slot is
     identical, so the step distance is constant and the rhythm reads as even —
     a content-sized slot cannot do that, since "TOOLS" and "MOISTURISER" would
     take different turns to cross.
     box-sizing matters: the inline padding is the gap, and it has to come OUT
     of the slot rather than add to it, or N slots overflow the band and an
     extra word appears at the edges.
     The word itself is centred in the slot and free to be narrower. */
  .sd-swc__item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    box-sizing: border-box;
    width: calc(100cqw / var(--sd-swc-per-view, 3));
    padding-inline: calc(var(--sd-swc-gap, 20px) / 2);
    min-height: 190px;
  }

  /* Stays on one line, but must not spill past its slot now that the slot is a
     fixed 1/N of the viewport — a long word would otherwise run under its
     neighbour. Capped to the slot minus its gap; the browser only compresses
     the words that actually need it. */
  .sd-swc__word {
    font-family: var(--font-heading--family);
    font-weight: 500;
    /* Merchant-set ceiling, still fluid below it. The authored design was
       clamp(38px, 3.4vw, 54px); the floor and the fluid rate are now derived from
       the setting so the whole curve scales with it — a floor left at a fixed 38px
       would sit ABOVE the cap the moment the merchant picked anything smaller, and
       clamp() would then silently pin every word to 38px.
       --sd-swc-word-n is the same number WITHOUT a unit (set in Liquid): the fluid
       term has to stay a pure length, and calc() cannot multiply px by vw, so the
       viewport unit is scaled by that unitless number instead.
       Ratios come straight from the authored values: 38/54 = 0.704 floor,
       3.4/54 = 0.063 vw per px of cap. */
    font-size: clamp(
      calc(var(--sd-swc-word-size, 54px) * 0.704),
      calc(var(--sd-swc-word-n, 54) * 0.063 * 1vw),
      var(--sd-swc-word-size, 54px)
    );
    line-height: 1;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    /* These ARE links (collection or custom). Without this they read as inert
       display type, which is how the band ended up looking unclickable even
       once the href was restored on the visible copies. */
    cursor: pointer;
    color: var(--sd-swc-word);
    /* opacity is in the list so the centre fade eases in with the step instead
       of snapping the moment the class lands. */
    transition: color 0.5s, opacity 0.5s, transform 0.5s;
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- Word style ----
     TWO legitimate treatments, merchant-selectable, because they serve
     different jobs and the trade-off is real:

     "soft"  — the reference look: words recede to a pale lilac tint so the
       centred product shot is the only thing that reads. Derived from the brand
       anchor via color-mix (NOT the mockup's fixed #E9E0F1) so it still follows
       a rebrand. At ~1.3:1 this is BELOW the AA text floor, which is acceptable
       here ONLY because the words are decorative repetition of links that also
       exist in the nav — and it is why the centred word jumps to full anchor
       colour and why this is not the choice when the carousel is a page's only
       route to those collections.

     "legible" — inactive words at ink-soft, clearing 4.5:1. The safer default
       when this band IS the navigation. Matches the 18 Jul ruling on the sibling
       word marquee. */
  .sd-swc {
    --sd-swc-word: color-mix(in oklab, var(--sd-violet) 16%, white);
    /* Soft mode holds the centred word only slightly darker than its
       neighbours — in the reference the PRODUCT IMAGE is what marks the centre,
       not a colour jump. Legible mode uses the full anchor instead. */
    --sd-swc-word-center: color-mix(in oklab, var(--sd-violet) 26%, white);
  }
  .sd-swc--words-legible {
    --sd-swc-word: var(--sd-ink-soft);
    --sd-swc-word-center: var(--sd-violet);
  }

  /* Both variables above are overridable per section by the Word colour /
     Centred word colour settings, which write them as INLINE custom properties
     on the root. Inline styles outrank any stylesheet rule, so a picked colour
     wins over the Word style preset without needing !important — and the two
     pickers are independent, so setting one leaves the other on its preset.
     They feed `color` on .sd-swc__word only: the background, the cutout image
     and every other part of the band are untouched.
     Contrast note: the "soft" preset is deliberately below the AA text floor
     (see above) and a hand-picked colour can be too. These words repeat links
     that also exist in the nav, which is what makes that acceptable; if this
     band is a page's only route to those collections, pick colours clearing
     4.5:1. */

  /* The cutout floats OVER the word (z-index 2) — the reference treatment, and
     the reason this is a transparent PNG rather than a boxed thumbnail. It never
     participates in layout, so it cannot shift the label. */
  .sd-swc__reveal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -38%) scale(0.8);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s cubic-bezier(0.22, 0.8, 0.3, 1),
                transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1);
    filter: drop-shadow(0 10px 24px rgba(51, 47, 43, 0.14));
  }
  .sd-swc__img {
    display: block;
    height: var(--sd-swc-img-h, 180px);
    width: auto;
    object-fit: contain;
  }

  /* The centred word FADES BACK rather than coming forward. The cutout product
     shot lands on top of it at exactly this moment, and a word at full strength
     competes with the product for the eye — dropping it lets the image lead,
     which is the whole point of parking a word at the centre.
     Opacity, not a lighter colour: it works on top of whatever colour the word
     already has, including a per-block Text colour, so one rule covers every
     word without having to derive a paler variant of each. */
  .sd-swc__item--center .sd-swc__word {
    color: var(--sd-swc-word-center);
    opacity: var(--sd-swc-center-opacity, 0.35);
    transform: scale(1.04);
  }
  /* Must keep the SAME translate axis as the base rule — only the Y offset and
     scale settle. Changing the X here slides the cutout sideways as it reveals. */
  .sd-swc__item--center .sd-swc__reveal {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .sd-swc--fade .sd-swc__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }

  .sd-swc--empty {
    padding: 24px;
    text-align: center;
    color: var(--sd-ink-soft);
    font-family: var(--font-body--family);
    font-size: 14px;
    border: 1px dashed var(--sd-hairline);
    border-radius: var(--sd-radius-card, 12px);
    margin: 24px auto;
    max-width: 520px;
  }

  /* Phones cap the count rather than the px width: three full-size words cannot
     fit a 390px screen at any legible size, so the merchant's choice is clamped
     down here instead of producing three cramped, ellipsised slots. min() keeps
     a lower authored value (1 or 2) intact. */
  @media (max-width: 860px) {
    .sd-swc__item {
      width: calc(100cqw / min(var(--sd-swc-per-view, 3), 2));
      min-height: 140px;
    }
    /* Smaller here so long words fit their slot whole instead of ellipsising.
       At 9vw a word like "MOISTURISER" overflowed a 1/2-viewport slot and got
       cut to "MOISTURI…"; 5.4vw clears the longest realistic step label at
       360px, and the px cap stops it growing back past the slot on wider
       phones. The ellipsis rule stays as the last-resort guard. */
    .sd-swc__word {
      /* Same shape as the authored min(5.4vw, 26px), with the cap now merchant-set
         and the fluid rate scaled to match (5.4/26 = 0.2077 vw per px of cap), so
         raising the setting does not just hit a fixed 5.4vw wall on a 360px phone.
         The ellipsis rule above stays as the last-resort guard for long words. */
      font-size: min(
        calc(var(--sd-swc-word-n-mobile, 26) * 0.2077 * 1vw),
        var(--sd-swc-word-size-mobile, 26px)
      );
      letter-spacing: 0.03rem;
    }
    .sd-swc__img {
      height: calc(var(--sd-swc-img-h, 180px) * 0.66);
    }
  }

  /* ---- Motion gate ----
     Both halves of the house rule land on the same static presentation: no
     stepping, and the authored run wraps into a centred readable row. The
     component makes the matching decision and skips cloning and the timer. */
  @media (prefers-reduced-motion: reduce) {
    .sd-swc--ready .sd-swc__track,
    .sd-swc__track {
      /* !important because the component writes transform/transition INLINE.
         It skips that work entirely under reduced motion, so normally there is
         nothing to override — this only guards the case where the preference is
         switched on after the carousel has already stepped. */
      transform: none !important;
      transition: none !important;
      width: auto;
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 16px;
    }
    .sd-swc__word,
    .sd-swc__reveal {
      transition: none;
    }
  }

  .sd-motion-minimal .sd-swc--ready .sd-swc__track,
  .sd-motion-minimal .sd-swc__track {
    transform: none !important;
    transition: none !important;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 16px;
  }
  .sd-motion-minimal .sd-swc__word,
  .sd-motion-minimal .sd-swc__reveal {
    transition: none;
  }
/* END_SECTION:sorandi-step-carousel */

/* START_SECTION:sorandi-story-split (INDEX:74) */
.sd-story {
    padding-block: var(--sd-story-pt) var(--sd-story-pb);
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-story {
      padding-block: var(--sd-story-pt-mobile, var(--sd-story-pt)) var(--sd-story-pb-mobile, var(--sd-story-pb));
    }
  }
  .sd-story__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(36px, 5vw, 72px);
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  /* Default: image left. Image right swaps order. */
  .sd-story--img-right .sd-story__inner {
    direction: rtl;
  }
  .sd-story--img-right .sd-story__copy,
  .sd-story--img-right .sd-story__media {
    direction: ltr;
  }

  .sd-story__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3.4;
  }
  .sd-story__media--rounded {
    border-radius: 24px;
  }
  .sd-story__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sd-story__img--placeholder {
    background: var(--sd-whisper-lilac);
  }

  /* Image aspect ratio (Image ▸ Aspect ratio). "landscape" is the default and
     the historic behaviour — the 4/3.4 box the section has always used. */
  .sd-story--ar-square .sd-story__media { aspect-ratio: 1 / 1; }
  .sd-story--ar-portrait45 .sd-story__media { aspect-ratio: 4 / 5; }
  .sd-story--ar-portrait34 .sd-story__media { aspect-ratio: 3 / 4; }

  /* Natural: the image's own proportions decide the box, so it flows instead of
     being absolutely positioned. The placeholder SVG has no intrinsic size, so
     it keeps the default box. */
  .sd-story--ar-natural .sd-story__media { aspect-ratio: auto; }
  .sd-story--ar-natural .sd-story__img {
    position: static;
    height: auto;
    object-fit: contain;
  }
  .sd-story--ar-natural .sd-story__media:has(.sd-story__img--placeholder) {
    aspect-ratio: 4 / 3.4;
  }

  .sd-story__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .sd-story__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sd-violet);
    margin-block-end: 12px;
  }
  .sd-story__eyebrow--dash::before {
    content: "";
    width: 26px;
    height: 1.5px;
    background: var(--sd-violet);
  }
  .sd-story__title {
    margin: 0 0 16px;
    color: var(--sd-ink);
  }
  .sd-story--h-serif .sd-story__title {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.12;
  }
  .sd-story--h-sans .sd-story__title {
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.12;
  }
  .sd-story__accent {
    font-family: var(--font-accent--family);
    font-style: italic;
    font-weight: 500;
    color: var(--sd-violet);
  }
  .sd-story__body {
    font-family: var(--font-body--family);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--sd-ink-soft);
    max-width: 470px;
  }
  .sd-story__body > * + * {
    margin-block-start: 16px;
  }

  /* Ghost / secondary button */
  .sd-story__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-block-start: 28px;
    padding: 14px 32px;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--sd-violet);
    background: transparent;
    border: 1.5px solid var(--sd-violet);
    border-radius: var(--sd-radius-pill);
    text-decoration: none;
    transition: background 0.25s, color 0.25s;
  }
  .sd-story__cta:hover,
  .sd-story__cta:focus-visible {
    background: var(--sd-violet);
    color: #fff;
  }

  @media (max-width: 860px) {
    .sd-story__inner {
      grid-template-columns: 1fr;
      gap: 36px;
    }
    .sd-story--img-right .sd-story__inner {
      direction: ltr;
    }

    /* ---- Centred on mobile ----
       Stacked single column, so the copy reads better centred under the image.
       .sd-story__copy is a flex column pinned to flex-start at desktop; that
       has to be overridden or the eyebrow and CTA stay left even with
       text-align set, since both are inline-flex boxes rather than text. */
    .sd-story__copy {
      text-align: center;
      align-items: center;
    }
    /* The body carries a max-width, so it needs auto margins to sit centrally
       instead of hugging the left edge. */
    .sd-story__body {
      margin-inline: auto;
    }
  }
/* END_SECTION:sorandi-story-split */

/* START_SECTION:sorandi-support-split (INDEX:75) */
.sd-sup { padding-block: var(--sd-sup-pt) var(--sd-sup-pb); }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-sup {
      padding-block: var(--sd-sup-pt-mobile, var(--sd-sup-pt)) var(--sd-sup-pb-mobile, var(--sd-sup-pb));
    }
  }
  /* FULL-BLEED, per the mockup: the support hero deliberately skips the 1420px
     container so the photo runs to the viewport edge. Copy pane padding matches
     the reference (64px block, clamp(24px,5vw,88px) inline). */
  .sd-sup__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    min-height: 520px;
    width: 100%;
  }
  .sd-sup--img-right .sd-sup__inner { direction: rtl; }
  .sd-sup--img-right .sd-sup__copy, .sd-sup--img-right .sd-sup__media { direction: ltr; }
  .sd-sup__copy { padding: 64px clamp(24px, 5vw, 88px); }

  /* Edge-to-edge media: no rounding on the bleed variant. */
  .sd-sup__media { position: relative; overflow: hidden; min-height: 100%; }
  .sd-sup__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .sd-sup__img--placeholder { background: var(--sd-whisper-lilac); }

  /* Image aspect ratio (Image ▸ Aspect ratio), same options and behaviour as
     sorandi-hero-split. "fill" is the default and keeps the historic
     edge-to-edge look: the media stretches to the grid's min-height, so these
     rules must beat that and therefore repeat min-height.

     Scoped to >=861px because below that the section stacks and the mobile
     rule (.sd-sup__media { aspect-ratio: 4/3 }) governs — the two would
     otherwise collide. */
  @media (min-width: 861px) {
    .sd-sup--ar-square .sd-sup__media,
    .sd-sup--ar-portrait45 .sd-sup__media,
    .sd-sup--ar-portrait34 .sd-sup__media {
      min-height: 0;
      align-self: center;
    }
    .sd-sup--ar-square .sd-sup__media { aspect-ratio: 1 / 1; }
    .sd-sup--ar-portrait45 .sd-sup__media { aspect-ratio: 4 / 5; }
    .sd-sup--ar-portrait34 .sd-sup__media { aspect-ratio: 3 / 4; }

    /* Natural: the image's own proportions decide the box, so it can no longer
       be absolutely positioned — it flows and gives the media its height. */
    .sd-sup--ar-natural .sd-sup__media {
      aspect-ratio: auto;
      min-height: 0;
      align-self: center;
    }
    .sd-sup--ar-natural .sd-sup__img {
      position: static;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  .sd-sup__eyebrow { display: inline-block; font-family: var(--font-body--family); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sd-violet); margin-block-end: 10px; }
  .sd-sup__heading { font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1.1; color: var(--sd-ink); margin: 0 0 16px; }
  .sd-sup__body { font-family: var(--font-body--family); font-size: 16px; line-height: 1.7; color: var(--sd-ink-soft); max-width: 46ch; margin: 0 0 26px; }

  .sd-sup__card {
    background: var(--sd-whisper-lilac);
    border: 1px solid var(--sd-hairline);
    border-radius: 16px;
    padding: 22px 24px;
    margin-block-end: 20px;
  }
  .sd-sup__card-h { display: block; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sd-ink-soft); margin-block-end: 8px; }
  .sd-sup__email { font-family: var(--font-heading--family); font-size: clamp(20px, 2.2vw, 26px); color: var(--sd-violet); text-decoration: none; }
  .sd-sup__email:hover { text-decoration: underline; }
  .sd-sup__hours { font-family: var(--font-body--family); font-size: 13.5px; color: var(--sd-ink-soft); margin: 8px 0 0; }

  .sd-sup__form { display: flex; flex-direction: column; gap: 12px; }
  .sd-sup__input {
    border: 1px solid var(--sd-hairline);
    background: var(--sd-canvas);
    border-radius: 12px;
    padding: 14px 18px;
    font-family: var(--font-body--family);
    font-size: 14px;
    color: var(--sd-ink);
    outline: none;
  }
  .sd-sup__input:focus-visible { border-color: var(--sd-violet); }
  .sd-sup__textarea { min-height: 120px; resize: vertical; }
  .sd-sup__submit {
    align-self: flex-start;
    min-height: 44px;
    padding: 14px 32px;
    font-family: var(--font-body--family); font-size: 15px; font-weight: 500; letter-spacing: .04em;
    color: #fff; background: var(--sd-violet); border: 1.5px solid var(--sd-violet); border-radius: var(--sd-radius-pill); cursor: pointer; transition: background .25s;
  }
  .sd-sup__submit:hover, .sd-sup__submit:focus-visible { background: var(--sd-violet-hover); }
  .sd-sup__ok { font-family: var(--font-body--family); color: var(--sd-violet); }
  .sd-sup__err { font-family: var(--font-body--family); color: var(--sd-ink); font-size: 13px; }

  @media (max-width: 860px) {
    .sd-sup__inner { grid-template-columns: 1fr; gap: 32px; }
    .sd-sup--img-right .sd-sup__inner { direction: ltr; }
    .sd-sup__media { min-height: 0; aspect-ratio: 4 / 3; }
  }
/* END_SECTION:sorandi-support-split */

/* START_SECTION:sorandi-trust-ticker (INDEX:76) */
.sd-tick {
    background: var(--sd-violet);
    overflow: hidden;
    padding-block: 14px;
  }
  .sd-tick__viewport { display: block; width: 100%; overflow: hidden; }
  .sd-tick__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: sd-tick-scroll 32s linear infinite;
  }
  .sd-tick__viewport:hover .sd-tick__track { animation-play-state: paused; }
  .sd-tick__item {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-inline: 22px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
  }
  .sd-tick__item::before {
    content: "·";
    color: rgba(255, 255, 255, 0.55);
  }
  @keyframes sd-tick-scroll { to { transform: translateX(-50%); } }

  @media (prefers-reduced-motion: reduce) {
    .sd-tick__track { animation: none; flex-wrap: wrap; justify-content: center; }
  }
/* END_SECTION:sorandi-trust-ticker */

/* START_SECTION:sorandi-ugc-strip (INDEX:77) */
.sd-ugc { padding-block: var(--sd-ugc-pt) var(--sd-ugc-pb); overflow: hidden; }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-ugc {
      padding-block: var(--sd-ugc-pt-mobile, var(--sd-ugc-pt)) var(--sd-ugc-pb-mobile, var(--sd-ugc-pb));
    }
  }
  .sd-ugc__inner { width: 100%; max-width: 1420px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }
  .sd-ugc__eyebrow {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sd-violet);
    margin-block-end: 10px;
  }
  .sd-ugc__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(24px, 3vw, 38px);
    color: var(--sd-ink);
    text-align: center;
    margin: 0 0 28px;
  }
  .sd-ugc__viewport { display: block; width: 100%; overflow: hidden; }
  .sd-ugc__track {
    display: flex;
    align-items: flex-start;
    width: max-content;
    animation: sd-ugc-scroll 45s linear infinite;
  }
  .sd-ugc__viewport:hover .sd-ugc__track { animation-play-state: paused; }
  .sd-ugc__tile { flex: none; width: 240px; margin-inline: 8px; }
  .sd-ugc__img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 16px;
    display: block;
  }
  .sd-ugc__img--placeholder { background: var(--sd-whisper-lilac); }
  .sd-ugc__handle {
    display: block;
    margin-block-start: 8px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 600;
    color: var(--sd-violet);
    text-align: center;
    text-decoration: none;
  }
  a.sd-ugc__handle:hover { text-decoration: underline; }

  @media (prefers-reduced-motion: reduce) {
    .sd-ugc__track { animation: none; flex-wrap: wrap; justify-content: center; gap: 16px; }
  }
  @keyframes sd-ugc-scroll { to { transform: translateX(-50%); } }

  .sd-ugc--empty {
    padding: 24px; text-align: center; color: var(--sd-ink-soft);
    font-family: var(--font-body--family); font-size: 14px;
    border: 1px dashed var(--sd-hairline); border-radius: 12px;
    margin: 24px auto; max-width: 480px;
  }
/* END_SECTION:sorandi-ugc-strip */

/* START_SECTION:sorandi-ugc-testimonial-grid (INDEX:78) */
.sd-ugcg {
    padding-block: var(--sd-ugcg-pt) var(--sd-ugcg-pb);
  }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-ugcg {
      padding-block: var(--sd-ugcg-pt-mobile, var(--sd-ugcg-pt)) var(--sd-ugcg-pb-mobile, var(--sd-ugcg-pb));
    }
  }
  .sd-ugcg__inner {
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-ugcg__eyebrow {
    display: block;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sd-violet);
    margin-block-end: 10px;
  }
  .sd-ugcg__heading {
    text-align: center;
    max-width: 620px;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.12;
    /* Falls back to the brand ink token when no override is picked. */
    color: var(--sd-ugcg-heading-color, var(--sd-ink));
    margin: 0 auto 36px;
  }

  /* ---- The mosaic ----
     Desktop = 5 columns x 3 rows, hero 2x2 top-left and quote 2x2
     bottom-right, with seven photo slots filling the rest:

       hero hero  p1   p2    p3
       hero hero  p4  quote quote
        p5   p6   p7  quote quote

     Row height is set EXPLICITLY on the grid rather than by the tiles, which is
     what lets the 2x2 hero and quote coexist with 1x1 photos. Each row is one
     photo-cell tall, so a 2x2 tile is naturally two rows plus the gap.

     The row height must come from a real width unit — a percentage in
     grid-template-rows resolves against the grid's own (unknown) height and
     collapses to zero. --sd-ugcg-cw is therefore the grid's width expressed in
     vw: the inner wrapper is min(1420px, 100vw - padding), so one column is
     that minus four gaps, over five. min() keeps it correct on both sides of
     the max-width. */
  .sd-ugcg__grid {
    --sd-ugcg-par: 1.25;   /* photo cell height per unit width (4/5 -> 1.25) */
    --sd-ugcg-har: 1;      /* hero  ratio, applied as a multiplier below */
    --sd-ugcg-qar: 1;      /* quote ratio, applied as a multiplier below */

    /* Grid width, then one column width, in absolute terms. */
    --sd-ugcg-gw: min(1420px - 2 * clamp(16px, 4vw, 24px), 100vw - 2 * clamp(16px, 4vw, 24px));
    --sd-ugcg-cw: calc((var(--sd-ugcg-gw) - 4 * var(--sd-ugcg-gap, 16px)) / 5);

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: calc(var(--sd-ugcg-cw) * var(--sd-ugcg-par));
    gap: var(--sd-ugcg-gap, 16px);
    grid-template-areas:
      "hero hero p1 p2    p3"
      "hero hero p4 quote quote"
      "p5   p6   p7 quote quote";
  }

  /* By default the hero and quote simply FILL the 2x2 area their grid-area
     gives them — that is the comp. The ratio controls below opt them out of
     that by giving them a real aspect-ratio instead. */
  .sd-ugcg__tile--hero,
  .sd-ugcg__tile--quote {
    height: 100%;
  }

  /* Photo ratio — drives the row height, so it governs the whole mosaic. */
  .sd-ugcg--par-square .sd-ugcg__grid { --sd-ugcg-par: 1; }
  .sd-ugcg--par-portrait34 .sd-ugcg__grid { --sd-ugcg-par: 1.3333; }
  .sd-ugcg--par-portrait45 .sd-ugcg__grid { --sd-ugcg-par: 1.25; }
  .sd-ugcg--par-landscape43 .sd-ugcg__grid { --sd-ugcg-par: 0.75; }
  .sd-ugcg--par-landscape169 .sd-ugcg__grid { --sd-ugcg-par: 0.5625; }

  /* Hero video ratio — sizes the hero's 2x2 block. Default "block" keeps the
     comp's exact 2x2; the fixed ratios override it to a true aspect-ratio and
     let the hero break out of the block if you want a different shape. */
  .sd-ugcg--har-square .sd-ugcg__tile--hero { aspect-ratio: 1 / 1; height: auto; }
  .sd-ugcg--har-portrait34 .sd-ugcg__tile--hero { aspect-ratio: 3 / 4; height: auto; }
  .sd-ugcg--har-portrait45 .sd-ugcg__tile--hero { aspect-ratio: 4 / 5; height: auto; }
  .sd-ugcg--har-landscape43 .sd-ugcg__tile--hero { aspect-ratio: 4 / 3; height: auto; }
  .sd-ugcg--har-landscape169 .sd-ugcg__tile--hero { aspect-ratio: 16 / 9; height: auto; }

  /* Quote ratio. "block" (default) fills the 2x2; "auto" lets the panel grow to
     fit long quotes — text cannot crop the way a photo does. */
  .sd-ugcg--qar-square .sd-ugcg__tile--quote { aspect-ratio: 1 / 1; height: auto; }
  .sd-ugcg--qar-portrait34 .sd-ugcg__tile--quote { aspect-ratio: 3 / 4; height: auto; }
  .sd-ugcg--qar-portrait45 .sd-ugcg__tile--quote { aspect-ratio: 4 / 5; height: auto; }
  .sd-ugcg--qar-landscape43 .sd-ugcg__tile--quote { aspect-ratio: 4 / 3; height: auto; }
  .sd-ugcg--qar-landscape169 .sd-ugcg__tile--quote { aspect-ratio: 16 / 9; height: auto; }
  .sd-ugcg--qar-auto .sd-ugcg__tile--quote { aspect-ratio: auto; height: auto; }

  .sd-ugcg__tile--hero { grid-area: hero; }
  .sd-ugcg__tile--quote { grid-area: quote; }
  .sd-ugcg__tile--p1 { grid-area: p1; }
  .sd-ugcg__tile--p2 { grid-area: p2; }
  .sd-ugcg__tile--p3 { grid-area: p3; }
  .sd-ugcg__tile--p4 { grid-area: p4; }
  .sd-ugcg__tile--p5 { grid-area: p5; }
  .sd-ugcg__tile--p6 { grid-area: p6; }
  .sd-ugcg__tile--p7 { grid-area: p7; }

  .sd-ugcg__tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--sd-radius-card, 18px);
    background: var(--sd-whisper-lilac);
    min-width: 0;
    min-height: 0;
  }
  .sd-ugcg__img,
  .sd-ugcg__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Hero video trigger — the whole tile is the play control. */
  .sd-ugcg__trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: var(--sd-whisper-lilac);
    cursor: pointer;
  }
  .sd-ugcg__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  .sd-ugcg__play::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 15px solid var(--sd-ink);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    margin-left: 4px;
  }
  sd-video[data-playing] .sd-ugcg__play { opacity: 0; }

  /* Poster image — the layer that actually shows before playback. It stacks
     above the trigger's flat background and below the play badge (z-index 3).
     Hidden once playback starts so it never covers the running video; if the
     JS never upgrades, data-playing is never set and the poster simply stays,
     which is the correct no-JS end state.

     The same class also carries the poster-only hero (no video picked). There
     the tile has no trigger and no video to sit above, so the z-index is inert
     and the data-playing rule never matches — it just fills the tile. */
  .sd-ugcg__poster {
    z-index: 1;
    pointer-events: none;
  }
  sd-video[data-playing] .sd-ugcg__poster {
    opacity: 0;
    visibility: hidden;
  }

  /* Quote tile — the comp's soft rose panel. Colour derives from the brand
     whisper-rose token, so it re-skins with the anchor rather than pinning a
     hex (five-minute-rebrand rule). */
  .sd-ugcg__tile--quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Falls back to the brand whisper-rose token when no override is picked, so
       the panel keeps re-skinning with the anchor by default. */
    background: var(--sd-ugcg-quote-bg, var(--sd-whisper-rose));
    padding: clamp(24px, 3vw, 44px);
    margin: 0;
    /* The panel now carries a fixed ratio, so a long quote can exceed it. Text
       cannot crop the way a photo does — allow the panel to grow past its ratio
       rather than let overflow:hidden clip a real customer quote. The Auto
       ratio option removes the floor entirely. */
    height: auto;
    min-height: 100%;
  }
  .sd-ugcg__quote-label {
    font-family: var(--font-accent--family);
    font-style: italic;
    font-size: clamp(15px, 1.4vw, 19px);
    color: var(--sd-violet);
    margin-block-end: 14px;
  }
  .sd-ugcg__quote {
    font-family: var(--font-body--family);
    font-size: clamp(17px, 1.7vw, 25px);
    font-weight: 500;
    line-height: 1.42;
    color: var(--sd-ink);
    margin: 0;
  }

  /* Editor-only slot hints, so an unfilled mosaic still reads as a mosaic.
     With no photo blocks present there are no 1x1 tiles to establish the row
     height, so the empty hero/quote placeholders would collapse to their text.
     A min-height keeps the mosaic legible while it is still being filled. */
  .sd-ugcg__tile--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--sd-hairline);
    font-family: var(--font-body--family);
    font-size: 12.5px;
    color: var(--sd-ink-soft);
    text-align: center;
    min-height: 180px;
  }

  /* ---- Mobile ----
     The comp's phone layout is a DIFFERENT arrangement, not a reflow. Three
     columns: the hero sits 2x2 top-left with two photos stacked in the third
     column, then a full three-photo row, then the last photo with the quote
     beside it at 2 cols x 2 rows:

       hero hero  p1
       hero hero  p2
        p3   p4   p5
        p6  quote quote
        p7  quote quote

     All seven photos are placed explicitly — an unnamed slot would auto-place
     into the first free cell and land somewhere unintended.

     Only the column count changes in the row maths — the photo ratio still
     drives row height, so all three controls behave the same as on desktop. */
  @media (max-width: 860px) {
    .sd-ugcg__grid {
      /* 3 columns now, so one column = (grid width - 2 gaps) / 3. */
      --sd-ugcg-cw: calc((var(--sd-ugcg-gw) - 2 * var(--sd-ugcg-gap, 16px)) / 3);

      grid-template-columns: repeat(3, 1fr);
      grid-template-areas:
        "hero hero  p1"
        "hero hero  p2"
        "p3   p4    p5"
        "p6   quote quote"
        "p7   quote quote";
    }

    .sd-ugcg__quote { font-size: 16px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sd-ugcg__play { transition: none; }
  }
/* END_SECTION:sorandi-ugc-testimonial-grid */

/* START_SECTION:sorandi-values-cards (INDEX:79) */
.sd-val { padding-block: var(--sd-val-pt) var(--sd-val-pb); }
  /* Mobile carries its own pair of settings rather than inheriting the desktop
     px values: a band tuned for a wide viewport eats a third of a phone
     screen, and two stacked sections then read as one large empty gap.
     Only the custom properties differ, so the two cannot drift. */
  @media (max-width: 860px) {
    .sd-val {
      padding-block: var(--sd-val-pt-mobile, var(--sd-val-pt)) var(--sd-val-pb-mobile, var(--sd-val-pb));
    }
  }
  .sd-val__inner { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }
  .sd-val__head { text-align: center; margin-block-end: 40px; }
  .sd-val__eyebrow {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--sd-violet); margin-block-end: 10px;
  }
  .sd-val__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.12;
    color: var(--sd-ink);
    margin: 0;
  }
  .sd-val__grid {
    display: grid;
    grid-template-columns: repeat(var(--sd-val-cols, 3), 1fr);
    gap: 20px;
  }
  .sd-val__card {
    background: var(--sd-canvas);
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-card);
    padding: 32px 30px;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .sd-val__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(51, 47, 43, 0.08);
  }
  .sd-val__num {
    display: block;
    font-family: var(--font-heading--family);
    font-size: 32px;
    color: var(--sd-champagne); /* the one sanctioned sparing champagne detail */
    margin-block-end: 14px;
  }
  .sd-val__title {
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 600;
    color: var(--sd-ink);
    margin: 0 0 8px;
  }
  .sd-val__text {
    font-family: var(--font-body--family);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--sd-ink-soft);
    margin: 0;
  }

  @media (max-width: 860px) {
    .sd-val__grid { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-val__card { transition: none; }
  }

  /* Accent numerals: violet by default, deep rose the one alternative.
     Both contrast-validated against this section's ground. */
  .sd-val--num-rose .sd-val__num { color: var(--sd-rose-deep); }
/* END_SECTION:sorandi-values-cards */

/* START_SECTION:sorandi-video-feature (INDEX:80) */
.sd-vf {
    padding-block: var(--sd-vf-pt) var(--sd-vf-pb);
  }
  .sd-vf__inner {
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
    text-align: center;
  }
  .sd-vf__eyebrow {
    display: block;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sd-violet);
    margin-block-end: 10px;
  }
  .sd-vf__heading {
    /* Shorthand `margin` must come before `margin-inline: auto`, or it resets
       the centring. Capped so a long head breaks into a tidy stack rather than
       running the full 1420px. */
    max-width: 900px;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(30px, 4.2vw, 52px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--sd-ink);
    margin: 0 auto 20px;
  }
  .sd-vf__body {
    max-width: 620px;
    font-family: var(--font-body--family);
    font-size: 15px;
    line-height: 1.6;
    color: var(--sd-ink-soft);
    margin: 0 auto 28px;
  }
  .sd-vf__body > :first-child { margin-block-start: 0; }
  .sd-vf__body > :last-child { margin-block-end: 0; }

  /* The media tile. --sd-vf-width is the merchant's cap; min() keeps it inside
     the padded column on narrow viewports without a second breakpoint. */
  .sd-vf__media {
    display: block;
    position: relative;
    width: min(100%, var(--sd-vf-width, 720px));
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--sd-vf-radius, 14px);
    background: var(--sd-whisper-lilac);
    overflow: hidden;
  }
  /* Tile shape — a modifier class rather than an inline custom property, the
     same shape sorandi-ugc-testimonial-grid uses. Keeps a value containing a
     slash and spaces out of the style attribute entirely. */
  .sd-vf--ar-landscape169 .sd-vf__media { aspect-ratio: 16 / 9; }
  .sd-vf--ar-landscape43 .sd-vf__media { aspect-ratio: 4 / 3; }
  .sd-vf--ar-square .sd-vf__media { aspect-ratio: 1 / 1; }
  .sd-vf--ar-portrait45 .sd-vf__media { aspect-ratio: 4 / 5; }
  .sd-vf--ar-portrait916 .sd-vf__media { aspect-ratio: 9 / 16; }
  .sd-vf__trigger {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .sd-vf__trigger:focus-visible {
    outline: 2px solid var(--sd-violet);
    outline-offset: 3px;
  }
  .sd-vf__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .sd-vf__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: var(--sd-vf-play-size, 72px);
    height: var(--sd-vf-play-size, 72px);
    border-radius: 50%;
    background: var(--sd-vf-play-bg, rgba(255, 255, 255, 0.92));
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.25s var(--sd-ease, ease), transform 0.25s var(--sd-ease, ease);
  }
  /* Triangle is a border trick, so it has no intrinsic size to scale — every
     edge is expressed as a fraction of the disc (the same 0.271 / 0.167 / 0.063
     ratios sorandi-video-reviews uses) so resizing the circle keeps the glyph in
     proportion rather than leaving a tiny arrow in a large disc. */
  .sd-vf__play::after {
    content: "";
    width: 0;
    height: 0;
    border-left: calc(var(--sd-vf-play-size, 72px) * 0.271) solid var(--sd-vf-play-fg, var(--sd-ink));
    border-top: calc(var(--sd-vf-play-size, 72px) * 0.167) solid transparent;
    border-bottom: calc(var(--sd-vf-play-size, 72px) * 0.167) solid transparent;
    margin-left: calc(var(--sd-vf-play-size, 72px) * 0.063);
  }
  .sd-vf__trigger:hover .sd-vf__play {
    transform: translate(-50%, -50%) scale(1.06);
  }
  sd-video[data-playing] .sd-vf__play {
    opacity: 0;
  }

  /* Editor-only prompt when neither picker is set. */
  .sd-vf__hint {
    width: min(100%, 480px);
    margin-inline: auto;
    padding: 24px;
    border: 1px dashed var(--sd-hairline);
    border-radius: var(--sd-vf-radius, 14px);
    background: var(--sd-whisper-lilac);
    font-family: var(--font-body--family);
    font-size: 13px;
    line-height: 1.5;
    color: var(--sd-ink-soft);
  }

  @media (max-width: 860px) {
    /* Mobile carries its own padding pair: the desktop values are tuned for a
       wide, airy band and eat a third of a short viewport when carried down. */
    .sd-vf {
      padding-block: var(--sd-vf-pt-mobile, var(--sd-vf-pt)) var(--sd-vf-pb-mobile, var(--sd-vf-pb));
    }
    .sd-vf__heading {
      font-size: clamp(24px, 7vw, 34px);
      margin-block-end: 16px;
    }
    /* The disc is capped rather than scaled: a 72px+ button set for desktop
       covers most of a phone-width poster. */
    .sd-vf__play {
      width: min(var(--sd-vf-play-size, 72px), 56px);
      height: min(var(--sd-vf-play-size, 72px), 56px);
    }
    .sd-vf__play::after {
      border-left-width: calc(min(var(--sd-vf-play-size, 72px), 56px) * 0.271);
      border-top-width: calc(min(var(--sd-vf-play-size, 72px), 56px) * 0.167);
      border-bottom-width: calc(min(var(--sd-vf-play-size, 72px), 56px) * 0.167);
      margin-left: calc(min(var(--sd-vf-play-size, 72px), 56px) * 0.063);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sd-vf__play { transition: none; }
    .sd-vf__trigger:hover .sd-vf__play { transform: translate(-50%, -50%); }
  }
/* END_SECTION:sorandi-video-feature */

/* START_SECTION:sorandi-video-reviews (INDEX:81) */
.sd-vr {
    padding-block: var(--sd-vr-pt) var(--sd-vr-pb);
  }
  /* Honesty gate: on the live storefront, hide the whole section when it has no
     real (media-bearing) card. In the editor (.sd-vr--editor) it always shows. */
  .sd-vr:not(.sd-vr--editor):not(:has(.sd-vr__media)) {
    display: none;
  }
  .sd-vr__card--hint {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 24px;
    border: 1px dashed var(--sd-hairline);
    border-radius: 20px;
    background: var(--sd-whisper-lilac);
  }
  .sd-vr__hint {
    font-family: var(--font-body--family);
    font-size: 13px;
    line-height: 1.5;
    color: var(--sd-ink-soft);
    text-align: center;
  }
  .sd-vr__inner {
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .sd-vr__eyebrow {
    display: block;
    /* Eyebrow rides with the centred head as one header block. */
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sd-violet);
    margin-block-end: 10px;
  }
  .sd-vr__heading {
    /* The reference centres this head, capped at 620px. Shorthand `margin`
       must come before `margin-inline: auto`, or it resets the centring. */
    text-align: center;
    max-width: 620px;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--sd-ink);
    margin: 0 auto 36px;
  }

  /* Rail wrapper: positions the arrows against the row, not the section. */
  .sd-vr__rail { display: block; position: relative; }

  /* Desktop is a scrolling rail, not a fixed 4-up grid. A grid of repeat(4,1fr)
     can never overflow, so <sd-rail> would never add .sd-rail--scrollable and
     the arrows would never appear. Flex + fixed-basis cards means a 5th card
     genuinely overflows and the arrows earn their place; with 4 or fewer they
     stay hidden, because the component only shows them on real overflow. */
  .sd-vr__grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* overflow-x:auto clips on BOTH axes, so the card's hover lift and shadow
       need vertical breathing room. Pad the BLOCK axis only and pull it back
       with a negative block margin.
       Deliberately NOT padding the inline axis: that shifts the row's left
       edge inward while the arrows stay positioned against the rail, so the
       two arrows end up at different distances from their card and a sliver
       of the first card shows past the left one. */
    padding-block: 6px;
    margin-block: -6px;
  }
  .sd-vr__grid::-webkit-scrollbar {
    display: none;
  }
  /* Keyboard users scroll the row itself, so it needs a visible focus ring. */
  .sd-vr__grid:focus-visible {
    outline: 2px solid var(--sd-violet);
    outline-offset: 4px;
    border-radius: 8px;
  }

  /* Arrows — same 44px circle as the best-sellers carousel. Hidden until the
     component measures real overflow, so they are never dead controls, and
     hidden again at each end of travel via :disabled. */
  .sd-vr__arrow {
    position: absolute;
    /* top alone anchors the button's TOP edge, so the 44px circle hung below
       the intended line and the two sides read as mismatched. translateY
       centres it on that line. 33% puts it level with the video's play button
       rather than the middle of the whole card, whose body copy sits lower. */
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--sd-canvas);
    box-shadow: 0 2px 12px rgba(51, 47, 43, 0.14);
    color: var(--sd-ink);
    font-size: 15px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.2s var(--sd-ease, ease), color 0.2s var(--sd-ease, ease), opacity 0.2s var(--sd-ease, ease);
  }
  .sd-rail--scrollable .sd-vr__arrow { display: flex; }
  .sd-vr__arrow:disabled { opacity: 0; pointer-events: none; }
  .sd-vr__arrow:hover,
  .sd-vr__arrow:focus-visible {
    background: var(--sd-ink);
    color: var(--sd-canvas);
  }
  /* One shared inset, mirrored — symmetric by construction rather than by two
     numbers that have to be kept in step by hand. */
  .sd-vr__arrow--prev { left: var(--sd-vr-arrow-inset, -8px); }
  .sd-vr__arrow--next { right: var(--sd-vr-arrow-inset, -8px); }

  .sd-vr__card {
    /* Four across at the 1420px cap; a 5th card overflows and the arrows show. */
    flex: 0 0 calc((100% - 3 * 20px) / 4);
    scroll-snap-align: start;
    background: var(--sd-canvas);
    border: 1px solid var(--sd-hairline);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .sd-vr__card:hover {
    transform: translateY(-4px);
    
  }

  .sd-vr__media {
    display: block;
    position: relative;
  }
  .sd-vr__trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--sd-whisper-lilac);
    cursor: pointer;
    position: relative;
    aspect-ratio: 9 / 12;
  }
  /* Poster-only card: no button, so the still must hold the frame itself —
     .sd-vr__video is absolutely positioned and would otherwise collapse.
     No cursor:pointer, because there is nothing to click. */
  .sd-vr__media--still {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 12;
    background: var(--sd-whisper-lilac);
    overflow: hidden;
  }
  .sd-vr__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .sd-vr__video--placeholder {
    background: var(--sd-whisper-lilac);
  }
  .sd-vr__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: var(--sd-vr-play-size, 48px);
    height: var(--sd-vr-play-size, 48px);
    border-radius: 50%;
    background: var(--sd-vr-play-bg, rgba(255, 255, 255, 0.92));
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  /* Triangle is a border trick, so it has no intrinsic size to scale — every
     edge is expressed as a fraction of the disc instead (13/48, 8/48, 3/48 from
     the authored 48px button) so resizing the circle keeps the glyph in
     proportion rather than leaving a tiny arrow in a large disc. */
  .sd-vr__play::after {
    content: "";
    width: 0;
    height: 0;
    border-left: calc(var(--sd-vr-play-size, 48px) * 0.271) solid var(--sd-vr-play-fg, var(--sd-ink));
    border-top: calc(var(--sd-vr-play-size, 48px) * 0.167) solid transparent;
    border-bottom: calc(var(--sd-vr-play-size, 48px) * 0.167) solid transparent;
    margin-left: calc(var(--sd-vr-play-size, 48px) * 0.063);
  }
  sd-video[data-playing] .sd-vr__play {
    opacity: 0;
  }

  .sd-vr__body {
    padding: 18px 20px 22px;
  }
  /* Spacing only. The drawn stars are styled store-wide in base.css (.sd-stars);
     the font-size/colour pair below is for the legacy typed-glyph fallback,
     which is the only case that still renders characters. */
  .sd-vr__stars {
    display: block;
    margin-block-end: 8px;
  }
  div.sd-vr__stars {
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--sd-violet);
  }
  .sd-vr__quote {
    font-family: var(--font-body--family);
    font-size: 13.5px;
    line-height: 1.55;
 
    margin: 0 0 10px;
  }
  .sd-vr__name {
    display: block;
    font-family: var(--font-body--family);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sd-ink);
  }
  .sd-vr__tag {
    display: block;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    color: var(--sd-ink-soft);
    margin-block-start: 2px;
  }

  @media (max-width: 860px) {
    /* Mobile padding is its own pair of settings: the desktop values are tuned
       for a wide, airy band, and carrying them down to a phone wastes a large
       slice of a short viewport. Placed in the section's existing breakpoint so
       spacing changes at the same width the grid becomes a swipe row. */
    .sd-vr {
      padding-block: var(--sd-vr-pt-mobile, var(--sd-vr-pt)) var(--sd-vr-pb-mobile, var(--sd-vr-pb));
    }
    .sd-vr__grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 14px;
      /* margin-block resets the desktop rule's negative block margin, which
         this rule's margin-inline alone would leave in place. */
      margin-block: 0;
      margin-inline: calc(-1 * clamp(16px, 4vw, 24px));
      padding: 4px clamp(16px, 4vw, 24px);
      scrollbar-width: none;
    }
    .sd-vr__grid::-webkit-scrollbar {
      display: none;
    }
    .sd-vr__card {
      flex: 0 0 74%;
      scroll-snap-align: center;
    }
    /* Touch swipes the row; arrows would just cover a card. */
    .sd-vr__arrow { display: none !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sd-vr__arrow { transition: none; }
    .sd-vr__card { transition: none; }
    .sd-vr__card:hover { transform: none; }
    .sd-vr__play { transition: none; }
  }
/* END_SECTION:sorandi-video-reviews */

/* CSS from block stylesheet tags */
/* START_BLOCK:_announcement (INDEX:83) */
.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:84) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

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

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

    &:hover {
      color: var(--color-foreground-subdued);
    }
  }
/* END_BLOCK:_blog-post-card */

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

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

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

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

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

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

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:88) */
.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:89) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:91) */
.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:92) */
.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:93) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:94) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(#header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    @media screen and (min-width: 750px) {
      height: 100%;
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:95) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

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

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

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:98) */
.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:100) */
.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:104) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;

      flex-shrink: 0;
      height: auto;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    gap: var(--gap);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:105) */
.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:107) */
.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:110) */
.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:111) */
.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:112) */
.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);
    }
  }

  /* sorandi wordmark fallback: inherits color (espresso ink in header). */
  .header-logo__wordmark {
    display: block;
    width: auto;
    height: 24px;
    color: var(--sd-ink);

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

  .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:113) */
.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[slot='more']:has(.menu-list__link[aria-expanded='true'])::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:is([slot='more'], [slot='overflow']) .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

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

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

  .overflow-menu {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

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

    background-color: transparent;
  }

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

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

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

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

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

    visibility: visible;
  }

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

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

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

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

    display: contents;
    white-space: normal;

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

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

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

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

  .header-menu {
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    width: 200px;
  }

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

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:116) */
.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:120) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

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

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

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

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

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

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

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

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

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

/* START_BLOCK:_product-details (INDEX:125) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

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

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

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

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

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_sd-bs-price (INDEX:133) */
/* Class-doubled so it outranks the section's .sd-bs__price base rule outright
     rather than relying on which stylesheet block Shopify concatenates last.
     Manual-mode cards never carry --b, so they keep the section's values.

     The colour chain is deliberate: block setting, then the section's own price
     picker, then the brand token. A merchant who sets nothing still follows the
     Brand anchor on a rebrand; one who sets the section keeps that for every
     card; one who sets the block overrides just this card part. */
  .sd-bs__price.sd-bs__price--b {
    font-size: var(--sd-bs-price-size, 15px);
    font-weight: var(--sd-bs-price-weight, 700);
    color: var(--sd-bs-price-b, var(--sd-bs-price, var(--sd-ink)));
  }

  .sd-bs__price--b .sd-bs__was {
    color: var(--sd-bs-was-b, var(--sd-bs-was, var(--sd-ink-soft)));
  }
/* END_BLOCK:_sd-bs-price */

/* START_BLOCK:_sd-bs-rating (INDEX:134) */
/* Class-doubled so it outranks the section's .sd-bs__rating base rule outright
     rather than depending on stylesheet concatenation order. Manual-mode cards
     never carry --b and keep the section's values. */
  .sd-bs__rating.sd-bs__rating--b {
    font-size: var(--sd-bs-rating-size, 12.5px);
  }

  .sd-bs__rating--b .sd-bs__rating-avg,
  .sd-bs__rating--b .sd-bs__rating-count {
    font-size: var(--sd-bs-rating-size, 12.5px);
  }

  /* The star row itself is styled store-wide in base.css (.sd-stars) — shared
     with the hero, the video reviews and the PDP buy box. The old rule here
     painted a gradient clipped to typed ★ characters; the snippet replaced it,
     so only the row's alignment within the rating line belongs to this block. */
  .sd-bs__rating--b .sd-stars {
    flex: none;
  }
/* END_BLOCK:_sd-bs-rating */

/* START_BLOCK:_sd-bs-swatches (INDEX:135) */
/* Class-doubled so it outranks the section's own .sd-bs__sw-dot rule outright
     rather than depending on stylesheet concatenation order. Manual-mode cards
     never carry --b and keep the section's values.

     Only the DOT resizes, never the button: the button is the touch target and
     is already tuned to the accessibility floor (28px on pointer devices, 44px
     on touch). Letting a setting shrink it would quietly break that, so a
     smaller dot just sits in the same hit area. */
  .sd-bs__sw--b .sd-bs__sw-dot {
    width: var(--sd-bs-sw-dot, 20px);
    height: var(--sd-bs-sw-dot, 20px);
  }

  .sd-bs__sw--b .sd-bs__sw-btn.is-on .sd-bs__sw-dot {
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.12),
      0 0 0 1.5px var(--sd-bs-sw-ring, var(--sd-violet));
  }

  .sd-bs__sw-more {
    align-self: center;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    color: var(--sd-ink-soft);
    padding-inline-start: 2px;
    white-space: nowrap;
  }
/* END_BLOCK:_sd-bs-swatches */

/* START_BLOCK:_sd-bs-title (INDEX:136) */
/* Settings arrive as inline custom properties on the element (the house
     pattern — no per-block-ID CSS rules), each with a fallback.

     Scoped to .sd-bs__title--b, and written class-doubled
     (.sd-bs__title.sd-bs__title--b) so it outranks the section's own
     .sd-bs__title base rule outright. Shopify concatenates every stylesheet
     block into one sheet, and with equal specificity the winner would be
     decided by whichever file happens to land last — which is not guaranteed.
     Manual-mode cards never get this class, so they keep the section's base
     values untouched. */
  .sd-bs__title.sd-bs__title--b {
    font-size: var(--sd-bs-title-size, 15px);
    font-weight: var(--sd-bs-title-weight, 600);
    color: var(--sd-bs-title-color, var(--sd-ink));
  }

  /* Line clamp keeps every card the same height when titles differ in length.
     -webkit-box is still the only cross-browser way to clamp by line count;
     `line-clamp` alone is not yet safe to rely on. "Maximum lines = 0" means no
     limit, and is expressed by not clamping at all rather than by a value —
     hence matching on the inline property the Liquid wrote. */
  .sd-bs__title--b:not([style*="--sd-bs-title-lines: 0"]) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--sd-bs-title-lines, 2);
    line-clamp: var(--sd-bs-title-lines, 2);
    overflow: hidden;
  }
/* END_BLOCK:_sd-bs-title */

/* START_BLOCK:_sd-fp-buybox (INDEX:145) */
/* The PDP buy box's styles, scoped under .sd-fp so they can never restyle the
     real PDP — which uses the same .sd-bb-* class names. Everything from the
     guarantee card onward (UGC rail, accordions) is absent by design. */
  .sd-fp .sd-bb { max-width: 480px; }

  /* Heading font, matching the PDP buy box and the product cards. This rule is
     more specific than _sd-pdp-buybox's .sd-bb__title, so it has to be changed
     too — otherwise the homepage featured product keeps the body font while
     every other product title is Marcellus. */
  .sd-fp .sd-bb__title { font-family: var(--font-heading--family); font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; color: var(--sd-ink); margin: 0 0 12px; }
  /* The title is the way through to the product page. Underline only on
     hover/focus so the heading reads as a heading at rest. */
  .sd-fp .sd-bb__title-link { color: inherit; text-decoration: none; }
  .sd-fp .sd-bb__title-link:hover,
  .sd-fp .sd-bb__title-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

  .sd-fp .sd-bb__price-row { display: flex; align-items: center; gap: 12px; margin-block-end: 8px; }
  /* Same token fallbacks as the PDP buy box — see the notes there. */
  .sd-fp .sd-bb__pr { font-family: var(--font-body--family); font-size: 26px; font-weight: 700; color: var(--sd-bb-price, var(--sd-ink)); }
  .sd-fp .sd-bb__was {
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 400;
    color: var(--sd-bb-was, var(--sd-ink-soft));
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(51, 47, 43, 0.45);
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  }
  .sd-fp .sd-bb__chip { background: var(--sd-whisper-lilac); color: var(--sd-violet); font-family: var(--font-body--family); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 7px 13px; border-radius: 8px; }

  .sd-fp .sd-bb__desc { font-family: var(--font-body--family); font-size: 15px; line-height: 1.6; color: var(--sd-ink-soft); margin: 0 0 20px; max-width: 430px; }

  .sd-fp .sd-bb__bens { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; padding: 0; }
  .sd-fp .sd-bb__bens li { display: flex; gap: 12px; align-items: center; font-family: var(--font-body--family); font-size: 14.5px; font-weight: 500; color: var(--sd-ink); }
  .sd-fp .sd-bb__bens svg { width: 22px; height: 22px; stroke: var(--sd-violet); fill: none; stroke-width: 1.5; flex: none; }

  /* One list at every breakpoint. There used to be a second, desktop-only list
     of merchant-uploaded image icons that this one was hidden behind; it was
     removed, so the SVG list is simply always shown. */
  .sd-fp .sd-bb__bens { display: flex; }
  /* A row may opt out of the SVG icon with its own uploaded image. Matched to
     the 22px SVG box so a mixed list keeps one left edge for the labels, and
     object-fit stops a non-square upload from stretching. */
  .sd-fp .sd-bb__ben-img {
    width: 22px;
    height: 22px;
    flex: none;
    object-fit: contain;
    display: block;
  }

  .sd-fp .sd-bb__swl { font-family: var(--font-body--family); font-size: 13.5px; font-weight: 700; color: var(--sd-ink); margin-block-end: 10px; }
  .sd-fp .sd-bb__swl span { font-weight: 500; color: var(--sd-ink-soft); }
  .sd-fp .sd-bb__swbox { display: flex; gap: 10px; margin-block-end: 22px; }
  .sd-fp .sd-bb__sw { position: relative; width: 74px; height: 74px; border-radius: 12px; overflow: hidden; border: 2px solid rgba(51, 47, 43, 0.12); padding: 0; background: var(--sd-canvas); cursor: pointer; transition: border-color 0.2s; }
  .sd-fp .sd-bb__sw--on { border-color: var(--sd-violet); }
  .sd-fp .sd-bb__sw:focus-visible { outline: 2px solid var(--sd-violet); outline-offset: 2px; }
  .sd-fp .sd-bb__sw-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sd-fp .sd-bb__sw-ph { display: block; width: 100%; height: 100%; }

  .sd-fp .sd-bb__bundle-note { text-align: center; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--sd-ink-soft); text-transform: uppercase; margin-block-end: 12px; }
  .sd-fp .sd-bb__bopt { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1.5px solid var(--sd-hairline); border-radius: 16px; padding: 16px 18px; margin-block-end: 12px; cursor: pointer; transition: border-color 0.2s, background 0.2s; background: var(--sd-canvas); }
  .sd-fp .sd-bb__bopt--ribboned { margin-block-start: 9px; }
  .sd-fp .sd-bb__bopt--on { border-color: var(--sd-violet); background: var(--sd-whisper-lilac); }
  .sd-fp .sd-bb__bopt:focus-visible { outline: 2px solid var(--sd-violet); outline-offset: 2px; }
  .sd-fp .sd-bb__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(51, 47, 43, 0.3); flex: none; position: relative; }
  .sd-fp .sd-bb__bopt--on .sd-bb__radio { border-color: var(--sd-violet); }
  .sd-fp .sd-bb__bopt--on .sd-bb__radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sd-violet); }
  .sd-fp .sd-bb__bt { flex: 1; }
  .sd-fp .sd-bb__bt b { font-family: var(--font-body--family); font-size: 14.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--sd-ink); }
  .sd-fp .sd-bb__bt small { display: block; font-family: var(--font-body--family); font-size: 12.5px; color: var(--sd-ink-soft); }
  .sd-fp .sd-bb__save { display: inline-block; font-family: var(--font-body--family); font-size: 11.5px; font-weight: 600; background: var(--sd-whisper-lilac); color: var(--sd-violet); padding: 4px 10px; border-radius: 100px; margin-block-start: 6px; }
  .sd-fp .sd-bb__bp { font-family: var(--font-body--family); font-size: 17px; font-weight: 700; color: var(--sd-ink); }
  .sd-fp .sd-bb__ribbon { position: absolute; top: -9px; right: 14px; background: var(--sd-violet); color: #fff; font-family: var(--font-body--family); font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 100px; text-transform: uppercase; }

  .sd-fp .sd-bb__atc { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 44px; padding: 18px 36px; font-family: var(--font-body--family); font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: #fff; background: var(--sd-violet); border: 1.5px solid var(--sd-violet); border-radius: var(--sd-radius-pill); cursor: pointer; transition: background 0.25s; }
  .sd-fp .sd-bb__atc:hover, .sd-fp .sd-bb__atc:focus-visible { background: var(--sd-violet-hover); border-color: var(--sd-violet-hover); }
  .sd-fp .sd-bb__atc i { font-style: normal; opacity: 0.75; font-weight: 400; }

  .sd-fp .sd-bb__payrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 8px; }
  /* payment_type_svg_tag renders an inline <svg> with its own viewBox, so the
     chip box is applied to the SVG itself. The brand marks are not all 42:26, so
     preserveAspectRatio (the SVG default) letterboxes them inside the box — the
     equivalent of object-fit:contain, which does not apply to inline SVG. */
  .sd-fp .sd-bb__payicon {
    width: 42px;
    height: 26px;
    padding: 2px;
    background: var(--sd-canvas);
    box-sizing: border-box;
    display: block;
    flex: none;
  }
  /* Text fallback for a name with no matching brand SVG — keeps the row intact
     rather than dropping the chip. */
  .sd-fp .sd-bb__payrow i { display: flex; align-items: center; justify-content: center; width: 42px; height: 26px; background: var(--sd-canvas); border: 1px solid rgba(51, 47, 43, 0.1); border-radius: 5px; font-style: normal; font-family: var(--font-body--family); font-size: 8.5px; font-weight: 700; color: var(--sd-ink-soft); }

  .sd-fp .sd-bb__shipline { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body--family); font-size: 13px; font-weight: 500; color: #4E7A4A; margin-block-end: 20px; }
  .sd-fp .sd-bb__dot { width: 8px; height: 8px; border-radius: 50%; background: #9DBF9A; outline: 3px solid rgba(157, 191, 154, 0.25); }
  .sd-fp .sd-bb__shipline span { color: var(--sd-ink-soft); font-weight: 400; }

  /* The last element of the buy box — no margin-block-end, since nothing follows
     it here (the PDP's UGC rail and accordions are absent by design). */
  .sd-fp .sd-bb__guarantee { border: 1px solid var(--sd-hairline); background: var(--sd-whisper-rose); border-radius: 16px; padding: 18px 20px; }
  .sd-fp .sd-bb__guarantee b { display: flex; align-items: center; gap: 10px; font-family: var(--font-body--family); font-size: 14.5px; font-weight: 700; color: var(--sd-ink); margin-block-end: 6px; }
  .sd-fp .sd-bb__guarantee svg { width: 22px; height: 22px; stroke: var(--sd-violet); fill: none; stroke-width: 1.5; flex: none; }
  .sd-fp .sd-bb__guarantee p { font-family: var(--font-body--family); font-size: 13px; line-height: 1.5; color: var(--sd-ink-soft); margin: 0; }

  @media (max-width: 860px) {
    .sd-fp .sd-bb { max-width: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-fp .sd-bb__sw, .sd-fp .sd-bb__bopt, .sd-fp .sd-bb__atc { transition: none; }
  }
/* END_BLOCK:_sd-fp-buybox */

/* START_BLOCK:_sd-fp-gallery (INDEX:146) */
/* The PDP gallery's layout, minus the sticky machinery — see the block doc for
     why this section never sticks. Scoped under .sd-fp so it can never restyle
     the real PDP gallery, which shares these class names. */
  .sd-fp .sd-gz {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 16px;
    min-width: 0;
  }
  .sd-fp .sd-gz > * { min-width: 0; }
  .sd-fp .sd-gz__main {
    position: relative;
    aspect-ratio: 1 / 1.04;
    border-radius: 24px;
    overflow: hidden;
    background: var(--sd-whisper-lilac);
  }
  .sd-fp .sd-gz__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sd-fp .sd-gz__img--ph { background: var(--sd-whisper-lilac); }

  .sd-fp .sd-gz__usp {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .sd-fp .sd-gz__tile {
    flex: 1;
    background: var(--sd-whisper-lilac);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 10px;
    text-align: center;
  }
  .sd-fp .sd-gz__tile svg { width: 30px; height: 30px; stroke: var(--sd-ink); fill: none; stroke-width: 1.5; }
  .sd-fp .sd-gz__tile b {
    font-family: var(--font-body--family);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sd-ink);
  }

  /* ONE row, always. A wrapping rail pushed later thumbs onto a second line and
     grew the gallery downward as products gained media; the rail now stays on a
     single line and scrolls horizontally instead, at every width. */
  /* The rail wrapper owns the grid placement now that <sd-rail> sits between
     the gallery grid and the scrolling row. position:relative anchors the
     absolutely-positioned arrows. */
  .sd-fp .sd-gz__thumbrail {
    grid-column: 1 / -1;
    display: block;
    position: relative;
    min-width: 0;
  }

  /* Arrows: hidden until sd-rail reports real overflow, so they are never dead
     controls. They overlay the row's edges rather than taking layout width,
     which would shrink the thumbs. */
  .sd-fp .sd-gz__thumbarrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--sd-hairline);
    background: rgba(255, 255, 255, 0.94);
    color: var(--sd-ink);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 8px rgba(51, 47, 43, 0.12);
    transition: background 0.2s, opacity 0.2s;
  }
  .sd-fp .sd-rail--scrollable > .sd-gz__thumbarrow { display: grid; place-items: center; }
  .sd-fp .sd-gz__thumbarrow--prev { inset-inline-start: -6px; }
  .sd-fp .sd-gz__thumbarrow--next { inset-inline-end: -6px; }
  .sd-fp .sd-gz__thumbarrow:hover { background: #fff; }
  .sd-fp .sd-gz__thumbarrow[disabled] { opacity: 0; pointer-events: none; }

  .sd-fp .sd-gz__thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-block-start: 2px;
    /* Room for the focus ring, which would otherwise be clipped by overflow. */
    padding-block-end: 4px;
  }
  .sd-fp .sd-gz__thumbs::-webkit-scrollbar { display: none; }
  .sd-fp .sd-gz__thumb {
    position: relative;
    /* flex: none stops the thumbs shrinking to fit — shrinking is what makes a
       nowrap row silently squash instead of scroll. */
    flex: none;
    scroll-snap-align: start;
    width: 86px;
    height: 86px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: var(--sd-canvas);
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .sd-fp .sd-gz__thumb--on { border-color: var(--sd-violet); }
  .sd-fp .sd-gz__thumb:focus-visible { outline: 2px solid var(--sd-violet); outline-offset: 2px; }
  .sd-fp .sd-gz__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Mobile: one column, capped image, swipeable thumb rail — and the USP tiles
     are dropped rather than shrunk, exactly as on the PDP, so they cannot push
     the add-to-cart further below the fold. display:none also removes them from
     the accessibility tree. */
  @media (max-width: 860px) {
    .sd-fp .sd-gz {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .sd-fp .sd-gz__main {
      width: 100%;
      aspect-ratio: 1 / 1;
      max-height: 40vh;
      border-radius: 20px;
    }
    /* The one-row swipeable rail is now the default at every width (see the
       base .sd-fp .sd-gz__thumbs rule); this block only tightens phone sizing. */
    .sd-fp .sd-gz__thumbs {
      gap: 8px;
    }
    /* 72px: comfortably over the 44px tap-target floor, and wide enough that a
       full gallery overflows into a real swipe. */
    .sd-fp .sd-gz__thumb {
      flex: 0 0 72px;
      width: 72px;
      height: 72px;
      border-radius: 12px;
    }
    .sd-fp .sd-gz__usp { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-fp .sd-gz__thumb { transition: none; }
  }
/* END_BLOCK:_sd-fp-gallery */

/* START_BLOCK:_sd-pdp-buybox (INDEX:155) */
.sd-bb { max-width: 480px; }

  .sd-bb__rating { display: flex; align-items: center; gap: 10px; font-family: var(--font-body--family); font-size: 13.5px; color: var(--sd-ink-soft); margin-block-end: 12px; flex-wrap: wrap; }
  /* The drawn stars are styled store-wide in base.css (.sd-stars). This rule is
     for the legacy typed-glyph fallback only — scoped to <span> so it cannot
     re-colour the SVG row, which carries its own merchant-set colour. */
  span.sd-bb__stars:not(.sd-stars) { color: var(--sd-violet); letter-spacing: 2px; }
  .sd-bb__rating b { font-weight: 600; color: var(--sd-ink); }
  .sd-bb__rating-link { color: var(--sd-ink-soft); text-decoration: underline; }

  /* Heading font (Marcellus via --sd-font-display), matching the rest of the
     store's headings. Weight stays 700 as a request: Marcellus ships a single
     400 face, so the browser synthesises the bold — the title block's own
     Font weight setting still governs, this is only the fallback. */
  .sd-bb__title { font-family: var(--font-heading--family); font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; color: var(--sd-ink); margin: 0 0 12px; }

  .sd-bb__price-row { display: flex; align-items: center; gap: 12px; margin-block-end: 8px; }
  /* Both fall back to their brand token, so a block with no colour picked still
     follows the anchor on a rebrand. Overrides arrive as inline custom
     properties on .sd-bb__titleblock. */
  .sd-bb__pr { font-family: var(--font-body--family); font-size: 26px; font-weight: 700; color: var(--sd-bb-price, var(--sd-ink)); }
  /* The was-price is context, not the offer: smaller and lighter so the live
     price reads first. The rule colour is derived from the text rather than
     fixed, or a picked colour would be struck through with the old ink line.
     House pattern — static fallback first, color-mix second. */
  .sd-bb__was {
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 400;
    color: var(--sd-bb-was, var(--sd-ink-soft));
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(51, 47, 43, 0.45);
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  }
  .sd-bb__chip { background: var(--sd-whisper-lilac); color: var(--sd-violet); font-family: var(--font-body--family); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 7px 13px; border-radius: 8px; }

  .sd-bb__bnpl { font-family: var(--font-body--family); font-size: 13.5px; color: var(--sd-ink-soft); margin-block-end: 14px; }
  .sd-bb__desc { font-family: var(--font-body--family); font-size: 15px; line-height: 1.6; color: var(--sd-ink-soft); margin: 0 0 20px; max-width: 430px; }

  .sd-bb__bens { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; padding: 0; }
  .sd-bb__bens li { display: flex; gap: 12px; align-items: center; font-family: var(--font-body--family); font-size: 14.5px; font-weight: 500; color: var(--sd-ink); }
  .sd-bb__bens svg { width: 22px; height: 22px; stroke: var(--sd-violet); fill: none; stroke-width: 1.5; flex: none; }

  /* One list at every breakpoint. There used to be a second, desktop-only list
     of merchant-uploaded image icons that this one was hidden behind; it was
     removed, so the SVG list is simply always shown. */
  .sd-bb__bens { display: flex; }
  /* A row may opt out of the SVG icon with its own uploaded image. Matched to
     the 22px SVG box so a mixed list keeps one left edge for the labels, and
     object-fit stops a non-square upload from stretching. */
  .sd-bb__ben-img {
    width: 22px;
    height: 22px;
    flex: none;
    object-fit: contain;
    display: block;
  }

  .sd-bb__swl { font-family: var(--font-body--family); font-size: 13.5px; font-weight: 700; color: var(--sd-ink); margin-block-end: 10px; }
  .sd-bb__swl span { font-weight: 500; color: var(--sd-ink-soft); }
  .sd-bb__swbox { display: flex; gap: 10px; margin-block-end: 22px; }
  .sd-bb__sw { position: relative; width: 74px; height: 74px; border-radius: 12px; overflow: hidden; border: 2px solid rgba(51, 47, 43, 0.12); padding: 0; background: var(--sd-canvas); cursor: pointer; transition: border-color 0.2s; }
  .sd-bb__sw--on { border-color: var(--sd-violet); }
  .sd-bb__sw:focus-visible { outline: 2px solid var(--sd-violet); outline-offset: 2px; }
  .sd-bb__sw-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sd-bb__sw-ph { display: block; width: 100%; height: 100%; }

  .sd-bb__bundle-note { text-align: center; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--sd-ink-soft); text-transform: uppercase; margin-block-end: 12px; }
  .sd-bb__bopt { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1.5px solid var(--sd-hairline); border-radius: 16px; padding: 16px 18px; margin-block-end: 12px; cursor: pointer; transition: border-color 0.2s, background 0.2s; background: var(--sd-canvas); }
  .sd-bb__bopt--ribboned { margin-block-start: 9px; }
  .sd-bb__bopt--on { border-color: var(--sd-violet); background: var(--sd-whisper-lilac); }
  .sd-bb__bopt:focus-visible { outline: 2px solid var(--sd-violet); outline-offset: 2px; }
  .sd-bb__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(51, 47, 43, 0.3); flex: none; position: relative; }
  .sd-bb__bopt--on .sd-bb__radio { border-color: var(--sd-violet); }
  .sd-bb__bopt--on .sd-bb__radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sd-violet); }
  .sd-bb__bt { flex: 1; }
  .sd-bb__bt b { font-family: var(--font-body--family); font-size: 14.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--sd-ink); }
  .sd-bb__bt small { display: block; font-family: var(--font-body--family); font-size: 12.5px; color: var(--sd-ink-soft); }
  .sd-bb__save { display: inline-block; font-family: var(--font-body--family); font-size: 11.5px; font-weight: 600; background: var(--sd-whisper-lilac); color: var(--sd-violet); padding: 4px 10px; border-radius: 100px; margin-block-start: 6px; }
  .sd-bb__bp { font-family: var(--font-body--family); font-size: 17px; font-weight: 700; color: var(--sd-ink); }
  .sd-bb__ribbon { position: absolute; top: -9px; right: 14px; background: var(--sd-violet); color: #fff; font-family: var(--font-body--family); font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 100px; text-transform: uppercase; }

  .sd-bb__atc { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 44px; padding: 18px 36px; font-family: var(--font-body--family); font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: #fff; background: var(--sd-violet); border: 1.5px solid var(--sd-violet); border-radius: var(--sd-radius-pill); cursor: pointer; transition: background 0.25s; }
  .sd-bb__atc:hover, .sd-bb__atc:focus-visible { background: var(--sd-violet-hover); border-color: var(--sd-violet-hover); }
  .sd-bb__atc i { font-style: normal; opacity: 0.75; font-weight: 400; }

  .sd-bb__payrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 8px; }
  /* payment_type_svg_tag renders an inline <svg> with its own viewBox, so the
     chip box is applied to the SVG itself. Same 42x26 as the old text chip, so
     the row's rhythm is unchanged. The brand marks are not all 42:26, so
     preserveAspectRatio (the SVG default) letterboxes them inside the box —
     the CSS equivalent of object-fit:contain, which does not apply to inline
     SVG. padding keeps the mark off its own border. */
  .sd-bb__payicon {
    width: 42px;
    height: 26px;
    padding: 2px;
    
   
    background: var(--sd-canvas);
    box-sizing: border-box;
    display: block;
    flex: none;
  }
  /* Text fallback for a name with no matching brand SVG — keeps the row intact
     rather than dropping the chip. */
  .sd-bb__payrow i { display: flex; align-items: center; justify-content: center; width: 42px; height: 26px; background: var(--sd-canvas); border: 1px solid rgba(51, 47, 43, 0.1); border-radius: 5px; font-style: normal; font-family: var(--font-body--family); font-size: 8.5px; font-weight: 700; color: var(--sd-ink-soft); }

  .sd-bb__shipline { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body--family); font-size: 13px; font-weight: 500; color: #4E7A4A; margin-block-end: 20px; }
  .sd-bb__dot { width: 8px; height: 8px; border-radius: 50%; background: #9DBF9A; outline: 3px solid rgba(157, 191, 154, 0.25); }
  .sd-bb__shipline span { color: var(--sd-ink-soft); font-weight: 400; }

  .sd-bb__guarantee { border: 1px solid var(--sd-hairline); background: var(--sd-whisper-rose); border-radius: 16px; padding: 18px 20px; margin-block-end: 22px; }
  .sd-bb__guarantee b { display: flex; align-items: center; gap: 10px; font-family: var(--font-body--family); font-size: 14.5px; font-weight: 700; color: var(--sd-ink); margin-block-end: 6px; }
  .sd-bb__guarantee svg { width: 22px; height: 22px; stroke: var(--sd-violet); fill: none; stroke-width: 1.5; }
  .sd-bb__guarantee p { font-family: var(--font-body--family); font-size: 13px; line-height: 1.5; color: var(--sd-ink-soft); margin: 0; }

  /* UGC rail: 3 tiles per row at the mockup's 9/13 ratio, horizontally
     scrollable when more than three are configured. */
  .sd-bb__ugc { margin-block-end: 22px; }
  .sd-bb__ugc-h { display: block; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sd-ink-soft); margin-block-end: 10px; }
  /* ---- Infinite marquee, not a slider ----
     The viewport clips; the track inside it is the belt. overflow:hidden (not
     auto) is deliberate — there is nothing to scroll by hand any more, and a
     scrollbar under a self-scrolling belt reads as broken. */
  /* container-type gives the tiles below a box to size against. They cannot use
     % — the track is width:max-content, so a percentage would resolve against
     the track's own (ever-growing) width and every tile would collapse. cqw
     resolves against THIS element instead, which is the real visible column. */
  .sd-bb__ugc-rail {
    display: block;
    width: 100%;
    overflow: hidden;
    container-type: inline-size;
    container-name: sd-bb-ugc;
  }
  /* width: max-content lets the track grow past the column so the clones have
     somewhere to sit; without it they would wrap and the belt would never move. */
  .sd-bb__ugc-row {
    display: flex;
    align-items: center;
    /* Single-sourced: the tile width below subtracts this same value, so the
       two can never drift apart and leave the last tile clipped. */
    gap: var(--sd-bb-ugc-gap, 10px);
    width: max-content;
  }

  /* The animation waits for data-sd-marquee-ready, which <sd-logo-marquee> sets
     on itself once it has mirrored the run. Animating before that is what makes
     a marquee jump on first paint.
     -50% is exact because the component builds the track as two identical
     halves, so the reset lands on a pixel-identical frame. */
  [data-sd-marquee-ready] .sd-bb__ugc-row {
    animation: sd-bb-ugc-scroll var(--sd-bb-ugc-duration, 30s) linear infinite;
  }
  .sd-bb__ugc-rail:hover .sd-bb__ugc-row,
  .sd-bb__ugc-rail:focus-within .sd-bb__ugc-row {
    animation-play-state: paused;
  }
  @keyframes sd-bb-ugc-scroll {
    to { transform: translateX(-50%); }
  }

  /* Hard motion gate, matching the house rule: no belt at all, and the tiles
     wrap into a static row. The component also skips cloning in these cases, so
     only the authored tiles are present to wrap. */
  @media (prefers-reduced-motion: reduce) {
    .sd-bb__ugc-row,
    [data-sd-marquee-ready] .sd-bb__ugc-row {
      animation: none;
      width: 100%;
      flex-wrap: wrap;
    }
  }
  .sd-motion-minimal .sd-bb__ugc-row,
  .sd-motion-minimal [data-sd-marquee-ready] .sd-bb__ugc-row {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
  }
  /* In both static cases the row is width:100%, so cqw (measured on the rail)
     still resolves correctly and the chosen column count holds while the tiles
     wrap onto as many lines as they need. */

  /* N tiles across the visible rail, set per block by the Images per row
     settings. cqw is the rail's width (see container-type above), so N slots
     plus the (N-1) gaps between them fill it exactly — the gap is subtracted
     rather than added, or N tiles would overflow by one gap's worth and the
     last one would be clipped mid-belt.

     The breakpoint switches --sd-bb-ugc-active only, so the sizing formula
     lives in ONE place. Duplicating the whole calc per breakpoint is how the
     two drift apart the next time the gap or ratio changes. */
  .sd-bb__ugc-tile {
    --sd-bb-ugc-gap: 10px;
    --sd-bb-ugc-active: var(--sd-bb-ugc-cols, 3);
    flex: 0 0 calc(
      (100cqw - (var(--sd-bb-ugc-active) - 1) * var(--sd-bb-ugc-gap)) / var(--sd-bb-ugc-active)
    );
    aspect-ratio: 9 / 13;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sd-whisper-lilac);
  }
  /* 860px matches the buy box's own breakpoint, so the tile count changes at the
     same width the column goes full-bleed rather than at some other moment. */
  @media (max-width: 860px) {
    .sd-bb__ugc-tile {
      --sd-bb-ugc-active: var(--sd-bb-ugc-cols-mobile, 2);
    }
  }
  .sd-bb__ugc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .sd-bb__acc details { border-block-end: 1px solid var(--sd-hairline); padding: 16px 0; }
  .sd-bb__acc details:first-of-type { border-block-start: 1px solid var(--sd-hairline); }
  .sd-bb__acc summary { font-family: var(--font-body--family); font-weight: 600; font-size: 14.5px; color: var(--sd-ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
  .sd-bb__acc summary::-webkit-details-marker { display: none; }
  .sd-bb__acc summary::after { content: "+"; font-size: 19px; font-weight: 400; color: var(--sd-ink-soft); }
  .sd-bb__acc details[open] summary::after { content: "–"; }
  .sd-bb__acc details p { font-family: var(--font-body--family); font-size: 14px; line-height: 1.6; color: var(--sd-ink-soft); padding-block-start: 10px; margin: 0; }

  /* ---- Upsell rail (last block) ----
     Mirrors the UGC rail's harness and arrow treatment so the two scrolling
     rows in this column read as one component. Cards are 2-up here (not 3-up
     like the UGC tiles) because each carries a title + price under the image
     and would otherwise be too narrow to read in the buy-box column. */
  .sd-bb__up { margin-block-start: 28px; }
  .sd-bb__up-h { display: block; font-family: var(--font-body--family); font-size: 14.5px; font-weight: 700; color: var(--sd-ink); margin-block-end: 12px; }
  .sd-bb__up-rail { display: block; position: relative; }
  .sd-bb__up-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sd-bb__up-row::-webkit-scrollbar { display: none; }
  .sd-bb__up-row:focus-visible { outline: 2px solid var(--sd-violet); outline-offset: 3px; border-radius: 8px; }

  .sd-bb__up-card {
    flex: 0 0 calc((100% - 12px) / 2);
    scroll-snap-align: start;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .sd-bb__up-media {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sd-whisper-lilac);
  }
  .sd-bb__up-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--sd-ease, ease); }
  .sd-bb__up-card:hover .sd-bb__up-img { transform: scale(1.04); }
  .sd-bb__up-title {
    font-family: var(--font-body--family);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--sd-ink);
    /* Two-line clamp: titles vary in length and an unclamped one would push the
       price out of alignment across the row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sd-bb__up-price { font-family: var(--font-body--family); font-size: 13.5px; font-weight: 700; color: var(--sd-ink); }

  /* Same arrows as the UGC rail. Hidden until <sd-rail> measures real overflow. */
  .sd-bb__up-arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 5;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: var(--sd-canvas);
    box-shadow: 0 2px 10px rgba(51, 47, 43, 0.16);
    color: var(--sd-ink);
    font-size: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.2s var(--sd-ease, ease), color 0.2s var(--sd-ease, ease), opacity 0.2s var(--sd-ease, ease);
  }
  .sd-rail--scrollable .sd-bb__up-arrow { display: flex; }
  .sd-bb__up-arrow:disabled { opacity: 0; pointer-events: none; }
  .sd-bb__up-arrow:hover,
  .sd-bb__up-arrow:focus-visible { background: var(--sd-ink); color: var(--sd-canvas); }
  .sd-bb__up-arrow--prev { left: var(--sd-bb-ugc-arrow-inset, 4px); }
  .sd-bb__up-arrow--next { right: var(--sd-bb-ugc-arrow-inset, 4px); }

  @media (max-width: 860px) {
    .sd-bb { max-width: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-bb__sw, .sd-bb__bopt, .sd-bb__atc { transition: none; }
  }
/* END_BLOCK:_sd-pdp-buybox */

/* START_BLOCK:_sd-pdp-gallery (INDEX:156) */
/* Sticky gallery (desktop only — see the mobile block below).
     The buy box is usually far taller than the gallery, so without this the
     gallery scrolls away and leaves a long column of dead whitespace beside
     the copy. Sticking it is the standard Shopify PDP behaviour.

     Requirements, all already satisfied by the parent section:
       - .sd-pdp__grid uses align-items: start, so this column is its own
         height rather than stretched to the row — a stretched item can never
         stick, because it has no room to move inside its parent.
       - the block is a DIRECT grid child, so the grid area is the containing
         block that bounds the sticky travel.
     --header-height is set on <body> by the inline script in theme.liquid, so
     the offset clears a sticky header; the fallback covers first paint before
     that script runs. */
  /* Single column: the main image spans the full gallery width. There used to
     be a second 150px column of USP tiles beside it; those were removed, so the
     image reclaims that width instead of leaving a gap. */
  .sd-gz {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    min-width: 0;
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--sd-gz-sticky-gap, 20px));
  }

  /* Opt-out. Products whose buy box is no taller than the gallery gain nothing
     from sticking — the column barely travels and the effect reads as a glitch. */
  .sd-gz--nosticky {
    position: static;
  }
  .sd-gz > * { min-width: 0; }
  .sd-gz__main {
    position: relative;
    aspect-ratio: 1 / 1.04;
    border-radius: 24px;
    overflow: hidden;
    background: var(--sd-whisper-lilac);
  }
  .sd-gz__img,
  .sd-gz__main video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sd-gz__img--ph { background: var(--sd-whisper-lilac); }

  /* ONE row, always. A wrapping rail pushed later thumbs onto a second line and
     grew the gallery downward as products gained media; the rail now stays on a
     single line and scrolls horizontally instead, at every width. */
  /* The rail wrapper owns the grid placement now that <sd-rail> sits between
     the gallery grid and the scrolling row. position:relative anchors the
     absolutely-positioned arrows. */
  .sd-gz__thumbrail {
    grid-column: 1 / -1;
    display: block;
    position: relative;
    min-width: 0;
  }

  /* Arrows: hidden by default and revealed only when sd-rail reports real
     overflow, so they are never dead controls. They sit over the row's edges
     rather than taking layout width, which would shrink the thumbs. */
  .sd-gz__thumbarrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--sd-hairline);
    background: rgba(255, 255, 255, 0.94);
    color: var(--sd-ink);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 8px rgba(51, 47, 43, 0.12);
    transition: background 0.2s, opacity 0.2s;
  }
  .sd-rail--scrollable > .sd-gz__thumbarrow { display: grid; place-items: center; }
  .sd-gz__thumbarrow--prev { inset-inline-start: -6px; }
  .sd-gz__thumbarrow--next { inset-inline-end: -6px; }
  .sd-gz__thumbarrow:hover { background: #fff; }
  .sd-gz__thumbarrow[disabled] { opacity: 0; pointer-events: none; }

  .sd-gz__thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-block-start: 2px;
    /* Room for the focus ring, which would otherwise be clipped by overflow. */
    padding-block-end: 4px;
  }
  .sd-gz__thumbs::-webkit-scrollbar { display: none; }
  .sd-gz__thumb {
    position: relative;
    /* flex: none stops the thumbs shrinking to fit — shrinking is what makes a
       nowrap row silently squash instead of scroll. */
    flex: none;
    scroll-snap-align: start;
    width: 86px;
    height: 86px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: var(--sd-canvas);
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .sd-gz__thumb--on { border-color: var(--sd-violet); }
  .sd-gz__thumb:focus-visible { outline: 2px solid var(--sd-violet); outline-offset: 2px; }
  .sd-gz__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sd-gz__tplay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .sd-gz__tplay::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid var(--sd-ink);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-left: 2px;
  }

  /* ---- Mobile: compact above-the-fold ----
     The main image is capped so it cannot eat the viewport, and the thumbnails
     stay a single-row horizontal swiper. Without the cap the image alone pushed
     the product title and add-to-cart far below the fold on a short screen. */
  @media (max-width: 860px) {
    .sd-gz {
      grid-template-columns: 1fr;
      gap: 12px;
      /* Sticky is desktop-only. On mobile the gallery and buy box are stacked,
         so sticking the gallery would pin it over the viewport while the buy
         box scrolls underneath it. */
      position: static;
    }
    /* Capped so the image cannot eat the viewport. NB: no margin-inline:auto —
       the <img> inside is absolutely positioned, so this box has no in-flow
       content and an auto inline margin collapses it to zero width. */
    .sd-gz__main {
      width: 100%;
      aspect-ratio: 1 / 1;
      max-height: 40vh;
      border-radius: 20px;
    }

    /* The one-row swipeable rail is now the default at every width (see the
       base .sd-gz__thumbs rule); this block only tightens the phone sizing. */
    .sd-gz__thumbs {
      gap: 8px;
    }
    /* 72px: comfortably over the 44px tap-target floor for a 50-68 audience,
       and wide enough that a full gallery overflows into a real swipe. */
    .sd-gz__thumb {
      flex: 0 0 72px;
      width: 72px;
      height: 72px;
      border-radius: 12px;
    }

  }
  @media (prefers-reduced-motion: reduce) {
    .sd-gz__thumb { transition: none; }
  }
/* END_BLOCK:_sd-pdp-gallery */

/* START_BLOCK:_search-input (INDEX:167) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

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

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:168) */
.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:169) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:comparison-slider (INDEX:179) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    color: var(--handle-color, var(--color-foreground));
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:180) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:181) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:disclosures (INDEX:183) */
.disclosures__container {
      width: 100%;
    }

    .disclosures__container:has(> [shopify-block-empty]) {
      display: none;
    }

    .disclosures {
      --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1));

      display: block;
      color: var(--color, inherit);
      width: 100%;
      container-type: inline-size;
    }

    .disclosures.accordion--dividers accordion-custom:first-child .details {
      border-block-start: var(--style-border-width) solid var(--color-border);
    }

    .disclosures.accordion--dividers accordion-custom:last-child .details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .disclosures__heading {
      margin-block-end: var(--margin-lg);
    }

    .disclosures .details__header {
      padding-block: var(--padding-xl);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .disclosures .details__header > .svg-wrapper {
      margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2);
    }

    .disclosures details[open] .details__header {
      padding-block-end: var(--padding-xs);
    }

    .disclosures__summary-content {
      flex: 1 1 0%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--gap-xs);
      min-width: 0;
    }

    .disclosures__summary-item {
      display: flex;
      flex-direction: column;
      row-gap: var(--gap-xs);
      min-width: 0;
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      width: max-content;
      max-width: none;
      visibility: hidden;
      white-space: nowrap;
      pointer-events: none;
      contain: layout style;
    }

    .disclosures__summary-item-row {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      min-width: 0;
      vertical-align: middle;
    }

    .disclosures__summary-item-title {
      font-weight: var(--font-weight-normal, normal);
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-title {
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .disclosures .details__icon {
      display: inline-block;
      flex-shrink: 0;
      width: auto;
      max-inline-size: 100%;
      height: var(--disclosures-icon-size);
      margin: 0;
      object-fit: contain;
      vertical-align: middle;
    }

    .disclosures__summary-item-row:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title {
      grid-column: 2;
    }

    .disclosures details[open] > summary .disclosures__summary-item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__summary-item-extra {
      display: block;
    }

    .disclosures__separator {
      display: none;
      flex-shrink: 0;
      padding-inline: var(--padding-xs);
      line-height: 1;
    }

    @container (min-width: 701px) {
      .disclosures:where([data-summary-layout='inline']) .details__header {
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper {
        margin-block-start: 0;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item {
        display: block;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row {
        display: inline-flex;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) {
        display: inline-grid;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra {
        display: inline-flex;
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__separator {
        display: inline-block;
      }
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row {
      display: inline-flex;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) {
      display: inline-grid;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-extra {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__separator {
      display: inline-block;
    }

    .disclosures details[open] .disclosures__summary-item-extra {
      display: none;
    }

    .disclosures__item {
      display: flex;
    }

    .disclosures__item + .disclosures__item {
      margin-block-start: var(--spacing-lg);
    }

    .disclosures__item-left {
      flex: 0 1 auto;
      min-width: 0;
      cursor: default;
    }

    .disclosures__item-right {
      flex: 1;
      cursor: pointer;
    }

    .disclosures__item-header {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      margin-block-end: var(--spacing-xs);
      padding-block-end: var(--padding-xs);
    }

    .disclosures__item-title {
      margin: 0;
    }

    .disclosures__item-header:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__item-header:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__item-header:has(> .details__icon) > .disclosures__item-title {
      grid-column: 2;
    }

    .disclosures details[open] .disclosures__item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__item-content {
      max-width: var(--normal-content-width);
      padding-block-end: var(--padding-2xl);
    }

    .disclosures details[open] .details-content {
      padding-block-end: 0;
    }
/* END_BLOCK:disclosures */

/* START_BLOCK:email-signup (INDEX:184) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

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

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

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

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

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

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

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

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

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .email-signup__button.button-unstyled:hover {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-rgb) / var(--opacity-70));
    cursor: pointer;
  }

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

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

/* START_BLOCK:featured-collection (INDEX:185) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:186) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

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

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-subdued);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets: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 - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

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

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--theme-drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

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

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

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

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--theme-drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets--drawer .theme-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

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

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

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

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);

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

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

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-copyright (INDEX:188) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

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

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

/* START_BLOCK:image (INDEX:192) */
.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:194) */
.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:195) */
.menu {
    width: 100%;
  }

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

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

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

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

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

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

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

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

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

/* START_BLOCK:page-content (INDEX:196) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:197) */
.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:198) */
.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:199) */
.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:202) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:204) */
.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:205) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:208) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:sd-bb-price (INDEX:215) */
/* Class-doubled so these outrank the buy box's own .sd-bb__pr / .sd-bb__chip
     rules outright rather than depending on which stylesheet block Shopify
     concatenates last. The old combined block never carries --b, so pages still
     using it keep the buy box's values. */
  .sd-bb__pr.sd-bb__pr--b {
    font-size: var(--sd-bb-price-size, 26px);
  }

  .sd-bb__chip.sd-bb__chip--b {
    background: var(--sd-bb-chip-bg, var(--sd-whisper-lilac));
    color: var(--sd-bb-chip-fg, var(--sd-violet));
  }
/* END_BLOCK:sd-bb-price */

/* START_BLOCK:sd-bb-title (INDEX:218) */
/* Class-doubled (.sd-bb__title.sd-bb__title--b) so it outranks the buy box's
     own .sd-bb__title rule outright. Shopify concatenates every stylesheet block
     into one sheet, and at equal specificity the winner would be decided by
     whichever file happens to land last — which is not guaranteed. The old
     combined block never carries --b, so pages still using it are untouched.

     font-size is a plain px setting rather than the buy box's clamp(): a
     merchant who opens the control expects the number they pick, and a clamp
     would silently ignore it at most viewport widths. */
  .sd-bb__title.sd-bb__title--b {
    font-size: var(--sd-bb-title-size, 30px);
    font-weight: var(--sd-bb-title-weight, 700);
    color: var(--sd-bb-title-color, var(--sd-ink));
    margin: 0 0 var(--sd-bb-title-gap, 12px);
  }
/* END_BLOCK:sd-bb-title */

/* START_BLOCK:sd-bundle-options (INDEX:221) */
.sd-bundle { margin-block-end: 20px; }
  .sd-bundle__note {
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--sd-ink-soft);
    text-transform: uppercase;
    margin-block-end: 12px;
  }
  .sd-bundle__options { display: flex; flex-direction: column; gap: 12px; }
  .sd-bundle__opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border: 1.5px solid var(--sd-hairline);
    border-radius: 14px;
    text-decoration: none;
    color: var(--sd-ink);
    background: var(--sd-canvas);
    transition: border-color 0.2s, background 0.2s;
  }
  /* Ribbon (MOST POPULAR / BEST VALUE) — violet pill, top-right, per v2.1 mockup. */
  .sd-bundle__opt--ribboned { margin-block-start: 9px; }
  .sd-bundle__ribbon {
    position: absolute;
    top: -9px;
    right: 14px;
    background: var(--sd-violet);
    color: #fff;
    font-family: var(--font-body--family);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
  }
  .sd-bundle__opt:hover,
  .sd-bundle__opt:focus-visible { border-color: var(--sd-violet); }
  .sd-bundle__opt--on {
    border-color: var(--sd-violet);
    background: var(--sd-whisper-lilac);
  }
  .sd-bundle__opt-label { font-family: var(--font-body--family); font-size: 14.5px; font-weight: 600; }
  .sd-bundle__opt-right { display: flex; align-items: center; gap: 10px; }
  .sd-bundle__save {
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--sd-violet);
    padding: 4px 9px;
    border-radius: 100px;
  }
  .sd-bundle__price { font-family: var(--font-body--family); font-size: 15px; font-weight: 700; color: var(--sd-ink); }
/* END_BLOCK:sd-bundle-options */

/* START_BLOCK:sd-guarantee (INDEX:226) */
.sd-guarantee {
    border: 1px solid var(--sd-hairline);
    background: color-mix(in srgb, var(--sd-whisper-rose) 88%, var(--sd-canvas));
    border-radius: 16px;
    padding: 18px 20px;
    margin-block-end: 22px;
  }
  .sd-guarantee__h {
    display: block;
    font-family: var(--font-body--family);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sd-ink);
    margin-block-end: 4px;
  }
  .sd-guarantee__p {
    font-family: var(--font-body--family);
    font-size: 13px;
    line-height: 1.6;
    color: var(--sd-ink-soft);
    margin: 0;
  }
/* END_BLOCK:sd-guarantee */

/* START_BLOCK:sd-spec-list (INDEX:227) */
.sd-spec { margin-block: 8px 20px; }
  .sd-spec__heading {
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-soft);
    margin: 0 0 12px;
  }
  .sd-spec__list { margin: 0; }
  .sd-spec__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 10px;
    border-block-end: 1px solid var(--sd-hairline);
    font-family: var(--font-body--family);
    font-size: 14px;
  }
  .sd-spec__row:last-child { border-block-end: 0; }
  .sd-spec__label { color: var(--sd-ink-soft); margin: 0; }
  .sd-spec__value { color: var(--sd-ink); margin: 0; font-weight: 500; text-align: right; }
/* END_BLOCK:sd-spec-list */

/* START_BLOCK:sd-stock-line (INDEX:228) */
.sd-stock {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-instock, #3ED660);
    margin-block: 4px 8px;
  }
  .sd-stock--out { color: var(--sd-ink-soft); }
  .sd-stock__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-instock, #3ED660);
    outline: 3px solid color-mix(in srgb, var(--color-instock, #3ED660) 25%, transparent);
  }
  .sd-stock__dot--out {
    background: var(--color-outofstock, #C8C8C8);
    outline: 3px solid color-mix(in srgb, var(--color-outofstock, #C8C8C8) 25%, transparent);
  }
  .sd-stock__note {
    color: var(--sd-ink-soft);
    font-weight: 400;
  }
/* END_BLOCK:sd-stock-line */

/* START_BLOCK:sd-usp-tiles (INDEX:229) */
.sd-usp {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-block: 8px 20px;
  }
  .sd-usp__tile {
    background: var(--sd-whisper-lilac);
    border: 1px solid var(--sd-hairline);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 10px;
    text-align: center;
  }
  .sd-usp__icon {
    width: 30px;
    height: 30px;
    stroke: var(--sd-ink);
    fill: none;
    stroke-width: 1.5;
  }
  .sd-usp__label {
    font-family: var(--font-body--family);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sd-ink);
  }
  @media (max-width: 560px) {
    .sd-usp { grid-template-columns: 1fr 1fr; }
  }
/* END_BLOCK:sd-usp-tiles */

/* START_BLOCK:social-links (INDEX:231) */
.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:232) */
/* 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 0 auto;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:233) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

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

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:237) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

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

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

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

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

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

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

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:accordion-styles (INDEX:238) */
.accordion {
    flex: 1;
    width: 100%;
  }

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

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

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

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

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

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

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:accordion-styles */

/* START_SNIPPET:add-to-cart-button-styles (INDEX:239) */
/* Add to cart button */
  .button[id^='BuyButtons-ProductSubmitButton-'] {
    position: relative;
    overflow: hidden;
  }

  .add-to-cart-button {
    --text-speed: 0.26;
    --base-delay: calc(var(--text-speed) * 0.25);
    --tick-speed: 0.1;
    --ring-speed: 0.2;
    --check-speed: 0.2;
    --burst-speed: 0.32;
    --step-delay: 3;
    --speed: 1;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    user-select: none;
    transition-property: color, box-shadow, background-color, scale, translate;
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--ease-out-cubic);

    &:active {
      scale: 0.99;
      translate: 0 1px;
    }
  }

  .add-to-cart-button .svg-wrapper .checkmark-burst {
    width: 30px;
    height: 30px;
  }

  .add-to-cart-text {
    --atc-opacity: 0;
    --atc-destination: -1em;

    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .add-to-cart__added {
    --atc-opacity: 1;
    --atc-destination: 0px;

    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }

  .add-to-cart__added-icon {
    width: 32px;
    height: 32px;
  }

  [data-added='true'] .add-to-cart-text,
  [data-added='true'] .add-to-cart__added {
    animation-name: atc-slide;
  }

  .checkmark-burst {
    opacity: 0;
    overflow: visible;

    .burst {
      rotate: 20deg;
    }

    .check {
      opacity: 0.2;
      scale: 0.8;
      filter: blur(2px);
      transform: translateZ(0);
    }

    :is(.ring, .line, .check, .burst, .tick) {
      transform-box: fill-box;
      transform-origin: center;
    }

    :is(.line) {
      stroke-dasharray: 1.5 1.5;
      stroke-dashoffset: -1.5;
      translate: 0 -180%;
    }

    g {
      transform-origin: center;
      rotate: calc(var(--index) * (360 / 8) * 1deg);
    }
  }

  .add-to-cart-button[data-added='true'] .checkmark-burst {
    opacity: 1;
  }

  .add-to-cart-button[data-added='true'] {
    color: transparent;

    .check {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }

    .tick {
      scale: 1.75;
    }

    .ring {
      opacity: 0;
      scale: 1;
    }

    .line {
      stroke-dashoffset: 1.5;
    }

    .add-to-cart__added {
      color: var(--button-color);
    }

    .add-to-cart-text {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: circle(0% at 50% 50%);
      filter: blur(2px);
      opacity: 0;
      translate: 0 4px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .add-to-cart-button[data-added='true'] {
      .check {
        transition-property: opacity, scale, filter;
        transition-duration: calc(calc(var(--check-speed) * 1s));
        transition-delay: calc((var(--base-delay) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .tick {
        transition-property: scale;
        transition-duration: calc((calc(var(--tick-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
        transition-timing-function: ease-out;
      }

      .ring {
        transition-property: opacity, scale;
        transition-duration: calc((calc(var(--ring-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .line {
        transition-property: stroke-dashoffset;
        transition-duration: calc((calc(var(--burst-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-cubic);
      }
    }

    .add-to-cart-text {
      transition-property: clip-path, opacity, filter, translate;
      transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
      transition-timing-function: ease-out;
    }
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(100% at 50% 50%);
  }

  @keyframes atc-slide {
    to {
      opacity: var(--atc-opacity, 1);
      translate: 0px var(--atc-destination, 0px);
    }
  }
/* END_SNIPPET:add-to-cart-button-styles */

/* START_SNIPPET:bento-grid (INDEX:242) */
.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:243) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

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

    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

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

  .product__pickup-availabilities {
    width: 100%;
    color: var(--color, var(--color-foreground));
  }

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

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

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

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

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

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

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

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

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

  .pickup-location__button:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

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

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

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

  .volume-pricing__table {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  more-payment-options-link a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

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

/* START_SNIPPET:card-gallery (INDEX:249) */
.card-gallery {
    position: relative;
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  @container (max-width: 70px) {
    .card-gallery:hover .quick-add__button {
      display: none;
    }
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

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

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

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

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

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

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

/* START_SNIPPET:cart-disclosure-tooltip (INDEX:251) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer (INDEX:252) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

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

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  /* The scroller. Was `height: calc(100% - var(--header-height))` back when the
     header sat outside it; the header is a child now, so it sizes from flex
     instead. min-height:0 is what lets it shrink below its content height — a
     flex child refuses to by default, which would push the footer off-screen on
     a long bag. */
  .cart-drawer__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Explicit, and not `visible`: a box with overflow-y:auto computes
       overflow-x to auto too, so anything that pokes past the drawer's inline
       edge earns a horizontal scrollbar across the whole column. The drawer is
       a fixed-width sheet and never scrolls sideways.

       `hidden`, not `clip`: paired with overflow-y:auto the two compute
       identically (clip becomes hidden), but `clip` is a newer keyword — where
       it is unsupported the whole declaration is dropped as invalid and the
       axis silently falls back to the `auto` this line exists to prevent.
       `hidden` has no such gap. This is a backstop, not the fix: the actual
       widener was the cart line's price track (see cart-products.liquid). */
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  /* No longer scrolls on its own — the column above owns the travel. */
  /* padding-block-start separates the first row from the assurance strip
     directly above it: the strip is a filled band, so without it the first
     product image butts straight against the band's edge and the two read as
     one block. It goes on the list rather than the first row so that removing
     the last item never leaves the gap behind on an empty list. */
  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    padding-block-start: var(--padding-lg);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--gap-xl);
  }

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

  /* The `:last-child` rule that used to sit here stripped the final row's
     border, padding and margin. That was right when the bag was the last thing
     in the drawer and a rule under the final product would have been a line
     against nothing. The upsell rail now follows the list inside the same
     scrolling column, so that divider has something to divide: it closes the
     bag off from the recommendation below it. Every row is treated the same,
     which also drops the lone `padding-top: 6px` that nudged only the last row
     down relative to its siblings. */

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  /* The pinned footer. It is a sibling of the scroller, not a child, so it is
     fixed in place structurally — the position:sticky + margin-top:auto +
     mask-image fade it used to need are gone with the box it used to sit in.
     flex: 0 0 auto stops a long footer from being squeezed by the column. */
  .cart-drawer__summary {
    --cart-drawer-summary-padding: 12px 24px 24px 24px;

    flex: 0 0 auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: var(--cart-drawer-summary-padding);
    background-color: var(--color-background);

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

  /* cart-drawer.js still writes cart-summary-sticky="true|false" after
     measuring the summary against the drawer height. Nothing here reads it any
     more — the split between the two boxes is structural, so the attribute can
     flip freely without changing what scrolls. The rules that keyed off it
     (unsticking the summary, handing overflow back to .cart-drawer__items) are
     deliberately removed rather than left to fight the new layout. */

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

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

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

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

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
    padding-block-start: 0;
  }

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

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
    padding-block-start: 0;
  }

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

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }
/* END_SNIPPET:cart-drawer */

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

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

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

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

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

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

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

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

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:254) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

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

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

  .cart-items__wrapper {
    display: flex;
    flex-direction: column;
  }

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

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

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

  .cart-items__table * {
    margin: 0;
  }

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

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

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

  .cart-items__product-info {
    min-width: 0;
  }

  /* Cart drawer: variants get their own full-width row under the title.
     (The unit_price row that used to sit here went with the duplicate
     per-unit price — see the comment on the markup above.) */
  .cart-items__table-row--full-width-variants {
    /* Price track was a bare `auto`, i.e. max-content — it sized to whatever
       the price cell wanted and pushed the row wider than the drawer once a
       was-price joined the total. minmax(min-content, max-content) lets it ask
       for its ideal width but yield when the row runs out of room. */
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(min-content, max-content);
    grid-template-rows: repeat(3, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media quantity quantity'
      'media error error';
          column-gap: 24px;

    .cart-items__details {
      display: contents;
    }

    /* Title and price share the first row but not a font size, and the row is
       align-items: start — so each sat flush to the top of its track and the
       smaller price text rode visibly high against the title. Baseline
       alignment pairs them on the text baseline instead of the box edge, which
       is what "level with the title" actually means optically. Both sides have
       to opt in; grid baseline-groups only the items that ask for it. */
    .cart-items__product-info {
      grid-area: details;
      align-self: baseline;
    }

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

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    /* Was `width: max-content`, which asked the auto track above to be wide
       enough for the total AND its was-price on one unbroken line. One price
       fit; two did not — the track grew past the drawer's inline edge and the
       whole column picked up a horizontal scrollbar. The cell may shrink now,
       and .cart-items__price-row stacks the two figures rather than lining them
       up, so the track only ever needs the width of the longer one.

       align-self: baseline is the other half of the title/price pairing above.
       The cell's first baseline is its first line of text — the struck
       was-price when there is one, the total when there is not — so whichever
       figure sits on top is the one that lines up with the product title. */
    .cart-items__price {
      min-width: 0;
      max-width: 100%;
      align-self: baseline;
    }
  }

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

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

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

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

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

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

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

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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__bundle li dropped alongside the bundle component list. */
  .cart-items__details > * + * {
    margin-block-start: var(--margin-3xs);
  }

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

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

  .cart-items__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

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

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

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

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

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

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

  /* Total + struck-through was-price on one baseline, right-aligned, wrapping
     to a second line only when the two together outgrow the price column. */
  /* Was-price stacked directly above the total, both hard right. A column
     rather than a wrapping row: the two never share a line, so the price track
     only ever needs to be as wide as the longer of the two figures — which is
     also what keeps this cell from widening the row past the drawer's edge. */
  .cart-items__price-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--gap-3xs);
  }

  .cart-items__price .compare-at-price {
    font-size: var(--font-size--xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .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);
    margin-inline: auto;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

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

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

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

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

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

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

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

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

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

    /* Cart drawer: variants span the full width under the title row. */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media error error error';

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart__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-button-block-size: var(--height-buy-buttons);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

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

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

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

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

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

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

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

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

  .cart-items__property {
    display: block;
  }

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

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

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

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

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

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

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

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

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:255) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:cart-typography-styles (INDEX:256) */
.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);
  }
/* END_SNIPPET:cart-typography-styles */

/* START_SNIPPET:chat-drawer (INDEX:257) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:checkbox-styles (INDEX:258) */
.checkbox {
    --checkbox-path-opacity: 0;
    --checkbox-cursor: pointer;

    position: relative;
    display: flex;
    align-items: center;

    &.checkbox--disabled {
      --checkbox-cursor: not-allowed;
    }
  }

  .checkbox:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  .checkbox__input {
    position: absolute;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;

    /* Outline is on the SVG instead, to allow it to have border-radius */
    &:focus-visible {
      outline: none;
    }
  }

  .checkbox__label {
    position: relative;
    display: inline-flex;
    cursor: var(--checkbox-cursor);
    line-height: var(--checkbox-size);
    min-width: var(--minimum-touch-target);
  }

  .checkbox .icon-checkmark {
    height: var(--checkbox-size);
    width: var(--checkbox-size);
    flex-shrink: 0;
    border: var(--checkbox-border);
    border-radius: var(--checkbox-border-radius);
    background-color: var(--color-background);
  }

  .checkbox__input:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  .checkbox__input:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }

  .checkbox__label-text {
    padding-inline-start: var(--checkbox-label-padding);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .checkbox .icon-checkmark path {
    stroke: var(--color-background);
    opacity: var(--checkbox-path-opacity);
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .checkbox__input:disabled + .checkbox__label {
    color: var(--input-disabled-text-color);
  }
/* END_SNIPPET:checkbox-styles */

/* START_SNIPPET:collection-card (INDEX:260) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
    height: 100%;
    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--gap);
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }

    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:collection-wrapper-styles (INDEX:261) */
/* ------------------------------------------------------------------------------ */

  /* Collection Wrapper - Shared layout CSS for collection and search pages */

  /* ------------------------------------------------------------------------------ */

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;

      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  /* Make product media go edge-to-edge by using negative margins */
  :is(.collection-wrapper--full-width) .card-gallery,
  :is(.collection-wrapper--full-width-on-mobile) .card-gallery {
    @media screen and (max-width: 749px) {
      margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
      margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
    }
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }

  .collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }
/* END_SNIPPET:collection-wrapper-styles */

/* START_SNIPPET:deferred-media-product-model-styles (INDEX:264) */
.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;
      }
    }
  }

  .product-media product-model {
    position: absolute;
  }

  .product-media-container--model {
    /* Usefull when view in your space is shown */
    flex-direction: column;
  }

  .shopify-model-viewer-ui__controls-area {
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  /* If the product media is already providing an image cover, hide images provided by sibling product-model */
  .product-media__image ~ product-model .deferred-media__poster-image {
    display: none;
  }

  /* If the product model is playing, hide the preview image */
  .product-media-container:has(product-model .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  product-model {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  product-model model-viewer,
  product-model > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  product-model > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  product-model > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .button-shopify-xr {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-md);
  }

  .button-shopify-xr > svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-inline-end: var(--margin-md);
  }

  .button-shopify-xr[data-shopify-xr-hidden] {
    display: none;
  }

  product-model .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  product-model .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:deferred-media-product-model-styles */

/* START_SNIPPET:deferred-media-video-styles (INDEX:265) */
.product-media deferred-media {
    position: absolute;
  }

  /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
  .product-media__image ~ deferred-media .deferred-media__poster-image {
    display: none;
  }

  /* If the product media video is playing, hide the preview image */
  .product-media-container:has(deferred-media .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  deferred-media {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;

    /* The overflow hidden in the deferred-media won't let the button show the focus ring */
    &:has(:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    @supports not selector(:focus-visible) {
      &:has(:focus) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: var(--focus-outline-offset);
      }
    }
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  deferred-media > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  deferred-media.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  deferred-media > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  deferred-media > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  deferred-media img {
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
  }

  deferred-media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  deferred-media[data-media-loaded] img {
    opacity: 0;
  }

  deferred-media .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  deferred-media .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }

  deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    /* only apply this on the video block not product media */
    object-fit: cover;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  .video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:deferred-media-video-styles */

/* START_SNIPPET:divider (INDEX:266) */
.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:267) */
.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:268) */
.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:269) */
.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%;
    }

    /* Single-media cards skip the slideshow wrappers, so stretch the plain
     * media container directly to fill the editorial cell. The multi-media
     * container sits under slideshow-component and is unaffected. */
    .card-gallery > a > .product-media-container {
      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:270) */
/* 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:fly-to-cart-styles (INDEX:271) */
/* Fly to cart animation */
  fly-to-cart {
    --offset-y: 10px;

    position: fixed;
    width: var(--width, 40px);
    height: var(--height, 40px);
    left: 0;
    top: 0;
    z-index: calc(infinity);
    pointer-events: none;
    border-radius: var(--style-border-radius-buttons-primary);
    overflow: hidden;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    opacity: 0;
    background-color: var(--color-foreground);
    translate: var(--start-x, 0) var(--start-y, 0);
    transform: translate(-50%, -50%);
    animation-name: travel-x, travel-y, travel-scale;
    animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
    animation-duration: 0.6s;
    animation-composition: accumulate;
    animation-fill-mode: both;
  }

  fly-to-cart.fly-to-cart--main {
    --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
    --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
    --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
  }

  fly-to-cart.fly-to-cart--quick {
    --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
    --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);

    animation-duration: 0.6s;
  }

  fly-to-cart.fly-to-cart--sticky {
    --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
    --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
    --radius: var(--style-border-radius-buttons-primary);

    @media screen and (max-width: 749px) {
      --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
    }

    animation-duration: 0.8s;
  }

  @keyframes travel-scale {
    0% {
      opacity: var(--start-opacity, 1);
    }

    5% {
      opacity: 1;
    }

    100% {
      border-radius: 50%;
      opacity: 1;
      transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
    }
  }

  @keyframes travel-x {
    to {
      translate: var(--travel-x, 0) 0;
    }
  }

  @keyframes travel-y {
    to {
      translate: 0 var(--travel-y, 0);
    }
  }
/* END_SNIPPET:fly-to-cart-styles */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:276) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:278) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:279) */
.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:280) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:281) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-overlay);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    outline-color: var(--color-foreground-subdued);
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:287) */
.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:290) */
.facets__bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--variant-picker-swatch-height) / 1.5);
    min-width: 20px;
    padding: 0 6px;
    border-radius: 20px;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .facets__bubble svg {
    width: 12px;
    height: 12px;
  }

  .show-more__button {
    color: var(--color-foreground);
    cursor: pointer;
  }

  .show-more__button:hover {
    @media screen and (min-width: 750px) {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
    }
  }

  .show-more__label {
    text-align: start;
    font-size: var(--font-size--body-md);
    font-family: var(--font-paragraph--family);
  }

  .show-more__button .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .show-more[data-expanded='true'] .show-more__label--more,
  .show-more[data-expanded='false'] .show-more__label--less {
    display: none;
  }

  .show-more__button .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }

  .facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: var(--color-foreground-subdued);
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:291) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-foreground);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector--top-shadow::before {
    content: '';
    box-shadow: 0 0 10px var(--color-shadow);
    position: absolute;
    z-index: var(--layer-lowest);
    inset: 0;
    clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:292) */
.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:297) */
.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:298) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
    isolation: isolate;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      )::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      ) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:299) */
.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:payment-terms-styles (INDEX:300) */
form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_SNIPPET:payment-terms-styles */

/* START_SNIPPET:pills-styles (INDEX:301) */
/* Pills (used in facets and predictive search) */

  .pills__pill {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

    color: var(--color-foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 48px;
    padding: 6px 12px;
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
    background-color: var(--pills-pill-background-color);
    transition: background-color var(--animation-speed) var(--animation-easing);

    &:hover {
      --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    }

    @media screen and (max-width: 749px) {
      padding: var(--padding-xs) var(--padding-md);
    }
  }

  .pills__pill > .svg-wrapper {
    --close-icon-opacity: 0.4;
    --icon-stroke-width: 1px;

    color: var(--color-foreground);
  }

  .pills__pill--swatch {
    @media screen and (max-width: 749px) {
      padding-inline-start: var(--padding-sm);
    }
  }

  .pills__pill--swatch .swatch {
    margin-right: -4px;
  }

  .pills__pill--desktop-small {
    @media screen and (min-width: 750px) {
      font-size: var(--font-size--xs);
    }
  }
/* END_SNIPPET:pills-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:305) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: var(--color-foreground-subdued);
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:306) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    color: var(--color-foreground-muted);
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:308) */
.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-gallery-zoom-details-styles (INDEX:309) */
.product-grid-view-zoom-out--details {
    display: none;
  }

  .product-grid-view-zoom-out--details .h4,
  .product-grid-view-zoom-out--details span,
  .product-grid-view-zoom-out--details s {
    font-size: var(--font-size--xs);
    font-family: var(--font-paragraph--family);
  }

  .product-grid-view-zoom-out--details span {
    font-weight: 500;
  }

  .product-grid-view-zoom-out--details .h4 {
    line-height: 1.3;
    font-weight: 400;
  }

  .product-grid-view-zoom-out--details > span.h6,
  .product-grid-view-zoom-out--details > div.h6 > product-price {
    display: inline-block;
    line-height: 0;
    margin-top: var(--margin-2xs);
  }

  .product-grid-view-zoom-out--details > span.h6 > *,
  .product-grid-view-zoom-out--details > div.h6 > * > * {
    line-height: 1.2;
  }
/* END_SNIPPET:product-card-gallery-zoom-details-styles */

/* START_SNIPPET:product-card-styles (INDEX:310) */
.product-grid__card.product-grid__card {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--product-card-gap);
    align-items: var(--product-card-alignment);
    text-decoration: none;
    color: var(--color, var(--color-foreground));
    padding-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    overflow: hidden;
  }

  .product-grid__card .group-block > * {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  /* Collection and product list cards have equal heights */
  :is(.product-grid__item, .resource-list__item) .product-card {
    display: grid;
    height: 100%;
  }

  /* Product card title truncation - applied on mobile regardless of view */
  @media screen and (max-width: 749px) {
    :is(.product-card, .product-grid__card) :is(h4, .h4) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
    }
  }

  .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-styles */

/* START_SNIPPET:product-grid (INDEX:312) */
/* Product grid */
  .product-grid-container {
    display: block;
    width: 100%;
    padding-block: var(--padding-block-start) var(--padding-block-end);

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  [product-grid-view='default'] {
    --product-grid-gap: 16px;
    --padding-block-start: 24px;
    --padding-block-end: 24px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
  }

  .product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--product-grid-gap);
    margin: auto;
    padding: 0;
    list-style: none;
    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);

      grid-template-columns: var(--product-grid-columns-desktop);
    }
  }

  .product-grid :is(h3, p) {
    margin: 0;
  }

  .product-grid__item {
    border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
  }

  [product-grid-view='default'] .product-grid__item {
    padding-block: 0;
  }

  .product-grid--organic[product-grid-view='default'] .product-grid__item {
    height: fit-content;
  }

  [product-grid-view='zoom-out'] .product-grid__card.product-grid__card {
    row-gap: var(--padding-xs);
  }

  [product-grid-view='mobile-single'],
  .product-grid-mobile--large {
    @media screen and (max-width: 749px) {
      grid-template-columns: 1fr;
    }
  }

  ul[product-grid-view='zoom-out'] .product-grid__card > * {
    display: none;
  }

  [product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(
      10,
      minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    :root:active-view-transition-type(product-grid) {
      details[open] floating-panel-component {
        view-transition-name: panel-content;

        .checkbox *,
        .facets__pill-label {
          transition: none;
        }

        .facets--vertical & {
          view-transition-name: none;
        }
      }

      .product-grid {
        view-transition-name: product-grid;
      }

      footer {
        view-transition-name: footer;
      }

      .product-grid__item,
      floating-panel-component {
        transition: none;
      }
    }
  }

  ::view-transition-group(panel-content) {
    z-index: 1;
  }

  ::view-transition-new(product-grid) {
    animation-delay: 150ms;
    animation-name: fadeInUp;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  results-list[initialized] {
    .product-grid__item {
      transition: opacity var(--animation-speed) var(--animation-easing),
        transform var(--animation-speed) var(--animation-easing);

      @starting-style {
        opacity: 0;
        transform: translateY(10px);
      }
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Product card title truncation - applied only to zoom-out view */
  [product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:313) */
.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-container-styles (INDEX:314) */
:where(:not(.dialog-zoomed-gallery)) > .product-media-container {
    --slide-width: 100%;

    display: flex;
    aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
    max-height: var(--constrained-height);
    width: var(--slide-width, 100%);

    /* Relative position needed for video and 3d models */
    position: relative;
    overflow: hidden;

    &:where(.constrain-height) {
      /* arbitrary offset value based on average theme spacing and header height */
      --viewport-offset: 400px;
      --constrained-min-height: 300px;
      --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

      margin-right: auto;
      margin-left: auto;
    }

    @supports (--test: round(up, 100%, 1px)) {
      /* width and overflow forces children to shrink to parent width */
      --slide-width: round(up, 100%, 1px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-media-container.constrain-height {
      max-height: none;
    }
  }

  @media screen and (min-width: 750px) {
    .product-media-container.constrain-height {
      --viewport-offset: var(--header-height, 100px);
      --constrained-min-height: 500px;
    }

    body:has(header-component[transparent]) .product-media-container.constrain-height {
      --viewport-offset: 0px;
    }
  }

  .product-media-container img {
    aspect-ratio: inherit;
    object-fit: contain;
  }

  .product-media-container.media-fit-contain img {
    object-position: center center;
  }

  .product-media-container.media-fit {
    --product-media-fit: cover;

    img {
      object-fit: var(--product-media-fit);
    }
  }
/* END_SNIPPET:product-media-container-styles */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:315) */
/* Product Media */
  media-gallery {
    display: block;
    width: 100%;
  }

  :where(media-gallery, .product-grid__item) {
    .media-gallery__grid {
      grid-template-columns: 1fr;
      gap: var(--image-gap);
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--large-first-image .product-media-container:first-child,
    .media-gallery--two-column .product-media-container:only-child {
      /* First child spans 2 columns */
      grid-column: span 2;
    }
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:316) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-recommendations-styles (INDEX:318) */
.product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }
/* END_SNIPPET:product-recommendations-styles */

/* START_SNIPPET:quantity-selector-styles (INDEX:319) */
/* Quantity selector */
  .quantity-selector {
    --quantity-selector-width: 124px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    flex: 1 1 var(--quantity-selector-width);
    align-self: stretch;
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
    border-radius: var(--style-border-radius-buttons-secondary);
  }

  .quantity-selector :is(.quantity-minus, .quantity-plus) {
    /* Unset button styles */
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
    color: var(--color-input-text);
  }

  .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-inputs);
    border-end-start-radius: var(--style-border-radius-inputs);
  }

  .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-inputs);
    border-end-end-radius: var(--style-border-radius-inputs);
  }

  .product-details .quantity-selector,
  .quick-add-modal .quantity-selector {
    border-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-minus,
  .quick-add-modal .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-buttons-primary);
    border-end-start-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-plus,
  .quick-add-modal .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-buttons-primary);
    border-end-end-radius: var(--style-border-radius-buttons-primary);
  }

  .quantity-selector .svg-wrapper {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .quantity-selector svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  :is(.quantity-minus, .quantity-plus):active .svg-wrapper {
    transform: scale(0.9);
  }

  .quantity-selector input[type='number'] {
    margin: 0;
    text-align: center;
    border: none;
    appearance: none;
    max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
    border-radius: var(--style-border-radius-buttons);
    color: var(--color-input-text);
    background-color: transparent;
  }

  /* Chrome, Safari, Edge, Opera */
  .quantity-selector input[type='number']::-webkit-inner-spin-button,
  .quantity-selector input[type='number']::-webkit-outer-spin-button {
    appearance: none;
  }

  /* Firefox */
  .quantity-selector input[type='number'] {
    appearance: textfield;
  }
/* END_SNIPPET:quantity-selector-styles */

/* START_SNIPPET:quantity-selector (INDEX:320) */
.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:321) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:323) */
/* 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));
    --quick-add-inset-inline-end: max(
      var(--quick-add-right),
      calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg)))
    );
    --quick-add-inset-block-end: max(
      var(--quick-add-bottom),
      calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg)))
    );

    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;
  }

  /* Hide "Add" button when "Choose" button is shown */
  [data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  /* Hide "Choose" button when "Add" button is shown */
  [data-quick-add-button='add'] .quick-add__button--choose {
    display: none;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  button.quick-add__button {
    --quick-add-collapsed-width: var(--button-size-md);
    --quick-add-icon-width: calc(var(--button-size-md) - 4px);
    --quick-add-expanded-width: max-content;

    display: var(--quick-add-mobile-display, none);
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: linear-gradient(var(--quick-add-background, 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);
    width: var(--quick-add-collapsed-width);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    pointer-events: all;
    position: absolute;
    inset-inline-end: var(--quick-add-inset-inline-end);
    inset-block-end: var(--quick-add-inset-block-end);
    max-inline-size: calc(100% - var(--quick-add-inset-inline-end));
    min-inline-size: 0;
    white-space: nowrap;
    backdrop-filter: blur(20px) saturate(180%);
    interpolate-size: allow-keywords;

    &: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: flex;
    }

    @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 .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button > .add-to-cart-icon {
    flex-shrink: 0;
    width: var(--quick-add-icon-width);
    height: 100%;
  }

  .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;
  }

  @media screen and (min-width: 750px) {
    .quick-add__button:is(:hover, :focus-visible) {
      width: var(--quick-add-expanded-width);
      padding-inline-end: var(--padding-sm);
    }
  }

  .quick-add__button[data-added='true'] {
    width: var(--quick-add-collapsed-width);
    color: transparent;
  }

  .quick-add__button[data-added='true'] > .add-to-cart-icon {
    opacity: 0;
  }

  .quick-add__button[data-added='true'] .add-to-cart__added {
    color: var(--quick-add-foreground, var(--color-foreground));
  }

  @media (prefers-reduced-motion: no-preference) {
    button.quick-add__button {
      transition-property: scale, translate, opacity, width;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:326) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .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-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-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:327) */
.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:328) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

    /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */
    margin-block: -16px;
    padding-block: 16px;
  }

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:resource-list-styles (INDEX:329) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list(min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-modal (INDEX:332) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:333) */
.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:334) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(#header-group > .header-section > #header-component[transparent]):not(
      :has(#header-group > .header-section + .shopify-section)
    )
    #MainContent
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:336) */
.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:338) */
.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:339) */
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:340) */
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:342) */
/*
   * 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:sorandi-card-swatch (INDEX:346) */
.sd-card-sw {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-block-end: 8px;
  }
  .sd-card-sw__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(51, 47, 43, 0.15);
  }
/* END_SNIPPET:sorandi-card-swatch */

/* START_SNIPPET:sorandi-cart-drawer (INDEX:347) */
/* ---- Panel: right-side sheet, left corners rounded, sorandi canvas + shadow ----
     Set --theme-drawer-width (the native var drives BOTH width and the slide
     offset), so we resize without fighting the native width declaration. */
  .theme-drawer__dialog {
    --theme-drawer-width: min(440px, calc(100vw - 24px));
    max-width: min(440px, calc(100vw - 24px));
    background: var(--sd-cart-bg, var(--sd-canvas));
    border-start-start-radius: 20px;  /* top-left */
    border-end-start-radius: 20px;    /* bottom-left */
    border-start-end-radius: 0;       /* top-right */
    border-end-end-radius: 0;         /* bottom-right */
    box-shadow: 0 24px 60px rgba(51, 47, 43, 0.18);
  }

  /* ---- Mobile: full-bleed sheet ----
     Below 750px the 24px inset above left a strip of the page showing through
     on the drawer's left. On a phone the drawer is the whole surface, so it
     fills the viewport and drops the left rounding (nothing sits beside it).

     height: 100svh, not the native 100dvh: dvh tracks the *current* viewport,
     so while mobile browser chrome is animating in/out the drawer is briefly
     taller than what's on screen and the sticky footer (checkout button) is
     pushed under the address bar. svh is the smallest stable height, so the
     button stays reachable in every toolbar state.

     Specificity note: snippets/theme-drawer-styles.liquid styles this exact same
     selector (.theme-drawer__dialog) with width/max-width/height, and both files
     use a stylesheet tag, so Shopify concatenates them into one sheet where equal
     specificity means SOURCE ORDER decides. That order is not guaranteed here, so
     these rules are written as dialog.theme-drawer__dialog (element + class) to
     outrank the native block outright instead of relying on which one lands last.
     !important is avoided so section-level overrides remain possible. */
  @media (max-width: 749px) {
    dialog.theme-drawer__dialog {
      --theme-drawer-width: 100vw;
      width: 100vw;
      max-width: 100vw;
      height: 100svh;
      border-left: none;
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
  }

  /* ---- Overlay: ink at 40% ---- */
  .theme-drawer__dialog::backdrop {
    background: color-mix(in srgb, var(--sd-ink) 40%, transparent);
  }

  /* ---- Slide-in on the house curve; overlay fades in sync ---- */
  .theme-drawer__dialog--opening,
  .theme-drawer__dialog--opening-inline-start {
    animation-timing-function: var(--sd-ease);
    animation-duration: 0.4s;
  }
  @media (prefers-reduced-motion: reduce) {
    .theme-drawer__dialog--opening,
    .theme-drawer__dialog--opening-inline-start,
    .theme-drawer__dialog--closing {
      animation-duration: 0.01ms;
    }
  }

  /* ---- Header: "Your bag · N" in Marcellus, hairline bottom, 44px close ---- */
  .theme-drawer__title {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: 24px;
    color: var(--sd-ink);
  }
  .theme-drawer__badge { color: var(--sd-ink-soft); }
  .theme-drawer__header { border-block-end: 1px solid var(--sd-hairline); }
  .theme-drawer__close-button { min-width: 44px; min-height: 44px; }

  /* ---- Assurance strip: whisper-lilac band, two honest truths (no scarcity) ----
     Sits outside the scroll area (between the header and the items), so it is
     already fixed by construction. flex: none stops the drawer's column from
     squeezing it when the bag is long — a flex child's default min-height is
     auto, but shrinking is not, and a compressed strip would clip its text. */
  .sd-cart__assurance {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--sd-cart-assurance-bg, var(--sd-whisper-lilac));
    color: var(--sd-cart-assurance-fg, var(--sd-ink));
    font-family: var(--font-body--family);
    font-size: var(--sd-cart-assurance-size, 13px);
    padding: 10px 16px;
  }

  /* ---- Line rows: 72px whisper tile, title 15/600, lowercase colorway subline ---- */
  .cart-drawer__inner .cart-items__media { width: 72px; }
  .cart-drawer__inner .cart-items__media-container {
    width: 72px;
    height: 72px;
    background: var(--sd-whisper-lilac);
    border-radius: 14px;
    overflow: hidden;
    display: block;
  }
  .cart-drawer__inner .cart-items__media-image { width: 100%; height: 100%; object-fit: cover; }

  .cart-drawer__inner .cart-items__title {
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 600;
    color: var(--sd-ink);
  }
  /* Colourway subline. The .cart-items__bundle selectors that used to ride
     along here went with the bundle component list in cart-products.liquid;
     bundle lines now render their chosen variant through .cart-items__variant
     like every other line, so they are already covered. */
  .cart-drawer__inner .cart-items__variants,
  .cart-drawer__inner .cart-items__variant,
  .cart-drawer__inner .cart-items__variant dd {
    font-family: var(--font-body--family);
    font-size: 13px;
    color: var(--sd-ink-soft);
    text-transform: lowercase;
  }
  /* Divider: recolour the one Horizon already draws, never add a second.
     snippets/cart-drawer.liquid gives every row a border-bottom (and clears it
     on :last-child). This file used to add border-block-start to row + row on
     top of that, which put TWO hairlines between every pair of lines —
     separated by the row's own margin-bottom, so they read as a double rule
     rather than one thick one. Overriding the colour keeps the brand hairline
     with a single line, and the last-child/nested-line exceptions upstream
     keep working for free. */
  .cart-drawer__inner .cart-items__table-row {
    border-block-end-color: var(--sd-hairline);
  }

  /* Qty stepper: hairline pill, 44px targets, violet on hover. */
  .cart-drawer__inner .cart-items__quantity .quantity-selector {
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-pill);
    overflow: hidden;
  }
  .cart-drawer__inner .cart-items__quantity .quantity-minus,
  .cart-drawer__inner .cart-items__quantity .quantity-plus {
    min-width: 44px;
    min-height: 44px;
    color: var(--sd-ink);
    background: transparent;
    transition: color 0.2s var(--sd-ease), background 0.2s var(--sd-ease);
  }
  .cart-drawer__inner .cart-items__quantity .quantity-minus:hover,
  .cart-drawer__inner .cart-items__quantity .quantity-plus:hover,
  .cart-drawer__inner .cart-items__quantity .quantity-minus:focus-visible,
  .cart-drawer__inner .cart-items__quantity .quantity-plus:focus-visible {
    color: var(--sd-violet);
  }

  /* Remove: small underlined text link. */
  .cart-drawer__inner .cart-items__remove {
    font-family: var(--font-body--family);
    font-size: 12.5px;
    color: var(--sd-ink-soft);
    text-decoration: underline;
    background: none;
    border: 0;
  }
  .cart-drawer__inner .cart-items__remove:hover { color: var(--sd-violet); }

  /* Line price right-aligned, ink. */
  /* The payable figure carries the brand violet so it reads as the number that
     matters; the struck was-price stacked above it stays muted ink-soft, so the
     pair has a clear hierarchy rather than two equal prices. */
  .cart-drawer__inner .cart-items__price {
    font-family: var(--font-body--family);
    color: var(--sd-violet);
    font-weight: 600;
  }
  .cart-drawer__inner .cart-items__price .compare-at-price {
    color: var(--sd-ink-soft);
    font-weight: 400;
  }

  /* ---- Footer: subtotal, reassurance line, Checkout pill, payment chips ---- */
  .cart-drawer__inner .cart-totals__total-label,
  .cart-drawer__inner .cart-totals__original-label {
    font-family: var(--font-body--family);
    font-size: var(--sd-cart-title-size, 15px);
    color: var(--sd-cart-text, var(--sd-ink));
  }
  .cart-drawer__inner .cart-totals__total-value,
  .cart-drawer__inner .cart-totals__original-value {
    font-family: var(--font-body--family);
    font-size: var(--sd-cart-price-size, 17px);
    font-weight: 700;
    color: var(--sd-cart-text, var(--sd-ink));
  }
  /* Checkout: full-width violet pill (label is plain "Checkout", never a price). */
  .cart-drawer__inner .sd-cart__checkout {
    width: 100%;
    min-height: 44px;
    background: var(--sd-cart-btn-bg, var(--sd-violet));
    border: 1.5px solid var(--sd-cart-btn-bg, var(--sd-violet));
    border-radius: var(--sd-radius-pill);
    color: var(--sd-cart-btn-text, #fff);
    font-size: var(--sd-cart-btn-size, inherit);
    font-family: var(--font-body--family);
    /* Merchant-set (Theme settings → sorandi Brand → Cart drawer). The token is
       declared in sorandi-tokens.liquid, which is an inline <style> and therefore
       the only place that can read a setting — this block is a {% stylesheet %},
       served as a static asset with no access to settings.*. */
    font-weight: var(--sd-cart-checkout-weight, 600);
    transition: background 0.25s var(--sd-ease), border-color 0.25s var(--sd-ease);
  }
  .cart-drawer__inner .sd-cart__checkout:hover,
  .cart-drawer__inner .sd-cart__checkout:focus-visible {
    background: var(--sd-cart-btn-bg-h, var(--sd-violet-hover));
    border-color: var(--sd-cart-btn-bg-h, var(--sd-violet-hover));
  }

  /* Payment chips (same as the PDP). */
  .cart-drawer__inner .sd-cart__payrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-block-start: 12px;
  }
  /* payment_type_svg_tag renders an inline <svg> with its own viewBox, so the
     chip box goes on the SVG itself. Same 42x26 as the text chip, so the row's
     rhythm is unchanged. The brand marks are not all 42:26, so
     preserveAspectRatio (the SVG default) letterboxes them inside the box — the
     inline-SVG equivalent of object-fit:contain. padding keeps the mark off its
     own border. Matches .sd-bb__payicon in blocks/_sd-pdp-buybox.liquid. */
  .cart-drawer__inner .sd-cart__payicon {
    width: 42px;
    height: 26px;
    padding: 2px;
    background: var(--sd-canvas);
    border: 1px solid rgba(51, 47, 43, 0.1);
    border-radius: 5px;
    box-sizing: border-box;
    display: block;
    flex: none;
  }
  /* Text fallback for a type with no matching brand SVG — keeps the row intact
     rather than dropping the chip. */
  .cart-drawer__inner .sd-cart__payrow i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 26px;
    background: var(--sd-canvas);
    border: 1px solid rgba(51, 47, 43, 0.1);
    border-radius: 5px;
    font-style: normal;
    font-family: var(--font-body--family);
    font-size: 8.5px;
    font-weight: 700;
    color: var(--sd-ink-soft);
  }

  /* Pinned footer: hairline top + mobile safe-area padding. */
  .cart-drawer__inner .cart-drawer__summary {
    border-block-start: 1px solid var(--sd-hairline);
    
  }

  /* ---- ONE scroller: everything above the footer ----
     The scroll split is now structural (see snippets/cart-drawer.liquid):
     .cart-drawer__content is the single scrolling column and carries the
     header, assurance strip, line items and upsell rail; .cart-drawer__summary
     is its SIBLING, so the toggle, total, checkout button and payment chips
     stay put without position:sticky.

     This block used to invert that — it forced .cart-drawer__content to
     overflow:hidden and made .cart-drawer__items the scroller, back when the
     header lived outside the content box and only the products were meant to
     move. Keeping it would clamp the new column and nothing would scroll at
     all, so it is gone; the base rules in cart-drawer.liquid now describe the
     layout on their own.

     The one thing still worth stating here: cart-drawer.js measures the summary
     on every open/resize and flips cart-summary-sticky="true|false". Nothing
     reads that attribute any more, and no rule in either file keys off it, so
     the JS can keep toggling it without changing what scrolls. */
  .theme-drawer__dialog .cart-drawer__inner .cart-drawer__content {
    overscroll-behavior: contain;
  }

  /* ---- Empty state: centered, no sad icons ---- */
  .sd-cart__empty-wrap { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
  .sd-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 24px;
  }
  .sd-cart__empty-title {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: 22px;
    color: var(--sd-ink);
    margin: 0;
  }
  .sd-cart__empty-sub {
    font-family: var(--font-body--family);
    font-size: 14.5px;
    color: var(--sd-ink-soft);
    margin: 0;
  }
  .sd-cart__empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-block-start: 8px;
    padding: 14px 32px;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--sd-violet);
    border: 1.5px solid var(--sd-violet);
    border-radius: var(--sd-radius-pill);
    text-decoration: none;
    transition: background 0.25s var(--sd-ease), border-color 0.25s var(--sd-ease);
  }
  .sd-cart__empty-cta:hover,
  .sd-cart__empty-cta:focus-visible { background: var(--sd-violet-hover); border-color: var(--sd-violet-hover); }

  /* ---- Add-flash: the top line flashes once with a whisper-lilac highlight
     fading over .6s when the drawer opens (i.e. on add). CSS-only, no cart
     logic; behind reduced-motion. ---- */
  @media (prefers-reduced-motion: no-preference) {
    .theme-drawer__dialog--opening .cart-drawer__inner .cart-items__table-row:first-child {
      animation: sd-cart-flash 0.6s var(--sd-ease) 1;
    }
  }
  @keyframes sd-cart-flash {
    from { background: var(--sd-whisper-lilac); }
    to   { background: transparent; }
  }
/* END_SNIPPET:sorandi-cart-drawer */

/* START_SNIPPET:sorandi-cart-upsell (INDEX:348) */
/* ---- "Complete the look" rail ----
     Sits INSIDE the sticky summary, directly above the Estimated total, with a
     hairline separating it from the bag above.
     The summary is a centred flex column, so width/align-self are needed or the
     rail would shrink to its content and sit off-centre. It carries only the
     20px the arrows need to sit outside the card without being clipped — the
     summary already supplies the drawer's own inline padding. */
  .sd-cup {
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
    padding-block: 4px 14px;
    /* The 20px the arrows live in. They are absolutely positioned at
       left/right: -20px against .sd-cup__rail, so without this padding they
       hang outside the block entirely — which is invisible while the rail sits
       in a non-scrolling box, but becomes a real horizontal scrollbar the
       moment an ancestor scrolls (overflow-y:auto computes overflow-x to auto
       as well, so any overflowing child gets its own scrollbar). */
    padding-inline: 20px;
  }

  /* Horizon's summary masks its own top edge to transparent, which would fade
     out this rail's heading. sorandi-cart-drawer.liquid already clears that
     mask when it makes the summary a fixed (non-sticky) footer, but this rule
     is kept so the rail stays legible even if rendered somewhere that skin does
     not reach — a faded heading is a silent, hard-to-trace bug. */
  .cart-drawer__summary:has(.sd-cup) { mask-image: none; }
  /* Centered above the rail, matching the reference layout. */
  .sd-cup__h {
    display: block;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 700;
    color: var(--sd-ink);
    margin-block-end: 12px;
  }

  .sd-cup__rail { display: block; position: relative; }
  .sd-cup__row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sd-cup__row::-webkit-scrollbar { display: none; }
  .sd-cup__row:focus-visible {
    outline: 2px solid var(--sd-violet);
    outline-offset: 3px;
    border-radius: 8px;
  }

  /* Exactly ONE full card per view. The drawer is a narrow column and the card
     carries an image, title, price, picker AND button, so there is no room to
     share the row — and no peek: the arrows are what signal there is more. */
  .sd-cup__card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 14px;
    align-items: center;
    background: var(--sd-canvas);
    border: 1px solid var(--sd-hairline);
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box;
  }

  .sd-cup__media {
    display: block;
    width: 104px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--sd-whisper-lilac);
  }
  .sd-cup__img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .sd-cup__body { min-width: 0; }
  .sd-cup__title {
    display: block;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sd-ink);
    text-decoration: none;
    /* Two lines then ellipsis: a long title must not push the Add button out
       of the card and change every card's height in the row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sd-cup__title:hover { color: var(--sd-violet); }

  /* price.liquid emits .compare-at-price and .price (NOT .price__sale — that
     class never renders here, so styling it did nothing). The compare-at is
     struck through and muted; the live price carries the emphasis. */
  .sd-cup__price {
    font-family: var(--font-body--family);
    font-size: 14px;
    color: var(--sd-ink);
    margin-block-start: 6px;
  }
  .sd-cup__price .price-item__group { display: inline; }
  .sd-cup__price .compare-at-price {
    color: var(--sd-ink-soft);
    text-decoration: line-through;
    margin-inline-end: 6px;
    font-weight: 400;
  }
  .sd-cup__price .price { font-weight: 700; color: var(--sd-ink); }

  .sd-cup__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-block-start: 8px;
  }
  .sd-cup__select {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    color: var(--sd-ink);
    background: var(--sd-canvas);
    border: 1px solid var(--sd-hairline);
    border-radius: 4px;
  }
  .sd-cup__select:focus-visible { outline: 2px solid var(--sd-violet); outline-offset: 1px; }

  /* Violet capsule, matching the drawer's Checkout button and the rest of the
     brand layer — the pill radius is the house shape, so the reference's square
     corners were the odd one out here.
     Height matches the picker beside it, and a fixed minimum width keeps "Add"
     and "Sold out" from resizing the row. Colour comes from --sd-* tokens only,
     so the anchor setting re-skins it with everything else. */
  .sd-cup__add {
    flex: 0 0 auto;
    min-width: 104px;
    min-height: 42px;
    padding: 8px 22px;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--sd-violet);
    border: 1.5px solid var(--sd-violet);
    border-radius: var(--sd-radius-pill);
    cursor: pointer;
    transition: background 0.2s var(--sd-ease, ease), border-color 0.2s var(--sd-ease, ease), opacity 0.2s;
  }
  .sd-cup__add:hover:not(:disabled),
  .sd-cup__add:focus-visible:not(:disabled) {
    background: var(--sd-violet-hover);
    border-color: var(--sd-violet-hover);
  }
  /* Sold out / in flight: still legible, clearly not pressable. */
  .sd-cup__add:disabled {
    background: transparent;
    color: var(--sd-ink-soft);
    border-color: var(--sd-hairline);
    cursor: not-allowed;
  }
  [data-loading] .sd-cup__add { opacity: 0.7; }

  /* Bare chevrons sitting in the block's own 20px side padding, clear of the
     card — the reference puts them outside it rather than floating over the
     image. Still hidden until <sd-rail> measures real overflow, and dimmed at
     each end of the travel. */
  .sd-cup__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: none;
    width: 20px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sd-ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: color 0.2s var(--sd-ease, ease), opacity 0.2s var(--sd-ease, ease);
  }
  .sd-rail--scrollable .sd-cup__arrow { display: flex; }
  .sd-cup__arrow:disabled { opacity: 0.25; pointer-events: none; }
  .sd-cup__arrow:hover:not(:disabled),
  .sd-cup__arrow:focus-visible:not(:disabled) { color: var(--sd-violet); }
  .sd-cup__arrow--prev { left: -20px; }
  .sd-cup__arrow--next { right: -20px; }

  @media (prefers-reduced-motion: reduce) {
    .sd-cup__add,
    .sd-cup__arrow { transition: none; }
  }
/* END_SNIPPET:sorandi-cart-upsell */

/* START_SNIPPET:sorandi-collection-card (INDEX:349) */
/* Scope: only the sorandi collection grid. The extra `.size-style` raises
     specificity above Horizon's own card-radius rule (which also targets
     .product-card.size-style) so the sorandi 24px radius wins without !important. */
  .collection-wrapper .product-card.size-style {
    background: var(--sd-canvas);
    border: 1px solid var(--sd-hairline);
    border-radius: 24px;
    padding: 18px 18px 26px;
    text-align: center;
    transition: transform 0.3s var(--sd-ease, ease), box-shadow 0.3s var(--sd-ease, ease);
  }
  .collection-wrapper .product-card:hover,
  .collection-wrapper .product-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(51, 47, 43, 0.10);
  }

  /* Image tile: whisper-lilac, 1/1.02, radius 16, image covers + gentle zoom.
     The CLIP lives on the media element, not on .card-gallery: the native
     quick-add button is a SIBLING of the media inside .card-gallery, so
     clipping the gallery cut the button off entirely. Clipping the slideshow
     instead still contains the hover zoom while letting the button show. */
  .collection-wrapper .product-card .card-gallery {
    background: var(--sd-whisper-lilac);
    border-radius: 16px;
    overflow: visible;
    aspect-ratio: 1 / 1.02;
    margin-block-end: 18px;
    position: relative;
  }
  .collection-wrapper .product-card .card-gallery > a,
  .collection-wrapper .product-card .card-gallery slideshow-component {
    display: block;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
  }
  .collection-wrapper .product-card .card-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--sd-ease, ease);
  }
  .collection-wrapper .product-card:hover .card-gallery img {
    transform: scale(1.03);
  }

  /* Title: Quicksand 16.5/600 ink, centered. */
  .collection-wrapper .product-card h3,
  .collection-wrapper .product-card .product-title,
  .collection-wrapper .product-card .text-block p {
    font-family: var(--font-body--family);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sd-ink);
    text-align: center;
    margin: 0 0 4px;
  }

  /* Price: Quicksand 15/600 ink, centered. */
  .collection-wrapper .product-card .price,
  .collection-wrapper .product-card product-price {
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 600;
    color: var(--sd-ink);
    justify-content: center;
    text-align: center;
    margin-block-end: 14px;
  }

  /* Single swatch dot (rendered by the native swatches block), centered above title. */
  .collection-wrapper .product-card .swatches,
  .collection-wrapper .product-card [class*="swatch"] {
    justify-content: center;
    margin-block-end: 8px;
  }

  /* Add button: full-width violet pill INSIDE the card (native quick-add restyled).
     Label is the theme's own text; price is NEVER injected here.

     ALWAYS VISIBLE. Horizon ships the quick-add as a hover-reveal overlay
     (opacity:0 until :hover at >=750px) and hides it outright on touch. That
     left the collection page with NO buying path on mobile and an invisible one
     on desktop, so the mockup's always-visible pill is restored here. The
     matching native switch (theme setting "mobile_quick_add") is now on by
     default too, so the button also renders on touch. */
  .collection-wrapper .product-card .quick-add,
  .collection-wrapper .product-card .quick-add__button {
    position: static;
    width: 100%;
  }
  .collection-wrapper .product-card .quick-add {
    display: block;
    /* custom elements default to display:inline and would collapse */
    opacity: 1;
    --quick-add-mobile-opacity: 1;
    --quick-add-collapsed-width: 100%;
  }
  /* Beat the native `@media (min-width:750px){opacity:0}` and the mobile var. */
  .collection-wrapper .product-card .quick-add__button.quick-add__button {
    opacity: 1;
  }
  .collection-wrapper .product-card .quick-add__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-block-start: 4px;
    padding: 12px 28px;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--sd-violet);
    border: 1.5px solid var(--sd-violet);
    border-radius: var(--sd-radius-pill);
    transition: background 0.25s var(--sd-ease, ease), border-color 0.25s var(--sd-ease, ease);
  }
  .collection-wrapper .product-card .quick-add__button:hover,
  .collection-wrapper .product-card .quick-add__button:focus-visible {
    background: var(--sd-violet-hover);
    border-color: var(--sd-violet-hover);
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-wrapper .product-card,
    .collection-wrapper .product-card .card-gallery img,
    .collection-wrapper .product-card .quick-add__button { transition: none; }
    .collection-wrapper .product-card:hover { transform: none; }
    .collection-wrapper .product-card:hover .card-gallery img { transform: none; }
  }

  /* Collection grid head (C-A3): the eyebrow text block ("the lineup") renders
     in the violet anchor, centered. Scoped by the block id fragment Horizon
     stamps on the text-block wrapper (…__sd_eyebrow). Token, not a hardcoded hex. */
  [class*="text-block--"][class*="sd_eyebrow"],
  [class*="text-block--"][class*="sd_eyebrow"] p {
    color: var(--sd-violet);
    text-align: center;
  }
/* END_SNIPPET:sorandi-collection-card */

/* START_SNIPPET:sorandi-collection-skin (INDEX:350) */
/* The native horizontal facets bar is DISABLED on this template (its
     enable_filtering / enable_sorting / enable_grid_density are off): the
     sorandi capsule row is the single filter control the mockup specifies.
     Two sticky bars were previously stacking under the header and colliding.
     Kept non-sticky here so that if a merchant re-enables the native facets
     they sit in flow instead of fighting the capsule row for the same offset. */
  .template-collection .facets--horizontal {
    position: static;
    background: var(--sd-canvas);
    padding-block: 14px;
  }

  /* Product grid: the mockup specifies exactly THREE columns on desktop and a
     SINGLE column at <=860px. Horizon's native auto-fill produced 4 columns at
     1280 and 5 at >=1520, and 2-up on mobile from a 750px breakpoint. Scoped to
     .collection-wrapper so search and recommendation grids keep native sizing. */
  .collection-wrapper .product-grid,
  .collection-wrapper .product-grid.product-grid--grid {
    --product-grid-columns-desktop: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
  }
  @media screen and (max-width: 860px) {
    .collection-wrapper .product-grid,
    .collection-wrapper .product-grid.product-grid--grid {
      --mobile-columns: 1;
      --product-grid-columns-desktop: 1fr;
      grid-template-columns: 1fr;
    }
  }

  /* Capsule filter pills (native facets, horizontal) */
  .template-collection .facets-horizontal-remove,
  .template-collection .facets__clear-all-link {
    border-radius: var(--sd-radius-pill);
  }
  .template-collection .facets summary,
  .template-collection .facets-toggle__button {
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-pill);
    padding: 9px 18px;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sd-ink);
    background: var(--sd-canvas);
    transition: border-color 0.2s, background 0.2s;
  }
  .template-collection .facets summary:hover,
  .template-collection .facets-toggle__button:hover {
    border-color: var(--sd-violet);
  }
  .template-collection .facets summary[aria-expanded='true'],
  .template-collection .facets-horizontal-remove--active {
    border-color: var(--sd-violet);
    background: var(--sd-whisper-lilac);
    color: var(--sd-violet);
  }
  .template-collection .filter-count-bubble {
    background: var(--sd-violet);
    color: #fff;
  }

  /* Product cards matched to the sorandi look */
  .template-collection .product-card {
    background: var(--sd-canvas);
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-card);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .template-collection .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(51, 47, 43, 0.1);
  }
  .template-collection .product-card__link { color: var(--sd-ink); }
  /* Image tile on whisper-lilac */
  .template-collection .product-card .product-media-container,
  .template-collection .product-card .card-gallery {
    background: var(--sd-whisper-lilac);
  }
  /* Price + rating accents in the brand violet */
  .template-collection .product-card .price,
  .template-collection .product-card .rating-star {
    color: var(--sd-violet);
  }

  @media (prefers-reduced-motion: reduce) {
    .template-collection .product-card { transition: none; }
  }
/* END_SNIPPET:sorandi-collection-skin */

/* START_SNIPPET:sorandi-header-skin (INDEX:353) */
/* Announcement bar: violet surface, white text (v2.1, scheme-footer).

     These are DEFAULTS, not locks. The section's own Background/Text color
     settings emit --color-background / --color-foreground on its scoped
     .color-custom-{id} class; this skin previously hardcoded both (plus a
     `* { color: #fff }` that beat everything downstream), so choosing a colour
     in the customizer appeared to do nothing.

     Using each token as the FALLBACK of the other means: setting nothing keeps
     the violet-on-white design exactly as before, and setting either colour in
     the editor now actually paints. `color` follows --color-foreground rather
     than a literal, so the text tracks whichever is in effect. */
  #header-group .announcement-bar {
    /* The brand default. Deliberately NOT reading --color-background /
       --color-foreground here: those tokens are always emitted (the section has
       a saved background of #ffffff), so consuming them made the bar white-on-
       black at every width and lost the violet design.

       The section's own colours are applied instead by the override block
       below, which the Liquid renders ONLY when the merchant has actually
       picked a colour — so "unset" means the design default, not a stale saved
       value. */
    background: var(--sd-violet);
    color: #fff;
    border-block-end: 0;
  }
  /* Descendants inherit rather than being forced white — a blanket
     `* { color: #fff }` is what made the Text color setting inert. */
  #header-group .announcement-bar,
  #header-group .announcement-bar * {
    color: inherit;
  }


  /* Announcement bar centring at EVERY width.
     The section is a 3-column grid (gutter / content / gutter). Horizon spans the
     slider across all three ONLY under 749px:
         @media (max-width: 749px) { .announcement-bar__slider { grid-column: 1/-1 } }
     Above that the slider falls into grid column 1 — the GUTTER — so the message
     rendered hard against the left edge on desktop: measured 8px left vs 1432px
     right at 1440, and 44 vs 1724 at 1920. It only looked correct on mobile,
     which is why it survived earlier passes.
     Spanning the full track at all widths restores true viewport centring. */
  #header-group .announcement-bar__slider {
    grid-column: 1 / -1;
  }
  /* The inner block is capped at 680px and auto-margined; keep the text centred
     inside that cap as well, so a short message centres rather than sitting left. */
  #header-group .announcement-bar__slides,
  #header-group .announcement-bar__text {
    text-align: center;
  }

  /* Violet cart badge (v2.1): set on the bubble itself so it wins over the inline fallback. */
  #header-group .cart-bubble {
    --cart-bubble-background: var(--sd-violet);
    --cart-bubble-text: #fff;
  }
  /* White glass sticky header (v2.1). */
  #header-group .header {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(51, 47, 43, 0.08);
  }

  /* Nav links: lowercase, tracked, espresso, animated underline. */
  #header-group .menu-list__link {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: lowercase;
    color: var(--sd-ink);
  }
  #header-group .menu-list__link-title {
    position: relative;
  }
  #header-group .menu-list__link-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1.5px;
    background: var(--sd-ink);
    transition: width 0.25s;
  }
  #header-group .menu-list__link:hover .menu-list__link-title::after,
  #header-group .menu-list__link:focus-visible .menu-list__link-title::after {
    width: 100%;
  }

  /* Action icons in espresso ink. */
  #header-group .header-actions__action,
  #header-group .header-actions svg {
    color: var(--sd-ink);
  }

  @media (prefers-reduced-motion: reduce) {
    #header-group .menu-list__link-title::after {
      transition: none;
    }
  }
/* END_SNIPPET:sorandi-header-skin */

/* START_SNIPPET:sorandi-shipping-protect (INDEX:356) */
/* ---- Premium Shipping Insurance card ----
     A whisper-lilac tile above the total: icon · text · price · switch.
     The switch column is fixed and the text column is the only flexible one, so
     a long description never squeezes the price into two lines.
     Sits inside the drawer's centred flex summary, so width/align-self are
     needed or it would shrink to its content and sit off-centre. */
  .sd-sp {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
    padding: 14px;
    margin-block-end: 4px;
    background: var(--sd-whisper-lilac);
    border-radius: 12px;
  }

  .sd-sp__icon {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--sd-violet);
  }
  .sd-sp__icon svg { width: 100%; height: 100%; display: block; }

  /* Photo variant: a clipped tile, matching the 14px-radius whisper-lilac
     thumbnails the cart rows use, so the card sits in the same visual family.
     The tile is square and the image cover-fits it — an insurance product's
     artwork is not guaranteed to be 1:1, and letterboxing inside a coloured
     tile would look like a mistake. flex: none because the grid track is fixed
     and a tall image must not stretch the row. */
  .sd-sp__icon--photo {
    flex: none;
    border-radius: 10px;
    overflow: hidden;
    background: var(--sd-canvas);
  }
  .sd-sp__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .sd-sp__body { grid-row: 1 / span 2; min-width: 0; }

  /* The label is the switch's label, so it is also its hit target — the cursor
     says so. */
  .sd-sp__title {
    display: block;
    font-family: var(--font-body--family);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sd-ink);
    cursor: pointer;
  }
  /* Title + (i) on one line. position: relative is the no-anchor fallback's
     positioning context (see the @supports block below); the anchor itself is
     declared on the button, not here, so the bubble centres over the (i). */
  .sd-sp__titlerow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* The (i) button. 18px circle for the eye, but the ::before pad below takes
     the real hit target to 44px without changing the layout — a flex row cannot
     absorb a 44px control here without pushing the title around. */
  .sd-sp__info {
    position: relative;
    /* The bubble anchors to THIS element, so it opens centred directly above
       the (i) rather than over the whole title row. */
    anchor-name: --sd-sp-tip;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--sd-ink-soft);
    border-radius: 50%;
    background: transparent;
    color: var(--sd-ink-soft);
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s var(--sd-ease, ease), border-color 0.2s var(--sd-ease, ease);
  }
  .sd-sp__info::before {
    content: '';
    position: absolute;
    inset: calc((18px - 44px) / 2);
  }
  .sd-sp__info:hover,
  .sd-sp__info:focus-visible {
    color: var(--sd-violet);
    border-color: var(--sd-violet);
  }
  .sd-sp__info:focus-visible {
    outline: 2px solid var(--sd-violet);
    outline-offset: 2px;
  }

  /* ---- The tooltip bubble ----
     Dark ink card with a centred tail, matching the reference. The click path
     is native (the button's popovertarget); hover/focus calls showPopover()
     from sd-shipping-protect.js. Both end at :popover-open below. */
  .sd-sp__tip {
    position: absolute;
    position-anchor: --sd-sp-tip;
    /* Sits ABOVE the (i): this card is the last thing before the checkout
       button, so a bubble below it would open off the bottom of the drawer.
       The gap is a margin rather than an inset so it survives the
       position-try flips below, which rewrite the insets but not the margin. */
    margin-block-end: 10px;
    /* Centred on the 18px button. position-area does the centring AND lets the
       bubble grow past the anchor on both sides — justify-self: anchor-center
       alone would centre a 320px card on an 18px target and let it run off the
       drawer's right edge. position-try flips it to a right-aligned span if it
       still does not fit, so a narrow viewport never clips the text. */
    position-area: top center;
    position-try-fallbacks: top span-left, top span-right;
    /* Sized to read as a card in its own right (matching the reference), not as a
       narrow strip hugging the 18px button. min() keeps it inside the drawer on a
       small viewport; the position-try flips above handle the case where a
       centred bubble this wide would still overhang an edge. */
    width: max-content;
    max-width: min(320px, calc(100vw - 48px));
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--sd-ink);
    color: var(--sd-canvas);
    font-family: var(--font-body--family);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 6px 20px rgba(51, 47, 43, 0.28);
    overflow: visible;
    opacity: 0;
    transition: opacity 0.18s var(--sd-ease, ease), translate 0.18s var(--sd-ease, ease);
    translate: 0 4px;
  }
  /* One visible state, one mechanism. The hover path calls showPopover() (see
     sd-shipping-protect.js) rather than a CSS `display:block` override: a
     popover shown by CSS alone never enters the top layer, so inside the
     drawer's stacking context it would render BEHIND the panel and anchor
     positioning would not apply. Both hover and click therefore end up here. */
  .sd-sp__tip:popover-open {
    opacity: 1;
    translate: 0 0;
  }
  /* The tail, centred under the bubble — which is itself centred on the (i), so
     in the common case it points straight at the button.

     Deliberately NOT anchor()-positioned: inside a ::after, anchor() resolves
     against the pseudo-element's own default anchor, which is not the (i), so
     the "clever" version silently falls back to its fallback value. A plain
     50% is honest and correct for the default placement; in the rare
     position-try flip the tail can sit off-centre from the button, which is a
     cosmetic nudge rather than a broken tooltip. */
  .sd-sp__tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    border: 6px solid transparent;
    border-top-color: var(--sd-ink);
  }

  /* No anchor positioning (Safari < 26, Firefox, and any Chromium before 125):
     the bubble is placed by JS instead. Without this block the popover would
     render in the top-left corner of the viewport.

     An earlier version pinned the bubble's RIGHT edge to the title row's right
     edge, on the assumption that the (i) sits at the end of that row. That only
     holds while the title fits on ONE line. As soon as it wraps (which it does at
     the drawer's width — see the screenshot this was reported from), the row
     spans the whole body column and the (i) sits mid-row, so the bubble opened
     far to the right of the button with its tail pointing at nothing.

     Nesting the bubble inside the button does NOT help here, and neither does any
     other containing block: an OPEN popover lives in the top layer, where
     `position: absolute` resolves against the viewport rather than against any
     ancestor. So there is nothing in CSS for the bubble to hang off, and every
     pure-CSS attempt lands it over the heading instead of the (i).

     The position is therefore measured in JS (see #bindTooltip in
     sd-shipping-protect.js), which writes left/top in viewport coordinates on
     open, resize and scroll. `fixed` is what makes those coordinates mean what
     the JS thinks they mean. This block only supplies the geometry the JS cannot:
     the tail offset, which it passes back as --sd-sp-tail-x. */
  @supports not (anchor-name: --sd-sp-tip) {
    .sd-sp__tip {
      position: fixed;
      inset: auto;
      margin-block-end: 0;
      max-width: min(320px, calc(100vw - 16px));
    }
    /* Tail follows the button even when the bubble was clamped to stay on screen;
       falls back to centred before the first measurement lands. */
    .sd-sp__tip::after {
      left: var(--sd-sp-tail-x, 50%);
      right: auto;
      translate: -50% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sd-sp__tip { transition: none; }
  }

  .sd-sp__price {
    grid-row: 1 / span 2;
    font-family: var(--font-body--family);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sd-ink);
    white-space: nowrap;
  }

  /* ---- The switch ----
     The <input> stays in the layout at the full size of the track and is made
     transparent rather than display:none — a hidden input is unfocusable in
     some assistive setups, and this way the input IS the hit target (48x28 is
     tight, so the padding on the wrapper carries it to a 44px touch row). */
  .sd-sp__switch {
    grid-row: 1 / span 2;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-height: 44px;
    flex: none;
  }
  .sd-sp__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
  }
  .sd-sp__track {
    position: relative;
    display: block;
    width: 48px;
    height: 28px;
    border-radius: var(--sd-radius-pill);
    /* Off state: a neutral track, deliberately NOT a brand tint — off must not
       look like a second enabled state. */
    background: #d8d3cf;
    transition: background 0.22s var(--sd-ease, ease);
  }
  .sd-sp__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(51, 47, 43, 0.28);
    transition: transform 0.22s var(--sd-ease, ease);
  }
  .sd-sp__input:checked + .sd-sp__track { background: var(--sd-violet); }
  .sd-sp__input:checked + .sd-sp__track::after { transform: translateX(20px); }
  .sd-sp__input:focus-visible + .sd-sp__track {
    outline: 2px solid var(--sd-violet);
    outline-offset: 3px;
  }
  .sd-sp__input:disabled { cursor: progress; }

  /* In flight: the whole card dims once, rather than the switch alone — the
     total below is also about to change, and dimming the card says "wait" about
     both. */
  .sd-sp[data-loading] { opacity: 0.65; }
  .sd-sp[data-loading] .sd-sp__input { pointer-events: none; }

  /* Forced-colors: the track is a background, and backgrounds are dropped in
     high-contrast modes, so the knob would float on nothing. A border gives the
     track a shape that survives, and the knob switches to system colours. */
  @media (forced-colors: active) {
    .sd-sp__track { border: 1px solid CanvasText; }
    .sd-sp__track::after { background: CanvasText; }
    .sd-sp__input:checked + .sd-sp__track { background: Highlight; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sd-sp__track,
    .sd-sp__track::after { transition: none; }
  }

  /* Narrow drawers: the price drops under the title rather than squeezing the
     title + (i) row into a one-word column. */
  @media (max-width: 400px) {
    .sd-sp {
      grid-template-columns: 34px minmax(0, 1fr) auto;
      column-gap: 10px;
      padding: 12px;
    }
    .sd-sp__icon { width: 34px; height: 34px; }
    .sd-sp__price {
      grid-row: auto;
      grid-column: 2;
      font-size: 14px;
    }
    .sd-sp__body { grid-row: 1; }
    .sd-sp__switch { grid-row: 1 / span 2; }
  }
/* END_SNIPPET:sorandi-shipping-protect */

/* START_SNIPPET:sorting (INDEX:362) */
.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:swatch-styles (INDEX:370) */
/* Swatches */
  .swatch {
    --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
    --min-width-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height: 16px;
    --min-width: 16px;

    /* mobile values */
    --scaling-factor: 0.5;
    --max-swatch-size: 28px;
    --max-pill-size: 20px;
    --max-filter-size: 32px;

    /* From the settings */
    --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
    --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

    /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
    --offset-scaled-width: calc(
      var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
    );
    --offset-scaled-height: calc(
      var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
    );
    --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

    /* width = min(m + sU, (m + s * W'/H' * M'), M) */
    --swatch-width: min(
      calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
      calc(var(--min-width) + var(--offset-scaled-width)),
      var(--max-swatch-size)
    );

    /* height = min(m + sV, (m + s * H'/W' * M'), M) */
    --swatch-height: min(
      calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
      calc(var(--min-height) + var(--offset-scaled-height)),
      var(--max-swatch-size)
    );

    display: block;
    background: var(--swatch-background);
    background-position: var(--swatch-focal-point, center);
    border-radius: var(--variant-picker-swatch-radius);
    border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
    width: var(--swatch-width);
    height: var(--swatch-height);

    /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
    background-size: var(--swatch-width) var(--swatch-height);

    &.swatch--unavailable {
      border-style: dashed;
    }

    &.swatch--unscaled {
      /* for when you want fixed sizing (e.g. pdp) */
      --swatch-width: var(--variant-picker-swatch-width);
      --swatch-height: var(--variant-picker-swatch-height);
    }

    &.swatch--filter {
      --swatch-width: var(--max-filter-size);
      --swatch-height: var(--max-filter-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    &.swatch--pill {
      --swatch-width: var(--max-pill-size);
      --swatch-height: var(--max-pill-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    /* swatches in filters and pills always have a border  */
    &.swatch--filter,
    &.swatch--pill {
      --style-border-swatch-width: var(--variant-picker-border-width);
      --style-border-swatch-style: var(--variant-picker-border-style);
      --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
    }

    &.swatch--variant-image {
      background-size: cover;
    }

    @media screen and (min-width: 750px) {
      /* desktop values */
      --max-swatch-size: 32px;
      --max-pill-size: 16px;
      --max-filter-size: 28px;
      --scaling-factor: 0.65;
    }
  }
/* END_SNIPPET:swatch-styles */

/* START_SNIPPET:text-component-shimmer-styles (INDEX:373) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

  @keyframes text-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */

/* START_SNIPPET:text (INDEX:374) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:376) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-picker-styles (INDEX:389) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    background-color: var(--color-variant-background);
    color: inherit;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }

  .variant-picker .variant-option--buttons label:has(.swatch) {
    border-radius: var(--variant-picker-swatch-radius);
  }

  /* Variant option component */
  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;

    overflow-list::part(list) {
      padding-block: var(--overflow-list-padding-block, 0);
      padding-inline: var(--overflow-list-padding-inline, 0);
    }
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media screen and (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option--buttons legend,
  .variant-option--dropdowns > label,
  .variant-option[data-testid='variant-option-single'] {
    color: var(--variant-option-label-color, var(--color-foreground));
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued));
  }

  @media (prefers-reduced-motion: no-preference) {
    .variant-option__button-label,
    .variant-option__select-wrapper,
    .variant-option__button-label::before,
    .variant-option__button-label::after,
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }

    .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label::after {
      transition-property: clip-path;
    }

    .variant-option__button-label::before {
      transition-property: border-color;
    }

    .variant-option__select-wrapper,
    .variant-option__button-label {
      transition-property: background-color, border-color, color;
    }
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    cursor: pointer;
    display: flex;
    flex: 0 0 3.25em;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    overflow: clip;
    justify-content: center;
    min-height: 3.25em;
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    gap: 0;

    &:hover,
    &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
      --variant-picker-stroke-color: var(--color-variant-hover-border);

      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

    /* so instead use the layered background image trick */
    &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
      border-width: 0;
    }

    /* ::after/::before act as a fake border for the button style variant */

    /* ::after is the unavailable variant border that clips in */
    &:not(.variant-option__button-label--has-swatch)::before,
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: var(--options-border-width) solid var(--color-selected-variant-border);
      border-radius: inherit;
      pointer-events: none;
      z-index: 2;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
    }

    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
      inset: 0;
    }

    &:not(.variant-option__button-label--has-swatch)::before {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(0 0 0 0);
      border-color: var(--color-variant-border);
      inset: calc(var(--options-border-width) * -1);
    }

    &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
      border-color: var(--color-selected-variant-border);
    }

    /* setting left/right accounts for variant buttons of different widths */
    &:not(:has(:checked)):has(~ label > :checked),
    &:has(:checked):has(~ label > [data-previous-checked='true']) {
      .variant-option__button-label__pill {
        right: 0;
        left: unset;
      }
    }

    &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
    &:has(:checked) ~ label {
      .variant-option__button-label__pill {
        left: 0;
        right: unset;
      }
    }

    &:not(:has(:checked)):has(~ label > :checked) {
      --pill-offset: calc(100% + 1px);
    }

    &:has(:checked) ~ label {
      --pill-offset: calc(-100% - 1px);
    }

    &:has([data-current-checked='true']):first-of-type
      ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
    &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
      --clip: 0 0 0 100%;
    }

    &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
        .variant-option__button-label--has-swatch
      ),
    &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
      --clip: 0 100% 0 0;
    }

    &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  /* wrap around only for 3 or more variants in a row */

  /* the more complex selector rules here produce the wrap around effect for first/last variants */
  .variant-option--buttons:has(:nth-of-type(3)) {
    .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
      --pill-offset: calc(100% + 1px);
    }

    .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
        ~ label:last-of-type > :checked
      ) {
      --pill-offset: calc(-100% - 1px);
    }
  }

  .variant-option__button-label__pill {
    background: var(--color-selected-variant-background);
    position: absolute;
    top: calc(var(--options-border-width) * -1);
    bottom: calc(var(--options-border-width) * -1);
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    transform: translateX(var(--pill-offset, 0));
  }

  .variant-option__button-label__text {
    pointer-events: none;
    text-align: start;
    text-wrap: auto;
    z-index: 2;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-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);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);

    padding: 0;
    border: none;
    flex-basis: auto;
    min-height: auto;
  }

  /* Override global label:has(input) display rule with higher specificity */
  .variant-option__button-label--has-swatch:has(input) {
    display: block;
  }

  .variant-option__button-label:has(:checked) {
    --variant-picker-stroke-color: var(--color-selected-variant-border);

    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label:has(:checked):hover {
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);

    .variant-option__button-label__pill {
      background-color: var(--color-selected-variant-hover-background);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid var(--color-variant-hover-border);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg,
  .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
    stroke: rgb(var(--color-variant-text-rgb) / var(--opacity-subdued-text));
  }

  /* Disable the duplicate overlay line so the subdued stroke doesn't double up */
  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg line:last-of-type {
    stroke: none;
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-selected-variant-border);

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .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;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-strikethrough-color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));

    background-color: var(--color-selected-variant-background);
    color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked):hover {
    background-color: var(--color-selected-variant-hover-background);
    color: var(--color-selected-variant-hover-text);
  }

  .variant-option__button-label 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;
  }

  .variant-option__button-label svg {
    position: absolute;
    left: var(--options-border-width);
    top: var(--options-border-width);
    height: calc(100% - (var(--options-border-width) * 2));
    width: calc(100% - (var(--options-border-width) * 2));
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
    stroke: var(--variant-strikethrough-color, rgb(var(--color-variant-text-rgb) / var(--opacity-60)));

    line {
      stroke-width: var(--options-border-width);
    }

    /* The second stroke line exists for "motion overlay". Disabled for swatches, remove line to avoid overlapping lines  */
    line:last-of-type {
      stroke: none;
    }
  }

  /* Override for swatch labels to maintain block display */
  .variant-option__button-label--has-swatch:has(input[type='radio']) {
    display: block;
  }

  /* Swatches do not take a background-color since a transparent or missing swatch would end up filled */
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked),
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked):hover {
    background-color: inherit;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:390) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video-background-styles (INDEX:391) */
.video-background,
  .video-background * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .video-background--cover * {
    object-fit: cover;
  }

  .video-background--contain * {
    object-fit: contain;
  }

  @media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:video-background-styles */

/* START_SNIPPET:video-placeholder-styles (INDEX:392) */
.video-placeholder-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  :not(deferred-media) > .video-placeholder-wrapper {
    width: var(--video-placeholder-width);
  }

  .video-placeholder-wrapper > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .video-placeholder-wrapper.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  .video-placeholder-wrapper__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-placeholder-wrapper__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:video-placeholder-styles */

/* START_SNIPPET:volume-pricing-info (INDEX:394) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */