/** Shopify CDN: Minification failed

Line 1807:34 Expected identifier but found whitespace
Line 1807:36 Unexpected "{"
Line 1807:45 Expected ":"
Line 1808:35 Expected identifier but found whitespace
Line 1808:37 Unexpected "{"
Line 1808:46 Expected ":"
Line 1809:35 Expected identifier but found whitespace
Line 1809:37 Unexpected "{"
Line 1809:46 Expected ":"
Line 2124:34 Expected identifier but found whitespace
... and 8 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .utilities > * {
    text-align: center;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .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:12) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    position: relative;

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

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

  /* OC product sticky buy bar host — a zero-height anchor right under the top row. The bar inside it
     (portaled in by oc-product-pdp.js) is position:absolute + clip-revealed, so it never affects header
     layout. z-index keeps the revealed bar above the (default-stacked) menu row it overlays on desktop. */
  .header__product-bar-host {
    position: relative;
    z-index: 1;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) 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);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* ===================== OC design-system overrides ===================== */
  /* Rounded bottom corners + soft card shadow on the header underlays so the header
     reads as a floating "card", matching the OC PDP look. Skipped when the header is
     transparent (home/product hero) — the rounded corners would clip the hero. */
  .header:not([transparent]) .header__underlay-closed,
  .header:not([transparent]) .header__underlay-open {
    border-bottom-left-radius: var(--oc-card-radius);
    border-bottom-right-radius: var(--oc-card-radius);
  }

  .header:not([transparent]) .header__underlay-closed {
    box-shadow: var(--oc-card-shadow);
  }

  /* Sync the row divider color with the OC card border token. */
  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom-color: var(--oc-card-border);
  }

  /* Accent ring on hover for top-level menu links — same 2px red ring as the PDP
     gallery's active thumbnail (--oc-accent box-shadow). */
  .header .menu-list__link {
    border-radius: var(--oc-card-radius);
    transition: box-shadow 160ms ease;
  }
  .header .menu-list__link:hover,
  .header .menu-list__link[aria-expanded='true'] {
    box-shadow: 0 0 0 2px var(--oc-accent);
  }

  /* Breathing room between the header and the next section. Skipped when the
     header is transparent — it sits on top of the hero and adding a margin
     would push the hero down. */
  .header-section:not(:has(.header[transparent])) {
    margin-bottom: var(--padding-xl);
  }
/* END_SECTION:header */

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

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

  .hero {
    position: relative;
    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:landing-bundle (INDEX:14) */
.ocl-bundle {
    color: var(--color-foreground);
  }
  .ocl-bundle__heading {
    text-align: center;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    line-height: 1.2;
    margin: 0 0 32px;
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .ocl-bundle__top {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding: 20px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--ocl-bundle-radius, var(--oc-card-radius));
  }
  .ocl-bundle__images {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
  }
  .ocl-bundle__img {
    width: 120px;
    height: 120px;
    border-radius: calc(var(--ocl-bundle-radius, var(--oc-card-radius)) / 1.5);
    border: 1px solid var(--oc-card-border);
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
  }
  .ocl-bundle__img[data-unchecked] { opacity: 0.35; }
  .ocl-bundle__img img,
  .ocl-bundle__img svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .ocl-bundle__plus {
    font-size: 22px;
    font-weight: 700;
    color: var(--oc-muted-fg);
    flex-shrink: 0;
    line-height: 1;
  }

  .ocl-bundle__summary {
    flex-shrink: 0;
    min-width: 180px;
  }
  .ocl-bundle__total-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-foreground-heading, var(--color-foreground));
    margin: 0 0 2px;
  }
  .ocl-bundle__total {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-foreground-heading, var(--color-foreground));
    margin: 0 0 14px;
  }
  .ocl-bundle__cta {
    display: block;
    width: 100%;
    text-align: center;
    border: 0;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    border-radius: var(--ocl-bundle-btn-radius, var(--oc-card-radius));
    padding: 14px 32px;
    background: var(--oc-accent);
    color: var(--oc-accent-fg);
    transition: opacity 0.2s ease, transform 0.15s ease;
    -webkit-appearance: none;
    line-height: 1;
  }
  .ocl-bundle__cta:hover { opacity: 0.85; }
  .ocl-bundle__cta:active { transform: scale(0.98); }
  .ocl-bundle__cta:disabled { opacity: 0.5; cursor: not-allowed; }

  .ocl-bundle__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ocl-bundle__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--ocl-bundle-radius, var(--oc-card-radius));
    transition: opacity 0.2s ease;
  }
  .ocl-bundle__item[data-unchecked] { opacity: 0.5; }

  .ocl-bundle__check {
    flex-shrink: 0;
    margin-top: 2px;
    display: inline-flex;
  }
  .ocl-bundle__check input[type='checkbox'] {
    width: 20px;
    height: 20px;
    accent-color: var(--oc-accent);
    cursor: pointer;
  }
  .ocl-bundle__info {
    flex: 1;
    min-width: 0;
  }
  .ocl-bundle__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-foreground-heading, var(--color-foreground));
    margin: 0 0 4px;
    line-height: 1.35;
  }
  .ocl-bundle__title a {
    color: inherit;
    text-decoration: none;
  }
  .ocl-bundle__title a:hover { text-decoration: underline; }
  .ocl-bundle__price {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--oc-accent);
    line-height: 1;
  }
  .ocl-bundle__sku {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--oc-muted-fg);
    margin-top: 6px;
  }

  .ocl-bundle__qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--oc-card-border);
    border-radius: var(--ocl-bundle-btn-radius, var(--oc-card-radius));
    overflow: hidden;
    height: 52px;
    flex-shrink: 0;
    line-height: 1;
    margin-left: auto;
  }
  .ocl-bundle__qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-foreground);
    padding: 0;
    transition: background 0.15s ease;
  }
  .ocl-bundle__qty-btn:hover { background: rgba(0, 0, 0, 0.06); }
  .ocl-bundle__qty-input {
    width: 44px;
    text-align: center;
    border: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
    background: transparent;
    -moz-appearance: textfield;
    padding: 0;
    height: 100%;
  }
  .ocl-bundle__qty-input::-webkit-inner-spin-button,
  .ocl-bundle__qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  @media (max-width: 768px) {
    .ocl-bundle__top {
      flex-direction: column;
      align-items: stretch;
    }
    .ocl-bundle__images { justify-content: center; }
    .ocl-bundle__summary { text-align: center; }
    .ocl-bundle__img {
      width: 90px;
      height: 90px;
    }
    .ocl-bundle__item { padding: 14px 16px; }
    .ocl-bundle__qty { height: 44px; }
    .ocl-bundle__qty-btn { width: 36px; }
    .ocl-bundle__qty-input { width: 38px; }
  }
/* END_SECTION:landing-bundle */

/* START_SECTION:landing-features (INDEX:15) */
.ocl-features {
    color: var(--color-foreground);
  }
  .ocl-features__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 28px;
  }
  .ocl-features__title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--color-foreground-heading, var(--color-foreground));
  }
  .ocl-features__subtitle {
    font-size: 1rem;
    color: var(--oc-muted-fg);
    margin: 0;
  }
  /* Phone: horizontal scroll-snap carousel — cards line up in a row and swipe sideways,
     with ~1.3 cards in view so it's obvious there's more. Scrollbar hidden. */
  .ocl-features__grid {
    list-style: none;
    margin: 0;
    padding: 4px 4px 16px;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .ocl-features__grid::-webkit-scrollbar { display: none; }
  .ocl-features__card {
    scroll-snap-align: start;
    flex: 0 0 clamp(220px, 78%, 300px);
  }

  /* Tablet and up: back to a centered grid (no horizontal scroll). */
  @media (min-width: 600px) {
    .ocl-features__grid {
      margin: 0 auto;
      padding: 0;
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(2, 1fr);
      overflow: visible;
    }
  }
  @media (min-width: 1000px) {
    .ocl-features__grid {
      grid-template-columns: repeat(var(--ocl-features-cols, 4), 1fr);
    }
  }
  .ocl-features__card {
    border-radius: var(--ocl-features-radius, var(--oc-card-radius));
    overflow: hidden;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    box-shadow: var(--oc-card-shadow);
    display: flex;
    flex-direction: column;
  }
  /* Fixed aspect ratio + object-fit: cover — every uploaded photo, whatever its real
     dimensions, fills the same area and crops to fit. No manual format choice needed. */
  .ocl-features__image {
    position: relative;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: 4 / 3;
  }
  .ocl-features__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ocl-features__body {
    padding: 20px 20px 24px;
  }
  .ocl-features__body--center { text-align: center; }
  .ocl-features__body--right { text-align: right; }
  .ocl-features__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--oc-accent-soft-bg);
  }
  .ocl-features__icon svg,
  .ocl-features__icon img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
  }
  .ocl-features__heading {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin: 0 0 6px;
    color: var(--color-foreground-heading, var(--color-foreground));
  }
  .ocl-features__text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--oc-muted-fg);
    margin: 0;
  }
/* END_SECTION:landing-features */

/* START_SECTION:landing-product-grid (INDEX:16) */
.ocl-pg {
    color: var(--color-foreground);
  }
  .ocl-pg__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 28px;
  }
  .ocl-pg__title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--color-foreground-heading, var(--color-foreground));
  }
  .ocl-pg__subtitle {
    font-size: 1rem;
    color: var(--oc-muted-fg);
    margin: 0;
  }

  .ocl-pg__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
  }
  @media (min-width: 641px) {
    .ocl-pg__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1000px) {
    .ocl-pg__grid { grid-template-columns: repeat(var(--ocl-pg-cols, 3), 1fr); }
  }

  .ocl-pg__card {
    display: flex;
    flex-direction: column;
    border-radius: var(--ocl-pg-radius, var(--oc-card-radius));
    overflow: hidden;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    box-shadow: var(--oc-card-shadow);
  }

  .ocl-pg__image-wrap {
    position: relative;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: var(--ocl-pg-aspect, 1 / 1);
    padding: var(--ocl-pg-image-padding, 0);
    box-sizing: border-box;
    background: #fff;
  }
  .ocl-pg__image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .ocl-pg__image-wrap[data-fit='contain'] img {
    object-fit: contain;
    object-position: center;
  }

  .ocl-pg__badge {
    position: absolute;
    z-index: 2;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
  }
  .ocl-pg__badge--sku {
    top: 12px;
    left: 12px;
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
  }
  .ocl-pg__badge--sale {
    top: 12px;
    right: 12px;
    background: var(--oc-accent);
    color: var(--oc-accent-fg);
  }

  .ocl-pg__info {
    padding: 14px 14px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .ocl-pg__name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 6px;
    color: var(--color-foreground-heading, var(--color-foreground));
  }
  .ocl-pg__name a {
    color: inherit;
    text-decoration: none;
  }
  .ocl-pg__name a:hover { text-decoration: underline; }

  .ocl-pg__price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .ocl-pg__price-current {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-foreground-heading, var(--color-foreground));
    line-height: 1;
  }
  .ocl-pg__price-current--sale { color: var(--oc-accent); }
  .ocl-pg__price-compare {
    font-size: 0.8125rem;
    text-decoration: line-through;
    opacity: 0.5;
    line-height: 1;
  }

  .ocl-pg__stock {
    margin-bottom: 12px;
    min-height: 1.25em;
  }
  .ocl-pg__stock-text {
    font-size: 0.8125rem;
    color: var(--oc-muted-fg);
    font-weight: 600;
  }
  .ocl-pg__stock-text--in { color: {{ section.settings.stock_in_color }}; }
  .ocl-pg__stock-text--low { color: {{ section.settings.stock_low_color }}; }
  .ocl-pg__stock-text--out { color: {{ section.settings.stock_out_color }}; }

  .ocl-pg__spacer { flex: 1; }

  .ocl-pg__form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ocl-pg__variants {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
  }
  .ocl-pg__variant-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-foreground-heading, var(--color-foreground));
    margin-bottom: 6px;
  }
  .ocl-pg__variant-label span {
    font-weight: 400;
    color: var(--oc-muted-fg);
  }
  .ocl-pg__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .ocl-pg__swatch {
    position: relative;
    cursor: pointer;
  }
  .ocl-pg__swatch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }
  .ocl-pg__swatch-label {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--oc-card-border);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-foreground);
    background: #fff;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .ocl-pg__swatch input:checked + .ocl-pg__swatch-label {
    border-color: var(--oc-accent);
    color: var(--oc-accent);
  }
  .ocl-pg__swatch input:focus-visible + .ocl-pg__swatch-label {
    outline: 2px solid var(--oc-accent);
    outline-offset: 2px;
  }
  .ocl-pg__swatch--unavailable .ocl-pg__swatch-label {
    text-decoration: line-through;
    opacity: 0.55;
  }

  .ocl-pg__cart-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
  }
  .ocl-pg__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--oc-card-border);
    border-radius: var(--ocl-pg-btn-radius, var(--oc-card-radius));
    overflow: hidden;
    height: 40px;
    line-height: 1;
    flex-shrink: 0;
  }
  .ocl-pg__qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-foreground);
    padding: 0;
    transition: background 0.15s ease;
  }
  .ocl-pg__qty-btn:hover { background: rgba(0, 0, 0, 0.06); }
  .ocl-pg__qty-input {
    width: 36px;
    text-align: center;
    border: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-foreground);
    background: transparent;
    -moz-appearance: textfield;
    padding: 0;
    height: 100%;
  }
  .ocl-pg__qty-input::-webkit-inner-spin-button,
  .ocl-pg__qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .ocl-pg__btn {
    display: block;
    width: 100%;
    text-align: center;
    border: 0;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    border-radius: var(--ocl-pg-btn-radius, var(--oc-card-radius));
    padding: 0 12px;
    line-height: 40px;
    transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease;
    -webkit-appearance: none;
    text-decoration: none;
  }
  .ocl-pg__btn:active { transform: scale(0.98); }
  .ocl-pg__btn--add {
    flex: 1;
    background: var(--oc-accent);
    color: var(--oc-accent-fg);
  }
  .ocl-pg__btn--add:hover { opacity: 0.85; }
  .ocl-pg__btn--add:disabled {
    background: var(--oc-card-border);
    color: var(--oc-muted-fg);
    cursor: not-allowed;
  }
  .ocl-pg__btn--link {
    background: none;
    color: var(--color-foreground);
    box-shadow: 0 0 0 1px var(--oc-card-border) inset;
  }
  .ocl-pg__btn--link:hover {
    box-shadow: 0 0 0 1px var(--color-foreground-heading, var(--color-foreground)) inset;
  }

  .ocl-pg__extras {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ocl-pg .shopify-payment-button .shopify-payment-button__button {
    border-radius: var(--ocl-pg-btn-radius, var(--oc-card-radius)) !important;
    min-height: 40px !important;
  }
/* END_SECTION:landing-product-grid */

/* START_SECTION:landing-product (INDEX:17) */
.ocl-product {
    color: var(--color-foreground);
  }
  .ocl-product__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 28px;
  }
  .ocl-product__section-title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--color-foreground-heading, var(--color-foreground));
  }
  .ocl-product__section-subtitle {
    font-size: 1rem;
    color: var(--oc-muted-fg);
    margin: 0;
  }

  .ocl-product__card {
    display: flex;
    flex-direction: column;
    border-radius: var(--ocl-product-radius, var(--oc-card-radius));
    overflow: hidden;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    box-shadow: var(--oc-card-shadow);
    max-width: 1200px;
    margin: 0 auto;
  }
  @media (min-width: 1000px) {
    .ocl-product__card { flex-direction: row; }
    .ocl-product__card--reverse { flex-direction: row-reverse; }
    .ocl-product__image {
      flex: 0 0 var(--ocl-product-image-width, 50%);
      max-width: var(--ocl-product-image-width, 50%);
    }
    .ocl-product__info { flex: 1; }
  }

  .ocl-product__image {
    position: relative;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: var(--ocl-product-aspect, auto);
    padding: var(--ocl-product-image-padding, 0);
    box-sizing: border-box;
    background: #fff;
  }
  .ocl-product__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .ocl-product__image[data-fit='contain'] img {
    object-fit: contain;
    object-position: center;
  }

  .ocl-product__badges {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .ocl-product__badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
  }
  .ocl-product__badge--sale {
    background: var(--oc-accent);
    color: var(--oc-accent-fg);
  }

  .ocl-product__info {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
  @media (max-width: 999px) {
    .ocl-product__info { padding: 24px 20px 28px; }
  }

  .ocl-product__vendor {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--oc-accent);
    margin-bottom: 6px;
  }
  .ocl-product__title {
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--color-foreground-heading, var(--color-foreground));
  }
  .ocl-product__title a {
    color: inherit;
    text-decoration: none;
  }
  .ocl-product__title a:hover { text-decoration: underline; }

  .ocl-product__price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .ocl-product__price-current {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-foreground-heading, var(--color-foreground));
    line-height: 1;
  }
  .ocl-product__price-current--sale { color: var(--oc-accent); }
  .ocl-product__price-compare {
    font-size: 1.125rem;
    text-decoration: line-through;
    opacity: 0.5;
    line-height: 1;
  }
  .ocl-product__save {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    line-height: 1;
  }

  .ocl-product__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 12px;
    font-size: 0.8125rem;
    color: var(--oc-muted-fg);
  }
  .ocl-product__stock { font-weight: 600; }
  .ocl-product__stock--in { color: {{ section.settings.stock_in_color }}; }
  .ocl-product__stock--low { color: {{ section.settings.stock_low_color }}; }
  .ocl-product__stock--out { color: {{ section.settings.stock_out_color }}; }

  .ocl-product__divider {
    border: 0;
    border-top: 1px solid var(--oc-card-border);
    margin: 0 0 16px;
  }
  .ocl-product__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-foreground);
    margin-bottom: 20px;
    opacity: 0.85;
  }
  .ocl-product__desc > *:first-child { margin-top: 0; }
  .ocl-product__desc > *:last-child { margin-bottom: 0; }

  .ocl-product__form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ocl-product__variants {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 4px;
  }
  .ocl-product__variant-label {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-foreground-heading, var(--color-foreground));
  }
  .ocl-product__variant-label span {
    font-weight: 400;
    color: var(--oc-muted-fg);
  }
  .ocl-product__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .ocl-product__swatch {
    position: relative;
    cursor: pointer;
  }
  .ocl-product__swatch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }
  .ocl-product__swatch-label {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--oc-card-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-foreground);
    background: #fff;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .ocl-product__swatch input:checked + .ocl-product__swatch-label {
    border-color: var(--oc-accent);
    color: var(--oc-accent);
  }
  .ocl-product__swatch input:focus-visible + .ocl-product__swatch-label {
    outline: 2px solid var(--oc-accent);
    outline-offset: 2px;
  }
  .ocl-product__swatch--unavailable .ocl-product__swatch-label {
    text-decoration: line-through;
    opacity: 0.55;
  }

  .ocl-product__cart-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
  }
  .ocl-product__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--oc-card-border);
    border-radius: var(--ocl-product-btn-radius, var(--oc-card-radius));
    overflow: hidden;
    height: 52px;
    line-height: 1;
    flex-shrink: 0;
  }
  .ocl-product__qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-foreground);
    padding: 0;
    transition: background 0.15s ease;
  }
  .ocl-product__qty-btn:hover { background: rgba(0, 0, 0, 0.06); }
  .ocl-product__qty-input {
    width: 44px;
    text-align: center;
    border: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
    background: transparent;
    -moz-appearance: textfield;
    padding: 0;
    height: 100%;
  }
  .ocl-product__qty-input::-webkit-inner-spin-button,
  .ocl-product__qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .ocl-product__btn {
    display: block;
    width: 100%;
    text-align: center;
    border: 0;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    border-radius: var(--ocl-product-btn-radius, var(--oc-card-radius));
    padding: 0 24px;
    line-height: 52px;
    transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    text-decoration: none;
  }
  .ocl-product__btn:active { transform: scale(0.98); }
  .ocl-product__btn--add {
    flex: 1;
    background: var(--oc-accent);
    color: var(--oc-accent-fg);
  }
  .ocl-product__btn--add:hover { opacity: 0.85; }
  .ocl-product__btn--add:disabled {
    background: var(--oc-card-border);
    color: var(--oc-muted-fg);
    cursor: not-allowed;
  }
  .ocl-product__btn--buy {
    background: none;
    color: var(--color-foreground);
    box-shadow: 0 0 0 2px var(--oc-card-border) inset;
  }
  .ocl-product__btn--buy:hover {
    box-shadow: 0 0 0 2px var(--color-foreground-heading, var(--color-foreground)) inset;
  }

  .ocl-product__extras {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ocl-product .shopify-payment-button .shopify-payment-button__button {
    border-radius: var(--ocl-product-btn-radius, var(--oc-card-radius)) !important;
    min-height: 52px !important;
  }

  .ocl-product__features {
    list-style: none;
    padding: 16px 0 0;
    margin: 20px 0 0;
    border-top: 1px solid var(--oc-card-border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: center;
  }
  .ocl-product__feature {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    color: var(--oc-muted-fg);
  }
  .ocl-product__feature-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--oc-accent);
  }
  .ocl-product__feature-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }
/* END_SECTION:landing-product */

/* START_SECTION:layered-slideshow (INDEX:18) */
.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:19) */
.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:21) */
.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:22) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

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

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

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

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

/* START_SECTION:main-cart (INDEX:23) */
.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:27) */
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:28) */
.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:oc-category-rail (INDEX:30) */
.oc-cat-rail {
    color: var(--color-foreground);
    padding-block: clamp(20px, 4vw, 40px);
  }

  .oc-cat-rail__heading {
    margin: 0 0 16px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-foreground);
  }

  .oc-cat-rail__track {
    list-style: none;
    /* Negative-margin gutter cancelled by equal padding: gives the hover lift + shadow + focus
       ring room to render. overflow-x:auto forces overflow-y to clip too, so without this the
       red ring/shadow gets cut off by the scroll container's edges. */
    margin: -18px -8px;
    padding: 18px 8px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(10px, 2vw, 24px);
    /* Horizontal scroll kicks in only when the tiles overflow the row. */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .oc-cat-rail__track::-webkit-scrollbar { display: none; }

  /* Columns grow to share the full section width equally (even, edge-to-edge spread),
     but never shrink below one tile — past that, the row scrolls instead of squishing. */
  .oc-cat-rail__item {
    flex: 1 1 0;
    min-width: calc(var(--oc-cat-tile, 144px) + 16px);
    scroll-snap-align: start;
  }

  .oc-cat-rail__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-decoration: none;
    color: inherit;
  }
  .oc-cat-rail__link:focus-visible {
    outline: 2px solid var(--oc-accent);
    outline-offset: 3px;
    border-radius: 6px;
  }

  /* Squircle photo box — soft rounded card, image floats inside with padding. */
  .oc-cat-rail__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--oc-cat-tile, 144px);
    height: var(--oc-cat-tile, 144px);
    padding: 14px;
    background: var(--oc-cat-tile-bg, var(--oc-card-bg));
    border: 1px solid var(--oc-card-border);
    border-radius: 24px;
    box-shadow: var(--oc-card-shadow);
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }
  a.oc-cat-rail__link:hover .oc-cat-rail__media {
    border-color: var(--oc-accent);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
  }

  .oc-cat-rail__img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 300ms ease;
  }
  .oc-cat-rail__media--contain .oc-cat-rail__img { object-fit: contain; }
  .oc-cat-rail__media--cover .oc-cat-rail__img { object-fit: cover; }
  a.oc-cat-rail__link:hover .oc-cat-rail__img { transform: scale(1.04); }

  .oc-cat-rail__img--placeholder {
    object-fit: contain;
    background: var(--oc-card-bg);
    color: var(--oc-muted-fg);
  }

  .oc-cat-rail__label {
    width: 100%;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-foreground);
    /* Wrap long names onto a 2nd line, then ellipsize. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  a.oc-cat-rail__link:hover .oc-cat-rail__label { color: var(--oc-accent); }

  .oc-cat-rail__empty {
    margin: 0;
    color: var(--oc-muted-fg);
    font-size: 0.875rem;
  }

  @media (max-width: 749px) {
    /* Tiles never shrink below the picked size on mobile; the row just scrolls. */
    .oc-cat-rail__track { justify-content: flex-start; }
    .oc-cat-rail__media { border-radius: 20px; padding: 10px; }
  }
/* END_SECTION:oc-category-rail */

/* START_SECTION:oc-collection-heading (INDEX:31) */
.oc-collection-heading {
    color: var(--color-foreground);
    padding-block: 24px 16px;
  }

  .oc-collection-heading__title {
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 16px;
  }

  .oc-collection-heading__description {
    padding: 16px 20px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-foreground);
  }
  .oc-collection-heading__description-inner {
    position: relative;
    overflow: hidden;
  }
  .oc-collection-heading__description-inner > *:first-child { margin-top: 0; }
  .oc-collection-heading__description-inner > *:last-child { margin-bottom: 0; }
  .oc-collection-heading__description[data-collapsed="true"] .oc-collection-heading__description-inner {
    max-height: 160px;
  }
  .oc-collection-heading__description[data-collapsed="true"] .oc-collection-heading__description-inner::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--oc-card-bg));
    pointer-events: none;
  }

  .oc-collection-heading__description-inner table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .oc-collection-heading__description-inner th,
  .oc-collection-heading__description-inner td {
    padding: 12px 8px;
    text-align: left;
    vertical-align: top;
    font-weight: 400;
    border-bottom: 1px solid var(--oc-card-border);
  }
  .oc-collection-heading__description-inner tr:first-child > th,
  .oc-collection-heading__description-inner tr:first-child > td {
    border-top: 1px solid var(--oc-card-border);
  }
  .oc-collection-heading__description-inner th:first-child,
  .oc-collection-heading__description-inner td:first-child {
    width: 40%;
    padding-left: 0;
  }
  .oc-collection-heading__description-inner th:last-child,
  .oc-collection-heading__description-inner td:last-child {
    padding-right: 0;
  }
  .oc-collection-heading__description-inner th strong,
  .oc-collection-heading__description-inner td strong {
    font-weight: 600;
  }

  .oc-collection-heading__description-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    background: none;
    border: 0;
    padding: 4px 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--oc-accent);
    cursor: pointer;
  }
  .oc-collection-heading__description-toggle:hover { text-decoration: underline; }
  .oc-collection-heading__description-toggle svg {
    transition: transform 0.2s ease;
  }
  .oc-collection-heading__description[data-collapsed="false"] .oc-collection-heading__description-toggle svg {
    transform: rotate(180deg);
  }

  @media (max-width: 749px) {
    .oc-collection-heading {
      padding-block: 16px 12px;
    }
    .oc-collection-heading__title {
      margin-bottom: 12px;
    }
    .oc-collection-heading__description {
      padding: 14px 16px;
    }
  }
/* END_SECTION:oc-collection-heading */

/* START_SECTION:oc-footer (INDEX:33) */
/* ===========================================================
     OC Footer — uses OC design tokens from assets/oc-tokens.css
     =========================================================== */
  .oc-footer {
    --oc-footer-fg: #111827;
    --oc-footer-fg-muted: #6B7280;
    --oc-footer-link: #374151;
    --oc-footer-divider: #E5E7EB;
    --oc-footer-bb-bg: #111827;
    --oc-footer-bb-fg: #FFFFFF;
    --oc-footer-bb-fg-muted: #D1D5DB;
    --oc-footer-max: 1440px;
    --oc-footer-pad-x: 32px;
    background: #fff;
    color: var(--oc-footer-fg);
    font-family: inherit;
  }

  .oc-footer__container {
    max-width: var(--oc-footer-max);
    margin: 0 auto;
    padding: 24px var(--oc-footer-pad-x) 0;
  }

  /* ===================== 1. Newsletter ===================== */
  .oc-footer__newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 1px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 20px 28px;
    background: var(--oc-card-bg, #fff);
    border: 1px solid var(--oc-card-border, #E5E7EB);
    border-radius: var(--oc-card-radius, 12px);
  }
  .oc-footer__newsletter-lead {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .oc-footer__newsletter-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    border: 1.5px solid var(--oc-accent, #E11D2E);
    color: var(--oc-accent, #E11D2E);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .oc-footer__newsletter-copy {
    flex: 1 1 220px;
    min-width: 0;
  }
  .oc-footer__newsletter-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--oc-footer-fg);
  }
  .oc-footer__newsletter-sub {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--oc-muted-fg, #6B7280);
    line-height: 1.4;
  }
  .oc-footer__newsletter-form {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 1 1 320px;
    min-width: 0;
    margin: 0;
  }
  .oc-footer__email-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--oc-card-border, #E5E7EB);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--oc-footer-fg);
    appearance: none;
  }
  .oc-footer__email-input::placeholder { color: var(--oc-muted-fg, #6B7280); }
  .oc-footer__email-input:focus {
    outline: 0;
    border-color: var(--oc-accent, #E11D2E);
    box-shadow: 0 0 0 2px rgba(225, 29, 46, 0.18);
  }
  .oc-footer__email-submit {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--oc-accent, #E11D2E);
    color: var(--oc-accent-fg, #fff);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .oc-footer__email-submit:hover { background: #C5172A; }
  .oc-footer__email-submit:focus-visible {
    outline: 2px solid var(--oc-accent, #E11D2E);
    outline-offset: 2px;
  }
  .oc-footer__form-msg {
    flex-basis: 100%;
    margin: 6px 0 0;
    font-size: 0.8125rem;
  }
  .oc-footer__form-msg--ok { color: var(--oc-success, #16A34A); }
  .oc-footer__form-msg--err { color: var(--oc-accent, #E11D2E); }

  .oc-footer__newsletter-divider {
    width: 1px;
    height: 56px;
    background: var(--oc-footer-divider);
    justify-self: center;
  }

  .oc-footer__benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .oc-footer__benefit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
  }
  .oc-footer__benefit-icon {
    flex: 0 0 22px;
    color: var(--oc-footer-fg);
    margin-top: 2px;
  }
  .oc-footer__benefit-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .oc-footer__benefit-text strong {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--oc-footer-fg);
  }
  .oc-footer__benefit-text em {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--oc-muted-fg, #6B7280);
    line-height: 1.35;
    margin-top: 1px;
  }

  /* ===================== 2. Trust bar ===================== */
  .oc-footer__trustbar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--oc-footer-divider);
    padding-block: 28px;
  }
  .oc-footer__trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    border-left: 1px solid var(--oc-footer-divider);
    min-width: 0;
  }
  .oc-footer__trust-item:first-child { border-left: 0; padding-left: 0; }
  .oc-footer__trust-item:last-child { padding-right: 0; }
  .oc-footer__trust-icon {
    flex: 0 0 32px;
    color: var(--oc-footer-fg);
  }
  .oc-footer__trust-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .oc-footer__trust-text strong {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--oc-footer-fg);
  }
  .oc-footer__trust-text em {
    font-style: normal;
    font-size: 0.8125rem;
    color: var(--oc-muted-fg, #6B7280);
    line-height: 1.35;
    margin-top: 2px;
  }

  /* ===================== 3. Main columns ===================== */
  .oc-footer__main {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr;
    gap: 48px;
    padding-block: 48px;
  }

  /* Column visuals — shared */
  .oc-footer__col {
    min-width: 0;
  }
  .oc-footer__col-title {
    margin: 0 0 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--oc-footer-fg);
    list-style: none;
    cursor: default;
  }
  .oc-footer__col-title::-webkit-details-marker { display: none; }
  .oc-footer__col-chevron {
    display: none;
  }
  .oc-footer__col-title--static {
    /* For the Need Help column where it's a normal h4, not a <summary>. */
  }

  .oc-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .oc-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    line-height: 32px;
    color: var(--oc-footer-link);
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .oc-footer__link:hover,
  .oc-footer__link:focus-visible { color: var(--oc-accent, #E11D2E); }
  .oc-footer__link--accent {
    color: var(--oc-accent, #E11D2E);
    font-weight: 600;
  }

  /* Brand column */
  .oc-footer__logo-img {
    display: block;
    height: auto;
    max-width: 140px;
  }
  .oc-footer__logo--text {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--oc-footer-fg);
  }
  .oc-footer__brand-desc {
    margin: 16px 0 20px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--oc-footer-link);
  }
  .oc-footer__socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
  }
  .oc-footer__social {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--oc-card-border, #E5E7EB);
    border-radius: 50%;
    color: var(--oc-footer-fg);
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .oc-footer__social:hover,
  .oc-footer__social:focus-visible {
    color: var(--oc-accent, #E11D2E);
    border-color: var(--oc-accent, #E11D2E);
  }

  /* Help column */
  .oc-footer__help {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .oc-footer__help-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--oc-footer-fg);
    text-decoration: none;
  }
  .oc-footer__help-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(225, 29, 46, 0.08);
    color: var(--oc-accent, #E11D2E);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .oc-footer__help-text { display: flex; flex-direction: column; min-width: 0; }
  .oc-footer__help-text strong {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--oc-footer-fg);
  }
  .oc-footer__help-text em {
    font-style: normal;
    font-size: 0.8125rem;
    line-height: 1.35;
    margin-top: 2px;
    color: var(--oc-muted-fg, #6B7280);
  }
  .oc-footer__help-link:hover .oc-footer__help-text strong,
  .oc-footer__help-link:focus-visible .oc-footer__help-text strong { color: var(--oc-accent, #E11D2E); }

  /* ===================== 4. Bottom bar ===================== */
  .oc-footer__bottombar {
    background: var(--oc-footer-bb-bg);
    color: var(--oc-footer-bb-fg);
    padding: 0;
    margin-top: 0;
  }
  .oc-footer__bottombar-inner {
    max-width: var(--oc-footer-max);
    margin: 0 auto;
    padding: 20px var(--oc-footer-pad-x);
  }
  /* 3-col grid: [rating (+ optional locale stacked)] | payments | copyright */
  .oc-footer__bb-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
  }
  /* Left cell wrapper: when locale is enabled it stacks above the rating. */
  .oc-footer__bb-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
  }

  /* Rating block (formerly Awards) — rendered on the dark bar, left-aligned in
     the left grid cell, same row as payments + copyright. */
  .oc-footer__rating {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
  }
  .oc-footer__rating-shield {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--oc-footer-bb-fg);
  }
  .oc-footer__rating-text { display: flex; flex-direction: column; min-width: 0; }
  .oc-footer__rating-text strong {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--oc-footer-bb-fg);
    line-height: 1.3;
  }
  .oc-footer__rating-stars { margin-top: 4px; line-height: 0; }
  .oc-footer__rating-text em {
    font-style: normal;
    font-size: 0.8125rem;
    color: var(--oc-footer-bb-fg-muted);
    line-height: 1.35;
    margin-top: 4px;
  }
  .oc-footer__bb-locale {
    position: relative;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--oc-footer-bb-fg);
    font-size: 0.875rem;
  }
  .oc-footer__bb-locale--static {
    background: transparent;
    border: 0;
    padding: 0;
  }
  .oc-footer__locale-form {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
  }
  .oc-footer__locale-flag { font-size: 1rem; line-height: 1; }
  .oc-footer__locale-select {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    padding-right: 18px;
    cursor: pointer;
  }
  .oc-footer__locale-select option { color: #111827; }
  .oc-footer__locale-chevron {
    pointer-events: none;
    color: rgba(255,255,255,0.7);
    display: inline-flex;
    margin-left: -22px;
  }

  .oc-footer__payments {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: center;
    flex-wrap: wrap;
    justify-content: center;
  }
  .oc-footer__pay-icon {
    height: 24px;
    width: auto;
    display: block;
  }

  .oc-footer__copyright {
    margin: 0;
    justify-self: end;
    font-size: 0.875rem;
    color: var(--oc-footer-bb-fg-muted);
    text-align: right;
  }

  /* ===================== Tablet (768–1023px) ===================== */
  @media (max-width: 1023px) {
    .oc-footer__container { padding-inline: 24px; }

    /* Newsletter: form on top, benefits on bottom */
    .oc-footer__newsletter {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 20px;
    }
    .oc-footer__newsletter-divider {
      width: 100%;
      height: 1px;
    }
    .oc-footer__benefits {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Trust bar: 2x2 grid on tablet */
    .oc-footer__trustbar {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px 0;
    }
    .oc-footer__trust-item {
      padding: 0 14px;
    }
    .oc-footer__trust-item:nth-child(odd) {
      border-left: 0;
      padding-left: 0;
    }

    /* Main columns: 2 columns; brand & help span full width */
    .oc-footer__main {
      grid-template-columns: 1fr 1fr;
      gap: 32px 40px;
      padding-block: 36px;
    }
    .oc-footer__col--brand,
    .oc-footer__col--help { grid-column: 1 / -1; }

    /* Bottom bar wraps */
    .oc-footer__bb-grid {
      grid-template-columns: 1fr 1fr;
      row-gap: 16px;
    }
    .oc-footer__payments { grid-column: 1 / -1; justify-self: center; }
  }

  /* ===================== Mobile (<768px) ===================== */
  @media (max-width: 767px) {
    .oc-footer__container { padding: 16px 16px 0; }

    /* Newsletter stacks; benefits become 1 column. Reset desktop flex-grow values —
       in column direction `flex: 1 1 *` would stretch children vertically, making the
       form (and the email input inside it) render as a tall empty box. */
    .oc-footer__newsletter { padding: 16px; gap: 16px; }
    /* Row 1: icon + copy on one line (icon vertically centered with the title block).
       Row 2: form spans the full width below. Achieved via flex-wrap on the lead. */
    .oc-footer__newsletter-lead {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
    }
    .oc-footer__newsletter-icon {
      width: 44px; height: 44px; flex: 0 0 44px;
      align-self: center;
    }
    .oc-footer__newsletter-copy { flex: 1 1 0; min-width: 0; }
    .oc-footer__newsletter-form {
      flex: 0 0 100%;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }
    .oc-footer__email-input { flex: 0 0 44px; width: 100%; }
    .oc-footer__email-submit { width: 100%; }

    /* Benefits: 2 items in one row, hide the 3rd on mobile per spec. */
    .oc-footer__benefits {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .oc-footer__benefit:nth-child(3) { display: none; }

    /* Trust bar: 2x2 grid on mobile (4 items total) */
    .oc-footer__trustbar {
      grid-template-columns: 1fr 1fr;
      gap: 16px 0;
      padding-block: 20px;
    }
    .oc-footer__trust-item {
      border-left: 0 !important;
      padding-left: 0 !important;
      padding-right: 8px;
    }

    /* Main: single column, accordions */
    .oc-footer__main {
      grid-template-columns: 1fr;
      gap: 0;
      padding-block: 16px;
    }
    .oc-footer__col {
      border-bottom: 1px solid var(--oc-footer-divider);
      padding-block: 16px;
    }
    /* Awards block has its own border-top — drop the help-col's bottom border
       on mobile so we don't render a double divider line under "Need Help?". */
    .oc-footer__col--help { border-bottom: 0; }

    /* Activate <details>-based accordions on the 3 menu columns */
    .oc-footer__col--menu > .oc-footer__col-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0;
      cursor: pointer;
      padding: 4px 0;
    }
    .oc-footer__col--menu .oc-footer__col-chevron {
      display: inline-flex;
      transition: transform 0.2s ease;
    }
    .oc-footer__col--menu[open] .oc-footer__col-chevron {
      transform: rotate(180deg);
    }
    .oc-footer__col--menu .oc-footer__links { margin-top: 8px; }

    /* Brand: center logo, socials and text */
    .oc-footer__col--brand { text-align: center; }
    .oc-footer__col--brand .oc-footer__logo,
    .oc-footer__col--brand .oc-footer__logo-img { margin-inline: auto; }
    .oc-footer__socials { justify-content: center; }

    /* Bottom bar single column on mobile */
    .oc-footer__bottombar-inner { padding: 16px; }
    .oc-footer__bb-grid {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 14px;
    }
    .oc-footer__bb-left { align-items: center; }
    .oc-footer__rating { justify-content: center; }
    .oc-footer__bb-locale,
    .oc-footer__payments,
    .oc-footer__copyright { justify-self: center; text-align: center; }
  }
/* END_SECTION:oc-footer */

/* START_SECTION:oc-hero (INDEX:34) */
.oc-hero {
    color: var(--color-foreground);
    padding-block: 24px;
  }

  .oc-hero__card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(20px, 3vw, 44px);
    align-items: stretch;
    padding: clamp(20px, 3vw, 40px);
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: calc(var(--oc-card-radius) * 2);
    box-shadow: var(--oc-card-shadow);
  }

  /* Image on the left: mirror the column widths and pull the media before the content
     (DOM order stays content → media, so the text remains first for screen readers). */
  .oc-hero__card--image-left {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
  .oc-hero__card--image-left .oc-hero__media {
    order: -1;
  }

  /* ===================== Content ===================== */
  .oc-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
  }

  .oc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--oc-accent-soft-bg);
    color: var(--oc-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
  }
  .oc-hero__eyebrow-icon { flex-shrink: 0; }

  .oc-hero__title {
    margin: 20px 0 0;
    font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
  }
  .oc-hero__title-accent { color: var(--oc-accent); }

  .oc-hero__subheading {
    margin: 18px 0 0;
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-foreground);
  }

  .oc-hero__body {
    margin: 16px 0 0;
    max-width: 46ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--oc-muted-fg);
  }
  .oc-hero__body > *:first-child { margin-top: 0; }
  .oc-hero__body > *:last-child { margin-bottom: 0; }

  .oc-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 15px 26px;
    border-radius: 10px;
    background: var(--oc-accent);
    color: var(--oc-accent-fg);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  }
  .oc-hero__cta:hover {
    filter: brightness(0.92);
    box-shadow: 0 6px 18px rgba(225, 29, 46, 0.28);
  }
  .oc-hero__cta:active { transform: translateY(1px); }
  .oc-hero__cta:focus-visible {
    outline: 2px solid var(--oc-accent);
    outline-offset: 3px;
  }
  .oc-hero__cta svg { flex-shrink: 0; }

  /* ===================== Media ===================== */
  /* Image is absolutely positioned so the media cell contributes no intrinsic height:
     the (stretched) grid row is driven by the content column, and the photo crops to
     fill that height — no leftover vertical gap. min-height keeps a sensible floor. */
  .oc-hero__media {
    position: relative;
    min-width: 0;
    min-height: 320px;
    border-radius: calc(var(--oc-card-radius) * 1.5);
    overflow: hidden;
    background: var(--oc-accent-soft-bg);
  }
  .oc-hero__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    box-shadow: none;
  }
  .oc-hero__img--placeholder {
    object-fit: contain;
    color: var(--oc-muted-fg);
  }

  /* ===================== Responsive ===================== */
  @media (max-width: 990px) {
    .oc-hero__card {
      grid-template-columns: 1fr;
    }
    /* Stacked layout: let the photo flow at its natural aspect ratio (no crop).
       The image stops being absolutely positioned so it drives the media height itself. */
    .oc-hero__media {
      order: -1;
      min-height: 0;
      aspect-ratio: auto;
    }
    .oc-hero__img {
      position: static;
      height: auto;
    }
  }

  @media (max-width: 749px) {
    .oc-hero__content { align-items: flex-start; }
    .oc-hero__cta { width: 100%; justify-content: center; }
  }
/* END_SECTION:oc-hero */

/* START_SECTION:oc-image-trio (INDEX:35) */
.oc-image-trio {
    color: var(--color-foreground);
    padding-block: 24px;
  }

  .oc-image-trio__heading {
    margin: 0 0 16px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-foreground);
  }

  .oc-image-trio__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .oc-image-trio__item {
    min-width: 0;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }

  .oc-image-trio__item:hover {
    border-color: var(--oc-accent);
    box-shadow: var(--oc-card-shadow);
  }

  .oc-image-trio__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .oc-image-trio__link:focus-visible {
    outline: 2px solid var(--oc-accent);
    outline-offset: 2px;
  }

  .oc-image-trio__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--oc-card-bg);
  }

  .oc-image-trio__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 300ms ease;
  }

  .oc-image-trio__link:hover .oc-image-trio__img {
    transform: scale(1.03);
  }

  .oc-image-trio__img--placeholder {
    object-fit: contain;
    background: var(--oc-card-bg);
    color: var(--oc-muted-fg);
  }

  .oc-image-trio__caption {
    margin: 0;
    padding: 12px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-foreground);
    border-top: 1px solid var(--oc-card-border);
  }

  @media (max-width: 749px) {
    .oc-image-trio__grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }
/* END_SECTION:oc-image-trio */

/* START_SECTION:oc-product-faq (INDEX:37) */
.oc-faq {
    color: var(--color-foreground);
    padding-block: 24px;
  }

  .oc-faq__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .oc-faq__heading {
    margin: 0;
    font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-foreground);
  }
  .oc-faq__subheading {
    margin: 4px 0 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--oc-muted-fg);
  }

  .oc-faq__nav {
    display: inline-flex;
    gap: 8px;
    flex: 0 0 auto;
  }
  .oc-faq__arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--oc-card-border);
    background: var(--oc-card-bg);
    color: var(--color-foreground);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
  }
  .oc-faq__arrow:hover:not(:disabled) {
    border-color: var(--oc-accent);
    color: var(--oc-accent);
  }
  .oc-faq__arrow:disabled {
    opacity: 0.4;
    cursor: default;
  }
  /* No overflow → nothing to scroll, hide the arrows (set by JS). */
  .oc-faq[data-overflow="false"] .oc-faq__nav {
    display: none;
  }

  /* ===================== Horizontal scroller ===================== */
  .oc-faq__track {
    list-style: none;
    margin: 0;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* 2px top/left keeps the card hover ring from clipping; bottom room for the scrollbar. */
    padding: 2px 2px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--oc-card-border) transparent;
    overscroll-behavior-x: contain;
  }
  .oc-faq__track::-webkit-scrollbar {
    height: 8px;
  }
  .oc-faq__track::-webkit-scrollbar-thumb {
    background: var(--oc-card-border);
    border-radius: 999px;
  }
  .oc-faq__track::-webkit-scrollbar-track {
    background: transparent;
  }
  .oc-faq__track.is-dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
    cursor: grabbing;
    user-select: none;
  }
  .oc-faq__track.is-dragging .oc-faq__card {
    pointer-events: none;
  }

  .oc-faq__card {
    flex: 0 0 var(--oc-faq-card-w, 360px);
    max-width: 100%;
    scroll-snap-align: start;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .oc-faq__card:hover {
    border-color: var(--oc-accent);
    box-shadow: var(--oc-card-shadow);
  }

  .oc-faq__q {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-foreground);
  }
  .oc-faq__q-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--oc-accent-soft-bg);
    color: var(--oc-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .oc-faq__q-text {
    min-width: 0;
  }

  .oc-faq__a {
    margin: 0;
    /* Indent under the question text to align past the icon. */
    padding-left: 36px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--oc-muted-fg);
  }
  .oc-faq__a > *:first-child { margin-top: 0; }
  .oc-faq__a > *:last-child { margin-bottom: 0; }
  .oc-faq__a a {
    color: var(--oc-accent);
    text-decoration: underline;
  }

  @media (max-width: 749px) {
    .oc-faq__card {
      /* Peek the next card so the horizontal scroll affordance is obvious on mobile. */
      flex-basis: 84%;
      padding: 16px;
    }
    .oc-faq__a {
      padding-left: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-faq__track { scroll-behavior: auto; }
  }
/* END_SECTION:oc-product-faq */

/* START_SECTION:oc-product-pdp (INDEX:38) */
.oc-pdp {
    color: var(--color-foreground);
  }

  .oc-pdp__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    padding-block: 24px;
    position: relative;
    /* Don't stretch the gallery column to the (much taller) info column — otherwise the gallery has
       trailing empty space and the video, when centered in its cell, appears in a strange spot. */
    align-items: start;
  }

  /* Left column wraps gallery + description so they share the same grid track. */
  .oc-pdp__left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  /* ===================== Description ===================== */
  .oc-pdp__description {
    padding: 16px 20px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-foreground);
  }
  .oc-pdp__description-title {
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--oc-card-border);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-foreground);
  }
  .oc-pdp__description-inner {
    position: relative;
    overflow: hidden;
  }
  .oc-pdp__description-inner > *:first-child { margin-top: 0; }
  .oc-pdp__description-inner > *:last-child { margin-bottom: 0; }
  .oc-pdp__description[data-collapsed="true"] .oc-pdp__description-inner {
    max-height: 200px;
  }
  .oc-pdp__description[data-collapsed="true"] .oc-pdp__description-inner::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 64px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--oc-card-bg));
    pointer-events: none;
  }
  /* Spec/data tables inside the rich description. Horizon's base RTE only applies inside
     .rte, so the section's description gets default browser table layout (cramped cells, bold
     <th>, no dividers). Re-style here to a clean two-column "spec sheet" look: full-width,
     even row dividers, normal-weight labels, comfortable padding. */
  .oc-pdp__description-inner table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .oc-pdp__description-inner th,
  .oc-pdp__description-inner td {
    padding: 12px 8px;
    text-align: left;
    vertical-align: top;
    font-weight: 400;
    border-bottom: 1px solid var(--oc-card-border);
  }
  .oc-pdp__description-inner tr:first-child > th,
  .oc-pdp__description-inner tr:first-child > td {
    border-top: 1px solid var(--oc-card-border);
  }
  .oc-pdp__description-inner th:first-child,
  .oc-pdp__description-inner td:first-child {
    width: 40%;
    padding-left: 0;
  }
  .oc-pdp__description-inner th:last-child,
  .oc-pdp__description-inner td:last-child {
    padding-right: 0;
  }
  /* Source HTML may wrap labels in <strong>; keep that explicit bold but soften to 600. */
  .oc-pdp__description-inner th strong,
  .oc-pdp__description-inner td strong {
    font-weight: 600;
  }

  .oc-pdp__description-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    background: none;
    border: 0;
    padding: 4px 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--oc-accent);
    cursor: pointer;
  }
  .oc-pdp__description-toggle:hover { text-decoration: underline; }
  .oc-pdp__description-toggle svg {
    transition: transform 0.2s ease;
  }
  .oc-pdp__description[data-collapsed="false"] .oc-pdp__description-toggle svg {
    transform: rotate(180deg);
  }

  /* ===================== Gallery ===================== */
  .oc-pdp__gallery {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    align-items: start;
    min-width: 0;
  }
  .oc-pdp__gallery--single {
    grid-template-columns: 1fr;
  }
  .oc-pdp__thumbs {
    list-style: none;
    margin: 0;
    /* 2px padding gives the active-thumb's 2px red box-shadow ring room to render — without it the
       neighboring elements would clip the ring on the top/left/bottom edges. */
    padding: 2px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .oc-pdp__thumb {
    position: relative;
    width: 80px;
    height: 80px;
    padding: 0;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    display: block;
  }
  .oc-pdp__thumb img {
    width: 100%;
    height: 100%;
    /* contain (not cover) so infographic/spec thumbnails preview the whole image instead of a
       cropped center — matches the main slide, which is also object-fit: contain. */
    object-fit: contain;
    display: block;
  }
  .oc-pdp__thumb[aria-pressed="true"] {
    border-color: var(--oc-accent);
    box-shadow: 0 0 0 2px var(--oc-accent);
  }

  /* "+N" overlay tile — uses the first hidden image as a backdrop and signals there are more photos. */
  .oc-pdp__thumb-more-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
  }
  .oc-pdp__thumb--more:hover .oc-pdp__thumb-more-overlay {
    background: rgba(15, 23, 42, 0.65);
  }
  /* The mobile-only "+N" tile is hidden on desktop; the mobile @media block flips this and hides the
     desktop overflow tile + the regular thumbs past the 3rd. */
  .oc-pdp__thumb-li--more-mobile { display: none; }

  .oc-pdp__main {
    position: relative;
    background: var(--oc-card-bg);
    border-radius: var(--oc-card-radius);
    overflow: hidden;
    /* Default square; JS overrides --main-aspect for video / 3D so the active media renders in its natural aspect. */
    aspect-ratio: var(--main-aspect, 1 / 1);
    /* Same 2px red ring as the active thumbnail — reinforces that the main slide is the "selected" media. */
    box-shadow: 0 0 0 2px var(--oc-accent);
  }
  /* Only non-image media (typically shorter than the thumbnails column) gets centered vertically — images keep
     their natural top alignment so the square slide doesn't drop into the middle of the section. */
  .oc-pdp__main[data-active-media="video"],
  .oc-pdp__main[data-active-media="external_video"],
  .oc-pdp__main[data-active-media="model"] {
    align-self: center;
  }
  .oc-pdp__slides {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .oc-pdp__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .oc-pdp__slide[data-active] {
    opacity: 1;
    pointer-events: auto;
  }
  .oc-pdp__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .oc-pdp__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: var(--oc-accent);
    color: var(--oc-accent-fg);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .oc-pdp__badge--sale {
    background: #008000;
    color: #ffffff;
    font-weight: 700;
  }

  /* Both arrows grouped together in the bottom-right corner (not split across the image), so the
     user doesn't have to move the cursor from one edge to the other to keep flipping photos. */
  .oc-pdp__nav {
    position: absolute;
    bottom: 14px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    color: var(--color-foreground);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .oc-pdp__nav:hover { background: #fff; }
  .oc-pdp__nav--prev { right: 64px; }
  .oc-pdp__nav--next { right: 14px; }
  /* Magnifier moves to the bottom-left so it never overlaps the arrows (it's only visible on
     touch / narrow screens — hidden on hover-capable desktop below). */
  .oc-pdp__zoom {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--oc-card-border);
    background: #fff;
    color: var(--color-foreground);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, transform 120ms ease;
  }
  .oc-pdp__zoom:hover { background: #f9fafb; transform: scale(1.05); }
  /* On hover-capable desktop the side-pane zoom drives the experience for images — magnifier is redundant. */
  @media (hover: hover) and (min-width: 750px) {
    .oc-pdp__zoom { display: none; }
  }
  /* Video / 3D slides use the native player for fullscreen — and the previous wiring to Horizon's
     <zoom-dialog> was broken (missing event arg crashed open()). Just hide the magnifier on those slides. */
  .oc-pdp__main[data-active-media="video"] .oc-pdp__zoom,
  .oc-pdp__main[data-active-media="external_video"] .oc-pdp__zoom,
  .oc-pdp__main[data-active-media="model"] .oc-pdp__zoom {
    display: none;
  }

  /* ===================== Touch gestures (phones / tablets) =====================
     On touch-first devices the on-image controls are replaced by direct gestures wired in
     oc-product-pdp.js: a horizontal swipe flips photos, a two-finger pinch zooms the active image in
     place (springing back on release), and a single tap opens the fullscreen gallery (which has its own
     pinch-zoom). The prev/next arrows are removed here so they stop overlapping the content below the
     image, and the magnifier is removed since the whole image is now tappable. */
  @media (hover: none) and (pointer: coarse) {
    .oc-pdp__nav,
    .oc-pdp__zoom {
      display: none;
    }
    /* pan-y keeps the page vertically scrollable when a drag starts on the image, while the JS owns
       horizontal swipes + pinch (and the browser never page-zooms the photo). */
    .oc-pdp__main {
      touch-action: pan-y;
      cursor: zoom-in;
    }
    /* origin matters so the pinch focal-zoom math lands where the fingers are. */
    .oc-pdp__slide-image {
      transform-origin: center center;
    }
    /* The fullscreen popup fully owns its touch surface so pinch / pan / swipe never scroll the page
       behind the modal. */
    .oc-pdp__gallery-dialog__stage {
      touch-action: none;
    }
    .oc-pdp__gallery-dialog__slide img {
      transform-origin: center center;
    }
  }

  /* Video / 3D slides keep media at its natural aspect ratio, letterboxed inside the 1:1 square. */
  .oc-pdp__slide--video,
  .oc-pdp__slide--external_video,
  .oc-pdp__slide--model {
    padding: 0;
  }
  .oc-pdp__slide--video .product-media,
  .oc-pdp__slide--external_video .product-media,
  .oc-pdp__slide--model .product-media {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: auto;
    max-height: 100%;
    max-width: 100%;
  }
  .oc-pdp__slide--video :is(video, iframe, .deferred-media__poster-image),
  .oc-pdp__slide--external_video :is(video, iframe, .deferred-media__poster-image) {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .oc-pdp__slide--model model-viewer {
    width: 100%;
    height: 100%;
  }

  /* ===================== Hover-zoom (ported from product-information) ===================== */
  .oc-pdp__hz-lens {
    position: absolute;
    width: calc(var(--hz-image-width-pct, 100%) / var(--zoom-level, 2));
    height: calc(var(--hz-image-height-pct, 100%) / var(--zoom-level, 2));
    left: var(--zoom-x, 50%);
    top: var(--zoom-y, 50%);
    transform: translate(-50%, -50%);
    border: 1px solid currentcolor;
    background-color: rgba(0, 0, 0, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease-out;
    z-index: 3;
  }
  .oc-pdp__slide[data-hover-active] .oc-pdp__hz-lens { opacity: 1; }

  .oc-pdp__hz-pane {
    position: fixed;
    top: var(--hz-pane-top, 0);
    left: var(--hz-pane-left, 0);
    width: var(--hz-pane-width, 0);
    height: var(--hz-pane-height, 0);
    overflow: hidden;
    background-color: #fff;
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease-out;
    z-index: 9999;
  }
  .oc-pdp__hz-pane[data-active] { opacity: 1; }

  .oc-pdp__hz-pane-image {
    position: absolute;
    width: calc(var(--zoom-level, 2) * 100%);
    height: calc(var(--zoom-level, 2) * 100%);
    left: calc(50% - var(--zoom-x, 50%) * var(--zoom-level, 2));
    top: calc(50% - var(--zoom-y, 50%) * var(--zoom-level, 2));
    object-fit: contain;
    max-width: none;
  }

  @media (hover: hover) and (min-width: 750px) {
    .oc-pdp__slide[data-active] { cursor: crosshair; }
  }

  @media (max-width: 749px) {
    .oc-pdp__hz-lens,
    .oc-pdp__hz-pane { display: none; }
  }

  /* ===================== Zoom dialog ===================== */
  .oc-pdp__zoom-dialog {
    width: min(96vw, 1600px);
    max-width: 96vw;
    max-height: 96vh;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .oc-pdp__zoom-dialog::backdrop {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(2px);
  }
  .oc-pdp__zoom-dialog[open] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .oc-pdp__zoom-image {
    max-width: 96vw;
    max-height: 96vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    cursor: zoom-out;
  }
  .oc-pdp__zoom-close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-foreground);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .oc-pdp__zoom-close:hover { background: #fff; }

  /* ===================== Gallery dialog ("+N" popup) =====================
     Amazon-style "see all photos" — vertical thumb strip + active slide. Built on a native <dialog>
     so browser handles focus trap / Escape / backdrop. Styled entirely with OC design tokens
     (--oc-card-bg, --oc-card-border, --oc-card-radius, --oc-accent) for visual consistency with
     the rest of the PDP. */
  .oc-pdp__gallery-dialog__modal {
    width: min(96vw, 1400px);
    max-width: 96vw;
    height: min(92vh, 920px);
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: var(--oc-card-radius);
    background: var(--oc-card-bg);
    color: var(--color-foreground);
    overflow: hidden;
  }
  .oc-pdp__gallery-dialog__modal::backdrop {
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(2px);
  }
  .oc-pdp__gallery-dialog__modal[open] {
    display: flex;
    flex-direction: column;
  }

  .oc-pdp__gallery-dialog__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--oc-card-border);
    background: rgba(255, 255, 255, 0.96);
    color: var(--color-foreground);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, transform 120ms ease;
  }
  .oc-pdp__gallery-dialog__close:hover {
    background: #fff;
    transform: scale(1.05);
  }

  .oc-pdp__gallery-dialog__counter {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--oc-muted-fg);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--oc-card-border);
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: 0.02em;
  }

  .oc-pdp__gallery-dialog__grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    padding: 64px 24px 24px;
    min-height: 0;
    min-width: 0;
  }

  .oc-pdp__gallery-dialog__thumbs {
    list-style: none;
    margin: 0;
    /* Match .oc-pdp__thumbs 2px padding so the active-thumb's red ring doesn't get clipped by the
       overflow-y: auto scroll container on the edges. */
    padding: 2px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .oc-pdp__gallery-dialog__thumb {
    position: relative;
    width: 100%;
    height: 88px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--oc-card-border);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    display: block;
  }
  .oc-pdp__gallery-dialog__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .oc-pdp__gallery-dialog__thumb[aria-pressed="true"] {
    border-color: var(--oc-accent);
    box-shadow: 0 0 0 2px var(--oc-accent);
  }

  .oc-pdp__gallery-dialog__stage {
    position: relative;
    background: #fff;
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    overflow: hidden;
    min-height: 0;
    min-width: 0;
  }

  .oc-pdp__gallery-dialog__slides {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .oc-pdp__gallery-dialog__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: opacity 0.18s ease;
  }
  .oc-pdp__gallery-dialog__slide[data-active] {
    opacity: 1;
    pointer-events: auto;
  }
  .oc-pdp__gallery-dialog__slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }
  .oc-pdp__gallery-dialog__slide video,
  .oc-pdp__gallery-dialog__slide iframe,
  .oc-pdp__gallery-dialog__slide model-viewer {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }
  .oc-pdp__gallery-dialog__slide--video > *,
  .oc-pdp__gallery-dialog__slide--external_video > *,
  .oc-pdp__gallery-dialog__slide--model > * {
    width: min(100%, 1400px);
    max-height: 100%;
  }
  /* base.css forces `object-fit: cover` on the deferred-media poster <img> and on the playing
     <video>. In the popup the slide is full-viewport, so on a portrait phone the slot is taller
     than wide — `cover` then crops a horizontal video frame into a tall sliver and the user sees
     it stretched vertically. Switch to `contain` so the frame keeps its real aspect ratio
     (letterboxed). Selector specificity has to clear base.css's
     `deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video)`. */
  .oc-pdp__gallery-dialog__slide--video deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video),
  .oc-pdp__gallery-dialog__slide--external_video deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: auto;
  }

  .oc-pdp__gallery-dialog__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--oc-card-border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    color: var(--color-foreground);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, transform 120ms ease;
  }
  .oc-pdp__gallery-dialog__nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
  }
  .oc-pdp__gallery-dialog__nav--prev { left: 16px; }
  .oc-pdp__gallery-dialog__nav--next { right: 16px; }

  @media (max-width: 749px) {
    .oc-pdp__gallery-dialog__modal {
      width: 100vw;
      height: 100vh;
      max-width: none;
      max-height: none;
      border-radius: 0;
    }
    .oc-pdp__gallery-dialog__grid {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) 104px;
      gap: 12px;
      padding: 64px 12px 12px;
    }
    .oc-pdp__gallery-dialog__stage {
      grid-row: 1;
    }
    .oc-pdp__gallery-dialog__thumbs {
      grid-row: 2;
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
      padding-block: 4px;
    }
    .oc-pdp__gallery-dialog__thumb {
      width: 88px;
      height: 88px;
      flex: 0 0 auto;
    }
    .oc-pdp__gallery-dialog__nav {
      width: 40px;
      height: 40px;
    }
  }

  /* ===================== Info column ===================== */
  .oc-pdp__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  /* On desktop BOTH columns are sticky so whichever is shorter pins to the top of the viewport while
     the taller one scrolls — eliminating the empty gap below the shorter column regardless of which
     side is longer (long gallery+description vs. a tall info column with upsell/trust/delivery cards).
     In a 2-column grid only the shorter item has travel room inside its full-height cell, so only it
     visibly pins; the taller one scrolls naturally. Falls back to natural flow on mobile where the
     grid collapses to a single column.
     Offset uses --header-group-height (announcement bar + sticky header) so the pinned column doesn't
     slide under the theme's sticky header. */
  @media (min-width: 1000px) {
    .oc-pdp__info,
    .oc-pdp__left {
      --oc-sticky-offset: calc(var(--header-group-height, 60px) + 16px);
      position: sticky;
      top: var(--oc-sticky-offset);
      align-self: start;
    }
  }
  .oc-pdp__title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
  }

  .oc-pdp__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    font-size: 0.875rem;
    flex-wrap: nowrap;
  }
  .oc-pdp__status-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-width: 0;
  }
  .oc-pdp__status-left strong {
    font-weight: 600;
  }
  .oc-pdp__status-sku {
    color: var(--oc-muted-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .oc-pdp__status--in-stock { color: var(--oc-success); }
  .oc-pdp__status--in-stock .oc-pdp__dot { background: var(--oc-success); }
  .oc-pdp__status--out-of-stock { color: var(--oc-muted-fg); }
  .oc-pdp__status--out-of-stock .oc-pdp__dot { background: var(--oc-muted-fg); }

  /* Variant switcher — sibling products as 1:1 photo tiles, sits between stock and price.
     Tiles use object-fit: contain so the product photo is never cropped but stays inside
     the square; the title mirrors the uppercase variant-option label styling. */
  .oc-pdp__variants-switch {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .oc-pdp__variants-switch-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--oc-muted-fg);
  }
  .oc-pdp__variants-switch-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
  }
  .oc-pdp__variants-switch-item {
    flex: 0 0 auto;
  }
  /* Tile = photo box + caption stacked; the box carries the border/active ring, the caption sits under.
     Tile is a touch wider than the 56px photo so 2-line captions ("with Foot Pedal") have room. */
  .oc-pdp__variants-switch-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 68px;
    text-decoration: none;
    color: var(--color-foreground);
  }
  .oc-pdp__variants-switch-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 4px;
    border: 1px solid var(--oc-card-border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  a.oc-pdp__variants-switch-tile:hover .oc-pdp__variants-switch-photo {
    border-color: var(--oc-accent);
    box-shadow: inset 0 0 0 1px var(--oc-accent);
  }
  a.oc-pdp__variants-switch-tile:hover .oc-pdp__variants-switch-label {
    color: var(--oc-accent);
  }
  .oc-pdp__variants-switch-item.is-current .oc-pdp__variants-switch-photo {
    border-color: var(--oc-accent);
    box-shadow: inset 0 0 0 1px var(--oc-accent);
    cursor: default;
  }
  .oc-pdp__variants-switch-item.is-current .oc-pdp__variants-switch-label {
    color: var(--oc-accent);
    font-weight: 700;
  }
  .oc-pdp__variants-switch-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .oc-pdp__variants-switch-label {
    width: 100%;
    font-size: 0.75rem;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
    /* Wrap long labels (e.g. "with Foot Pedal") onto a 2nd line, then ellipsize if still too long. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .oc-pdp__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .oc-pdp__meta-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .oc-pdp__vendor {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .oc-pdp__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--color-foreground);
    text-decoration: none;
    line-height: 1;
  }
  .oc-pdp__rating:hover { color: var(--oc-accent); }
  .oc-pdp__rating-value { font-weight: 700; }
  .oc-pdp__rating-stars { display: inline-flex; align-items: center; gap: 1px; }
  .oc-pdp__rating-star { display: block; }
  .oc-pdp__rating-count { color: var(--oc-muted-fg); font-weight: 500; }
  .oc-pdp__vendor-label { color: var(--oc-muted-fg); }
  .oc-pdp__vendor-link {
    color: var(--color-foreground);
    font-weight: 600;
    text-decoration: none;
  }
  .oc-pdp__vendor-link:hover { color: var(--oc-accent); }

  .oc-pdp__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
  }

  .oc-pdp__price {
    padding: 8px 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }
  .oc-pdp__price-compare {
    font-size: 0.9375rem;
    color: var(--oc-muted-fg);
  }
  .oc-pdp__price-current {
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
  }
  .oc-pdp__save-pill {
    background: #008000;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
  }

  /* Variant picker sits above the buy box and gets a bit of bottom spacing so the size pills aren't flush with the qty/ATC card. */
  .oc-pdp__variants {
    display: block;
    margin-block: 8px 12px;
  }

  /* ===================== Variant picker — OC redesign =====================
     Horizon's stock variant buttons use a sliding background "pill" (an absolutely positioned
     .variant-option__button-label__pill that translateX-es between selections) plus two ::before/::after
     pseudo-elements acting as animated fake borders. The chain of :has() selectors that drives the offset
     calculation is fragile and produced the broken-looking animation. Override with a flat pill design
     using OC tokens and direct color transitions — cleaner visually and animation-stable. */
  .oc-pdp .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    border: 0;
  }
  .oc-pdp .variant-option + .variant-option {
    margin-top: 16px;
  }
  .oc-pdp .variant-option--buttons legend {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--oc-muted-fg);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .oc-pdp .variant-option__button-label {
    --variant-picker-stroke-color: var(--oc-muted-fg);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 40px;
    min-width: 44px;
    padding: 8px 16px;
    border: 1px solid var(--oc-card-border);
    border-radius: 999px;
    background: var(--oc-card-bg);
    color: var(--color-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    overflow: visible;
    box-shadow: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  /* Hide Horizon's sliding pill + fake-border pseudos so they don't fight our flat design. */
  .oc-pdp .variant-option__button-label__pill,
  .oc-pdp .variant-option__button-label::before,
  .oc-pdp .variant-option__button-label::after {
    display: none;
  }
  .oc-pdp .variant-option__button-label:hover {
    border-color: var(--oc-accent);
    background: var(--oc-accent-soft-bg);
    color: var(--color-foreground);
  }
  .oc-pdp .variant-option__button-label:has(:checked) {
    background: var(--oc-accent);
    border-color: var(--oc-accent);
    color: var(--oc-accent-fg);
  }
  .oc-pdp .variant-option__button-label:has(:checked):hover {
    background: var(--oc-accent);
    border-color: var(--oc-accent);
    color: var(--oc-accent-fg);
  }
  .oc-pdp .variant-option__button-label:has(:focus-visible) {
    outline: 2px solid var(--oc-accent);
    outline-offset: 2px;
  }
  /* Unavailable variant — muted, with strikethrough still visible. */
  .oc-pdp .variant-option__button-label:has([data-option-available='false']) {
    color: var(--oc-muted-fg);
    background: var(--oc-card-bg);
    border-color: var(--oc-card-border);
    cursor: not-allowed;
  }
  .oc-pdp .variant-option__button-label:has([data-option-available='false']):hover {
    background: var(--oc-card-bg);
    border-color: var(--oc-card-border);
  }
  /* Strikethrough SVG — Horizon's clip-path animation overlaps the sliding-pill geometry; restore
     to a static full-width line in OC muted color. */
  .oc-pdp .variant-option__button-label svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    stroke: var(--oc-muted-fg);
  }
  .oc-pdp .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
    clip-path: none;
    stroke: var(--oc-muted-fg);
  }

  /* ===================== Buy panel =====================
     Layout mirrors product-information: qty + ATC on one row, payment button below, more-payment link underneath.
     Heavy lifting (quantity-selector, add-to-cart-button, accelerated-checkout-block) is styled by buy-buttons-styles.liquid. */
  .oc-pdp__form {
    display: block;
  }
  .oc-pdp__form form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Buy buttons — OC polish. Horizon paints button borders via inset box-shadow (border: none + inset
     shadow), and applies a global text-transform. Neither matches the OC card system, so override
     locally: real-feeling solid pills with the OC card radius, sentence-case text. */
  .oc-pdp .add-to-cart-button,
  .oc-pdp .shopify-payment-button__button--unbranded,
  .oc-pdp .shopify-payment-button button {
    border-radius: var(--oc-card-radius);
    box-shadow: none;
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
  }
  .oc-pdp .add-to-cart-button:not(:disabled):hover,
  .oc-pdp .shopify-payment-button__button--unbranded:not(:disabled):hover {
    box-shadow: 0 4px 12px rgba(225, 29, 46, 0.18);
  }
  .oc-pdp .add-to-cart-button:disabled {
    background: var(--oc-card-border);
    color: var(--oc-muted-fg);
    cursor: not-allowed;
    box-shadow: none;
  }

  /* Attention-grabbing shake on the Add to cart button — gentle wobble every 3s loop. Pauses on
     hover so the cursor doesn't fight a moving target. Disabled ATC + reduced-motion users opt out.

     IMPORTANT: animate the WRAPPER (add-to-cart-component), NOT the button itself. Horizon's
     animateAddToCart awaits `element.getAnimations({subtree: true})` on the button before clearing
     the data-added (checkmark) state. An infinite animation on the button would never resolve and
     the checkmark would stay forever. Animations on parent elements are NOT included in subtree
     queries, so wrapping is safe. */
  @keyframes oc-pdp-attention-shake {
    0%, 80%, 100% { transform: scale(1) rotate(0); }
    82% { transform: scale(1.05) rotate(-2deg); }
    84% { transform: scale(1.05) rotate(2deg); }
    86% { transform: scale(1.05) rotate(-2deg); }
    88% { transform: scale(1.05) rotate(2deg); }
  }
  .oc-pdp add-to-cart-component {
    display: block;
  }
  .oc-pdp add-to-cart-component:has(.add-to-cart-button:not(:disabled)) {
    animation: oc-pdp-attention-shake 3s ease-in-out infinite;
    will-change: transform;
  }
  .oc-pdp add-to-cart-component:has(.add-to-cart-button:not(:disabled)):hover {
    animation-play-state: paused;
    transform: scale(1) rotate(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .oc-pdp add-to-cart-component {
      animation: none;
    }
  }

  /* ===================== Compare toggle ===================== */
  .oc-pdp__compare {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .oc-pdp__compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    color: var(--color-foreground);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
  }
  .oc-pdp__compare-btn:hover {
    color: var(--oc-accent);
    border-color: var(--oc-accent);
  }
  .oc-pdp__compare-btn[aria-pressed="true"] {
    color: var(--oc-accent);
    border-color: var(--oc-accent);
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }
  .oc-pdp__compare-btn[data-flash="limit"] {
    color: #c0392b;
    border-color: #c0392b;
    animation: oc-pdp-compare-shake 0.45s ease-in-out;
  }
  .oc-pdp__compare-icon {
    display: inline-flex;
  }
  .oc-pdp__compare-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--oc-accent);
    text-decoration: none;
  }
  .oc-pdp__compare-link:hover {
    text-decoration: underline;
  }
  @keyframes oc-pdp-compare-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
  }

  /* ===================== Trust grid ===================== */
  .oc-pdp__trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }
  .oc-pdp__trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .oc-pdp__trust-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
  }
  .oc-pdp__trust-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
  }
  .oc-pdp__trust-text strong {
    font-size: 0.875rem;
    font-weight: 600;
  }
  .oc-pdp__trust-text span {
    font-size: 0.75rem;
    color: var(--oc-muted-fg);
  }

  /* ===================== Complete your setup (upsell) =====================
     Cross-sell module under the buy buttons. Subtle gray fill to distinguish it from the
     white info cards, with each item on its own white "ticket" that highlights in accent
     when checked. Styled standalone (no theme .button dependency) so the CTA always reads
     as the OC accent regardless of the theme's primary-button color. */
  .oc-pdp__upsell {
    display: block;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
  }
  .oc-pdp__upsell-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .oc-pdp__upsell-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--oc-accent-soft-bg);
    color: var(--oc-accent);
  }
  .oc-pdp__upsell-heading {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .oc-pdp__upsell-title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-foreground);
  }
  .oc-pdp__upsell-subtitle {
    font-size: 0.8125rem;
    color: var(--oc-muted-fg);
  }
  /* Desktop: items sit side-by-side in a single row (max 2 per the metafield). Mobile
     switches back to a stacked column in the @media block below. */
  .oc-pdp__upsell-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .oc-pdp__upsell-item {
    flex: 1 1 0;
    min-width: 0;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .oc-pdp__upsell-item:has(.oc-pdp__upsell-check:checked) {
    border-color: var(--oc-accent);
    box-shadow: inset 0 0 0 1px var(--oc-accent);
  }
  .oc-pdp__upsell-item.is-unavailable {
    opacity: 0.55;
  }
  .oc-pdp__upsell-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
  }
  .oc-pdp__upsell-item.is-unavailable .oc-pdp__upsell-option {
    cursor: not-allowed;
  }
  .oc-pdp__upsell-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--oc-accent);
    cursor: pointer;
    margin: 0;
  }
  .oc-pdp__upsell-photo {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--oc-card-border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }
  .oc-pdp__upsell-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .oc-pdp__upsell-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .oc-pdp__upsell-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-foreground);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .oc-pdp__upsell-name:hover { color: var(--oc-accent); }
  .oc-pdp__upsell-variant {
    font-size: 0.75rem;
    color: var(--oc-muted-fg);
  }
  .oc-pdp__upsell-price {
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-foreground);
    white-space: nowrap;
  }
  .oc-pdp__upsell-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .oc-pdp__upsell-total {
    font-size: 0.875rem;
    color: var(--oc-muted-fg);
  }
  .oc-pdp__upsell-total strong {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-foreground);
  }
  /* The CTA reuses the theme's add-to-cart button (class "button add-to-cart-button"), so its look
     AND the post-click checkmark-burst animation match the main buy button 1-to-1 — same pattern as
     the sticky bar's ATC. Color, radius, hover, disabled state and the [data-added] burst all come
     from base.css + the OC buy-button polish above; we only keep it from stretching so it sits
     inline next to the total. */
  .oc-pdp__upsell-add {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .oc-pdp__upsell-error {
    margin-top: 10px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--oc-accent);
  }

  /* ===================== Info cards ===================== */
  .oc-pdp__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .oc-pdp__card-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--oc-muted-fg);
  }
  .oc-pdp__card-body strong {
    color: var(--color-foreground);
    margin-right: 4px;
  }

  /* ===================== Delivery timeline ===================== */
  .oc-pdp__delivery {
    padding: 16px 18px 20px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
  }
  .oc-pdp__delivery-head {
    margin-bottom: 16px;
  }
  .oc-pdp__delivery-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-foreground);
  }
  .oc-pdp__delivery-intro {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--oc-muted-fg);
  }
  .oc-pdp__delivery-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }
  .oc-pdp__delivery-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 6px;
    min-width: 0;
  }
  .oc-pdp__delivery-step + .oc-pdp__delivery-step::before {
    content: '';
    position: absolute;
    top: 21px;
    right: calc(50% + 24px);
    left: calc(-50% + 24px);
    height: 1px;
    background: var(--oc-card-border, #e5e7eb);
  }
  .oc-pdp__delivery-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-background, #fff);
    border: 1px solid var(--oc-card-border, #e5e7eb);
    color: var(--oc-muted-fg);
    margin-bottom: 10px;
  }
  .oc-pdp__delivery-step.is-active .oc-pdp__delivery-icon {
    color: #d72b3a;
    border-color: #d72b3a;
  }
  .oc-pdp__delivery-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-foreground);
    line-height: 1.25;
  }
  .oc-pdp__delivery-sub {
    font-size: 0.75rem;
    color: var(--oc-muted-fg);
    line-height: 1.35;
    margin-top: 2px;
  }

  /* ===================== Mobile ===================== */
  @media (max-width: 999px) {
    .oc-pdp__grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    /* Dissolve the left wrapper so gallery + description become direct grid children, then re-order
       so the flow on mobile is: gallery → info (price/buy) → description. */
    .oc-pdp__left {
      display: contents;
    }
    .oc-pdp__info { order: 2; }
    .oc-pdp__description { order: 3; }

    /* Upsell items stack on mobile (one per row) — desktop keeps them side-by-side. */
    .oc-pdp__upsell-list {
      flex-direction: column;
    }

    .oc-pdp__gallery,
    .oc-pdp__gallery--single {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .oc-pdp__thumbs {
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
      order: 2;
      padding-block: 4px;
    }
    /* Cap the mobile strip at 4 tiles: the first 3 thumbs + the mobile "+N" tile. The extra thumbs and
       the desktop overflow tile are hidden here so the row fits without horizontal scrolling. */
    .oc-pdp__thumb-li--mobile-hidden,
    .oc-pdp__thumb-li--more-desktop { display: none; }
    .oc-pdp__thumb-li--more-mobile { display: block; }
    .oc-pdp__main { order: 1; }

    .oc-pdp__delivery {
      padding: 14px 14px 16px;
    }
    .oc-pdp__delivery-icon {
      width: 36px;
      height: 36px;
    }
    .oc-pdp__delivery-step + .oc-pdp__delivery-step::before {
      top: 18px;
      right: calc(50% + 20px);
      left: calc(-50% + 20px);
    }
    .oc-pdp__delivery-label {
      font-size: 0.75rem;
    }
    .oc-pdp__delivery-sub {
      font-size: 0.6875rem;
    }
  }

  /* ===================== Sticky buy bar =====================
     Lives inside the header (portaled by JS into [data-oc-product-bar-host]); .is-visible is toggled
     once the main buy button scrolls above the viewport.
     position:absolute fills the header host (under the top row); z-index:1 keeps it above the menu row
     it overlays on desktop. The clip-path reveal grows the bar out from under the top header row
     (top inset 100% → 0) — it never paints over the top row, so no flying-across-the-logo. The -24px
     bottom inset keeps the drop shadow from being clipped. */
  .oc-pdp__sticky {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: var(--oc-card-bg, #fff);
    border-bottom: 1px solid var(--oc-card-border);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12);
    /* Hidden: clipped from the BOTTOM up (bottom inset 100%) collapsed to the top edge, so the reveal
       opens TOP→DOWN — the bar grows downward out from under the top header row. Fully clipped means
       nothing (border-bottom / shadow) leaks while hidden. Visible opens the bottom to -24px for the
       drop shadow. */
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.28s ease;
    pointer-events: none;
  }
  .oc-pdp__sticky[hidden] { display: none; }
  .oc-pdp__sticky.is-visible {
    clip-path: inset(0 0 -24px 0);
    pointer-events: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .oc-pdp__sticky { transition: none; }
  }

  /* Bar background is full-width (edge to edge); the content lines up with the rest of the page
     (header/section) via the theme's --page-width. */
  .oc-pdp__sticky-inner {
    max-width: var(--page-width, 1400px);
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  /* Identity: photo on the LEFT, then title + price. Grows to absorb slack so the title truncates and
     the stock + buy controls sit to the right. */
  .oc-pdp__sticky-id {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
  }

  /* Stock status (desktop only) — sits between the identity and the buy controls. */
  .oc-pdp__sticky-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .oc-pdp__sticky-stock--in { color: var(--oc-success); }
  .oc-pdp__sticky-stock--out { color: var(--oc-muted-fg); }
  .oc-pdp__sticky-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
  }
  .oc-pdp__sticky-save {
    background: #008000;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
  }
  .oc-pdp__sticky-photo {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid var(--oc-card-border);
    background: var(--oc-card-bg);
    overflow: hidden;
    display: inline-flex;
  }
  .oc-pdp__sticky-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .oc-pdp__sticky-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .oc-pdp__sticky-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .oc-pdp__sticky-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .oc-pdp__sticky-price-current {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--oc-accent);
    line-height: 1.1;
  }
  .oc-pdp__sticky-price-compare {
    font-size: 0.875rem;
    color: var(--oc-muted-fg);
  }

  .oc-pdp__sticky-buy {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 0;
  }
  /* Keep the (real) qty selector at its natural width and let the ATC button take the rest. */
  .oc-pdp__sticky-buy .quantity-selector-wrapper,
  .oc-pdp__sticky-buy .quantity-selector {
    flex: 0 0 auto;
  }
  .oc-pdp__sticky-atc-wrap {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
  }
  .oc-pdp__sticky-atc {
    flex: 1 1 auto;
    width: 100%;
    white-space: nowrap;
  }
  /* Attention wobble — mirrors the main buy button. On the WRAPPER, not the button, so it never
     clashes with the button's [data-added] checkmark burst. */
  .oc-pdp__sticky-atc-wrap:has(.add-to-cart-button:not(:disabled)) {
    animation: oc-pdp-attention-shake 3s ease-in-out infinite;
    will-change: transform;
  }
  .oc-pdp__sticky-atc-wrap:has(.add-to-cart-button:not(:disabled)):hover {
    animation-play-state: paused;
    transform: scale(1) rotate(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .oc-pdp__sticky-atc-wrap { animation: none; }
  }

  @media (max-width: 749px) {
    /* --- In-flow buy panel: hide the static price + qty stepper + Add-to-cart. On phones these live in
       the always-on bottom bar instead (people reach price + variants but rarely scroll to the button).
       The express Shop Pay / Apple Pay / PayPal button stays in-flow for one-tap checkout. --- */
    .oc-pdp__price,
    .oc-pdp__form .quantity-selector-wrapper,
    .oc-pdp__form .add-to-cart-button {
      display: none;
    }

    /* --- Sticky bar layout: Row 1 identity (photo + title/price), Row 2 qty + Add to cart.
       Stock hidden to save room. --- */
    .oc-pdp__sticky-inner {
      flex-wrap: wrap;
      gap: 10px 12px;
      padding: 10px 12px;
    }
    .oc-pdp__sticky-id { flex: 1 1 100%; order: 1; }
    .oc-pdp__sticky-text { flex: 1 1 auto; }
    .oc-pdp__sticky-stock { display: none; }
    .oc-pdp__sticky-buy { flex: 1 1 100%; order: 2; }

    /* --- Bottom bar: JS adds .oc-pdp__sticky--bottom and portals the node to <body>, so the bar is
       always visible and pinned to the bottom of the viewport. The compound selector (0,2,0) beats the
       base .oc-pdp__sticky + .is-visible rules, cancelling the desktop header-portal absolute + clip-path
       reveal. --- */
    .oc-pdp__sticky.oc-pdp__sticky--bottom {
      position: fixed;
      inset: auto 0 0 0;
      z-index: var(--layer-sticky, 50);
      clip-path: none;
      pointer-events: auto;
      border-top: 1px solid var(--oc-card-border);
      border-bottom: none;
      box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.12);
    }
    /* Respect the iOS home-indicator safe area. */
    .oc-pdp__sticky--bottom .oc-pdp__sticky-inner {
      padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* Reserve space so the fixed bar never hides the footer / last content. JS sets --oc-sticky-bar-h
       to the measured height; the fallback covers first paint before measurement. */
    body.oc-has-sticky-bar {
      padding-bottom: var(--oc-sticky-bar-h, 148px);
    }
  }
/* END_SECTION:oc-product-pdp */

/* START_SECTION:oc-product-video (INDEX:39) */
.oc-video {
    color: var(--color-foreground);
  }

  .oc-video__inner {
    max-width: var(--oc-video-max, 1000px);
    margin-inline: auto;
    padding-block: var(--oc-video-pt, 24px) var(--oc-video-pb, 24px);
  }

  .oc-video__heading {
    margin: 0 0 16px;
    font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
  }

  .oc-video__frame {
    position: relative;
    border-radius: var(--oc-card-radius);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--oc-card-border);
    box-shadow: var(--oc-card-shadow);
  }

  /* Stretch whatever the video snippet renders (deferred-media wrapper, poster, <video>,
     iframe) to fill the framed card and keep its natural aspect ratio. */
  .oc-video__frame :where(img, video, iframe, deferred-media, .video-placeholder-wrapper) {
    display: block;
    width: 100%;
  }
  .oc-video__frame :where(img, video) {
    height: auto;
  }

  .oc-video__placeholder {
    padding: 32px 20px;
    text-align: center;
    border: 1px dashed var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    background: var(--oc-card-bg);
    color: var(--oc-muted-fg);
    font-size: 0.9375rem;
  }
  .oc-video__placeholder p { margin: 0; }
/* END_SECTION:oc-product-video */

/* START_SECTION:panel-row (INDEX:40) */
.panel-row {
    display: flex;
    flex-direction: row;
    align-items: var(--panel-align-v, stretch);
    gap: var(--panel-gap, 16px);
    padding: var(--panel-pad-y, 16px) var(--panel-pad-x, 20px);
    background: var(--panel-bg, transparent);
    border-radius: var(--panel-radius, 16px);
    border: var(--panel-border, 0 solid transparent);
    min-height: var(--panel-min-h, 0);
    width: 100%;
    box-sizing: border-box;
  }

  .panel-row__slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 0 1 auto;
  }

  .panel-row__slot--left {
    align-items: flex-start;
    margin-inline-end: auto;
  }

  .panel-row__slot--center {
    align-items: center;
    text-align: center;
  }

  .panel-row__slot--right {
    align-items: flex-end;
    margin-inline-start: auto;
    text-align: end;
  }

  .panel-row--equal .panel-row__slot {
    flex: 1 1 0;
    margin: 0;
  }

  .panel-row--equal .panel-row__slot--left { align-items: flex-start; }
  .panel-row--equal .panel-row__slot--center { align-items: center; }
  .panel-row--equal .panel-row__slot--right { align-items: flex-end; }

  .panel-row__slot > .group-block {
    width: 100%;
  }

  @media (max-width: 749px) {
    .panel-row--stack-mobile {
      flex-direction: column;
      align-items: stretch;
    }
    .panel-row--stack-mobile .panel-row__slot {
      align-items: stretch;
      margin: 0;
      text-align: start;
    }
  }
/* END_SECTION:panel-row */

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

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

    > a {
      display: flex;
    }

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

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

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

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

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

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

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

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

/* START_SECTION:product-feature-grid (INDEX:45) */
.oc-feature-grid {
    display: grid;
    gap: var(--oc-fg-gap, 24px);
    padding: var(--oc-fg-pad-y, 24px) var(--oc-fg-pad-x, 24px);
    /* Defaults fall back to the shared OC card tokens (assets/oc-tokens.css) so the panel
       stays in lock-step with the rest of the PDP design system if a merchant clears a setting. */
    background: var(--oc-fg-bg, var(--oc-card-bg));
    border-radius: var(--oc-fg-radius, var(--oc-card-radius));
    border: var(--oc-fg-border-w, 1px) solid var(--oc-fg-border-c, var(--oc-card-border));
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
  }
  .oc-feature-grid--cols-3 { grid-template-columns: 1fr minmax(0, 320px) 1fr; }
  .oc-feature-grid--cols-2 { grid-template-columns: 1fr 1fr; }
  .oc-feature-grid--cols-2 .oc-feature-grid__slot--center { display: none; }

  .oc-feature-grid__slot { min-width: 0; display: flex; flex-direction: column; }
  .oc-feature-grid__slot--left { justify-content: flex-start; }
  .oc-feature-grid__slot--center { justify-content: center; align-items: center; }
  .oc-feature-grid__slot--right { justify-content: flex-start; }

  @media (max-width: 749px) {
    .oc-feature-grid--stack-mobile {
      grid-template-columns: 1fr;
    }
    .oc-feature-grid--stack-mobile .oc-feature-grid__slot--center {
      order: -1;
      display: flex;
    }
  }
/* END_SECTION:product-feature-grid */

/* START_SECTION:product-features-bar (INDEX:46) */
.oc-features-bar {
    display: grid;
    align-items: center;
    background: var(--oc-fb-bg, #fff);
    border: 1px solid var(--oc-fb-border, #E5E7EB);
    border-radius: var(--oc-fb-radius, 16px);
    padding: var(--oc-fb-pad-y, 20px) var(--oc-fb-pad-x, 28px);
    width: 100%;
    box-sizing: border-box;
  }

  .oc-features-bar--cols-d-1 { grid-template-columns: 1fr; }
  .oc-features-bar--cols-d-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-features-bar--cols-d-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oc-features-bar--cols-d-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .oc-features-bar--cols-d-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .oc-features-bar--cols-d-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .oc-features-bar__item {
    display: flex;
    align-items: center;
    gap: var(--oc-fb-gap, 14px);
    padding-inline: 18px;
    min-width: 0;
    border-left: 1px solid var(--oc-fb-border, #E5E7EB);
  }
  .oc-features-bar__item:first-child {
    border-left: 0;
    padding-left: 0;
  }
  .oc-features-bar__item:last-child {
    padding-right: 0;
  }

  .oc-features-bar__icon {
    flex: 0 0 auto;
    width: var(--oc-fb-icon, 32px);
    height: var(--oc-fb-icon, 32px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
  }
  .oc-features-bar__icon svg,
  .oc-features-bar__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .oc-features-bar__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
  }
  .oc-features-bar__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-foreground);
  }
  .oc-features-bar__subtitle {
    font-size: 0.8125rem;
    color: var(--oc-muted-fg, #6B7280);
  }

  @media (max-width: 749px) {
    .oc-features-bar {
      padding: 14px 16px;
    }
    .oc-features-bar--cols-m-1 { grid-template-columns: 1fr; }
    .oc-features-bar--cols-m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oc-features-bar--cols-m-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .oc-features-bar--cols-m-1 .oc-features-bar__item,
    .oc-features-bar--cols-m-2 .oc-features-bar__item,
    .oc-features-bar--cols-m-3 .oc-features-bar__item {
      padding: 10px 0;
      border-left: 0;
      border-top: 1px solid var(--oc-fb-border, #E5E7EB);
    }
    .oc-features-bar--cols-m-1 .oc-features-bar__item:first-child,
    .oc-features-bar--cols-m-2 .oc-features-bar__item:nth-child(-n+2),
    .oc-features-bar--cols-m-3 .oc-features-bar__item:nth-child(-n+3) {
      border-top: 0;
      padding-top: 0;
    }

    .oc-features-bar--cols-m-scroll {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: minmax(70%, max-content);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 8px;
      scrollbar-width: none;
    }
    .oc-features-bar--cols-m-scroll::-webkit-scrollbar { display: none; }
    .oc-features-bar--cols-m-scroll .oc-features-bar__item {
      scroll-snap-align: start;
      padding-inline: 12px;
    }
    .oc-features-bar--cols-m-scroll .oc-features-bar__item:first-child {
      padding-left: 0;
    }
  }

  /* ---------- Highlight: animated gradient border ---------- */
  @property --oc-fb-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  .oc-features-bar--glow-gradient_spin {
    position: relative;
    border: 0;
  }
  .oc-features-bar--glow-gradient_spin::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
      from var(--oc-fb-angle, 0deg),
      #a855f7, #ec4899, #f97316, #06b6d4, #6366f1, #a855f7
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
    animation: oc-fb-glow-spin 6s linear infinite;
  }
  /* Soft halo behind the bar, in sync with the spinning ring. */
  .oc-features-bar--glow-gradient_spin::after {
    content: '';
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: inherit;
    background: conic-gradient(
      from var(--oc-fb-angle, 0deg),
      #a855f7, #ec4899, #f97316, #06b6d4, #6366f1, #a855f7
    );
    filter: blur(18px);
    opacity: 0.35;
    pointer-events: none;
    animation: oc-fb-glow-spin 6s linear infinite;
  }

  @keyframes oc-fb-glow-spin {
    to { --oc-fb-angle: 360deg; }
  }

  @media (prefers-reduced-motion: reduce) {
    .oc-features-bar--glow-gradient_spin::before,
    .oc-features-bar--glow-gradient_spin::after {
      animation: none;
    }
  }
/* END_SECTION:product-features-bar */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:product-icon-row (INDEX:48) */
.oc-icon-row {
    display: grid;
    gap: var(--oc-icon-row-gap, 12px);
    padding: 16px;
    background: var(--oc-card-bg);
    border-radius: var(--oc-card-radius);
    width: 100%;
    box-sizing: border-box;
  }
  .oc-icon-row--card { border: 1px solid var(--oc-card-border); }
  .oc-icon-row--top-bottom {
    border: 0;
    border-top: 1px solid var(--oc-card-border);
    border-bottom: 1px solid var(--oc-card-border);
    border-radius: 0;
    background: transparent;
  }
  .oc-icon-row--none { border: 0; background: transparent; padding: 0; }

  .oc-icon-row--cols-d-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oc-icon-row--cols-d-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .oc-icon-row--cols-d-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .oc-icon-row--cols-d-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .oc-icon-row__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .oc-icon-row__icon {
    flex: 0 0 auto;
    width: var(--oc-icon-row-size, 36px);
    height: var(--oc-icon-row-size, 36px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
  }
  .oc-icon-row__icon img { width: 100%; height: 100%; object-fit: contain; }
  .oc-icon-row__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .oc-icon-row__title { font-size: 0.9375rem; font-weight: 600; color: var(--color-foreground); }
  .oc-icon-row__subtitle { font-size: 0.8125rem; color: var(--oc-muted-fg); }

  @media (max-width: 749px) {
    .oc-icon-row--cols-m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oc-icon-row--cols-m-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .oc-icon-row--cols-m-scroll {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: minmax(60%, max-content);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-block: 16px;
      padding-inline: 16px;
      scrollbar-width: none;
    }
    .oc-icon-row--cols-m-scroll::-webkit-scrollbar { display: none; }
    .oc-icon-row--cols-m-scroll .oc-icon-row__item { scroll-snap-align: start; }
  }
/* END_SECTION:product-icon-row */

/* START_SECTION:product-information (INDEX:49) */
/* Sticky Buy Bar — Warehouse design ported to Horizon */
  .sticky-add-to-cart__bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--layer-sticky) - 1);
    transform: translateY(100%);
    pointer-events: none;
    background: transparent;
    padding: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition: transform 0.3s ease;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateY(0);
    pointer-events: auto;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    transform: translateY(100%);
    pointer-events: none;
  }

  .sticky-add-to-cart__wrap {
    border-radius: var(--sticky-bar-radius, 8px) var(--sticky-bar-radius, 8px) 0 0;
    overflow: hidden;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
    background: var(--color-background);
  }

  .sticky-add-to-cart__wrap[data-align='left'] {
    margin: 0 auto 0 0;
  }

  .sticky-add-to-cart__wrap[data-align='right'] {
    margin: 0 0 0 auto;
  }

  .sticky-add-to-cart__wrap[data-align='center'] {
    margin: 0 auto;
  }

  .sticky-add-to-cart__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
  }

  .sticky-add-to-cart__product {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
  }

  .sticky-add-to-cart__thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .sticky-add-to-cart__info {
    min-width: 0;
    flex: 1;
  }

  .sticky-add-to-cart__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }

  .sticky-add-to-cart__price {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-foreground);
    display: block;
    line-height: 1.3;
    margin-top: 2px;
  }

  .sticky-add-to-cart__price--sale {
    color: rgb(var(--color-error-rgb, 229 57 53));
  }

  .sticky-add-to-cart__compare {
    font-size: 13px;
    text-decoration: line-through;
    opacity: 0.5;
    margin-left: 6px;
    font-weight: 400;
    color: var(--color-foreground);
  }

  .sticky-add-to-cart__form {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .sticky-add-to-cart__button {
    height: 48px;
    min-height: 48px;
    border-radius: var(--sticky-bar-radius, 8px);
    padding: 0 32px;
    white-space: nowrap;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    position: relative;
  }

  /* Mobile: stack image+info above the button, full-width button */
  @media screen and (max-width: 599px) {
    .sticky-add-to-cart__wrap {
      border-radius: 0;
    }

    .sticky-add-to-cart__inner {
      flex-direction: column;
      gap: 10px;
      padding: 10px 16px 12px;
    }

    .sticky-add-to-cart__product {
      width: 100%;
    }

    .sticky-add-to-cart__form {
      width: 100%;
    }

    .sticky-add-to-cart__button {
      flex: 1;
      width: 100%;
      justify-content: center;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:product-list (INDEX:50) */
/* ===== OfficeChase design-system accents for the product list =====
     Scoped to .oc-product-list. Styles ONLY the section heading, the "View all" button
     and (optionally) an OC bordered panel around the whole section. Product cards are
     left exactly as the theme renders them. */

  /* Panel wrapper keeps the section's inter-block gap; the border is opt-in. */
  .oc-product-list__panel {
    display: flex;
    flex-direction: column;
    gap: var(--gap, 28px);
  }
  .oc-product-list__panel--bordered {
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    box-shadow: var(--oc-card-shadow);
    padding: clamp(20px, 3vw, 36px);
  }

  /* Heading (collection title) — bold OC style. */
  .oc-product-list .section-resource-list__header :is(h1, h2, h3, h4, h5) {
    color: var(--color-foreground);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  /* "View all" button — OC accent for all three style variants. */
  .oc-product-list .section-resource-list__header a.link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--oc-accent);
    font-weight: 600;
    text-decoration: none;
  }
  .oc-product-list .section-resource-list__header a.link::after {
    content: "→";
    transition: transform 150ms ease;
  }
  .oc-product-list .section-resource-list__header a.link:hover {
    color: var(--oc-accent);
    text-decoration: underline;
  }
  .oc-product-list .section-resource-list__header a.link:hover::after {
    transform: translateX(3px);
  }
  .oc-product-list .section-resource-list__header a.button {
    background: var(--oc-accent);
    border-color: var(--oc-accent);
    color: var(--oc-accent-fg);
  }
  .oc-product-list .section-resource-list__header a.button-secondary {
    color: var(--oc-accent);
    border-color: var(--oc-accent);
  }

  @media (max-width: 749px) {
    /* Drop the section panel border on mobile to save space... */
    .oc-product-list__panel--bordered {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    /* ...and instead frame the "View all" link itself as an OC outlined pill. */
    .oc-product-list .section-resource-list__header a.link {
      padding: 8px 16px;
      border: 1px solid var(--oc-accent);
      border-radius: 999px;
    }
  }
/* END_SECTION:product-list */

/* START_SECTION:product-reviews (INDEX:52) */
.oc-reviews {
    padding-block: var(--oc-rev-pad-y, 40px);
    color: var(--color-foreground);
  }

  .oc-reviews__inner {
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    padding: 28px;
  }

  .oc-reviews__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .oc-reviews__grid:not(:has(.oc-reviews__col--highlights:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }
  .oc-reviews__grid:not(:has(.oc-reviews__col--helpful:not([hidden]))):not(:has(.oc-reviews__col--highlights:not([hidden]))) {
    grid-template-columns: 1fr;
  }

  .oc-reviews__col { min-width: 0; }
  .oc-reviews__col[hidden] { display: none !important; }
  .oc-reviews__col + .oc-reviews__col:not([hidden]) {
    border-left: 1px solid var(--oc-card-border);
    padding-left: 28px;
  }

  .oc-reviews__heading {
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--oc-card-border);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-foreground);
  }
  .oc-reviews__subheading {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-foreground);
  }

  .oc-reviews__score-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 4px;
  }
  .oc-reviews__score {
    font-weight: 700;
    font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
    line-height: 1;
    color: var(--color-foreground);
    font-variant-numeric: tabular-nums;
  }
  .oc-reviews__stars {
    display: inline-flex;
    gap: 2px;
  }
  .oc-reviews__star { flex: 0 0 auto; }

  .oc-reviews__count {
    margin: 0 0 16px;
    font-size: 0.875rem;
    color: var(--oc-muted-fg);
  }

  .oc-reviews__histogram {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .oc-reviews__hist-row {
    display: grid;
    grid-template-columns: 28px 1fr 38px 28px;
    gap: 10px;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--oc-muted-fg);
  }
  .oc-reviews__hist-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--color-foreground);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .oc-reviews__hist-bar {
    height: 8px;
    background: rgb(var(--color-foreground-rgb) / 0.08);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .oc-reviews__hist-fill {
    display: block;
    height: 100%;
    background: var(--oc-accent);
    border-radius: 999px;
    transition: width 0.4s ease;
  }
  .oc-reviews__hist-pct {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--color-foreground);
    font-weight: 500;
  }
  .oc-reviews__hist-count {
    font-variant-numeric: tabular-nums;
    color: var(--oc-muted-fg);
    text-align: right;
  }

  .oc-reviews__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .oc-reviews__cta {
    background: var(--oc-accent);
    color: var(--oc-accent-fg, #fff);
    border: 0;
    border-radius: var(--button-border-radius-primary, 14px);
    padding: 12px 24px;
    font: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: filter 0.15s ease;
  }
  .oc-reviews__cta:hover { filter: brightness(0.92); }
  .oc-reviews__view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--oc-card-border);
    border-radius: var(--button-border-radius-primary, 14px);
    color: var(--color-foreground);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .oc-reviews__view-all:hover {
    background-color: rgb(var(--color-foreground-rgb) / 0.04);
    border-color: rgb(var(--color-foreground-rgb) / 0.35);
    color: var(--color-foreground);
  }

  /* ===== Empty state (no reviews yet) =====
     Centered composition in the oc-pdp card language — soft-accent icon badge, prompt, muted subtext,
     accent CTA. Capped width + auto margins so it reads as intentional instead of stranded in a wide,
     empty card. */
  .oc-reviews__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    max-width: 420px;
    margin: 8px auto 0;
    padding: 20px 0 10px;
  }
  .oc-reviews__empty-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--oc-accent-soft-bg, rgb(var(--color-foreground-rgb) / 0.06));
    color: var(--oc-accent);
    margin-bottom: 6px;
  }
  .oc-reviews__empty-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-foreground);
  }
  .oc-reviews__empty-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--oc-muted-fg);
  }
  .oc-reviews__empty .oc-reviews__cta {
    margin-top: 14px;
  }

  .oc-reviews__card { display: flex; flex-direction: column; gap: 8px; }
  .oc-reviews__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }
  .oc-reviews__author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .oc-reviews__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--oc-accent-soft-bg, rgb(var(--color-foreground-rgb) / 0.08));
    color: var(--oc-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
  }
  .oc-reviews__author-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
  }
  .oc-reviews__author-name {
    font-weight: 600;
    color: var(--color-foreground);
    font-size: 0.9375rem;
  }
  .oc-reviews__verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--oc-success);
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 2px;
  }
  .oc-reviews__date {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    color: var(--oc-muted-fg);
    white-space: nowrap;
  }
  .oc-reviews__stars--sm { margin-top: 2px; }
  .oc-reviews__card-title {
    margin: 8px 0 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-foreground);
  }
  .oc-reviews__card-body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--oc-muted-fg);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .oc-reviews__photos {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .oc-reviews__photo {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
  }
  .oc-reviews__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Skeleton shown while JS fetches the most-helpful review. */
  .oc-reviews__skeleton {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
  }
  .oc-reviews__skeleton-line {
    background: linear-gradient(
      90deg,
      rgb(var(--color-foreground-rgb) / 0.06) 0%,
      rgb(var(--color-foreground-rgb) / 0.12) 50%,
      rgb(var(--color-foreground-rgb) / 0.06) 100%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    animation: oc-reviews-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes oc-reviews-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }

  /* App-block slot. By default rendered off-screen with real dimensions so
     Judge.me's script initialises the widget (we scrape its data) but the
     user only sees our 3-column UI above. When `show_source` is on, the slot
     renders inline below the 3-column UI as a full Judge.me widget. */
  .oc-reviews__jdgm-source[data-show-source="false"] {
    position: absolute;
    left: -10000px;
    top: 0;
    width: 800px;
    height: auto;
    overflow: hidden;
    pointer-events: none;
  }
  .oc-reviews__jdgm-source[data-show-source="true"] {
    margin-top: 24px;
    padding: 24px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    color: var(--color-foreground);
  }

  /* ===== Judge.me form (Write a review) — overrides to match oc-pdp ===== */
  /* Framed-card chrome is skipped when the form is moved into the modal —
     the modal supplies its own frame. */
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form-wrapper:not(.oc-reviews__jdgm-form--in-modal),
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form:not(.oc-reviews__jdgm-form--in-modal) {
    background: var(--color-background) !important;
    border: 1px solid var(--oc-card-border) !important;
    border-radius: var(--oc-card-radius, 14px) !important;
    padding: 24px !important;
    margin-top: 16px !important;
    box-shadow: none !important;
  }
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form-wrapper,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form {
    font-family: inherit !important;
    color: var(--color-foreground) !important;
  }
  /* Judge.me's base CSS draws a red border-top on .jdgm-form-wrapper —
     kill it inside the modal so the popup stays clean. */
  .oc-reviews__modal-body .oc-reviews__jdgm-form--in-modal,
  .oc-reviews__modal-body .jdgm-form-wrapper.oc-reviews__jdgm-form--in-modal,
  .oc-reviews__modal-body .jdgm-question-form-wrapper,
  .oc-reviews__modal-body .jdgm-form-wrapper {
    border: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    background: transparent !important;
  }

  /* Inherit theme font everywhere inside the form EXCEPT on .jdgm-star —
     Judge.me draws rating stars with a custom icon font (::before content),
     overriding font-family makes the glyphs disappear. */
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form *:not(.jdgm-star),
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form-wrapper *:not(.jdgm-star) {
    font-family: inherit !important;
  }

  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form label,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form__field-label,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form-section-header {
    color: var(--color-foreground) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    margin-bottom: 6px !important;
  }

  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form input[type="text"],
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form input[type="email"],
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form input[type="url"],
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form input[type="file"],
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form textarea {
    background: var(--color-input-background, transparent) !important;
    color: var(--color-input-text-color, var(--color-foreground)) !important;
    border: var(--input-border-width, 1px) solid var(--color-input-border-color, var(--oc-card-border)) !important;
    border-radius: var(--inputs-border-radius, 4px) !important;
    padding: 10px 12px !important;
    font-size: 0.9375rem !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form input:focus,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form textarea:focus {
    border-color: var(--oc-accent) !important;
  }
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form textarea {
    min-height: 120px !important;
    resize: vertical !important;
  }

  /* Star rating selector inside the form */
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form__rating,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form-rating {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
  }
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form .jdgm-star {
    color: var(--oc-accent) !important;
    font-size: 1.5rem !important;
  }
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form .jdgm-star.jdgm--off {
    color: rgb(var(--color-foreground-rgb) / 0.18) !important;
  }

  /* Photo upload area */
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form__pictures-container,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form__pictures-upload,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form-picture-uploader {
    border: 1px dashed var(--oc-card-border) !important;
    border-radius: var(--inputs-border-radius, 4px) !important;
    padding: 14px !important;
    background: transparent !important;
    color: var(--oc-muted-fg) !important;
  }
  /* Strip the inner box-wrapper border (#e4e4e4) — Judge.me draws a second
     border inside the picture fieldset that clashes with our chrome. */
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-picture-fieldset__box-wrapper {
    border: 0 !important;
  }
  /* Judge.me anchors a white-pill delete button in the top-right of every
     picture preview box (even empty ones) — it floats in the popup corner.
     Hide it; our custom × on the file input clears uploads. */
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-picture-fieldset__delete {
    display: none !important;
  }

  /* Submit button — same style as our .oc-reviews__cta */
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form__submit-btn,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form-submit-btn,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-submit-rev,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-write-rev-link {
    background: var(--oc-accent) !important;
    color: var(--oc-accent-fg, #fff) !important;
    border: 0 !important;
    border-radius: var(--button-border-radius-primary, 14px) !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: inline-block !important;
    width: auto !important;
    transition: filter 0.15s ease !important;
  }
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form__submit-btn:hover,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form-submit-btn:hover,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-submit-rev:hover,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-write-rev-link:hover {
    filter: brightness(0.92) !important;
  }

  /* Cancel link / button */
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form__cancel-btn,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-cancel-btn {
    background: transparent !important;
    color: var(--color-foreground) !important;
    border: 1px solid var(--oc-card-border) !important;
    border-radius: var(--button-border-radius-primary, 14px) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
    text-transform: none !important;
    cursor: pointer !important;
    margin-left: 8px !important;
  }

  /* Recaptcha wrap — give it some breathing room */
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form .grecaptcha-badge,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form .g-recaptcha {
    margin-top: 12px !important;
  }

  /* Hide Judge.me branding inside our revealed widget */
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-branding-self,
  :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-rev-widg__powered {
    display: none !important;
  }

  /* ===== Write-a-review modal ===== */
  .oc-reviews__modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .oc-reviews__modal[hidden] { display: none; }
  .oc-reviews__modal.is-open {
    opacity: 1;
    visibility: visible;
  }
  .oc-reviews__modal-overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.55);
    cursor: pointer;
  }
  .oc-reviews__modal-dialog {
    position: relative;
    background: var(--color-background, #fff);
    color: var(--color-foreground);
    border-radius: var(--oc-card-radius, 14px);
    border: 1px solid var(--oc-card-border);
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.25);
    transform: translateY(8px);
    transition: transform 0.2s ease;
  }
  /* Reviews list needs more horizontal room for filters, sort, and review
     cards than the write-a-review form does. */
  .oc-reviews__modal[data-mode="all"] .oc-reviews__modal-dialog {
    max-width: 900px;
  }
  /* In "All reviews" mode the source widget brings its inline write-review
     form along (Judge.me toggles it open via internal state). Hide the
     form — the Write a review link stays visible (so empty-state users
     have something to click) and JS intercepts its click to switch the
     modal into 'write' mode. */
  .oc-reviews__modal[data-mode="all"] .jdgm-form-wrapper,
  .oc-reviews__modal[data-mode="all"] .jdgm-form {
    display: none !important;
  }
  .oc-reviews__modal.is-open .oc-reviews__modal-dialog {
    transform: translateY(0);
  }
  .oc-reviews__modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--oc-card-border);
    flex: 0 0 auto;
  }
  .oc-reviews__modal-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-foreground);
  }
  .oc-reviews__modal-close-btn {
    background: transparent;
    border: 0;
    padding: 6px;
    margin: -6px;
    color: var(--color-foreground);
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
  }
  .oc-reviews__modal-close-btn:hover {
    background: rgb(var(--color-foreground-rgb) / 0.08);
  }
  .oc-reviews__modal-body {
    padding: 20px 22px 22px;
    overflow-y: auto;
    flex: 1 1 auto;
  }
  /* When the Judge.me source widget is mounted inside the modal (All
     reviews mode), strip its off-screen positioning AND its own framed-card
     chrome — the modal already provides the frame. The widget keeps its
     own internal styling for filters, sort, review cards, pagination. */
  .oc-reviews__jdgm-source--in-modal,
  .oc-reviews__jdgm-source[data-show-source="true"].oc-reviews__jdgm-source--in-modal,
  .oc-reviews__jdgm-source[data-show-source="false"].oc-reviews__jdgm-source--in-modal {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .oc-reviews__modal-loading,
  .oc-reviews__modal-error {
    padding: 24px 4px;
    color: var(--oc-muted-fg);
    text-align: center;
    font-size: 0.9375rem;
  }
  .oc-reviews__modal-error { color: var(--color-foreground); }

  html.oc-reviews-modal-open,
  html.oc-reviews-modal-open body {
    overflow: hidden;
  }

  /* ===== Inside the modal: action-button + file-input polish ===== */
  /* Submit becomes the only call-to-action — full-width, comfortable tap target. */
  .oc-reviews__modal-body .jdgm-submit-rev,
  .oc-reviews__modal-body .jdgm-form-submit-btn,
  .oc-reviews__modal-body .jdgm-form__submit-btn {
    width: 100% !important;
    margin-top: 8px !important;
    padding-block: 14px !important;
  }

  /* Custom file-input UI: hides the native browser button (which renders in
     the browser's UI language, e.g. "Выбрать файл") and provides our own
     consistently-English button + filename label. */
  .oc-reviews__file-input {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .oc-reviews__file-input input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    pointer-events: none !important;
  }
  .oc-reviews__file-btn {
    background: transparent;
    color: var(--color-foreground);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--inputs-border-radius, 6px);
    padding: 10px 16px;
    font: inherit;
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .oc-reviews__file-btn:hover {
    background: rgb(var(--color-foreground-rgb) / 0.05);
    border-color: var(--oc-accent);
  }
  .oc-reviews__file-label {
    font-size: 0.875rem;
    color: var(--oc-muted-fg);
    word-break: break-all;
    min-width: 0;
    flex: 1 1 auto;
  }
  .oc-reviews__file-remove {
    background: transparent;
    border: 0;
    padding: 4px;
    margin: 0;
    color: var(--oc-muted-fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex: 0 0 auto;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .oc-reviews__file-remove:hover {
    background: rgb(var(--color-foreground-rgb) / 0.08);
    color: var(--color-foreground);
  }

  /* Judge.me's own preview thumbnails default to no size limit and can
     blow up to full modal width. Constrain them to a sensible thumb size. */
  .oc-reviews__modal-body .jdgm-form img,
  .oc-reviews__modal-body .jdgm-form-wrapper img {
    max-width: 96px !important;
    max-height: 96px !important;
    width: auto !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 8px;
    display: inline-block;
    margin: 8px 8px 0 0;
  }

  /* Mobile polish: tighter chrome, comfortable spacing. */
  @media (max-width: 749px) {
    .oc-reviews__modal-head {
      padding: 14px 16px;
    }
    .oc-reviews__modal-body {
      padding: 16px;
    }
    .oc-reviews__modal-title {
      font-size: 1rem;
    }
    :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form input[type="text"],
    :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form input[type="email"],
    :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form input[type="url"],
    :is(.oc-reviews, .oc-reviews__modal-body) .jdgm-form textarea {
      font-size: 16px !important; /* prevent iOS Safari zoom on focus */
    }
    .oc-reviews__file-input { gap: 8px; }
    .oc-reviews__file-btn { padding: 10px 14px; font-size: 0.875rem; }
  }

  @media (max-width: 749px) {
    .oc-reviews__modal { padding: 0; align-items: stretch; }
    .oc-reviews__modal-dialog {
      max-width: 100%;
      max-height: 100vh;
      border-radius: 0;
      border: 0;
    }
  }

  .oc-reviews__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .oc-reviews__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    border: 1px solid var(--oc-card-border);
    border-radius: 999px;
    font-size: 0.875rem;
  }
  .oc-reviews__chip-label { color: var(--color-foreground); }
  .oc-reviews__chip-count {
    color: var(--oc-muted-fg);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  @media (max-width: 999px) {
    .oc-reviews__inner { padding: 20px; }
    .oc-reviews__grid,
    .oc-reviews__grid:not(:has(.oc-reviews__col--highlights:not([hidden]))) {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .oc-reviews__col + .oc-reviews__col:not([hidden]) {
      border-left: 0;
      border-top: 1px solid var(--oc-card-border);
      padding-left: 0;
      padding-top: 20px;
    }
  }

  @media (max-width: 749px) {
    .oc-reviews__hist-row {
      grid-template-columns: 24px 1fr 34px 26px;
      gap: 8px;
      font-size: 0.75rem;
    }
    .oc-reviews__actions {
      flex-direction: column;
      align-items: stretch;
    }
    .oc-reviews__cta { width: 100%; }
    .oc-reviews__view-all { justify-content: center; }
  }
/* END_SECTION:product-reviews */

/* START_SECTION:product-write-review (INDEX:53) */
.oc-reviews-section {
    padding-block: var(--oc-rev-pad-y, 40px);
  }

  .oc-reviews__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
  }

  .oc-reviews__heading {
    margin: 0;
    color: var(--color-foreground-heading);
  }

  .oc-reviews__summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .oc-reviews__score {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-foreground-heading);
  }

  .oc-reviews__stars {
    display: inline-flex;
    gap: 2px;
  }

  .oc-reviews__count {
    color: var(--color-foreground);
    opacity: 0.75;
    font-size: 0.875rem;
  }

  /* ===== Judge.me widget overrides ===== */
  .oc-reviews__widget.jdgm-widget {
    font-family: inherit !important;
    color: var(--color-foreground) !important;
  }

  .oc-reviews__widget .jdgm-rev-widg__title,
  .oc-reviews__widget .jdgm-histogram__bar-content,
  .oc-reviews__widget .jdgm-rev__author,
  .oc-reviews__widget .jdgm-rev__title {
    font-family: inherit !important;
    color: var(--color-foreground-heading) !important;
  }

  /* Stars */
  .oc-reviews__widget .jdgm-star {
    color: var(--oc-rev-star) !important;
  }
  .oc-reviews__widget .jdgm-star.jdgm--off {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-20)) !important;
  }

  /* "Write a review" button */
  .oc-reviews__widget .jdgm-write-rev-link,
  .oc-reviews__widget .jdgm-write-rev-link:hover {
    background: var(--color-primary-button-background) !important;
    color: var(--color-primary-button-text) !important;
    border: var(--primary-button-border-width, 0) solid var(--color-primary-button-border) !important;
    border-radius: var(--button-border-radius-primary, 14px) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    transition: background-color 0.2s ease;
  }
  .oc-reviews__widget .jdgm-write-rev-link:hover {
    background: var(--color-primary-button-hover-background) !important;
  }

  /* Form */
  .oc-reviews__widget .jdgm-form {
    background: var(--color-background) !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20)) !important;
    border-radius: var(--oc-rev-radius, 14px) !important;
    padding: 24px !important;
    margin-top: 16px !important;
  }

  .oc-reviews__widget .jdgm-form input[type="text"],
  .oc-reviews__widget .jdgm-form input[type="email"],
  .oc-reviews__widget .jdgm-form textarea {
    background: var(--color-input-background) !important;
    color: var(--color-input-text-color) !important;
    border: var(--input-border-width, 1px) solid var(--color-input-border-color) !important;
    border-radius: var(--inputs-border-radius, 4px) !important;
    padding: 10px 12px !important;
    font-family: inherit !important;
    box-shadow: none !important;
  }

  .oc-reviews__widget .jdgm-form__title-input,
  .oc-reviews__widget .jdgm-form__body-input {
    width: 100% !important;
  }

  .oc-reviews__widget .jdgm-form__submit-btn,
  .oc-reviews__widget .jdgm-form__submit-btn:hover {
    background: var(--color-primary-button-background) !important;
    color: var(--color-primary-button-text) !important;
    border: var(--primary-button-border-width, 0) solid var(--color-primary-button-border) !important;
    border-radius: var(--button-border-radius-primary, 14px) !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .oc-reviews__widget .jdgm-form__submit-btn:hover {
    background: var(--color-primary-button-hover-background) !important;
  }

  /* Histogram (rating distribution bars) */
  .oc-reviews__widget .jdgm-histogram {
    margin-block: 24px !important;
  }
  .oc-reviews__widget .jdgm-histogram__bar {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-20)) !important;
    border-radius: 999px !important;
    overflow: hidden;
  }
  .oc-reviews__widget .jdgm-histogram__bar-content {
    background: var(--oc-rev-star) !important;
    border-radius: 999px !important;
  }

  /* Review cards */
  .oc-reviews__widget .jdgm-rev {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20)) !important;
    border-radius: var(--oc-rev-radius, 14px) !important;
    padding: 20px !important;
    margin-bottom: var(--oc-rev-gap, 16px) !important;
    background: var(--color-background) !important;
  }

  .oc-reviews__widget .jdgm-rev__author {
    font-weight: 600 !important;
  }

  .oc-reviews__widget .jdgm-rev__buyer-badge,
  .oc-reviews__widget .jdgm-rev__source {
    background: rgb(var(--color-foreground-rgb) / 0.06) !important;
    color: var(--color-foreground) !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    font-size: 0.75rem !important;
  }

  .oc-reviews__widget .jdgm-rev__title {
    font-weight: 600 !important;
    margin-block: 8px 4px !important;
  }

  .oc-reviews__widget .jdgm-rev__body {
    color: var(--color-foreground) !important;
    line-height: 1.6 !important;
  }

  /* Filters / sort */
  .oc-reviews__widget .jdgm-rev-widg__sort-dropdown,
  .oc-reviews__widget .jdgm-rev-widg__filter-btn,
  .oc-reviews__widget .jdgm-rev-widg__filter-btn:hover {
    background: transparent !important;
    color: var(--color-foreground) !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20)) !important;
    border-radius: var(--inputs-border-radius, 4px) !important;
    padding: 8px 14px !important;
    font-family: inherit !important;
  }

  /* Pagination */
  .oc-reviews__widget .jdgm-paginate {
    margin-top: 24px !important;
    text-align: center;
  }
  .oc-reviews__widget .jdgm-paginate__page {
    color: var(--color-primary) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--inputs-border-radius, 4px) !important;
    padding: 6px 12px !important;
    margin: 0 2px;
    cursor: pointer;
  }
  .oc-reviews__widget .jdgm-paginate__page.jdgm-curr {
    background: var(--color-primary) !important;
    color: var(--color-primary-button-text, #fff) !important;
  }

  /* Hide Judge.me branding logo if desired (optional - see schema) */
  .oc-reviews-section.oc-reviews--hide-branding .jdgm-rev-widg__powered,
  .oc-reviews-section.oc-reviews--hide-branding .jdgm-branding-self {
    display: none !important;
  }

  @media (max-width: 749px) {
    .oc-reviews__header {
      flex-direction: column;
      align-items: flex-start;
    }
    .oc-reviews__widget .jdgm-form {
      padding: 16px !important;
    }
    .oc-reviews__widget .jdgm-rev {
      padding: 14px !important;
    }
  }
/* END_SECTION:product-write-review */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:slideshow (INDEX:61) */
.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:video (INDEX:62) */
.video-section {
    width: 100%;
  }

  .video-section__inner {
    position: relative;
    width: 100%;
    max-width: var(--video-max-width);
    margin-inline: auto;
    aspect-ratio: var(--video-aspect-ratio);
    overflow: hidden;
    border-radius: var(--video-border-radius);
    background-color: rgb(0 0 0 / 5%);
  }

  .video-section__media,
  .video-section__media video,
  .video-section__placeholder svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
/* END_SECTION:video */

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

/* START_BLOCK:_announcement (INDEX:64) */
.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:65) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

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

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
  }

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

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

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

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

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

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

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

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

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:69) */
.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:70) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:71) */
.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:72) */
.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:73) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:74) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(> #header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:75) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

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

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

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_classic-slide (INDEX:76) */
.classic-slide {
    position: relative;
    color: var(--classic-slide-text, #fff);
    overflow: hidden;
    width: 100%;
    display: block;
  }

  .classic-slide__link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }

  /* Default media wrapper. The mode-specific rules below
     decide whether it stays in-flow (preserve_ratio) or stretches
     absolutely to fill a fixed-height slide. */
  .classic-slide__media {
    position: relative;
    width: 100%;
    line-height: 0;
    z-index: 0;
  }

  .classic-slide__media picture,
  .classic-slide__media picture > img {
    display: block;
    width: 100%;
  }

  /* preserve_ratio: image is in flow, gives the slide its height.
     Works regardless of whether title/text/button are present. */
  .classic-slide--preserve-ratio .classic-slide__media {
    display: block;
  }

  .classic-slide--preserve-ratio .classic-slide__image {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Fixed-size modes: slideshow-slides gives min-height (small=17.5rem mobile/26.25rem desktop,
     medium=21.25/35rem, large=25/45rem). Image fills the slide. */
  .classic-slide--small,
  .classic-slide--medium,
  .classic-slide--large {
    height: 100%;
  }

  .classic-slide--small .classic-slide__media,
  .classic-slide--medium .classic-slide__media,
  .classic-slide--large .classic-slide__media {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .classic-slide--small .classic-slide__media picture,
  .classic-slide--medium .classic-slide__media picture,
  .classic-slide--large .classic-slide__media picture {
    height: 100%;
  }

  .classic-slide--small .classic-slide__image,
  .classic-slide--medium .classic-slide__image,
  .classic-slide--large .classic-slide__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }

  .classic-slide__image--placeholder {
    background: var(--color-background, #f0f0f0);
  }

  /* Placeholder (no image) needs a baseline height for preserve_ratio,
     because there's no intrinsic image to drive it. */
  .classic-slide--preserve-ratio .classic-slide__image--placeholder {
    aspect-ratio: 3 / 1;
    height: auto;
    width: 100%;
  }

  /* Content overlay — always absolute so it doesn't push slide height. */
  .classic-slide__content-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    width: 100%;
    height: 100%;
    padding: var(--padding-lg, 24px);
    box-sizing: border-box;
    pointer-events: none;
  }

  .classic-slide__content {
    max-width: 60ch;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm, 12px);
  }

  /* 9-position grid placement (desktop) */
  .classic-slide__content-wrapper--top-left    { place-items: start start; }
  .classic-slide__content-wrapper--top-center  { place-items: start center; text-align: center; }
  .classic-slide__content-wrapper--top-right   { place-items: start end; text-align: right; }
  .classic-slide__content-wrapper--middle-left { place-items: center start; }
  .classic-slide__content-wrapper--middle-center { place-items: center; text-align: center; }
  .classic-slide__content-wrapper--middle-right { place-items: center end; text-align: right; }
  .classic-slide__content-wrapper--bottom-left { place-items: end start; }
  .classic-slide__content-wrapper--bottom-center { place-items: end center; text-align: center; }
  .classic-slide__content-wrapper--bottom-right { place-items: end end; text-align: right; }

  /* Mobile: always center, top-aligned for readability over mobile image */
  @media screen and (max-width: 749px) {
    .classic-slide__content-wrapper {
      place-items: center !important;
      text-align: center !important;
    }
  }

  .classic-slide__title {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    color: inherit;
  }

  .classic-slide__text {
    margin: 0;
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    line-height: 1.5;
    color: inherit;
  }

  .classic-slide__button {
    display: inline-block;
    align-self: flex-start;
    padding: 0.85rem 1.6rem;
    background: var(--classic-slide-btn-bg, #fff);
    color: var(--classic-slide-btn-fg, #000);
    border-radius: var(--style-border-radius-button, 4px);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
    margin-top: 0.5rem;
    pointer-events: auto;
  }

  .classic-slide__button:hover { opacity: 0.85; }

  .classic-slide__content-wrapper--top-center .classic-slide__button,
  .classic-slide__content-wrapper--middle-center .classic-slide__button,
  .classic-slide__content-wrapper--bottom-center .classic-slide__button {
    align-self: center;
  }

  .classic-slide__content-wrapper--top-right .classic-slide__button,
  .classic-slide__content-wrapper--middle-right .classic-slide__button,
  .classic-slide__content-wrapper--bottom-right .classic-slide__button {
    align-self: flex-end;
  }

  @media screen and (max-width: 749px) {
    .classic-slide__content-wrapper .classic-slide__button {
      align-self: center;
    }
  }
/* END_BLOCK:_classic-slide */

/* START_BLOCK:_collection-image (INDEX:79) */
.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:81) */
.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:85) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

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

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:86) */
.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:88) */
.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:91) */
.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:92) */
.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:93) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

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

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

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

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

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

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

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:94) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

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

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

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

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

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

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

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

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

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

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

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

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

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

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

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

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

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

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

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

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

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

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

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

    background-color: transparent;
  }

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

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

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

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

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

    visibility: visible;
  }

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

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

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

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

    display: contents;
    white-space: normal;

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

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

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

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

  .header-menu {
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    width: 200px;
  }

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

  /* Outline around each second-level entry in the mega menu (both groups with children
     and standalone parent links). Uses the OC PDP card design tokens for visual consistency.
     Excludes image-based entries (collection_images mode) so card images aren't framed. */
  .mega-menu__column > div:not(:has(.mega-menu__link-image)) {
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    padding: 14px 18px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }

  /* Standalone parent links (no <ul> children) need more vertical breathing room
     so they don't look cramped next to taller grouped cards. */
  .mega-menu__column > div:not(:has(ul)):not(:has(.mega-menu__link-image)) {
    padding-block: 20px;
  }

  .mega-menu__column > div:not(:has(.mega-menu__link-image)):hover {
    border-color: var(--oc-accent);
  }

  /* Red accent on hover for every link inside the mega menu — both parent (section
     headings) and child links. Higher contrast than the default muted gray. */
  .mega-menu__link:hover,
  .mega-menu__link--parent:hover {
    color: var(--oc-accent);
  }

  /* Vertical gap between stacked cards within a single mega menu column so their
     borders don't touch. */
  .mega-menu__column > div + div {
    margin-top: var(--padding-sm);
  }

  /* Extra breathing room between the header row and the first row of mega menu cards. */
  .menu-list__submenu .mega-menu__grid {
    margin-top: var(--padding-xl);
  }

  /* Let the grid backfill empty slots in earlier rows with smaller cards that
     come later in the source order. Reduces (but does not eliminate) the dead
     space caused by tall cards forcing a uniform row height. */
  .mega-menu__grid,
  .mega-menu__list {
    grid-auto-flow: dense;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:97) */
.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:101) */
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:106) */
/* 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:_product-media-gallery (INDEX:110) */
/* The wrapper is always sticky so the gallery follows the viewport until
     the end of the product-information row, regardless of whether there are
     extra blocks placed under the gallery. */
  .product-media-gallery__sticky-wrapper {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    gap: var(--gap, 0);
  }

  /* If the header is sticky, push the gallery down so it doesn't slide under it. */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-media-gallery__sticky-wrapper {
    --sticky-header-offset: var(--header-height);
  }

  /* Disable the inner sticky on the gallery so the wrapper controls stickiness. */
  .product-media-gallery__sticky-wrapper media-gallery.sticky-content {
    position: static;
    top: auto;
  }

  .product-media-gallery__below {
    display: flex;
    flex-direction: column;
    gap: var(--gap, 0);
  }

  /* Force IMAGE media items into a 1:1 square. Video/3D items keep their
     natural aspect ratio so they don't get cropped or letterboxed. */
  .product-media-gallery__sticky-wrapper media-gallery {
    --gallery-aspect-ratio: 1;
  }

  .product-media-gallery__sticky-wrapper .product-media-container--image {
    --media-preview-ratio: 1;
    aspect-ratio: 1 / 1;
  }

  .product-media-gallery__sticky-wrapper .product-media-container--image .product-media {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
  }

  .product-media-gallery__sticky-wrapper
    .product-media-container--image
    .product-media :is(img, .deferred-media__poster-image) {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }

  /* Video and 3D-model items: container takes the media's natural aspect ratio
     (16:9 etc.) so the video is not letterboxed or cropped inside a forced 1:1 box. */
  .product-media-gallery__sticky-wrapper
    :is(
      .product-media-container--video,
      .product-media-container--external_video,
      .product-media-container--model
    ) {
    aspect-ratio: auto;
  }

  .product-media-gallery__sticky-wrapper
    :is(
      .product-media-container--video,
      .product-media-container--external_video,
      .product-media-container--model
    )
    .product-media {
    aspect-ratio: var(--ratio);
    height: auto;
    width: 100%;
  }

  .product-media-gallery__sticky-wrapper
    :is(.product-media-container--video, .product-media-container--external_video)
    .product-media :is(video, iframe, .deferred-media__poster-image) {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_product-media-gallery */

/* START_BLOCK:_search-input (INDEX:111) */
.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:112) */
.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:113) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accordion (INDEX:115) */
.accordion {
    flex: 1;
    width: 100%;
  }

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

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

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

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

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

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

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:comparison-slider (INDEX:121) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:122) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:123) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:dimensions-image (INDEX:125) */
.oc-dimensions {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .oc-dimensions img {
    max-width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
    padding: 12px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    box-shadow: var(--oc-card-shadow);
  }
  .oc-dimensions__caption {
    font-size: 0.8125rem;
    color: var(--oc-muted-fg);
    text-align: center;
  }
/* END_BLOCK:dimensions-image */

/* START_BLOCK:email-signup (INDEX:126) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:feature-checklist (INDEX:127) */
.oc-feature-checklist { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .oc-feature-checklist__heading {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--color-foreground);
  }
  .oc-feature-checklist__intro,
  .oc-feature-checklist__body {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-foreground);
    margin: 0;
  }
  .oc-feature-checklist__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .oc-feature-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
    color: var(--color-foreground);
  }
  .oc-feature-checklist__check { display: inline-flex; flex: 0 0 auto; margin-top: 2px; }
/* END_BLOCK:feature-checklist */

/* START_BLOCK:filters (INDEX:129) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

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

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

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

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

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

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

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

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

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

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

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

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

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

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

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

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

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

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

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

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

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

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

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

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

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

/* START_BLOCK:image (INDEX:135) */
.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:137) */
.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:138) */
.menu {
    width: 100%;
  }

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

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

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

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

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

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

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

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

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

/* START_BLOCK:page (INDEX:140) */
.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:panel-row (INDEX:141) */
.panel-row {
    display: flex;
    flex-direction: row;
    align-items: var(--panel-align-v, stretch);
    gap: var(--panel-gap, 16px);
    padding: var(--panel-pad-y, 16px) var(--panel-pad-x, 20px);
    background: var(--panel-bg, transparent);
    border-radius: var(--panel-radius, 16px);
    border: var(--panel-border, 0 solid transparent);
    min-height: var(--panel-min-h, 0);
    width: 100%;
    box-sizing: border-box;
  }

  .panel-row__slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 0 1 auto;
  }

  .panel-row__slot--left {
    align-items: flex-start;
    margin-inline-end: auto;
  }

  .panel-row__slot--center {
    align-items: center;
    text-align: center;
  }

  .panel-row__slot--right {
    align-items: flex-end;
    margin-inline-start: auto;
    text-align: end;
  }

  .panel-row--equal .panel-row__slot {
    flex: 1 1 0;
    margin: 0;
  }

  .panel-row--equal .panel-row__slot--left { align-items: flex-start; }
  .panel-row--equal .panel-row__slot--center { align-items: center; }
  .panel-row--equal .panel-row__slot--right { align-items: flex-end; }

  .panel-row__slot > .group-block {
    width: 100%;
  }

  @media (max-width: 749px) {
    .panel-row--stack-mobile {
      flex-direction: column;
      align-items: stretch;
    }
    .panel-row--stack-mobile .panel-row__slot {
      align-items: stretch;
      margin: 0;
      text-align: start;
    }
  }
/* END_BLOCK:panel-row */

/* START_BLOCK:payment-icons (INDEX:142) */
.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:payment-options-link (INDEX:143) */
.oc-payment-options {
    background: none;
    border: 0;
    padding: 4px 0;
    font: inherit;
    font-size: 0.875rem;
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .oc-payment-options:hover { color: var(--oc-accent); }
  .oc-payment-options:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
    border-radius: 4px;
  }
/* END_BLOCK:payment-options-link */

/* START_BLOCK:popup-link (INDEX:144) */
.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-availability (INDEX:146) */
.oc-availability {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .oc-availability__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-foreground);
  }
  .oc-availability__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
  }
  .oc-availability__item--in-stock .oc-availability__dot { background: var(--oc-success); }
  .oc-availability__item--out-stock .oc-availability__dot { background: var(--oc-muted-fg); }
  .oc-availability__item--ships-today { color: var(--color-foreground); }
  .oc-availability__check { color: var(--oc-success); display: inline-flex; }
/* END_BLOCK:product-availability */

/* START_BLOCK:product-badge (INDEX:147) */
.oc-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    border-radius: 999px;
    white-space: nowrap;
  }

  .oc-badge--filled-red { background: var(--oc-accent); color: var(--oc-accent-fg); }
  .oc-badge--outlined { background: transparent; color: var(--oc-accent); border: 1px solid var(--oc-accent); }
  .oc-badge--sale.oc-badge--filled-red { background: var(--oc-accent-soft-bg); color: var(--oc-accent); }

  .oc-badge--gallery_overlay {
    position: absolute;
    z-index: 2;
  }
  .oc-badge--gallery_overlay.oc-badge--top-left { top: 12px; left: 12px; }
  .oc-badge--gallery_overlay.oc-badge--top-right { top: 12px; right: 12px; }

  .oc-badge--inline_with_price {
    position: static;
    margin-inline-start: 8px;
  }
/* END_BLOCK:product-badge */

/* START_BLOCK:product-custom-property (INDEX:149) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:151) */
.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:152) */
.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:quantity (INDEX:154) */
.quantity-selector.quantity-selector--warehouse {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-input-border);
    border-radius: var(--style-border-radius-buttons-primary);
    overflow: hidden;
    height: 52px;
    flex: 0 0 auto;
    line-height: 1;
    background: transparent;
    transition: none;
  }

  .quantity-selector.quantity-selector--warehouse:hover {
    background: transparent;
  }

  .quantity-selector.quantity-selector--warehouse :is(.quantity-minus, .quantity-plus) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    min-height: 0;
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    color: var(--color-input-text);
    font-size: 18px;
    padding: 0;
    transition: background 0.15s;
  }

  .quantity-selector.quantity-selector--warehouse :is(.quantity-minus, .quantity-plus):hover {
    background: rgb(0 0 0 / 0.06);
  }

  .quantity-selector.quantity-selector--warehouse svg {
    width: 14px;
    height: 14px;
  }

  .quantity-selector.quantity-selector--warehouse input[type='number'] {
    width: 44px;
    max-width: 44px;
    height: 100%;
    text-align: center;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-input-text);
    background: transparent;
    appearance: textfield;
    -moz-appearance: textfield;
    padding: 0;
  }

  .quantity-selector.quantity-selector--warehouse input[type='number']::-webkit-inner-spin-button,
  .quantity-selector.quantity-selector--warehouse input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .quantity-selector.quantity-selector--warehouse :is(input[type='number'], .quantity-minus, .quantity-plus):is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }
/* END_BLOCK:quantity */

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

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

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

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:157) */
.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:social-proof (INDEX:158) */
.oc-social-proof {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--oc-muted-fg);
  }
  .oc-social-proof__icon {
    color: var(--oc-accent);
    display: inline-flex;
  }
  .oc-social-proof__text strong {
    color: var(--color-foreground);
    font-weight: 600;
    margin-inline-end: 4px;
  }
/* END_BLOCK:social-proof */

/* START_BLOCK:spacer (INDEX:159) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:160) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:trust-icons-row (INDEX:162) */
.oc-trust-row {
    display: grid;
    gap: 12px 16px;
    padding: 14px 16px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
  }
  .oc-trust-row--grid-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-trust-row--row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  .oc-trust-row__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .oc-trust-row__icon {
    flex: 0 0 auto;
    width: var(--oc-icon-size);
    height: var(--oc-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
  }
  .oc-trust-row__icon img { width: 100%; height: 100%; object-fit: contain; }
  .oc-trust-row__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .oc-trust-row__title { font-size: 0.875rem; font-weight: 600; color: var(--color-foreground); }
  .oc-trust-row__subtitle { font-size: 0.75rem; color: var(--oc-muted-fg); }

  @media (max-width: 749px) {
    .oc-trust-row--grid-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
/* END_BLOCK:trust-icons-row */

/* START_BLOCK:use-case-list (INDEX:163) */
.oc-use-case { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .oc-use-case__heading {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--color-foreground);
  }
  .oc-use-case__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .oc-use-case__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
  }
  /* Soft framed icon chip — mirrors the PDP delivery/trust icon idiom (muted glyph, card-border ring). */
  .oc-use-case__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--oc-muted-fg);
  }
  .oc-use-case__icon svg { width: 22px; height: 22px; }
  .oc-use-case__icon img { width: 22px; height: 22px; object-fit: contain; }
  .oc-use-case__text { display: flex; flex-direction: column; line-height: 1.3; }
  .oc-use-case__title { font-weight: 600; color: var(--color-foreground); }
  .oc-use-case__subtitle { font-size: 0.8125rem; color: var(--oc-muted-fg); }
  .oc-use-case__image { margin-top: 8px; border-radius: var(--oc-card-radius); overflow: hidden; }
  .oc-use-case__image img { width: 100%; height: auto; display: block; }
/* END_BLOCK:use-case-list */

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

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:166) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

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

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

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

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

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

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

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:background-media (INDEX:168) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:169) */
.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:170) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:172) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

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

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

    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .add-to-cart-button {
    /* The checkmark-burst (.add-to-cart__added) inside is position: absolute with top:50%/left:50%.
       Horizon's base.css doesn't set position on .button, so without this the burst centers on the
       nearest positioned ancestor (e.g. .oc-pdp__grid) and lands far away from the button. */
    position: relative;
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

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

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

  .product__pickup-availabilities {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

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

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

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

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

  .volume-pricing__table {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SNIPPET:card-gallery (INDEX:174) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

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

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * 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:175) */
.cart-bubble {
    --cart-padding: 0.2em;

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

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

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

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

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

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

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

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

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

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

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

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

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

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:177) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

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

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

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

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

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

  .cart-items__table * {
    margin: 0;
  }

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

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

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

    .cart-items__details {
      display: contents;
    }

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

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

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-items__property {
    display: block;
  }

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

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

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

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

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

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

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

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

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

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

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:178) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

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

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

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

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

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

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

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

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

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

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

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

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

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

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

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

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:180) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:182) */
.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:183) */
.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:184) */
.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:185) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:186) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

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

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:190) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:192) */
.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-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-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:193) */
.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:194) */
.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-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  header-actions {
    display: flex;

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

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

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

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

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

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

    position: relative;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* OC Compare — header icon + counter bubble. Geometry mirrors .header-actions__cart-icon
     so the icon visually aligns with the cart action next to it. */
  .header-actions__compare-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
  }
  .header-actions__compare-icon:hover { color: var(--color-foreground); opacity: 0.85; }

  /* On mobile, the header is a 5-column grid (leftA, leftB, center, rightA, rightB).
     header-actions sits at rightB along with account + cart, which crowds the right
     side. Pin the compare icon to the horizontal slot right after the search button
     (leftA = hamburger ≈44px, leftB = search ≈44px → start at 88px), so on mobile
     it visually lives in the left cluster while DOM-wise staying inside header-actions.
     Anchored to .header__columns which is the grid container row. */
  @media screen and (max-width: 749px) {
    .header__columns {
      position: relative;
    }
    .header-actions__compare-icon {
      position: absolute;
      top: 50%;
      left: calc(var(--header-mobile-bookend, 44px) * 2);
      transform: translateY(-50%);
      width: var(--header-mobile-bookend, 44px);
      height: var(--header-mobile-bookend, 44px);
      z-index: 3;
    }
    /* On mobile the "Compare" word label inside the icon link adds horizontal bulk;
       keep just the SVG to fit the 44px slot. */
    .header-actions__compare-icon > span:not(.svg-wrapper):not(.oc-compare-bubble) {
      display: none;
    }
    /* Bubble lives in the top-right of the 44px icon button — re-anchor so it sits
       cleanly over the SVG instead of where header-actions normally puts it. */
    .header-actions__compare-icon .oc-compare-bubble {
      top: 4px;
      right: 4px;
    }

    /* Compensate for the extra icon now sitting on the left (compare). Without this
       the logo is anchored to true viewport center, which makes the left gap (logo↔
       compare) noticeably tighter than the right gap (logo↔account). Shifting the
       logo right by half a bookend width equalises the two gaps. */
    .header-logo {
      transform: translateX(calc(var(--header-mobile-bookend, 44px) / 2));
    }
  }

  .oc-compare-bubble {
    position: absolute;
    top: 4.5px;
    right: 2.5px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
  }
  .oc-compare-bubble.hidden { display: none; }
  .oc-compare-bubble__bg {
    position: absolute;
    inset: 0;
    background: var(--color-primary-button-background);
    border-radius: 50%;
  }
  .oc-compare-bubble__count {
    position: relative;
    color: var(--color-primary-button-text);
    font-size: var(--font-size--3xs, 11px);
    font-weight: 700;
    z-index: 1;
  }
  .header-actions__compare-icon.is-pulsing .oc-compare-bubble {
    animation: oc-compare-bubble-pulse 0.5s ease-out;
  }
  @keyframes oc-compare-bubble-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
  }

  /* ============================================================
     OfficeChase cart-drawer redesign
     Aligns the cart drawer to the OC design system used on the PDP
     (oc-product-pdp): soft #E5E7EB borders, 12px card radius, subtle
     shadow, #6B7280 muted text. Tokens come from assets/oc-tokens.css
     (loaded globally in snippets/stylesheets.liquid), so this is
     independent of the Horizon color scheme (scheme-1, whose black
     `border` was producing the hard divider lines). Scoped to
     .cart-drawer so the main cart page / other components are
     untouched. The red primary "Check out" button is intentionally
     left on the theme's primary-button color so it stays identical to
     the PDP add-to-cart button.
     ============================================================ */

  /* Panel: replace the scheme's hard border-left with a soft OC edge. */
  .cart-drawer__dialog {
    border-left: 1px solid var(--oc-card-border);
  }

  /* Remap the scheme border color (scheme-1 = solid black) to the soft OC
     gray for everything inside the drawer in one shot. Set on a descendant
     of the .color-scheme-N element so it always wins via inheritance —
     this catches the note/discount accordion frame, its divider and the
     totals rule without needing a per-class override. */
  .cart-drawer__inner {
    --color-border: var(--oc-card-border);
  }

  /* Header: soft OC divider under the title (scheme-1 had none). The
     --empty class lives on the dialog, so scope to it to keep the empty
     state's header borderless. */
  .cart-drawer__dialog:not(.cart-drawer--empty) .cart-drawer__header {
    border-bottom: 1px solid var(--oc-card-border);
  }

  .cart-drawer .cart-drawer__heading {
    font-weight: 600;
    color: var(--color-foreground);
  }

  /* Breathing room so the first card doesn't butt against the header divider. */
  .cart-drawer .cart-drawer__items {
    padding-block-start: var(--gap-md);
  }

  /* Line items become OC cards (border + 12px radius + subtle shadow),
     matching the card language on the PDP. Higher specificity
     (.cart-drawer .cart-drawer__items ...) so it beats the earlier
     scheme-bound divider rules in this stylesheet and in
     cart-products.liquid regardless of bundle order. */
  .cart-drawer .cart-drawer__items .cart-items__table-row {
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    box-shadow: var(--oc-card-shadow);
    padding: var(--padding-md, 12px) var(--padding-lg, 14px);
    margin-bottom: var(--gap-md);
  }

  .cart-drawer .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: 1px solid var(--oc-card-border);
    padding-block-end: var(--padding-md, 12px);
    margin-bottom: 0;
  }

  /* Bundle child lines: attach to their parent card instead of floating
     as a separate one (no top gap/rounding). */
  .cart-drawer .cart-drawer__items .cart-items__table-row.cart-items__nested-line {
    margin-top: calc(var(--gap-md) * -1);
    border-top: none;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }
  .cart-drawer .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    margin-bottom: 0;
  }

  /* Secondary text (variant options, compare-at price) → OC muted gray. */
  .cart-drawer .cart-items__details {
    color: var(--oc-muted-fg);
  }
  /* Title: 600 weight + clamp to 2 lines with an ellipsis so long product
     names don't turn the card into a wall of text. */
  .cart-drawer .cart-items__title {
    font-weight: 600;
    color: var(--color-foreground);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cart-drawer .cart-items__price .compare-at-price,
  .cart-drawer .cart-items__price-unit {
    color: var(--oc-muted-fg);
  }

  /* Price: drop the redundant per-unit price under the title (it repeats the
     line total on the right); keep just the line total. NOTE: this also hides
     the per-unit compare-at strike, so the "was" price / discount no longer
     shows in the drawer. */
  .cart-drawer .cart-items__unit-price-wrapper {
    display: none;
  }

  /* Move the line total out of its own tall right-hand column and into the
     content stack (under the title/variants, above the qty selector). Drops the
     drawer rows to two columns (media + content) so the title spans full width
     and the price no longer eats a big empty column on the right. */
  .cart-drawer .cart-drawer__items .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      'media details'
      'media variants'
      'media price'
      'media quantity'
      'media error';
  }
  .cart-drawer .cart-drawer__items .cart-items__table-row:not(.cart-items__table-row--full-width-variants) {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr);
    grid-template-areas:
      'media details'
      'media price'
      'media quantity'
      'media error';
  }
  .cart-drawer .cart-items__price {
    grid-area: price;
    justify-self: start;
    text-align: start;
    min-width: 0;
    margin-block-start: var(--margin-xs);
    font-size: var(--font-size--md);
    font-weight: 600;
    color: var(--color-foreground);
  }

  /* Thumbnail: show the whole product (contain) instead of cropping (cover). */
  .cart-drawer .cart-items__media-image {
    object-fit: contain;
  }

  /* Quantity selector: soft OC border + 8px radius to match PDP controls. */
  .cart-drawer .quantity-selector {
    border-color: var(--oc-card-border);
    border-radius: 8px;
  }

  /* Remove button: muted by default, OC-red affordance on hover. */
  .cart-drawer .cart-items__remove {
    color: var(--oc-muted-fg);
    border-radius: 8px;
  }
  .cart-drawer .cart-items__remove:hover {
    color: var(--oc-accent);
    background: var(--oc-accent-soft-bg);
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:195) */
/* OC Need Help block at the bottom of the mobile drawer */
  .oc-drawer-help {
    padding: 20px 24px 16px;
    border-top: 1px solid #E5E7EB;
    margin-top: auto;
  }
  .oc-drawer-help__title {
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
  }
  .oc-drawer-help__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .oc-drawer-help__item { min-width: 0; }
  .oc-drawer-help__link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #111827;
    text-decoration: none;
  }
  .oc-drawer-help__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(225, 29, 46, 0.08);
    color: var(--oc-accent, #E11D2E);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .oc-drawer-help__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .oc-drawer-help__text strong {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: #111827;
    word-break: break-word;
  }
  .oc-drawer-help__text em {
    font-style: normal;
    font-size: 0.8125rem;
    color: #6B7280;
    line-height: 1.35;
    margin-top: 2px;
  }
  .oc-drawer-help__link:hover .oc-drawer-help__text strong,
  .oc-drawer-help__link:focus-visible .oc-drawer-help__text strong {
    color: var(--oc-accent, #E11D2E);
  }

  .header__icon--menu {
    position: initial;
  }

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

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

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

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

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

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

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

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

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

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

  .menu-drawer__navigation {
    padding: 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:200) */
.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:203) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:204) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:205) */
.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:oc-cart-upsell (INDEX:210) */
/* ============================================================
     OC cart-drawer upsell — OfficeChase design system (assets/oc-tokens.css):
     white cards, soft #E5E7EB borders, 12px radius, subtle shadow, #E11D2E accent.
     Mirrors the PDP's "Complete your order" block, compacted into a horizontal
     scroller so the drawer never grows in height.
     ============================================================ */
  .oc-cart-upsell-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-block: var(--padding-md, 12px) var(--padding-2xs, 4px);
    padding-inline: var(--cart-drawer-padding);

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  /* Free shipping is unconditional store-wide, so this is a reassurance bar, not
     a progress meter toward a threshold. */
  .oc-cart-freeship {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--oc-success-soft-bg);
    color: var(--oc-success);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
  }
  .oc-cart-freeship__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
  }

  .oc-cart-upsell {
    display: block;
  }
  .oc-cart-upsell[hidden] {
    display: none;
  }

  .oc-cart-upsell__title {
    margin: 0 0 8px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-foreground);
  }

  /* Horizontal scroller — the drawer stays a fixed height no matter how many
     cart products contribute upsells. */
  .oc-cart-upsell__list {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 2px 0 6px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .oc-cart-upsell__list::-webkit-scrollbar {
    display: none;
  }

  .oc-cart-upsell__item {
    flex: 0 0 148px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    box-shadow: var(--oc-card-shadow);
  }

  .oc-cart-upsell__photo {
    display: block;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
  }
  .oc-cart-upsell__photo img {
    width: 100%;
    height: 100%;
    /* Show the whole product, matching the PDP + cart line-item thumbnails. */
    object-fit: contain;
  }

  .oc-cart-upsell__name {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-foreground);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .oc-cart-upsell__name:hover {
    color: var(--oc-accent);
  }

  .oc-cart-upsell__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
  }

  .oc-cart-upsell__price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
  }
  .oc-cart-upsell__was {
    font-size: 0.6875rem;
    color: var(--oc-muted-fg);
  }
  .oc-cart-upsell__now {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-foreground);
  }

  .oc-cart-upsell__add {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--oc-accent);
    background: transparent;
    color: var(--oc-accent);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .oc-cart-upsell__add:hover:not(:disabled) {
    background: var(--oc-accent);
    color: var(--oc-accent-fg);
  }
  .oc-cart-upsell__add:disabled {
    cursor: default;
  }
  .oc-cart-upsell__add-plus,
  .oc-cart-upsell__add-tick {
    display: grid;
    place-items: center;
  }
  .oc-cart-upsell__add-tick {
    display: none;
  }
  /* Added state reuses the OC success green, like the PDP savings pill. */
  .oc-cart-upsell__add[data-added] {
    background: var(--oc-success);
    border-color: var(--oc-success);
    color: #fff;
  }
  .oc-cart-upsell__add[data-added] .oc-cart-upsell__add-plus {
    display: none;
  }
  .oc-cart-upsell__add[data-added] .oc-cart-upsell__add-tick {
    display: grid;
  }

  .oc-cart-upsell__error {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--oc-accent);
  }
/* END_SNIPPET:oc-cart-upsell */

/* START_SNIPPET:overlay (INDEX:217) */
.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:218) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    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:219) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:223) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 600;
    color: var(--color-foreground);
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--oc-muted-fg);
    opacity: 1;
    font-weight: 500;
    transition: color var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      color: var(--oc-accent);
    }
  }

  .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:224) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:226) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card (INDEX:227) */
.product-card {
    --oc-card-pad: 12px;
    --card-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
    --card-shadow-medium: 0 6px 16px rgba(0, 0, 0, 0.08);
    --card-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.14);

    /* Border lives on ::after so it sits on top of the clipped gallery and traces the
       border-radius exactly. box-shadow rings can blur/thin out at large corner radii;
       a real border on a pseudo-element with border-radius: inherit stays crisp. */
    position: relative;
    background: var(--oc-card-bg);
    border: 0;
    border-radius: var(--oc-card-radius);
    overflow: hidden;
    transition:
      transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--oc-card-border);
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
    transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Hover: subtle lift + accent ring to signal interactivity without being loud.
     Gated behind (hover: hover) so it only fires on pointer devices. On touch
     (phones), tapping the card focuses the overlay <a> and would otherwise
     trigger :focus-within — flashing the red accent ring before navigation.
     We don't want any hover affordance on tap, so the whole effect is desktop-only. */
  @media (hover: hover) {
    .product-card:hover,
    .product-card:focus-within {
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
      transform: translateY(-2px);
    }

    .product-card:hover::after,
    .product-card:focus-within::after {
      border-color: var(--oc-accent);
    }
  }
  /* Inner content needs breathing room since the card itself now has a frame. Block settings can
     still override via the inline padding rule render. */
  .product-card .product-card__content {
    padding: var(--oc-card-pad);
  }

  /* Compare toggle — pill in the top-LEFT corner of the card. Collapsed it's a 32×32
     circular icon (just the scales SVG); on hover/focus it expands horizontally to
     reveal the "Add to compare" label. Sits above the card-wide <a> via z-index so
     clicks register on the toggle rather than navigating to the PDP. */
  .product-card__compare {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 20;
    display: block;
  }
  .product-card__compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--oc-card-border, rgba(0, 0, 0, 0.1));
    border-radius: 999px;
    color: var(--color-foreground);
    cursor: pointer;
    overflow: hidden;
    transition:
      color 160ms ease,
      background-color 160ms ease,
      border-color 160ms ease,
      padding 220ms cubic-bezier(0.22, 1, 0.36, 1),
      gap 220ms cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .product-card__compare-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .product-card__compare-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    opacity: 0;
    transition:
      max-width 240ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 180ms ease;
  }
  /* Expand on hover (desktop) and focus (keyboard). Tap doesn't need the label since
     the click already toggles state and the aria-label communicates intent. */
  .product-card__compare-btn:hover,
  .product-card__compare-btn:focus-visible {
    color: var(--oc-accent);
    border-color: var(--oc-accent);
    gap: 6px;
    padding-right: 12px;
  }
  .product-card__compare-btn:hover .product-card__compare-label,
  .product-card__compare-btn:focus-visible .product-card__compare-label {
    max-width: 160px;
    opacity: 1;
  }
  .product-card__compare-btn[aria-pressed="true"] {
    background: var(--oc-accent);
    color: #fff;
    border-color: var(--oc-accent);
  }
  .product-card__compare-btn[data-flash="limit"] {
    color: #fff;
    background: #c0392b;
    border-color: #c0392b;
    animation: oc-pc-compare-shake 0.45s ease-in-out;
  }
  @keyframes oc-pc-compare-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  /* No carousel inside the card: hide arrows + lock to the first slide so the
     image cannot be swiped/skipped from within the card. */
  .product-card slideshow-arrows,
  .product-card .slideshow-control,
  .product-card slideshow-arrows .slideshow-control,
  .product-card page-dots,
  .product-card .page-dots,
  .product-card .slideshow-counter {
    display: none !important;
  }

  .product-card .card-gallery slideshow-slide:not(:first-child) {
    display: none !important;
  }

  .product-card .card-gallery slideshow-slides,
  .product-card .card-gallery slideshow-container {
    overflow: hidden !important;
  }

  /* Square gallery, image keeps its ratio and centers without crop.
     Negative margins pull the gallery up to the card's top + side edges so its corners clip to
     the card's border-radius (via overflow: hidden on .product-card). Without this, the content
     padding leaves a visible gap between the rounded card border and the square image. */
  .product-card .card-gallery {
    --gallery-aspect-ratio: 1;
    aspect-ratio: 1;
    margin: calc(-1 * var(--oc-card-pad)) calc(-1 * var(--oc-card-pad)) 0;
  }

  .product-card .card-gallery slideshow-component,
  .product-card .card-gallery slideshow-container,
  .product-card .card-gallery slideshow-slides {
    height: 100%;
  }

  .product-card .card-gallery slideshow-slide {
    aspect-ratio: 1;
    height: 100%;
  }

  .product-card .card-gallery .product-media-container,
  .product-card .card-gallery .product-media {
    aspect-ratio: 1;
    width: 100%;
    height: 100%;
    background-color: var(--color-background, #fff);
  }

  .product-card .card-gallery .product-media__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  /* Layout: column flex with explicit ordering so vendor lands above title.
     The product-title block renders <a class="contents">, so we reset that to
     'block' to make the anchor a real flex item that respects 'order'. */
  .product-card .product-card__content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Flex order. Selectors with `>` only match what is actually a direct child
     at runtime: pre-JS the original vendor + title link sit directly inside
     __content (orders 2 & 3); after product-card.js runs, both are moved
     into __title-region which takes order 2 in their place. */
  .product-card .product-card__content > .card-gallery {
    order: 1;
  }

  .product-card .product-card__content > .product-card__vendor {
    order: 2;
  }

  .product-card .product-card__content > .product-card__title-region {
    order: 2;
  }

  .product-card .product-card__content > a[ref='productTitleLink'] {
    order: 3;
  }

  .product-card .product-card__content > product-price {
    order: 4;
  }

  .product-card .product-card__content > .product-card__meta {
    order: 5;
    margin-top: auto;
  }

  /* Region: layout-only wrapper. Has a JS-set fixed height equal to the
     stack's default-state rendered height — owns the flex slot so siblings
     below never shift when the title expands. */
  .product-card__title-region {
    position: relative;
    /* height is set inline by product-card.js after measuring the default
       stack size. */
  }

  /* Stack: absolute, bottom-anchored to the region. Its height is auto and
     grows with the title's hover expansion, so the bottom stays put while
     the top moves UP — pulling the vendor (first child) up with it. The
     hover background lives here, so it covers the entire rendered pack
     (including the overflow above the region's top edge).

     The hover plate is widened to the card edges via negative margin-inline
     + matching padding-inline; the spacing-style variables from
     .product-card__content inherit down to here. */
  .product-card__title-stack {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-inline: calc(-1 * var(--oc-card-pad)) calc(-1 * var(--oc-card-pad));
    padding-inline: var(--oc-card-pad);
    padding-block: 6px;
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    z-index: 1;
    /* Smooth ease-out curve so the plate eases in instead of snapping. */
    transition:
      background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @media (hover: hover) {
    .product-card:hover .product-card__title-stack,
    .product-card:focus-within .product-card__title-stack {
      background-color: var(--oc-card-bg);
      /* Negative spread (-8px) + matching extra negative y-offset cancels the
         blur tail at the bottom edge, so no dark band shows between the title
         plate and the price below. Top still gets the full lift shadow. */
      box-shadow: 0 -16px 16px -8px rgba(15, 23, 42, 0.10);
      z-index: 4;
    }
  }

  /* Make the title link a real flex item (override Horizon's `display: contents`
     class so the link is a block-level box that participates in the stack). */
  .product-card a[ref='productTitleLink'] {
    display: block;
    line-height: 1.4;
  }

  /* Title — PDP design system: weight 600 + foreground color, but keep the
     block's inherited font-size and 1.4 line-height so the JS-measured
     title-region (set once at rAF) keeps the same vertical footprint as before.
     Shrinking the font here makes title-region shorter → meta gets pushed down
     by margin-top: auto → visible gap between price and CTA. Don't touch sizing. */
  .product-card a[ref='productTitleLink'] :is(p, h1, h2, h3, h4, h5, h6) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0;
    word-break: break-word;
    font-weight: 600;
    color: var(--color-foreground);
    line-height: 1.4;
    max-height: 2.8em;
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Title-expand-on-hover is a desktop affordance only. On touch the title
     stays clamped to 2 lines — tapping a card should navigate, not unfold the
     heading (the expand animation was never designed for phones). */
  @media (hover: hover) {
    .product-card:hover a[ref='productTitleLink'] :is(p, h1, h2, h3, h4, h5, h6),
    .product-card:focus-within a[ref='productTitleLink'] :is(p, h1, h2, h3, h4, h5, h6) {
      -webkit-line-clamp: unset;
      line-clamp: unset;
      max-height: 600px;
    }
  }

  /* Price — mirrors .oc-pdp__price layout: baseline-aligned row of compare + current.
     Overrides Horizon's text-right + type preset (h6) inside the card scope so cards
     share the PDP design system: muted strikethrough compare, bold accent-weight current. */
  .product-card product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
    text-align: left;
    font-size: inherit;
    line-height: inherit;
  }

  .product-card product-price [ref='priceContainer'] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    width: 100%;
  }

  /* Use :not(.price__hidden) so we don't override Horizon's display:none on the
     inactive branch — price.liquid renders BOTH .price__regular and .price__sale
     and toggles visibility via .price__hidden. A bare `display: flex` here showed
     both at once (duplicate price). */
  .product-card .price__regular:not(.price__hidden),
  .product-card .price__sale:not(.price__hidden) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
  }

  .product-card .price {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-foreground);
  }

  .product-card .compare-at-price,
  .product-card .price-item--regular.compare-at-price {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--oc-muted-fg);
    text-decoration: line-through;
  }

  /* Vendor: small uppercase label. Sits at the top of the title-stack pack
     and rides up as the title expands. */
  .product-card__vendor {
    display: inline-block;
    width: fit-content;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--oc-muted-fg);
    text-decoration: none;
    line-height: 1.2;
    font-weight: 600;
    margin: 0;
    position: relative;
    z-index: 2;
  }

  .product-card__vendor:hover,
  .product-card__vendor:focus-visible {
    color: var(--oc-accent);
    text-decoration: underline;
    outline: none;
  }

  /* Meta block (rating, inventory, View more) pinned to the bottom of the card
     so cards line up no matter how long the title is. */
  .product-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs, 6px);
    width: 100%;
    margin-top: var(--padding-xs, 6px);
    position: relative;
    z-index: 2;
  }

  .product-card__inv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 18px;
  }

  /* Outlined pill — mirrors .oc-reviews__view-all in product-reviews.liquid:
     transparent fill + thin neutral border, fills lightly on hover. */
  .product-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--color-foreground);
    background: transparent;
    border: 1px solid var(--oc-card-border);
    border-radius: 999px;
    text-decoration: none;
    position: relative;
    z-index: 2;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .product-card__rating:hover {
    color: var(--oc-accent);
    background-color: rgb(var(--color-foreground-rgb) / 0.04);
    border-color: rgb(var(--color-foreground-rgb) / 0.35);
  }
  .product-card__rating-value { font-weight: 700; }
  .product-card__rating-stars { display: inline-flex; align-items: center; gap: 1px; }
  .product-card__rating-star { display: block; }
  .product-card__rating-star--single {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    display: none;
  }
  .product-card__rating-count { color: var(--oc-muted-fg); font-weight: 500; }

  @media (max-width: 749px) {
    .product-card__rating-stars { display: none; }
    .product-card__rating-star--single { display: block; }
  }

  .product-card__inventory {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--oc-muted-fg);
    background: rgb(var(--color-foreground-rgb) / 0.06);
    border-radius: 999px;
    font-weight: 600;
  }

  .product-card__inventory-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oc-success);
    flex-shrink: 0;
  }

  .product-card__inventory--high {
    color: var(--color-foreground);
    background: #dcfce7;
  }

  .product-card__inventory--high .product-card__inventory-dot {
    background: #22c55e;
  }

  .product-card__inventory--low {
    color: var(--color-foreground);
    background: #fef3c7;
  }

  .product-card__inventory--low .product-card__inventory-dot {
    background: var(--oc-warning);
  }

  .product-card__inventory--out {
    color: var(--oc-muted-fg);
    background: rgb(var(--color-foreground-rgb) / 0.08);
  }

  /* Single CTA: View more — always visible, including for sold-out items.
     Mirrors .add-to-cart-button transitions from base.css + .oc-pdp buy panel:
     hover lifts via box-shadow, press dips via scale + translate. */
  .product-card__view-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    margin-top: 8px;
    background: var(--oc-accent);
    color: var(--oc-accent-fg);
    border: 1px solid var(--oc-accent);
    border-radius: var(--oc-card-radius);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    user-select: none;
    transition-property: color, background-color, box-shadow, scale, translate;
    transition-duration: var(--animation-speed, 160ms);
    transition-timing-function: var(--ease-out-cubic, cubic-bezier(0.33, 1, 0.68, 1));
  }

  .product-card__view-more:hover,
  .product-card__view-more:focus-visible {
    background: color-mix(in srgb, var(--oc-accent), #000 12%);
    border-color: color-mix(in srgb, var(--oc-accent), #000 12%);
    color: var(--oc-accent-fg);
    outline: none;
  }

  .product-card__view-more:active {
    scale: 0.99;
    translate: 0 1px;
  }

  /* Save % badge styling (text rendered server-side in card-gallery).
     Defaults to the green "savings" pill (matches PDP). For sold-out cards we
     override to a muted neutral so the green doesn't imply a positive signal.
     Text color is hardcoded (not var(--color-foreground)) because the badge
     ships with a color-<scheme> class from theme settings that flips
     --color-foreground to white inside its scope. */
  .product-card .product-badges__badge--rectangle {
    color: #ffffff;
    background: #008000;
    border: none;
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
  }
  .product-card:has(.product-card__inventory--out) .product-badges__badge--rectangle {
    background: #e5e7eb;
    color: #6b7280;
  }

  /* Card pops above neighbours when its title expands on hover (desktop only —
     the title never expands on touch, so there's nothing to raise above). */
  @media (hover: hover) {
    .product-card:hover {
      z-index: var(--layer-raised, 5);
    }
  }

  /* Hide Horizon's floating quick-add button (it lived inside card-gallery
     before; harmless guard if some context still renders it). */
  .product-card .card-gallery quick-add-component {
    display: none;
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:228) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:229) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:230) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }

  .product-media-gallery__nav-pill {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    align-self: center;
    height: 44px;
    margin-block-start: var(--padding-xs);
    border: var(--style-border-width, 1px) solid rgb(var(--color-foreground-rgb) / var(--opacity-20, 0.2));
    border-radius: 999px;
    overflow: hidden;
    line-height: 1;
    background: transparent;
  }

  .product-media-gallery__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 100%;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-foreground);
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .product-media-gallery__nav-btn:hover {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5, 0.06));
  }

  .product-media-gallery__nav-btn:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: -2px;
  }

  .product-media-gallery__nav-btn svg {
    width: 14px;
    height: 14px;
    --icon-stroke-width: 1.6px;
  }

  .product-media-gallery__nav-btn--pause svg,
  .product-media-gallery__nav-btn--play svg {
    width: 22px;
    height: 22px;
    --icon-stroke-width: 2px;
  }

  .product-media-gallery__nav-btn--next svg {
    transform: rotate(180deg);
  }

  .product-media-gallery__nav-toggle {
    display: grid;
    grid-template-areas: 'stack';
    border-inline: var(--style-border-width, 1px) solid rgb(var(--color-foreground-rgb) / var(--opacity-20, 0.2));
  }

  .product-media-gallery__nav-toggle > * {
    grid-area: stack;
  }

  slideshow-component[autoplay][paused] .product-media-gallery__nav-btn--pause {
    visibility: hidden;
    pointer-events: none;
  }

  slideshow-component[autoplay]:not([paused]) .product-media-gallery__nav-btn--play {
    visibility: hidden;
    pointer-events: none;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:231) */
hover-zoom.product-media-container__hover-zoom {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Match the constraint container's flex centering when active. */
  .product-media-container.constrain-height hover-zoom.product-media-container__hover-zoom {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hover-zoom__lens,
  .hover-zoom__pane {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease-out;
  }

  hover-zoom[data-active] .hover-zoom__lens,
  .hover-zoom__pane[data-active] {
    opacity: 1;
  }

  .hover-zoom__lens {
    position: absolute;
    width: calc(var(--hz-image-width-pct, 100%) / var(--zoom-level, 2));
    height: calc(var(--hz-image-height-pct, 100%) / var(--zoom-level, 2));
    left: var(--zoom-x, 50%);
    top: var(--zoom-y, 50%);
    transform: translate(-50%, -50%);
    border: 1px solid currentcolor;
    background-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.08);
    z-index: 2;
  }

  /* Pane is portaled to <body> so it ignores ancestor overflow/transform. */
  .hover-zoom__pane {
    position: fixed;
    top: var(--hz-pane-top, 0);
    left: var(--hz-pane-left, 0);
    width: var(--hz-pane-width, 100%);
    height: var(--hz-pane-height, 100%);
    overflow: hidden;
    background-color: var(--color-background);
    border: 1px solid currentcolor;
    border-radius: var(--media-radius, 0);
    z-index: var(--layer-overlay, 100);
  }

  .hover-zoom__pane-image {
    position: absolute;
    width: calc(var(--zoom-level, 2) * 100%);
    height: calc(var(--zoom-level, 2) * 100%);
    left: calc(50% - var(--zoom-x, 50%) * var(--zoom-level, 2));
    top: calc(50% - var(--zoom-y, 50%) * var(--zoom-level, 2));
    object-fit: contain;
    max-width: none;
  }

  @media (hover: hover) and (min-width: 750px) {
    hover-zoom.product-media-container__hover-zoom {
      cursor: crosshair;
    }
  }

  @media (max-width: 749px) {
    .hover-zoom__lens,
    .hover-zoom__pane {
      display: none;
    }
  }

  .dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:232) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:233) */
.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:234) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:236) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:238) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }

  /* ============================================================
     OC search-card parity — Save% badge + compare toggle + catalog-style
     image/price, so predictive-search & recently-viewed cards read like the
     storefront product cards. Uses --oc-* tokens (assets/oc-tokens.css).
     ============================================================ */

  /* Each search result is a genuine OC card (design-system frame): white card,
     soft #E5E7EB border, 12px radius, subtle shadow, padded — matching the PDP
     and cart-drawer cards. */
  .resource-card--search {
    background: var(--oc-card-bg);
    border: 1px solid var(--oc-card-border);
    border-radius: var(--oc-card-radius);
    box-shadow: var(--oc-card-shadow);
    padding: 8px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .resource-card--search:hover {
    border-color: var(--oc-card-border);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  }

  /* Show the whole product (contain), like the catalog card, not cropped. */
  .resource-card--search[data-resource-type='product'] .resource-card__image {
    object-fit: contain;
  }

  /* Round the image slightly inside the padded OC card. */
  .resource-card--search .resource-card__image {
    border-radius: 8px;
  }

  /* The card now carries its own OC frame, so drop the list item's
     grow-on-hover padding / background (it would double-frame the card). */
  .predictive-search-results__card--product:has(.resource-card--search):hover,
  .predictive-search-results__card--product:has(.resource-card--search):is(
      [aria-selected='true'].keyboard-focus,
      :focus-visible,
      :has(.resource-card:focus-visible)
    ) {
    background-color: transparent;
    padding: 0;
    margin: 0;
    outline: none;
  }

  /* Save% / Sale / Sold-out badge — green savings pill, top-right. */
  .resource-card__badges {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    pointer-events: none;
    display: flex;
    gap: 4px;
  }
  .resource-card__badge {
    background: #008000;
    color: #fff;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .resource-card__badge--soldout {
    background: #e5e7eb;
    color: #6b7280;
  }

  /* Compare toggle — circular icon top-left that expands on hover to reveal the
     label. Sits above the card link (z-index) so the click toggles compare. */
  .resource-card__compare {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 20;
    display: block;
  }
  .resource-card__compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 28px;
    padding: 0;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--oc-card-border, rgba(0, 0, 0, 0.1));
    border-radius: 999px;
    color: var(--color-foreground);
    cursor: pointer;
    overflow: hidden;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease,
      gap 220ms cubic-bezier(0.22, 1, 0.36, 1), padding 220ms cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .resource-card__compare-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .resource-card__compare-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    opacity: 0;
    transition: max-width 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
  }
  .resource-card__compare-btn:hover,
  .resource-card__compare-btn:focus-visible {
    color: var(--oc-accent);
    border-color: var(--oc-accent);
    gap: 5px;
    padding-right: 11px;
  }
  .resource-card__compare-btn:hover .resource-card__compare-label,
  .resource-card__compare-btn:focus-visible .resource-card__compare-label {
    max-width: 140px;
    opacity: 1;
  }
  .resource-card__compare-btn[aria-pressed='true'] {
    background: var(--oc-accent);
    color: #fff;
    border-color: var(--oc-accent);
  }

  /* Price — muted strikethrough compare price, matching the OC catalog card. */
  .resource-card--search .resource-card__content .compare-at-price {
    color: var(--oc-muted-fg);
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:239) */
.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:240) */
.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:search-modal (INDEX:243) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }

  /* ============================================================
     OC search popup — align the chrome to the OfficeChase design system
     (soft #E5E7EB borders, rounded corners, subtle shadow). Tokens come
     from assets/oc-tokens.css. --color-border is remapped twice: once on
     the dialog shell and once inside predictive-search-component, which
     carries the popover color scheme and re-sets --color-border for its
     own subtree (so the input frame + divider also go soft-gray).
     ============================================================ */
  .search-modal__content {
    --color-border: var(--oc-card-border);
    border: 1px solid var(--oc-card-border);
  }
  .predictive-search-form {
    --color-border: var(--oc-card-border);
  }

  .dialog-modal[open].search-modal__content {
    border-radius: var(--oc-card-radius);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  /* Search input frame → soft OC border + rounder corners. */
  .predictive-search-form__header,
  .predictive-search-form__header-inner {
    border-color: var(--oc-card-border);
    border-radius: 10px;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:244) */
.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:245) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:247) */
.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:249) */
.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:250) */
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:251) */
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:253) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:255) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:263) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:272) */
/* 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-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:273) */
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 (INDEX:274) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:275) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */