/** Shopify CDN: Minification failed

Line 12032:0 Unexpected "{"
Line 12032:1 Expected identifier but found "%"
Line 12034:34 Unexpected "("
Line 12042:68 Unterminated string token
Line 12047:67 Unterminated string token
Line 12049:3 Expected identifier but found "%"

**/
/* 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:collection-list (INDEX:3) */
/* Full-width instances give their cards zero inherent side margin (see
     .section--full-width > * in base.css), so the cards sat flush against
     the viewport edge - which reads as a carousel affordance rather than a
     finished grid. Same padding-inline: var(--page-margin) technique as the
     intro below, only added when the section is actually full-width so
     page-width instances (which already get a margin from the grid itself)
     aren't double-padded. */
  .collection-list__grid-inset {
    padding-inline: var(--page-margin);
  }

  /* Optional section intro. Guarded in markup so the many other uses of this
     section render exactly as before. Sizes match the native h2 (40px) and the
     shared 13px eyebrow so this reads as a sibling of the page's other
     section headers rather than a new pattern. */
  .collection-list__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-lg);
    margin-block-end: var(--gap-lg);
    /* This section is normally used full-width, which makes its direct
       children span edge to edge with no inherent side margin (see
       .section--full-width > * in base.css) - so the intro needs its own
       inset to match the page's usual gutter instead of touching the
       viewport edge. */
    padding-inline: var(--page-margin);
  }
  .collection-list__eyebrow {
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 var(--gap-sm);
  }
  .collection-list__heading {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    /* --font-size--4xl (used here previously) is the theme's fixed
       utility-scale token, shared and intentionally non-fluid everywhere
       else it's used - this section's own heading gets a local clamp
       instead of touching that shared value, so it scales down on a
       narrow phone (this H2 sits in a flex row with the eyebrow/link and
       has no width cap of its own) without changing any other component
       that reads the same token. */
    font-size: clamp(1.75rem, 1.29rem + 1.95vw, 2.5rem);
    line-height: 1.1;
    color: var(--color-foreground-heading);
    margin: 0;
    text-wrap: balance;
  }
  .collection-list__link {
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
  }
  .collection-list__link-arrow {
    display: inline-block;
    margin-inline-start: var(--gap-2xs);
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }
  .collection-list__link:hover .collection-list__link-arrow {
    transform: translateX(var(--gap-2xs));
  }
/* END_SECTION:collection-list */

/* START_SECTION:cutting-boards-showcase (INDEX:5) */
/* Scoped to this section's own wrapper: .section-background is a shared class
     used by 20+ sections, and Shopify concatenates every section stylesheet
     into one global bundle - unscoped, this gold wash painted the whole site. */
  .section-cutting-boards-showcase .section-background {
    background-image:
      radial-gradient(ellipse 900px 500px at 12% -8%, rgb(200 169 106 / 0.22), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 110%, rgb(200 169 106 / 0.14), transparent 55%);
    background-repeat: no-repeat;
  }

  .cutting-boards-showcase__intro {
    text-align: center;
    padding-bottom: var(--gap-xl);
  }

  .cutting-boards-showcase__heading {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    /* Local clamp instead of the shared --font-size--4xl token (see the
       matching note in collection-list.liquid) - scales this H2 down on
       narrow phones without touching that token's other, intentionally
       fixed, uses elsewhere in the theme. */
    font-size: clamp(1.75rem, 1.29rem + 1.95vw, 2.5rem);
    color: var(--color-foreground-heading, var(--color-foreground));
    margin: 0 0 var(--gap-xs);
  }

  .cutting-boards-showcase__eyebrow {
    font-family: var(--font-body--family);
    font-size: 0.8125rem;
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0;
  }

  .cutting-boards-showcase__carousel {
    position: relative;
    max-width: min(1600px, 94vw);
    margin-inline: auto;
  }

  .cutting-boards-showcase__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .cutting-boards-showcase__track::-webkit-scrollbar {
    display: none;
  }

  .cbs-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .cbs-slide__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 30rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
  }

  .cbs-quad {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin: -1px 0 0 -1px;
  }

  .cbs-quad--images {
    padding: 0;
  }

  .cbs-quad__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20px);
    transform: scale(1.15);
  }

  .cbs-quad__scrim {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-background-rgb) / 0.86);
  }

  .cbs-quad__content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--gap-xl);
  }

  .cbs-quad__eyebrow {
    font-family: var(--font-body--family);
    font-size: 0.8125rem;
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 var(--gap-xs);
  }

  .cbs-quad__heading {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1.75rem;
    color: var(--color-foreground-heading, var(--color-foreground));
    margin: 0 0 var(--gap-sm);
  }

  .cbs-quad__pitch {
    font-family: var(--font-body--family);
    font-size: 1.0625rem;
    line-height: 1.5;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cbs-quad__pitch p {
    margin: 0;
  }

  .cbs-images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
  }

  .cbs-images-grid__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .cbs-images-grid__placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
  }

  .cbs-quad__details {
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-foreground);
    margin-bottom: var(--gap-lg);
  }

  .cbs-quad__details ul {
    margin: 0;
    padding-inline-start: 1.1em;
  }

  .cbs-quad__button {
    align-self: flex-start;
  }

  /* On desktop this wrapper must span the whole carousel (inset: 0) without
     capturing clicks itself, so the arrows/dots inside it can still be
     positioned absolutely against it exactly as if they were direct
     children of .cutting-boards-showcase__carousel - inset: 0 on a
     position: relative ancestor makes this wrapper's box match that
     ancestor's box exactly, so top/bottom/left/right values below are
     unchanged from before this wrapper existed. pointer-events: none keeps
     the wrapper itself from blocking anything under it; the two elements
     that need clicks re-enable it explicitly. Mobile overrides this to
     make the wrapper an actual flex pill - see the max-width: 988px
     block. */
  .cbs-controls {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .cbs-side-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: none;
    background-color: rgb(var(--color-background-rgb) / 0.85);
    color: var(--color-foreground);
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
    transition: background-color 0.25s ease-out;
    pointer-events: auto;
  }

  @media (hover: hover) {
    .cbs-side-arrow:hover {
      background-color: var(--color-background);
    }
  }

  .cbs-side-arrow--prev {
    left: var(--gap-md);
  }

  .cbs-side-arrow--next {
    right: var(--gap-md);
  }

  .cbs-dots-row {
    position: absolute;
    bottom: var(--gap-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    /* Gap is 0 because each dot now carries its own transparent 24px hit area
       (see below), which already separates the painted dots. */
    gap: 0;
    padding: 0.5rem;
    border-radius: var(--style-border-radius-pills);
    background-color: rgb(var(--color-background-rgb) / 0.85);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
    pointer-events: auto;
  }

  /* The button is a 24x24 target (WCAG 2.5.8) but paints only a 10px dot, the
     same transparent-padding trick blade-lengths.liquid uses for its pills. */
  .cbs-nav__dot {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    display: grid;
    place-items: center;
    cursor: pointer;
  }

  .cbs-nav__dot::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* 20% opacity left the inactive dots at 1.64:1 against the rail - below the
       3:1 floor for non-text contrast, so the slide count was invisible. */
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    transition: background-color 0.25s ease-out, transform 0.25s ease-out;
  }

  .cbs-nav__dot[aria-current='true']::before {
    background-color: var(--color-primary);
    transform: scale(1.2);
  }

  @media screen and (max-width: 988px) {
    /* Slides are flex items in the scroll track, so every slide stretches to
       the height of the tallest one - but this grid sizes to its own content,
       so a shorter slide (Hi-Soft) left a strip of dead space between the
       card's bottom border and the bottom of the track. That was the "big
       gap": it sat inside the track, below the card, which is also why
       anchoring anything to the track's bottom edge looked detached from the
       card. Filling the stretched slide and letting the copy row absorb the
       slack puts that extra height inside the card instead. */
    .cbs-slide__grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      height: 100%;
    }

    /* 1/1 left visible letterboxing above/below the photo inside each
       grid cell whenever a photo isn't itself square (object-fit: contain
       never crops, so a mismatched box just shows empty space instead).
       4/3 is a closer match to this catalog's mostly-landscape shots,
       without giving up the "never cropped" rule. */
    .cbs-quad--images {
      aspect-ratio: 4 / 3;
    }

    .cbs-quad--content {
      min-height: 14rem;
    }

    /* On desktop the arrows/dots overlay the (fixed-height) image half of a
       side-by-side slide, so a vertical center/bottom offset always lands on
       the photo. Stacked on mobile the card is one tall column: there is no
       region an overlay can sit on without covering the photo or the copy,
       and parking the controls under the card always read as detached
       because the track's bottom edge sits below the card's (see the grid
       rule above).

       So mobile has no controls at all. Swipe is the native gesture here,
       and the affordance is the layout itself rather than an added widget:
       trailing padding on the scroll track shrinks each slide's 100%
       flex-basis (which resolves against the track's content box) below the
       track's own width, so the next card always peeks in at the right edge.
       That same padding is exactly the trailing scroll space the last slide
       needs to reach its own start snap point, so nothing becomes
       unreachable under scroll-snap: x mandatory. */
    .cbs-controls {
      display: none;
    }

    .cutting-boards-showcase__track {
      gap: var(--gap-sm);
      padding-inline-end: 3rem;
    }
  }
/* END_SECTION:cutting-boards-showcase */

/* 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);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .utilities a:is(:hover, :focus-visible) {
    color: var(--color-foreground);
  }

  .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) */
/* No `content-visibility: auto` here. Without a `contain-intrinsic-size`
     to stand in for the skipped content, the footer collapses to nothing
     while it is off-screen and snaps back to full height the moment it is
     reached — the page grows and shrinks under the scroll position, which
     reads as the page fighting you on the way back up, and leaves the
     footer blank in full-page screenshots. A four-column footer costs
     nothing to render; skipping it was never worth that. */
  .footer-content {
    contain: content;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

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

  /* Column headings: any h6 text block in the footer renders as a small
     tracked uppercase label, regardless of how it was authored (with or
     without bold, any case). Keeps the columns consistent when staff add
     or edit headings in the theme editor. Japanese characters have no
     case, so e.g. "日本製" is unaffected by the transform. */
  .footer-content .text-block.h6,
  .footer-content .text-block.h6 > * {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm, 0.06em);
    font-weight: 500;
  }

  .footer-content .text-block.h6 strong {
    font-weight: inherit;
  }

  @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),
      box-shadow var(--animation-speed-slow) var(--ease-out-cubic);
    opacity: 1;
  }

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

    /* Soft, navy-tinted depth cue once the header detaches from the page */
    box-shadow: 0 8px 24px rgb(14 29 48 / 0.07);
  }

  /* The open mega panel carries its own, stronger shadow — don't stack the
     sticky shadow on top of it. */
  .header[data-sticky-state='active']:has(.menu-categories__panel:not([hidden])) {
    box-shadow: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

    position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* If menu is in center column */
    &:has(.header__column--center :is(header-menu, header-menu-categories)) {
      --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 :is(header-menu, header-menu-categories)) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left :is(header-menu, header-menu-categories)) {
        --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;

      /* Keep the outer buttons' touch targets away from the screen edges;
         the buttons' built-in padding makes anything tighter look flush. */
      padding-inline: var(--padding-2xs) var(--padding-xs);

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

    /* Matches the mobile rule above: inset the outer buttons from the
       screen edges on touch devices (e.g. iPad) using the drawer layout. */
    padding-inline: var(--padding-2xs) var(--padding-xs);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION: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:knife-finder (INDEX:14) */
/* Type and contrast, deliberately.
     ---------------------------------
     The first cut of this page used 10–12px labels at 0.5–0.6 foreground alpha.
     Measured against the theme's own scheme-1 (#3c3a34 on #f6f4ee) that is
     2.7:1 to 3.4:1, well under the 4.5:1 WCAG AA needs, and it was applied to
     the smallest text on the page. So:

       --kf-muted   0.78 alpha = 5.5:1, the floor for any secondary text
       --kf-quiet   0.86 alpha, for small text that still needs to recede
       nothing renders below 0.875rem (14px), eyebrows included

     Rules are 0.2 alpha rather than the theme border token, which is close to
     invisible against a cream ground at 1px. */
  .knife-finder {
    --kf-muted: rgb(var(--color-foreground-rgb) / 0.78);
    --kf-quiet: rgb(var(--color-foreground-rgb) / 0.86);
    --kf-rule: rgb(var(--color-foreground-rgb) / 0.2);
    --kf-rule-strong: rgb(var(--color-foreground-rgb) / 0.38);
    --kf-tint: rgb(var(--color-foreground-rgb) / 0.05);
    --kf-gutter: clamp(18px, 2.4vw, 32px);

    display: flex;
    flex-direction: column;
    /* Task rows carry their own top padding and rule, so the band gap only has
       to separate the unlike things. It used to add 160px on top of that. */
    gap: clamp(48px, 6vw, 88px);
  }

  .knife-finder :is(h1, h2, h3) {
    font-family: var(--font-heading--family);
    font-weight: 400;
    text-wrap: balance;
    margin: 0;
  }

  .knife-finder p {
    margin: 0;
  }

  .knife-finder__eyebrow {
    font-size: 0.875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kf-muted);
  }

  .knife-finder__text-link {
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
    text-underline-offset: 4px;
  }

  /* ------------------------------------------------------------------- hero */

  /* No photograph by default. A single product shot standing in for eighteen
     knives said nothing, and the page has its own imagery a scroll below. The
     Hero image setting still exists; it is simply not set. */
  .knife-finder__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .knife-finder__hero > :not(.knife-finder__hero-media) {
    max-width: 52rem;
  }

  .knife-finder__hero-media {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    margin-bottom: clamp(28px, 4vw, 56px);
    background: var(--kf-tint);
  }

  .knife-finder__hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .knife-finder__hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .knife-finder__hero-lede {
    font-size: clamp(1.125rem, 1.9vw, 1.375rem);
    line-height: 1.55;
    color: var(--kf-quiet);
    max-width: 40rem;
  }

  /* ------------------------------------------------------------------ bands */

  /* Five bands with the same shape — heading left, equal grid below — reads as
     a stack of blocks however good each block is. The three variants below give
     the page a rhythm: a normal band, one that inverts to the foreground colour
     and breaks the cream, and one that runs its heading beside its content
     instead of above it. */
  .knife-finder__band {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vw, 52px);
  }

  .knife-finder__band--invert {
    --kf-muted: rgb(var(--color-background-rgb) / 0.8);
    --kf-quiet: rgb(var(--color-background-rgb) / 0.88);
    --kf-rule: rgb(var(--color-background-rgb) / 0.24);
    --kf-rule-strong: rgb(var(--color-background-rgb) / 0.42);
    --kf-tint: rgb(var(--color-background-rgb) / 0.08);

    color: var(--color-background);
    background: var(--color-foreground);
    padding: clamp(36px, 6vw, 88px) clamp(24px, 4vw, 64px);
  }

  .knife-finder__band--invert .knife-finder__text-link {
    color: var(--color-background);
  }

  .knife-finder__band--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
  }

  @media screen and (min-width: 1000px) {
    .knife-finder__band--split {
      grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
      column-gap: clamp(40px, 6vw, 96px);
    }

    /* The care note belongs under the notes, not under the heading. */
    .knife-finder__band--split .knife-finder__care-note {
      grid-column: 2;
    }
  }

  .knife-finder__band-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 46rem;
  }

  .knife-finder__band-title {
    font-size: clamp(2.125rem, 4.6vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -0.012em;
  }

  .knife-finder__band-lede {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--kf-quiet);
  }

  /* -------------------------------------------------------------- task rows */

  .knife-finder__tasks {
    display: flex;
    flex-direction: column;
  }

  .knife-finder__task {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 32px);
    padding-block: clamp(36px, 5vw, 64px);
    border-top: 1px solid var(--kf-rule-strong);
  }

  @media screen and (min-width: 1000px) {
    /* The job on the left, the answers on the right. Reading across a row is
       the whole point, so the label stays put while the cards scroll past it. */
    .knife-finder__task {
      grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
      column-gap: clamp(32px, 5vw, 80px);
      align-items: start;
    }

    .knife-finder__task-head {
      position: sticky;
      top: clamp(80px, 12vh, 140px);
    }
  }

  .knife-finder__task-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .knife-finder__task-title {
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  .knife-finder__task-note {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--kf-muted);
  }

  /* ------------------------------------------------------------- knife cards */

  /* auto-fit with 1fr tracks: empty tracks collapse, so one answer becomes one
     wide card and four become four narrow ones, and no row ever rags. */
  .knife-finder__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: clamp(24px, 3vw, 36px) var(--kf-gutter);
  }

  .knife-finder__card {
    display: flex;
    flex-direction: column;
  }

  .knife-finder__card-link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    text-decoration: none;
    color: inherit;
  }

  .knife-finder__card-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--kf-tint);
    margin-bottom: 16px;
  }

  .knife-finder__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
  }

  @media (hover: hover) {
    .knife-finder__card-link:hover .knife-finder__card-image {
      transform: scale(1.04);
    }

    .knife-finder__card-link:hover .knife-finder__card-name {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .knife-finder__card-image {
      transition: none;
    }
  }

  .knife-finder__card-link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 4px;
  }

  .knife-finder__chip {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    font-size: 0.875rem;
    line-height: 1;
    padding: 8px 12px;
    background: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid var(--kf-rule-strong);
  }

  .knife-finder__card-name {
    font-family: var(--font-heading--family);
    font-size: 1.5rem;
    line-height: 1.15;
    margin-bottom: 8px;
  }

  .knife-finder__card-jp {
    font-size: 1rem;
    color: var(--kf-muted);
    margin-inline-start: 0.45em;
  }

  .knife-finder__card-for {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--kf-quiet);
  }

  /* Stacked, not wrapped. As a wrapping row the stats broke to two lines on a
     narrow card and pushed the link onto a third, so no two cards in a row
     ended at the same place. */
  .knife-finder__card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--kf-rule);
  }

  .knife-finder__card-stats {
    font-size: 0.9375rem;
    color: var(--kf-muted);
    font-variant-numeric: tabular-nums;
  }

  .knife-finder__card-read {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    font-size: 0.9375rem;
    font-weight: 600;
    color: inherit;
    text-underline-offset: 4px;
  }

  .knife-finder__card-read-arrow {
    transition: transform 0.2s ease;
  }

  @media (hover: hover) {
    .knife-finder__card-read:hover .knife-finder__card-read-arrow {
      transform: translateX(3px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .knife-finder__card-read-arrow {
      transition: none;
    }
  }

  /* A task with a single answer gets one very wide card, so the photo goes
     beside the copy instead of stretching a letterbox across the whole row. */
  @media screen and (min-width: 1000px) {
    .knife-finder__grid:has(> .knife-finder__card:only-child) .knife-finder__card-link {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: clamp(24px, 3vw, 40px);
      align-items: center;
    }

    .knife-finder__grid:has(> .knife-finder__card:only-child) .knife-finder__card-media {
      grid-row: span 3;
      margin-bottom: 0;
    }
  }

  /* --------------------------------------------------------- compact band */

  /* A reference row, not a feature. Smaller heading, tighter gap, four across. */
  .knife-finder__band--compact {
    gap: clamp(20px, 2.5vw, 28px);
  }

  .knife-finder__compact-title {
    font-family: var(--font-heading--family);
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    line-height: 1.15;
  }

  .knife-finder__compact-lede {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--kf-muted);
  }

  /* ------------------------------------------------------------------ bevel */

  .knife-finder__bevels {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 4vw, 64px) var(--kf-gutter);
  }

  @media screen and (min-width: 750px) {
    .knife-finder__bevels {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .knife-finder__bevel {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Sized by height, not width — the figure is a tall narrow slab and letting
     it fill the column width would flatten the taper back out. Inline SVG, so
     it inherits the band's colour and survives any colour scheme. */
  .knife-finder__bevel-figure {
    width: auto;
    height: clamp(150px, 19vw, 210px);
    color: currentcolor;
    margin-bottom: 6px;
  }

  .knife-finder__bevel-title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
  }

  .knife-finder__bevel p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--kf-quiet);
    max-width: 34rem;
  }

  .knife-finder__bevel-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .knife-finder__bevel-points li {
    position: relative;
    padding-inline-start: 20px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .knife-finder__bevel-points li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.6em;
    width: 9px;
    height: 1px;
    background: currentcolor;
    opacity: 0.7;
  }

  .knife-finder__bevel-verdict {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--kf-rule);
    font-weight: 600;
  }

  /* ----------------------------------------------------------------- steels */

  .knife-finder__steels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 28px) var(--kf-gutter);
  }

  @media screen and (min-width: 900px) {
    .knife-finder__steels {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .knife-finder__steel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--kf-rule-strong);
  }

  .knife-finder__steel-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
    font-family: var(--font-body--family);
  }

  .knife-finder__steel-line {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--kf-muted);
  }

  .knife-finder__steel .knife-finder__text-link {
    margin-top: auto;
    padding-top: 4px;
    font-size: 0.9375rem;
  }

  /* ----------------------------------------------------------------- extras */

  .knife-finder__extras {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 40px) var(--kf-gutter);
  }

  @media screen and (min-width: 900px) {
    .knife-finder__extras {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .knife-finder__extra-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
  }

  .knife-finder__extra-media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--kf-tint);
    margin-bottom: 16px;
  }

  .knife-finder__extra-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
  }

  @media (hover: hover) {
    .knife-finder__extra-link:hover .knife-finder__extra-image {
      transform: scale(1.04);
    }

    .knife-finder__extra-link:hover .knife-finder__extra-title {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .knife-finder__extra-image {
      transition: none;
    }
  }

  .knife-finder__extra-link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 4px;
  }

  .knife-finder__extra-title {
    font-family: var(--font-heading--family);
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  .knife-finder__extra-text {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--kf-muted);
  }

  /* ----------------------------------------------------------------- basics */

  .knife-finder__basics {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 3vw, 36px) var(--kf-gutter);
  }

  @media screen and (min-width: 750px) {
    .knife-finder__basics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Ruled rather than boxed: four bordered cards is what made this read as
     another block of tiles. */
  .knife-finder__basics > div {
    padding-top: 16px;
    border-top: 1px solid var(--kf-rule-strong);
  }

  .knife-finder__basics h3 {
    font-size: 1.25rem;
    line-height: 1.25;
    margin-bottom: 0.45em;
  }

  .knife-finder__basics p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--kf-quiet);
  }

  /* ------------------------------------------------------------- care note */

  .knife-finder__care-note {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--kf-muted);
    max-width: 46rem;
    padding-top: 18px;
    border-top: 1px solid var(--kf-rule);
  }

  /* -------------------------------------------------------------------- ask */

  .knife-finder__ask {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    padding: clamp(36px, 6vw, 72px) clamp(20px, 4vw, 48px);
    background: var(--kf-tint);
  }

  .knife-finder__ask-title {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    line-height: 1.12;
  }

  .knife-finder__ask p {
    max-width: 38rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--kf-quiet);
  }

  @media screen and (max-width: 749px) {
    /* A 16:7 letterbox is a sliver on a phone; give it back some height. */
    .knife-finder__hero-media {
      aspect-ratio: 4 / 3;
    }
  }
/* END_SECTION:knife-finder */

/* START_SECTION:knife-type-guide (INDEX:15) */
/* This section now runs full-width to line up edge-to-edge with the
     collection grid above it, which strips its direct children of any
     inherent side margin (.section--full-width > * in base.css) - so
     intro/grid/cta each need their own inset to match the page gutter,
     same technique already used for collection-list__intro. */
  .knife-type-guide__intro {
    margin-block-end: var(--gap-2xl);
    padding-inline: var(--page-margin);
  }
  .knife-type-guide__eyebrow {
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 var(--gap-sm);
  }
  .knife-type-guide__heading {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    /* Local clamp instead of the shared --font-size--4xl token (see the
       matching note in collection-list.liquid) - scales this H2 down on
       narrow phones without touching that token's other, intentionally
       fixed, uses elsewhere in the theme. */
    font-size: clamp(1.75rem, 1.29rem + 1.95vw, 2.5rem);
    line-height: 1.1;
    color: var(--color-foreground-heading);
    margin: 0;
    text-wrap: balance;
  }
  .knife-type-guide__grid {
    list-style: none;
    margin: 0;
    padding-block: 0;
    padding-inline: var(--page-margin);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--gap-lg);
  }
  @media screen and (min-width: 750px) {
    .knife-type-guide__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--gap-2xl);
    }
  }
  @media screen and (min-width: 990px) {
    .knife-type-guide__grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .knife-type-guide__card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    height: 100%;
    text-decoration: none;
    color: inherit;
  }
  .knife-type-guide__media {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }
  .knife-type-guide__image {
    width: 100%;
    aspect-ratio: var(--card-ratio, 1);
    object-fit: contain;
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }
  .knife-type-guide__card:hover .knife-type-guide__image {
    transform: scale(var(--hover-subtle-zoom-amount));
  }
  .knife-type-guide__name {
    display: block;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--md);
    color: var(--color-foreground-heading);
    text-wrap: balance;
  }
  .knife-type-guide__for {
    display: block;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    line-height: 1.45;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
    margin-block-start: var(--gap-2xs);
    text-wrap: pretty;
  }

  /* Short, centered rule - just enough to read as "the grid ends here,
     the closing line begins" without drawing a hard full-width seam
     across a full-width section (that would compete with the grid itself). */
  .knife-type-guide__divider {
    width: 64px;
    height: 1px;
    margin: var(--gap-2xl) auto 0;
    border: none;
    background-color: var(--color-border);
  }

  /* Closing flowline: the "why click this" text sits immediately beside
     the button as one adjacent, centered group - not spread to opposite
     edges of a full-width row (see the flex: 0 note below), and not
     pinned to the left either, so the eye moves straight from reason to
     action as a single deliberate close rather than two loose elements.
     A real .button, not a subtle text link - the previous small
     link+arrow was easy to miss. */
  .knife-type-guide__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gap-lg);
    margin-block-start: var(--gap-xl);
    padding-inline: var(--page-margin);
  }
  .knife-type-guide__cta-text {
    /* flex: 0 (not 1) is the fix - a growable flex-basis here was letting
       the text stretch to fill the full-width row, which shoved the
       button all the way to the far edge on wide screens. Capped to its
       own content width so text and button stay next to each other as
       one unit regardless of how wide the section is. */
    flex: 0 1 42ch;
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
    margin: 0;
    max-width: 50ch;
    text-wrap: pretty;
    text-align: left;
  }
/* END_SECTION:knife-type-guide */

/* START_SECTION:labor-day-hero (INDEX:16) */
.labor-day-hero__banner {
    /* ONE number drives the whole desktop banner: its height. Generous and
       unhurried — this is a quiet announcement, not a clearance sale. */
    --hero-h: max(380px, min(34vw, 620px));

    position: relative;
    display: flex;
    height: var(--hero-h);
    overflow: hidden;
    background: var(--labor-day-hero-panel-color);
    text-decoration: none;
    /* Hero and the section below it share the same espresso background
       with zero padding between them (deliberate, so the color reads as
       one continuous block) - without a seam, that reads as an accidental
       gap rather than an intentional edge. A hairline in the same soft
       gold as the copy panel's own rule (.labor-day-hero__rule) closes
       the hero off as a defined banner instead of just trailing into
       empty space. */
    border-bottom: 1px solid var(--labor-day-hero-accent-soft);
  }

  a.labor-day-hero__banner:focus-visible {
    outline: 1px solid var(--labor-day-hero-accent);
    outline-offset: -1px;
  }

  .labor-day-hero__media {
    position: relative;
    display: block;
    /* The frame is locked to the PHOTO'S OWN ratio (emitted from Liquid),
       with its width derived from the banner height — the photo always
       shows in full, whatever its proportions (a 3:2 product shot never
       gets its edges cut off). No border, no shadow, no tilt: the photo
       is left to be the ornament. */
    flex: 1 1 0;
    aspect-ratio: var(--labor-day-hero-photo-ratio, 1.5);
    height: 100%;
    max-width: 58%;
    background: var(--labor-day-hero-panel-color);
  }

  .labor-day-hero__image,
  .labor-day-hero__image--placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: labor-day-hero-fade 0.7s ease-out backwards;
    /* contain, not cover: the photo is never cropped, whatever its
       proportions or the box's — the whole knife always shows. */
    object-fit: contain;
    object-position: center;
  }

  .labor-day-hero__image--placeholder {
    color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.2);
  }

  .labor-day-hero__panel {
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 340px;
    min-width: 320px;
    height: 100%;
    box-sizing: border-box;
    /* Room to breathe: the single biggest signal of restraint. */
    padding: clamp(28px, 7%, 88px) clamp(32px, 8%, 96px);
    gap: calc(var(--hero-h) * 0.026);
    text-align: left;
  }

  /* A quiet rise-and-fade on load, staggered down the copy stack, so the
     banner reads as composed rather than a still frame — brief and
     understated, not a marketing flourish. */
  @keyframes labor-day-hero-rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes labor-day-hero-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* If a visitor's cursor is already resting where the CTA will appear
     (common — it stays put from whatever they last clicked), the ancestor
     link's :hover rule paints the button's filled hover state immediately,
     invisibly, underneath the fade-in, so it visibly pops in already
     "hovered" instead of its normal outline. This second animation holds
     background/text/border at their resting values for the same window as
     the rise animation, so hover can't take visible effect until the
     button has actually finished appearing. */
  @keyframes labor-day-hero-cta-guard {
    from {
      background-color: transparent;
      color: var(--labor-day-hero-heading-color);
      border-color: var(--labor-day-hero-heading-color);
    }
    to {
      background-color: transparent;
      color: var(--labor-day-hero-heading-color);
      border-color: var(--labor-day-hero-heading-color);
    }
  }

  .labor-day-hero__eyebrow,
  .labor-day-hero__heading,
  .labor-day-hero__rule,
  .labor-day-hero__note,
  .labor-day-hero__offer,
  .labor-day-hero__cta {
    animation: labor-day-hero-rise 0.6s cubic-bezier(0.19, 1, 0.22, 1) backwards;
  }

  .labor-day-hero__cta {
    animation:
      labor-day-hero-rise 0.6s cubic-bezier(0.19, 1, 0.22, 1) backwards,
      labor-day-hero-cta-guard 0.6s linear backwards;
  }

  .labor-day-hero__eyebrow {
    animation-delay: 0.05s;
  }

  .labor-day-hero__heading {
    animation-delay: 0.13s;
  }

  .labor-day-hero__rule {
    animation-delay: 0.22s;
  }

  .labor-day-hero__note {
    animation-delay: 0.27s;
  }

  .labor-day-hero__offer {
    animation-delay: 0.34s;
  }

  .labor-day-hero__cta {
    animation-delay: 0.41s;
  }

  @media (prefers-reduced-motion: reduce) {
    .labor-day-hero__eyebrow,
    .labor-day-hero__heading,
    .labor-day-hero__rule,
    .labor-day-hero__note,
    .labor-day-hero__offer,
    .labor-day-hero__cta,
    .labor-day-hero__image,
    .labor-day-hero__image--placeholder {
      animation: none;
    }
  }

  .labor-day-hero__eyebrow {
    font-family: var(--font-body--family);
    font-size: clamp(10px, calc(var(--hero-h) * 0.02), 12px);
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--labor-day-hero-accent);
  }

  .labor-day-hero__heading {
    font-family: var(--font-heading--family);
    font-weight: 500;
    color: var(--labor-day-hero-heading-color);
    font-size: clamp(28px, calc(var(--hero-h) * 0.11), 52px);
    line-height: 1.15;
    letter-spacing: 0.005em;
    margin: 0;
  }

  .labor-day-hero__rule {
    display: block;
    width: clamp(28px, calc(var(--hero-h) * 0.06), 40px);
    height: 1px;
    background: var(--labor-day-hero-accent-soft);
    margin-block: calc(var(--hero-h) * 0.006);
  }

  .labor-day-hero__note {
    font-family: var(--font-body--family);
    font-weight: 400;
    color: var(--labor-day-hero-heading-color);
    font-size: clamp(13px, calc(var(--hero-h) * 0.028), 16px);
    line-height: 1.6;
    opacity: 0.85;
    max-width: 34ch;
  }

  /* The offer, set apart as a bordered tag rather than a plain line of body
     copy — enough visual weight to register as an actual promotion, short
     of a badge or a sticker. */
  .labor-day-hero__offer {
    display: inline-block;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: clamp(12px, calc(var(--hero-h) * 0.026), 15px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--labor-day-hero-accent);
    border: 1px solid var(--labor-day-hero-accent);
    padding: 0.55em 1.1em;
    margin-block-start: calc(var(--hero-h) * 0.008);
  }

  /* A bordered button, filling solid on hover — visibly a clickable
     control, not a caption. */
  .labor-day-hero__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    margin-top: calc(var(--hero-h) * 0.026);
    font-family: var(--font-body--family);
    font-size: clamp(12px, calc(var(--hero-h) * 0.026), 15px);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--labor-day-hero-heading-color);
    border: 1px solid var(--labor-day-hero-heading-color);
    padding: 0.85em 1.7em;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }

  .labor-day-hero__cta-arrow {
    width: 1em;
    height: 0.65em;
    flex: none;
    transition: transform 0.2s ease;
  }

  @media (hover: hover) {
    a.labor-day-hero__banner:hover .labor-day-hero__cta {
      background: var(--labor-day-hero-heading-color);
      color: var(--labor-day-hero-panel-color);
    }

    a.labor-day-hero__banner:hover .labor-day-hero__cta-arrow {
      transform: translateX(3px);
    }
  }

  a.labor-day-hero__banner:focus-visible .labor-day-hero__cta {
    background: var(--labor-day-hero-heading-color);
    color: var(--labor-day-hero-panel-color);
  }

  @media (prefers-reduced-motion: reduce) {
    .labor-day-hero__cta,
    .labor-day-hero__cta-arrow {
      transition: none;
    }
  }

  @media screen and (max-width: 900px) {
    .labor-day-hero__banner {
      /* No forced banner ratio and no fixed height on mobile: the panel is
         as tall as its copy needs and the photo is as tall as its own
         ratio makes it. Nothing is ever cropped. */
      flex-direction: column;
      height: auto;
      min-height: 0;
    }

    .labor-day-hero__media {
      order: 0;
      aspect-ratio: var(--labor-day-hero-photo-ratio-mobile, 1.5);
      flex: none;
      max-width: none;
      width: 100%;
      height: auto;
    }

    .labor-day-hero__panel {
      order: 1;
      flex: none;
      min-width: 0;
      width: 100%;
      height: auto;
      /* Tighter than the desktop panel on purpose: on mobile the panel
         no longer needs to match the photo's height (it's not sharing a
         flex row with it anymore), so it should hug its own copy rather
         than carry the same generous breathing room, which otherwise
         reads as empty space stacked under a full-height photo. */
      padding: 5cqw 7cqw 6cqw;
      gap: 1.6cqw;
    }

    .labor-day-hero__eyebrow {
      font-size: clamp(10px, 2.8cqw, 12px);
    }

    .labor-day-hero__heading {
      font-size: clamp(24px, 8.4cqw, 40px);
    }

    .labor-day-hero__rule {
      width: 8cqw;
    }

    .labor-day-hero__note {
      font-size: clamp(13px, 3.8cqw, 16px);
    }

    .labor-day-hero__offer {
      font-size: clamp(12px, 3.2cqw, 15px);
    }

    .labor-day-hero__cta {
      font-size: clamp(12px, 3.2cqw, 15px);
    }
  }
/* END_SECTION:labor-day-hero */

/* START_SECTION:layered-slideshow (INDEX:17) */
.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:18) */
.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:20) */
.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:21) */
/**
   * Blog posts page layout
   *
   * A fixed, even 3/2/1 column grid (desktop/tablet/mobile). Every card is
   * the same size regardless of how many posts exist, so the layout stays
   * predictable as the blog grows or paginates.
   */
  .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: 48px;
  }

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

  @media screen and (max-width: 989px) {
    .blog-posts-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 749px) {
    .blog-posts-container {
      grid-template-columns: 1fr;
      row-gap: var(--padding-2xl, 32px);
    }
  }

  /**
   * 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:22) */
.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:main-collection (INDEX:24) */
/* Cursor-following SKU tooltip for collection pages (mouse / desktop only). */
  .search-sku-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--layer-window-overlay, 2147483000);
    max-width: 60vw;
    padding: 6px 10px;
    border-radius: var(--style-border-radius-popover, 6px);
    background: var(--color-foreground);
    color: var(--color-background);
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs, 0.75rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-popover, 0 4px 12px rgb(0 0 0 / 0.18));
    will-change: transform;
  }

  .search-sku-tooltip[hidden] {
    display: none;
  }

  @media (hover: none), (pointer: coarse) {
    .search-sku-tooltip {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:marquee (INDEX:26) */
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);
    }

    /* Hover/focus pause is a convenience only. It is NOT the WCAG 2.2.2
       mechanism, contrary to what this comment used to claim: hover does not
       exist on touch, and :focus-within can never fire here because the
       blocks in this marquee render no focusable children (the press logos
       carry no links). The .marquee__motion-toggle button below is the
       actual mechanism. */
    marquee-component:not([data-disabled]):hover .marquee__wrapper,
    marquee-component:not([data-disabled]):focus-within .marquee__wrapper {
      animation-play-state: paused;
    }
  }

  /* WCAG 2.2.2 (Level A): motion lasting more than five seconds needs an
     in-page way to stop it, available to every input method. */
  .marquee__motion-toggle {
    position: sticky;
    left: 0;
    z-index: 1;
    display: inline-block;
    margin-top: var(--gap-sm);
    padding: var(--gap-3xs) var(--gap-sm);
    /* 2.5.8 target size floor */
    min-height: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--style-border-radius-pills);
    background-color: transparent;
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    cursor: pointer;
  }

  /* Stopping the animation with overflow still hidden would strand every logo
     that doesn't fit the container, so the stopped state gets the same manual
     scroll the reduced-motion state uses. The button is sticky so it stays
     put while that scrolls. */
  marquee-component[data-disabled] {
    overflow-x: auto;
  }

  /* Nothing is moving under reduced motion, so there is nothing to stop - and
     that state is already scrollable below. */
  @media (prefers-reduced-motion: reduce) {
    .marquee__motion-toggle {
      display: none;
    }
  }

  /* With the animation off, `overflow: hidden` above leaves the marquee
     showing only whatever fits the container's own width (as little as
     one and a half logos on a phone) with the rest of the row - real
     content, not a decorative repeat - permanently clipped and completely
     unreachable. Manual horizontal scroll is the fallback: it's how a
     reduced-motion visitor gets to see the full row at all. */
  @media (prefers-reduced-motion: reduce) {
    marquee-component {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:password-footer (INDEX:28) */
.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:29) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:product-list-compact (INDEX:34) */
.product-list-compact__header{
    text-align: center;
    padding-bottom: var(--gap-2xl);
  }
  .product-list-compact__eyebrow{
    font-family: var(--font-body--family);
    font-size: 0.8125rem;
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 var(--gap-xs);
  }
  .product-list-compact__heading{
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    color: var(--color-foreground-heading, var(--color-foreground));
    margin: 0;
  }
  .product-list-compact__list{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .product-list-compact__row{
    border-bottom: 1px solid var(--color-border);
  }
  .product-list-compact__row:first-child{
    border-top: 1px solid var(--color-border);
  }
  .product-list-compact__link{
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    padding-block: var(--gap-md);
    padding-inline-end: var(--gap-md);
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.25s ease-out;
  }
  .product-list-compact__link:hover{
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
  .product-list-compact__thumbs{
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }
  /* flex: none rather than a flex-basis, because these thumbs sit in a column
     on mobile and a row on desktop - a basis would mean height in one and
     width in the other, and on mobile it silently overrode aspect-ratio and
     painted every 3:2 photo inside a 7rem square. Width + aspect-ratio sizes
     the box the same way in both directions. */
  .product-list-compact__thumb{
    flex: none;
    width: 7rem;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    display: block;
  }
  .product-list-compact__thumb--secondary{
    display: block;
  }
  @media screen and (min-width: 700px){
    .product-list-compact__thumbs{
      flex-direction: row;
    }
    .product-list-compact__thumb{
      width: 13rem;
    }
  }
  .product-list-compact__thumb img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .product-list-compact__content{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    min-width: 0;
  }
  .product-list-compact__badge{
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    color: var(--color-primary-button-text);
    background-color: var(--color-primary);
    border-radius: var(--style-border-radius-pills);
    padding: var(--gap-3xs) var(--gap-sm);
    margin-bottom: var(--gap-3xs);
  }
  .product-list-compact__title{
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1.125rem;
    color: var(--color-foreground-heading, var(--color-foreground));
  }
  .product-list-compact__price{
    font-family: var(--font-body--family);
    font-size: 1rem;
    color: var(--color-primary);
  }
  .product-list-compact__desc{
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  .product-list-compact__view{
    display: inline-flex;
    align-items: center;
    gap: var(--gap-3xs);
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-top: var(--gap-2xs);
    transition: gap 0.25s ease-out;
  }
  .product-list-compact__link:hover .product-list-compact__view{
    gap: var(--gap-xs);
    color: var(--color-primary-hover);
  }
  .product-list-compact__cta{
    display: flex;
    justify-content: center;
    padding-top: var(--gap-2xl);
  }
  .product-list-compact__cta .button{
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
  }
  .product-list-compact__cta .button::after{
    content: '\2192';
  }
/* END_SECTION:product-list-compact */

/* START_SECTION:product-list (INDEX:35) */
.section-background__photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.4) saturate(0.85);
  }

  .section-background__gleam {
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse 900px 500px at 12% -8%, rgb(200 169 106 / 0.22), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 110%, rgb(200 169 106 / 0.14), transparent 55%);
    background-repeat: no-repeat;
    pointer-events: none;
  }
/* END_SECTION:product-list */

/* START_SECTION:quick-order-list (INDEX:37) */
.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-85);
    }

    .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:search-results (INDEX:39) */
/* Cursor-following SKU tooltip for search results (mouse / desktop only). */
  .search-sku-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--layer-window-overlay, 2147483000);
    max-width: 60vw;
    padding: 6px 10px;
    border-radius: var(--style-border-radius-popover, 6px);
    background: var(--color-foreground);
    color: var(--color-background);
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs, 0.75rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-popover, 0 4px 12px rgb(0 0 0 / 0.18));
    will-change: transform;
  }

  .search-sku-tooltip[hidden] {
    display: none;
  }

  /* Belt-and-braces: never show on touch devices even if the node exists. */
  @media (hover: none), (pointer: coarse) {
    .search-sku-tooltip {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }
/* END_SECTION:search-results */

/* START_SECTION:services-feature (INDEX:42) */
/* The band is painted on .section-background, not on .section: base.css resets
     .section's background to transparent at (0,3,0), which no rule here can
     outrank. Both selectors below are compound on purpose - the helper carries a
     .color-scheme-* class, and those set background-color/color at (0,1,0), so a
     single-class rule would tie and lose on source order. background-image is
     reset because the scheme also paints a cream-tuned wash over the fill. */
  .section-background.services-feature__bg{
    background-color: var(--color-primary);
    background-image: none;
  }
  .section.services-feature{
    color: var(--color-background);
  }
  .services-feature__inner{
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xl);
  }
  @media screen and (min-width: 750px){
    .services-feature__inner{
      flex-direction: row;
      align-items: flex-start;
      gap: var(--gap-3xl);
    }
    .services-feature__statement{
      flex: 0 0 34%;
    }
    .services-feature__list{
      flex: 1;
    }
  }
  .services-feature__eyebrow{
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    color: rgb(var(--color-background-rgb) / var(--opacity-70));
    margin: 0 0 var(--gap-sm);
  }
  .services-feature__heading{
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    /* Local clamp instead of the shared --font-size--4xl token (see the
       matching note in collection-list.liquid) - scales this H2 down on
       narrow phones without touching that token's other, intentionally
       fixed, uses elsewhere in the theme. */
    font-size: clamp(1.75rem, 1.29rem + 1.95vw, 2.5rem);
    line-height: 1.1;
    color: var(--color-background);
    margin: 0;
    text-wrap: balance;
  }
  /* No max-width here: the column already sets the measure, and capping it again
     produced a ragged rag with a one-word last line. text-wrap: pretty keeps the
     paragraph off orphans, matching the balanced heading above it. */
  .services-feature__body{
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    line-height: 1.6;
    color: rgb(var(--color-background-rgb) / var(--opacity-80));
    margin: var(--gap-lg) 0 0;
    text-wrap: pretty;
  }
  .services-feature__list{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .services-feature__row{
    border-top: 1px solid rgb(var(--color-background-rgb) / var(--opacity-20));
  }
  .services-feature__row:last-child{
    border-bottom: 1px solid rgb(var(--color-background-rgb) / var(--opacity-20));
  }
  .services-feature__link{
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
    padding-block: var(--gap-md);
    text-decoration: none;
    color: inherit;
    transition: padding-inline var(--hover-transition-duration) var(--hover-transition-timing);
  }
  .services-feature__link:hover{
    padding-inline: var(--gap-sm);
  }
  /* The icon and the kanji occupy the same box rather than sitting side by side:
     the kanji reads as a watermark behind the mark, so the row keeps one visual
     anchor instead of two competing ones. */
  /* .mark is a fixed slot, the same size on every row regardless of what's
     inside it - this is what keeps row height, divider spacing, and the arrow
     column aligned across all three rows. It's sized to fit the largest case
     (engraving, below). Per-service visual size lives entirely on
     .mark-inner, which the earlier version conflated with this element: sizing
     the slot itself per row made each li a different height and broke the
     list's rhythm - the dividers no longer lined up and the arrows floated at
     different heights. Centering the inner element in a shared larger slot
     fixes that without giving up the size difference. */
  /* Slot height is the single biggest driver of row height, and at 9rem
     desktop it was making the whole section run to a full screen of scroll.
     Shrunk roughly a third across the board (mobile and desktop, slot and
     inner) - same 1x/2x/1.2x ratios between the three services, just a
     smaller absolute footprint. */
  .services-feature__mark{
    flex: 0 0 7.5rem;
    width: 7.5rem;
    height: 4.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media screen and (min-width: 750px){
    .services-feature__mark{
      flex-basis: 11rem;
      width: 11rem;
      height: 6rem;
    }
  }
  /* Deliberately wider than tall. The source artwork is landscape - the knife is
     several times wider than it is tall - so a square box made `contain` scale
     to the width and collapse the height, which is what shrank the icons to
     slivers in an earlier pass. A wide box gives that artwork its long axis to
     grow along. Sizes below are visual size, independent of the slot:
     1 sharpening = the original baseline size, 2 engraving = 2x that
     baseline (fills the slot), 3 handle = ~1.2x. */
  .services-feature__mark-inner{
    position: relative;
    width: 3.75rem;
    height: 2.25rem;
  }
  @media screen and (min-width: 750px){
    .services-feature__mark-inner{
      width: 5.5rem;
      height: 3rem;
    }
  }
  .services-feature__mark-inner--2{
    width: 7.5rem;
    height: 4.5rem;
  }
  .services-feature__mark-inner--3{
    width: 4.5rem;
    height: 2.7rem;
  }
  @media screen and (min-width: 750px){
    .services-feature__mark-inner--2{
      width: 11rem;
      height: 6rem;
    }
    .services-feature__mark-inner--3{
      width: 6.6rem;
      height: 3.6rem;
    }
  }
  /* Phone tier. The 7.5rem slot is a fixed, non-shrinking 120px, so on a
     320px screen the decorative mark ended up wider than the copy it
     decorates: 120px of watermark against an 84px text column, which wrapped
     the one-line service descriptions to six lines. Halving the slot and
     tightening the row gap here roughly doubles that column. The 1x/2x/1.2x
     size relationship between the three marks is preserved - every inner
     size below is the desktop-baseline value scaled by the same factor as
     the slot. */
  @media screen and (max-width: 480px){
    .services-feature__link{
      gap: var(--gap-sm);
    }
    .services-feature__mark{
      flex-basis: 4rem;
      width: 4rem;
      height: 2.4rem;
    }
    .services-feature__mark-inner{
      width: 2rem;
      height: 1.2rem;
    }
    .services-feature__mark-inner--2{
      width: 4rem;
      height: 2.4rem;
    }
    .services-feature__mark-inner--3{
      width: 2.4rem;
      height: 1.44rem;
    }
  }
  .services-feature__kanji{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size--2xl);
    line-height: 1;
    color: rgb(var(--color-background-rgb) / var(--opacity-20));
    transition: color var(--hover-transition-duration) var(--hover-transition-timing);
  }
  @media screen and (min-width: 750px){
    .services-feature__kanji{
      font-size: var(--font-size--3xl);
    }
  }
  /* The source artwork is black line art meant for a cream page; this flips it to
     the band's own foreground so it reads on the indigo without new assets. Full
     opacity: at this size the detail in the engraving mark is the whole point. */
  .services-feature__icon{
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }
  .services-feature__link:hover .services-feature__icon{
    transform: scale(1.04);
  }
  .services-feature__link:hover .services-feature__kanji{
    color: rgb(var(--color-background-rgb) / var(--opacity-40));
  }
  .services-feature__content{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    min-width: 0;
  }
  .services-feature__title{
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--xl);
    color: var(--color-background);
  }
  .services-feature__text{
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    line-height: 1.5;
    color: rgb(var(--color-background-rgb) / var(--opacity-80));
  }
  .services-feature__arrow{
    flex: 0 0 auto;
    font-size: var(--font-size--xl);
    color: var(--color-background);
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }
  .services-feature__link:hover .services-feature__arrow{
    transform: translateX(var(--gap-xs));
  }
/* END_SECTION:services-feature */

/* START_SECTION:slideshow (INDEX:43) */
.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:welcome-story (INDEX:44) */
.welcome-story__inner{
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xl);
  }
  @media screen and (min-width: 750px){
    .welcome-story__inner{
      flex-direction: row;
      align-items: stretch;
      gap: var(--gap-3xl);
    }
    .welcome-story__media{
      flex: 0 0 45%;
    }
    .welcome-story__content{
      flex: 1;
      align-self: center;
    }
  }
  .welcome-story__media{
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
  }
  .welcome-story__image{
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  .welcome-story__eyebrow{
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing-md);
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 var(--gap-sm);
  }
  .welcome-story__heading{
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    /* Local clamp instead of the shared --font-size--4xl token (see the
       matching note in collection-list.liquid) - scales this H2 down on
       narrow phones without touching that token's other, intentionally
       fixed, uses elsewhere in the theme. */
    font-size: clamp(1.75rem, 1.29rem + 1.95vw, 2.5rem);
    line-height: 1.1;
    color: var(--color-foreground-heading);
    margin: 0 0 var(--gap-lg);
    text-wrap: balance;
  }
  .welcome-story__lead{
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    line-height: 1.6;
    color: var(--color-foreground);
    margin: 0;
    text-wrap: pretty;
  }
  .welcome-story__quote{
    position: relative;
    margin: var(--gap-xl) 0;
    padding-inline-start: var(--gap-lg);
    border-inline-start: 2px solid var(--color-primary);
    overflow: hidden;
  }
  /* Decorative watermark, not content - hidden from screen readers. Large and
     faint so it reads as texture behind the quote rather than a second
     heading competing with it. */
  .welcome-story__quote-mark{
    position: absolute;
    top: -0.5rem;
    right: 0;
    font-size: var(--font-size--4xl);
    line-height: 1;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    pointer-events: none;
    user-select: none;
  }
  .welcome-story__quote-text{
    position: relative;
    font-family: var(--font-heading--family);
    font-style: italic;
    font-size: var(--font-size--lg);
    line-height: 1.5;
    color: var(--color-foreground-heading);
    margin: 0;
    text-wrap: pretty;
  }
  .welcome-story__closing{
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    line-height: 1.6;
    color: var(--color-foreground);
    margin: 0 0 var(--gap-lg);
    text-wrap: pretty;
  }
/* END_SECTION:welcome-story */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:45) */
/* Lets accordion-custom.js scroll the whole group to the top of the
     viewport when a row opens (see #handleToggle) without the sticky
     header covering it once it gets there. On [data-open-first-row]
     itself, not a row inside it — that's the element #handleToggle
     actually calls scrollIntoView on, so every row's heading stays
     reachable regardless of which one opened, and scroll-margin only
     applies to the element being scrolled into view, not a descendant
     of it.

     --padding-2xl on top of the header height, not just the header height
     alone: landing the group flush against the underside of the header
     read as cramped, with the first row's divider touching the header's
     own bottom edge. This gives the scroll a resting point with some air
     under the header instead of jamming the content against it. */
  [data-open-first-row] {
    scroll-margin-top: calc(var(--header-height, 0px) + var(--padding-2xl));
  }

  /* One duration for the whole open/close gesture — header collapse,
     caret rotation and roundel, and the panel reveal below all read off
     this instead of each independently referencing --animation-speed-slow
     (0.2s, the same token dozens of unrelated site transitions share).
     Scoped to rows with a .details__header, not to accordion-custom in
     general, so filter and menu accordions elsewhere in the theme are
     untouched. Slower than the shared default on purpose: 0.2s read as a
     twitch for a reveal this size, where the header is handing its whole
     44px off to the panel — 0.32s gives that handoff room to actually be
     seen happening rather than just registering as a jump-cut. */
  details:has(> summary.details__header) {
    --accordion-duration: 0.32s;
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }

  /* The "Chevron" icon option reuses the same animated caret the row's own
     open/close control uses on the right (.icon-caret.icon-animated,
     including its rotate-on-open and roundel-background rules above and in
     base.css) instead of a static glyph, so a shopper sees one consistent
     affordance instead of a still arrow on one side and a moving chevron on
     the other. inline-flex + centered alignment is needed here because the
     other icon options render their svg directly as summary's flex child;
     this one adds a wrapping span for the animation classes, which would
     otherwise sit at the span's default inline baseline instead of centered
     against the heading text beside it. */
  .details__icon--chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The left chevron already tells the open/close story on its own, so the
     row's usual right-side indicator (whichever of .icon-caret / .icon-plus
     the parent accordion's own icon style shows — see
     .accordion--caret/.accordion--plus in blocks/accordion.liquid) would be
     a second, redundant affordance saying the same thing twice. Scoped to
     :has(.details__icon--chevron) so only rows that opted into the left
     chevron lose their right-side icon; every other accordion row in the
     theme keeps it. */
  .details__header:has(.details__icon--chevron) .svg-wrapper.icon-caret,
  .details__header:has(.details__icon--chevron) .svg-wrapper.icon-plus {
    display: none;
  }

  /* An open row keeps its heading in place rather than hiding it — a
     shopper scanning the page needs a label for whichever row's content
     they're looking at, and the row directly above (still closed) reads as
     that label otherwise, since there's nothing telling the two apart.
     Restoring the heading fixes that at the source instead of leaving the
     ambiguity for a divider to paper over. The header keeps its normal
     height, padding and layout in both states — nothing here overrides
     summary's own flow, so heading, icon and caret sit exactly as they do
     closed. */
  details[open] > summary.details__header {
    border-block-end: var(--style-border-width) solid var(--color-border);
  }

  /* Matches the summary's own bottom padding (--padding-sm, from base.css)
     so the gap above the divider and the gap below it read as the same
     rhythm rather than the content starting flush against the line. */
  details[open] > .details-content {
    padding-block-start: var(--padding-sm);
  }

  /* A visible roundel once open, not just a bare caret — it marks the
     control as active/expanded rather than leaving it to blend into the
     heading beside it. The scale keeps the same transparent-to-visible
     transition in both motion settings — only the "grows into place"
     motion itself is skipped for reduced-motion, matching the convention
     used elsewhere in base.css (e.g. the product card hover lift/scale). */
  details > summary.details__header .icon-caret.icon-animated {
    border-radius: 50%;
    background-color: transparent;
    transition: background-color var(--accordion-duration) var(--ease-out-quad);
  }

  details[open] > summary.details__header .icon-caret.icon-animated {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  @media (prefers-reduced-motion: no-preference) {
    details > summary.details__header .icon-caret.icon-animated {
      transform: scale(0.7);
      transition: background-color var(--accordion-duration) var(--ease-out-quad),
        transform var(--accordion-duration) var(--ease-out-quad);
    }

    details[open] > summary.details__header .icon-caret.icon-animated {
      transform: scale(1);
    }
  }

  /* The caret's rotation is base.css's, at --animation-speed (0.125s) —
     three quarters of the way through it the panel is still moving, so
     the arrow lands early and the row finishes in two beats. This was
     meant to re-time it to the panel's own duration and curve so the
     whole row reads as one gesture, but targeted .svg-wrapper — the span
     that wraps the icon, not the svg base.css actually rotates
     (`.icon-animated > svg { transform: rotate(180deg) }`). The wrapper
     has no transform of its own, so this rule was inert: verified by
     rendering the row and sampling both elements' computed
     transition-duration through a real open/close, where the svg held at
     base.css's 0.125s regardless of what this selector said. Retargeted
     to the element base.css's own selector (`.icon-caret svg`) actually
     matches, so this is the first time the override has taken effect.
     Re-sampled the same way afterward: caret, header and panel now finish
     within the same ~30ms window instead of the caret landing 60-80ms
     ahead of the row settling under it. Scoped to .details__header, which
     only content accordion rows use, leaving the filter/menu/cart carets
     alone. */
  details > summary.details__header .icon-caret svg {
    transition: transform var(--accordion-duration) var(--ease-out-quad);
  }

  /* Only one box should animate the open/close. Chrome 131+ supports
     ::details-content, so the shared rules in
     snippets/accordion-custom-component.liquid end up running the same
     0-to-auto transition twice: once on that pseudo-element wrapper and
     again on the .details-content div inside it. Measured mid-expand, the
     pseudo was 20px tall while the div already believed it was 88px — the
     div's height animation was being clipped by a second, independently
     eased one on top of it, at double the per-frame layout cost. The
     opacity fades compounded too (0.5 x 0.5 = 0.25 rendered), which is
     what made content look like it popped in late rather than fading.

     The pseudo wraps everything and is what the browser natively shows
     and hides, so it keeps the animation and this div goes inert. In a
     browser without ::details-content support the row still opens and
     closes correctly, just without the transition. */
  summary.details__header + .details-content {
    block-size: auto;
    opacity: 1;
    overflow-y: visible;
    transition: none;
  }

  /* Matched to :focus-within on purpose. The shared component disables
     transitions on any details that isn't focus-within, so that rows
     opened programmatically (default-open, the theme editor, the mobile
     filter panel) snap rather than animate on load. Qualifying this the
     same way means it only ever overrides the interactive case and that
     rule still wins for the rest.

     padding-block is back in this list — the shared component transitions
     it too, but a `transition:` shorthand fully replaces the winning
     declaration's property list rather than adding to it, so this override
     was silently dropping it from the interactive case. The open row's
     padding-block-start (added a few rules up, for the gap below the
     header's divider) was stepping in instantly while height and opacity
     eased around it — one abrupt cut inside an otherwise smooth reveal. */
  details:has(> summary.details__header):focus-within::details-content,
  /* Same override, extended to every row in a single-open group
     (accordion-custom.js's #handleToggle) once a shopper has driven it at
     least once. Closing the previously-open row there is a script setting
     `open = false` on a row that was never focused — focus is on the row
     the shopper actually clicked instead — so :focus-within alone would
     make it flash shut rather than ease closed. data-accordion-interacted
     only ever gets set as a direct result of that click, never on page
     load, so this can't undo the "don't animate on load" intent above. */
  [data-accordion-interacted] details:has(> summary.details__header)::details-content {
    transition: content-visibility var(--accordion-duration) allow-discrete,
      padding-block var(--accordion-duration) var(--ease-out-quad),
      opacity var(--accordion-duration) var(--ease-out-quad),
      block-size var(--accordion-duration) var(--ease-out-quad);
  }

  @media (prefers-reduced-motion: reduce) {
    details:has(> summary.details__header):focus-within::details-content,
    [data-accordion-interacted] details:has(> summary.details__header)::details-content {
      transition: none;
    }
  }

  /* Set here rather than left to each block's own top padding, which
     varies per block in the editor (the description text block carries
     15px, the spec list none) and would make one open row sit lower than
     the next for no reason a shopper could see. */
  details[open] > .details-content > :first-child {
    --padding-block-start: 0px !important;
  }
/* END_BLOCK:_accordion-row */

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

  /* Single overlay link covers the whole card (ADA: one link per card) */
  .blog-post-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

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

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

  .blog-post-card:has(.blog-post-card__link:hover) .blog-post-card__heading,
  .blog-post-card:has(.blog-post-card__link:hover)
    .blog-post-card__heading
    [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

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

  .blog-post-card:has(.blog-post-card__link:hover)
    .blog-post-card__heading
    [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:48) */
.blog-post-content {
    /* Wider than --normal-content-width (42rem/672px), which was cramping
       both the prose and every inline image into a narrow column. Text and
       images share this one measure so the page reads as one cohesive
       column instead of jumping between wildly different widths. */
    max-width: 54rem;
    margin: 0 auto;
  }

  .blog-post-content :is(img, video, iframe) {
    margin-block: 1.5rem;
  }
/* END_BLOCK:_blog-post-content */

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

  .blog-post-card__read-more {
    text-decoration: underline;
  }

  .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:50) */
.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:51) */
/**
   * Aspect ratios match the site's 3:2 photography so cards scale the image
   * instead of cropping it. "Height" still controls how tall the crop area
   * reads relative to the card, but never forces a mismatched ratio.
   */
  .blog-post-card__image {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    aspect-ratio: var(--blog-post-card-img-ratio, 3 / 2);
  }

  .blog-post-card__image--small {
    --blog-post-card-img-ratio: 1 / 1;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-ratio: 4 / 3;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-ratio: 3 / 2;
  }

  @media screen and (max-width: 749px) {
    .blog-post-card__image {
      --blog-post-card-img-ratio: 3 / 2;
    }
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:52) */
.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:53) */
.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:54) */
.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:55) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:56) */
.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:57) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

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

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

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

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

/* START_BLOCK:_collection-image (INDEX:60) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: contain;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:62) */
.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:66) */
.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:67) */
.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:69) */
.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:72) */
.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:73) */
.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:74) */
.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-categories (INDEX:75) */
/* A panel opened before its body has been hydrated in. Give it a floor so it
     doesn't open as a hairline sliver while the section is in flight. This one
     panel rule stays inline rather than moving to menu-categories-panel.css,
     because it is the only panel state that can be on screen before that file
     has necessarily loaded. */
  .menu-categories__panel[data-pending] {
    min-height: 40vh;
  }
.menu-categories {
    position: relative;
    display: block;

    /* A matched ease-out/ease-in pair shared by every open/close/swap
       animation in this component. Entrances use the ease-out curve (fast
       start, gentle settle); exits use the ease-in curve (gentle start,
       fast departure) so an outgoing and incoming element animating at the
       same time read as one continuous motion instead of two animations
       that happen to overlap. */
    --menu-categories-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --menu-categories-ease-in: cubic-bezier(0.4, 0, 1, 1);

    /* Shared elevation tokens so every card type (product tile, icon card,
       Shop feature card) and the outer panel lift with the same vocabulary
       instead of each carrying its own ad-hoc shadow value. */
    --menu-categories-shadow-panel: 0 32px 64px -24px rgb(0 0 0 / 0.55);
    --menu-categories-shadow-card-resting: inset 0 0 0 1px rgb(255 255 255 / 0.07);
    --menu-categories-shadow-card-hover: 0 14px 28px -14px rgb(0 0 0 / 0.4);
    /* Same shadow shape as the hover layer, just fully transparent. Keeping the
       same number of box-shadow layers in both states lets the browser
       interpolate the transition instead of snapping it instantly. */
    --menu-categories-shadow-card-hover-off: 0 14px 28px -14px rgb(0 0 0 / 0);
  }

.menu-categories__list {
    display: flex;
    align-items: center;
    gap: var(--menu-horizontal-gap, 1.5rem);
  }

.menu-categories__link {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-family: var(--font-accent--family, var(--font-body--family));
    font-size: var(--font-size--sm, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-foreground);
    text-decoration: none;
    padding-block: var(--padding-sm);

    &:hover {
      color: var(--color-primary);
    }

    &:focus-visible {
      outline: var(--focus-outline-width, 2px) solid var(--color-primary);
      outline-offset: var(--focus-outline-offset, 2px);
      border-radius: 2px;
    }

    /* Shared hover cue: a gold hairline wipes in under the label. Fixed to
       the accent colour (not currentColor) so the bar doesn't animate its
       colour along with the label's gold shift. */
    &::after {
      content: '';
      position: absolute;
      inset-inline: 0;
      bottom: 2px;
      height: 1px;
      background-color: var(--color-primary);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 280ms var(--menu-categories-ease, ease);
    }

    &:hover::after,
    &:focus-visible::after,
    &[aria-expanded='true']::after {
      transform: scaleX(1);
    }
  }

/* The grouped "Shop" opener is a <button> (it has no destination of its
     own — it only opens a panel), so strip the UA button chrome and align it
     to the plain-link siblings. The other top-level items stay real <a> links
     that work without JS, so they need no reset. */
  .menu-categories__link--toggle {
    appearance: none;
    margin: 0;
    padding-inline: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: inherit;
  }

.menu-categories__link[aria-expanded='true'] {
    color: var(--color-primary);
  }

/* Promo treatment: gold uppercase tracked text for time-limited offers.
     HOW TO USE (for menu editors): list the link's exact title in the
     "Promo / sale links" setting -- e.g. "Independence Day Sale". Text
     renders uppercase here regardless of how it's typed in Shopify admin.
     No fill/shadow/pill shape — keeps the same quiet, hairline-driven
     restraint as the rest of this menu instead of reading as a loud
     "Sale!" badge. */
  .menu-categories__link--promo {
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--font-size--sm, 0.875rem);

    /* The text is already gold at rest, so the hover colour change the other
       links use wouldn't show here — the shared underline sweep (inherited
       from .menu-categories__link) is the hover cue. */
    &:hover,
    &:focus-visible {
      color: var(--color-primary);
    }
  }

/* A hairline sets the promo item apart from the regular category links
     around it (e.g. "SUMMER SALE | Shop Knives"), so the gold text doesn't
     just read as one more nav item. Whichever side faces the rest of the
     menu gets the divider; a promo item first in the list divides on its
     trailing side instead, since there's nothing before it to divide from. */
  .menu-categories__item--promo {
    position: relative;
  }

.menu-categories__item--promo:not(:first-child) {
    padding-inline-start: var(--menu-horizontal-gap, 1.5rem);
  }

.menu-categories__item--promo:not(:first-child)::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block: 4px;
    width: 1px;
    /* --color-border-rgb reads as a near-invisible hairline on dark schemes,
       where it's tuned to sit quietly against the background rather than
       stand out -- the opposite of what a divider needs. Foreground at low
       opacity keeps contrast against light and dark backgrounds alike. */
    background-color: rgb(var(--color-foreground-rgb) / 0.35);
  }

.menu-categories__item--promo:first-child {
    padding-inline-end: var(--menu-horizontal-gap, 1.5rem);
  }

.menu-categories__item--promo:first-child::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    inset-block: 4px;
    width: 1px;
    /* --color-border-rgb reads as a near-invisible hairline on dark schemes,
       where it's tuned to sit quietly against the background rather than
       stand out -- the opposite of what a divider needs. Foreground at low
       opacity keeps contrast against light and dark backgrounds alike. */
    background-color: rgb(var(--color-foreground-rgb) / 0.35);
  }

/* The nav lives in a narrow, centered header column, so the panel is fixed
     to the viewport (JS pins its top edge to the header's bottom) to span the
     full screen width. The inner content is then centered and capped so it
     scales with the display instead of hugging the centered nav. */
  .menu-categories__panel {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: var(--layer-header-menu, 50);
    background: rgb(var(--color-background-rgb));
    border-top: 1px solid rgb(var(--color-border-rgb) / 0.6);
    /* Outer lift shadow plus a faint gold hairline just inside the panel's
       full edge -- a quiet "museum vitrine" frame that doesn't compete with
       the top/bottom scroll-fade overlays (::before/::after below), since an
       inset box-shadow paints on the border box regardless of their stacking. */
    box-shadow: var(--menu-categories-shadow-panel), inset 0 0 0 1px rgb(var(--color-primary-rgb) / 0.12);
  }

/* Switching from one already-open panel to another: the new panel takes the
     same fixed position, so the slide-down entrance reads as a flash. Show it
     instantly instead, so it feels like the panel's content simply changed. */
  .menu-categories__panel[data-switch]:not([hidden]) {
    animation: none;
  }

@keyframes menu-panel-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@keyframes menu-panel-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

/* Crossfade used when one piece of content (a sub-category grid, or a
     drilled-into Shop level) replaces another in place: the outgoing element
     plays menu-content-out while the incoming element plays the mirrored
     menu-content-in, both for the same duration, so the two animations
     finish at the same instant and read as one continuous motion — the old
     content settles down out of place exactly as the new content rises up
     into it — rather than two animations that happen to overlap. */
  @keyframes menu-content-in {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.992);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

@keyframes menu-content-out {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(4px) scale(0.992);
    }
  }

/* --- Designed scroll affordance: gold progress line + edge fades --------- */

  /* Positioning wrapper, matched to .menu-categories__panel-inner's centered,
     capped box (same width + auto margins) so the line hugs the *content's*
     right edge rather than the full-bleed panel's. Inset from the top/bottom
     so it floats inside the menu. Only shown once the panel actually overflows
     (JS toggles [data-scrollable] on the panel). */
  .menu-categories__scroll-progress {
    position: absolute;
    inset-block: var(--padding-xl);
    inset-inline: 0;
    width: min(1680px, 92vw);
    margin-inline: auto;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms var(--menu-categories-ease);
    z-index: 2;
  }

/* Faint full-height track pinned to the wrapper's inner right edge (where the
     scrollbar gutter used to be). ::before so it paints under the fill child. */
  .menu-categories__scroll-progress::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--padding-sm);
    width: 3px;
    border-radius: 999px;
    background: rgb(var(--color-primary-rgb) / 0.14);
  }

/* The gold fill: a "you are here" marker that grows top→bottom as the panel
     scrolls. Non-interactive; JS sets scaleY(0..1) from the scroll position. */
  .menu-categories__scroll-progress-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--padding-sm);
    width: 3px;
    border-radius: 999px;
    background: rgb(var(--color-primary-rgb) / 0.85);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 120ms linear;
  }

/* Eyebrow above the sidebar, naming it as the by-product way in. Matches
     the shop rail's eyebrow so the two columns read as siblings. */
  .menu-categories__sidebar-heading {
    margin: 0 0 var(--padding-xs, 0.5rem);
    padding-inline-start: var(--padding-sm);
    font-size: var(--font-size--2xs, 0.75rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.5);
  }

/* Optional one-line orientation cue under a dense category's heading,
     authored per-category by the merchant (category_subtitles setting). */
  /* Tighten the trail onto the subtitle it introduces, so the two read as one
     header block rather than two separately-spaced rows. */
  .menu-categories__breadcrumb:has(+ .menu-categories__subtitle) {
    margin-bottom: var(--padding-2xs, 0.375rem);
  }

.menu-categories__subtitle {
    margin: 0 0 var(--padding-lg);
    max-width: 56ch;
    font-size: var(--font-size--sm, 0.875rem);
    line-height: 1.45;
    color: rgb(var(--color-foreground-rgb) / 0.78);
  }

/* Titled header for the sectioned-grid layout, which is the one panel with
     no sidebar to name where you are -- see the note in
     menu-categories-panel.liquid. */
  .menu-categories__panel-head {
    margin-bottom: var(--padding-lg);
  }

/* Quiet "need help choosing?" footer link, shown only in dense panels when
     the merchant points it at a buying-guide page (help_cta_url setting). */
  .menu-categories__help {
    margin-top: var(--padding-md);
    padding-top: var(--padding-md);
    /* Inset from the column's trailing padding so the hairline reads as a rule
       under the list rather than a stub colliding with the column divider. */
    margin-inline: var(--padding-sm) 0;
    border-top: 1px solid rgb(var(--color-border-rgb) / 0.6);
  }

.menu-categories__help-link {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-2xs, 0.375rem);
    color: var(--color-primary);
    font-size: var(--font-size--sm, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;

    &:hover .menu-categories__help-arrow,
    &:focus-visible .menu-categories__help-arrow {
      transform: translateX(3px);
    }

    &:focus-visible {
      outline: var(--focus-outline-width, 2px) solid var(--color-primary);
      outline-offset: var(--focus-outline-offset, 2px);
      border-radius: 2px;
    }
  }

.menu-categories__help-arrow {
    transition: transform 200ms var(--menu-categories-ease);
  }

.menu-categories__body {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: var(--padding-2xl, 2rem);
    align-items: start;
  }

/* The sub-category column as a whole: the list, plus whatever belongs at its
     foot (the "need help choosing?" link). Carries the dividing rule and the
     column's trailing padding, which used to sit on the list itself — so the
     rule now runs past the last link rather than stopping at it. */
  .menu-categories__aside {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-inline-end: 1px solid rgb(var(--color-border-rgb) / 0.6);
    padding-inline-end: var(--padding-lg);
  }

/* `data-selected` (not aria-selected) marks the active sub-category tab:
     aria-selected is only valid on tab/option/row roles, and these are plain
     navigational links, so a data-attribute carries the visual state without
     asserting an ARIA role the element doesn't have. The truly-current page
     still uses aria-current="page" separately. */
  .menu-categories__sidebar-link[data-selected='true'] {
    background-color: rgb(var(--color-primary-rgb) / 0.1);
    color: var(--color-primary);
    font-weight: 600;
  }

/* Self-contained badge chip. The base style is otherwise only defined in
     _header-menu.liquid (the classic megamenu), which is NOT rendered in this
     layout — so without this rule the badge would render as plain, unstyled
     text. The label text itself comes from the (now-visible) accessibility
     string in menu-categories-panel.liquid, so screen readers announce
     exactly what's printed on the chip. */
  .menu-categories .mega-menu__badge {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    margin-inline-start: var(--padding-2xs, 0.375rem);
    border-radius: 50%;
    background-color: var(--color-primary);
    vertical-align: middle;
    transform: translateY(-1px);
  }

/* The sidebar link is a space-between flex row ([title][badge][chevron]), so
     without this the dot would be flung into the middle of the row, detached
     from the label it belongs to. Pushing the free space to the dot's trailing
     edge keeps title and dot together at the start and leaves the chevron at
     the end. The row's own `gap` provides the spacing, so the inline margin
     above is cancelled here. */
  .menu-categories__sidebar-link .mega-menu__badge {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

.menu-categories__chevron {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.6;
  }

/* The Shop button has no arrival state of its own -- unlike the other
     top-level items, which are real links to a page, it only ever opens a
     panel -- so it needs its own visual cue that it's expandable. Same
     corner-border trick as the drilldown chevron above, just rotated to
     point down (a dropdown "v") instead of right, and nudged off the
     label with a small gap since this row has no flex `gap` of its own. */
  .menu-categories__chevron--nav {
    transform: rotate(45deg);
    margin-inline-start: 5px;
  }

/* Full-width row at the top of a grid, carrying that grid's "where am I"
     label (and, for a drilled-in grid, the way back to the picture tiles).
     Lives inside the grid rather than above it because selectCategory only
     toggles .menu-categories__grid elements — see the note in
     menu-categories-panel.liquid. Spans every column so the tiles below
     still start on a clean row. */
  .menu-categories__group-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--padding-xs, 0.5rem);
    min-height: 0;
    margin-bottom: var(--padding-xs, 0.5rem);
  }

.menu-categories__group-eyebrow {
    font-size: var(--font-size--2xs, 0.75rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.5);
  }

.menu-categories__group-title {
    font-size: var(--font-size--sm, 0.875rem);
    color: rgb(var(--color-foreground-rgb) / 0.9);
  }

/* Sits before the title as "‹ Back  |  Protect It", so the way out and the
     current location read as one line rather than two competing controls. */
  .menu-categories__group-back {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-2xs, 0.375rem);
    padding: var(--padding-2xs, 0.375rem) var(--padding-xs, 0.5rem);
    margin-inline-start: calc(var(--padding-xs, 0.5rem) * -1);
    border: none;
    border-inline-end: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
    border-radius: var(--padding-2xs, 0.375rem);
    background: none;
    color: rgb(var(--color-foreground-rgb) / 0.7);
    font-size: var(--font-size--2xs, 0.75rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }

.menu-categories__group-back:hover {
    color: var(--color-primary);
  }

.menu-categories__group-back:focus-visible {
    outline: var(--focus-outline-width, 2px) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset, 2px);
  }

/* Tile = a discrete framed product card floating in the grid's gutters. The
     transparent product cutout sits centred on a softly-lit stage, with the
     title seated in a footer below. Every tile is the same height by
     construction (fixed-height figure + 2-line-clamped title), which the JS
     height-lock relies on. */
  .menu-categories__tile {
    /* Explicit reset: the <li> itself must contribute zero box (no margin,
       no padding, no flex sizing of its own) so the grid track is the only
       thing controlling its size. max-width caps how wide a tile can grow in
       a SPARSE row: the grid's 1fr track max stretches to fill all free space
       by default, so without this cap a row with only 1-2 tiles would balloon
       to the full pane width. With the cap, a constrained grid item's default
       stretch falls back to start-aligned, so sparse rows stay a tidy
       left-packed gallery instead. */
    margin: 0;
    padding: 0;
    max-width: 360px;
    list-style: none;
    display: block;
  }

/* The image stage: a lit 3:2 pedestal the transparent product cutout sits
     centred on, matted with internal padding so the knife breathes inside the
     cell rather than touching its edges (gallery framing). aspect-ratio (not a
     fixed height) keeps every tile identical height within a row, since
     auto-fit gives every column the same resolved width. The radial is a
     deliberate spotlight (not a faint tint): on the deep navy bg a transparent
     cutout has nothing to sit on, so a pool of light lifts it off the panel and
     gives the drop-shadow below it something to read against. No always-on gold
     line here — the gold accent reads via the hover background and gold title. */
  .menu-categories__tile-figure {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Clip the hover image-zoom to the stage so it never spills into the
       touching neighbour cell. */
    overflow: hidden;
    /* Matting: hold the cutout off the cell edges so it reads as a framed
       product shot. object-fit: contain on the image keeps it from cropping. */
    padding: var(--padding-md);
    background: radial-gradient(
      125% 95% at 50% 34%,
      rgb(var(--color-foreground-rgb) / 0.14) 0%,
      rgb(var(--color-foreground-rgb) / 0.05) 48%,
      rgb(var(--color-foreground-rgb) / 0) 78%
    );
  }

/* ---- Sectioned grid: full-width, no sidebar ----
     The default body is a two-column sidebar+content grid; this layout has no
     sidebar to place, so it collapses to a single column and lets the tile
     grid use the panel's whole width. */
  .menu-categories__body--grid {
    grid-template-columns: 1fr;
  }

/* A FIXED column count, unlike the auto-fit grids elsewhere. Those size
     themselves from how many tiles they hold, which is right when a grid is
     the only thing on screen -- but here several groups stack down one panel,
     and auto-fit gave a four-item group and a three-item group different
     column widths, so nothing lined up vertically. Pinning the count keeps
     one rhythm down the whole panel and lets a short group simply leave its
     last cells empty, which reads as deliberate rather than ragged. */
  /* The column count comes from the biggest GROUP (data-columns, resolved in
     menu-categories-panel.liquid), not from the panel's width.
     auto-fit solves for the width, and auto-fit can only drop a track that is
     empty in every row -- the group headers span 1 / -1, so no track is ever
     empty and none can collapse. At this panel's size that resolved four
     tracks for groups of three, leaving a permanently empty fourth column:
     tiles stopped a quarter-panel short of the right edge, under section
     rules that ran the full width. Sizing to the content instead means every
     group fills its row edge to edge, and every group still shares one column
     rhythm because they all share one grid. */
  .menu-categories__grid--tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

/* Below ~1280px a four-across row squeezes the tiles narrower than their
     labels want; three keeps the name-plates on one line. */
  @media (max-width: 1279px) {
    .menu-categories__grid--tools[data-columns='4'] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

/* The sparse-row cap the auto-fit grids need would, here, only pull tiles
     off the shared seam they're drawn to sit on: this grid's track count is
     already sized to its content, so the track is the right width by
     construction. */
  .menu-categories__grid--tools .menu-categories__tile {
    max-width: none;
  }

/* Left-aligned name-plate. Everything else in this panel -- title, subtitle,
     section labels -- runs off the left edge; a centred label under every
     photo was the one element fighting that axis, and with the tiles now
     filling the row the ragged centres were the remaining tell. */
  .menu-categories__grid--tools .menu-categories__tile-title {
    text-align: start;
    /* The plate reserves two lines so every tile is the same height; with the
       text left-aligned, a one-line name parked at the top of that box left a
       visible empty half under it. Centring it in the reserved height costs
       nothing where align-content isn't supported -- it just stays where it
       already was. */
    align-content: center;
  }

/* Section label with a hairline running out to the panel edge -- the rule
     is what makes a small-caps label read as a deliberate divider rather than
     as text floating above the tiles. First one sits tight to the panel top;
     the rest get air above them to separate the band they close from the one
     they open -- enough air that the bands read as separate sections of one
     page, since the tiles themselves touch edge to edge with no gutters to
     do that separating. */
  .menu-categories__group-header--rule {
    gap: var(--padding-sm, 0.75rem);
    margin-top: var(--padding-2xl, 2rem);
    margin-bottom: var(--padding-sm, 0.75rem);
  }

/* A short gold rule leads the label in -- the same "this is a section of the
     brand's own page" mark the feature cards carry under their titles -- and
     the label itself is lifted out of the 0.5 muted grey it shared with body
     chrome, since here it's the only structure the grid has. */
  .menu-categories__group-header--rule .menu-categories__group-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-2xs, 0.375rem);
    letter-spacing: 0.12em;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

.menu-categories__group-header--rule .menu-categories__group-eyebrow::before {
    content: '';
    width: 14px;
    height: 2px;
    flex: 0 0 auto;
    background-color: var(--color-primary);
  }

/* Fading the rule out rather than running it at full strength into the
     panel's edge: it's there to carry the eye off the label, not to box the
     section in. */
  .menu-categories__group-header--rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(
      to right,
      rgb(var(--color-border-rgb) / 0.55),
      rgb(var(--color-border-rgb) / 0)
    );
  }

/* Count of what's behind a tile that opens in place instead of navigating,
     so the extra step is announced before it's taken. A gold-outlined chip
     rather than a bare numeral, which next to a product name just reads as a
     typo. */
  .menu-categories__tile-count {
    display: inline-block;
    margin-inline-start: var(--padding-2xs, 0.375rem);
    padding-inline: 0.4em;
    border: 1px solid rgb(var(--color-primary-rgb) / 0.4);
    border-radius: 999px;
    font-size: var(--font-size--2xs, 0.75rem);
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-primary);
  }

/* ---- Tools Activity: photographic tiles, not cutout tiles ----
     Everything above styles a stage for TRANSPARENT PNG cutouts: `contain` so
     a blade is never cropped, internal matting so it breathes, a radial
     spotlight to sit it on, and a drop-shadow tracing its silhouette. This
     panel's imagery is the opposite kind — full-frame lifestyle and product
     photographs that carry their own backgrounds — and every one of those
     treatments works against it: the matting detaches the photo from the card
     edge, and the spotlight and silhouette shadow halo a hard-edged
     rectangle. So the stage is stripped back to a plain full-bleed frame.

     The figure keeps the default 3:2 rather than overriding to a portrait
     crop: 3:2 is what this store's photography is actually shot at, so
     `cover` fills the cell without discarding any of the frame. A portrait
     cell would centre-crop roughly a third of the width off every photo,
     which is a real cost in a menu whose source images are already tight on
     resolution.

     Keyed off the panel having a Tools Activity menu rather than off a
     literal category title, so renaming the category in Shopify admin can't
     silently drop the whole treatment back to cutout styling. */
  [data-tools-activity] .menu-categories__tile-figure {
    /* Full-bleed: no matting, and no spotlight behind an opaque photo. The
       flat wash only shows before the image loads (and behind the gold ring
       on a tile that genuinely has none). */
    padding: 0;
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }

/* Without this, the generic .menu-categories__tile-link:hover rule (higher
     specificity: two classes + a pseudo-class beats one attribute + one
     class) would win on hover and swap in the silhouette drop-shadow this
     scope deliberately has none of -- reapplying the same grade keeps the
     photo toned consistently whether or not the pointer is over it. */
  [data-tools-activity] .menu-categories__tile-link:hover .menu-categories__tile-image {
    filter: saturate(0.88) contrast(1.04) brightness(0.94);
  }

/* A tile with no image (a non-collection link, or a collection with no
     resolvable photo) keeps the identical framed stage; a faint gold ring
     marks it as a deliberate "browse" card rather than a missing-image hole. */
  .menu-categories__tile-figure:not(:has(.menu-categories__tile-image))::before {
    content: '';
    width: 22px;
    height: 22px;
    border: 1.5px solid rgb(var(--color-primary-rgb) / 0.3);
    border-radius: 999px;
  }

/* Without JavaScript, .is-loaded never gets added — keep images visible. */
  @media (scripting: none) {
    .menu-categories__tile-image,
    .menu-categories__feature-image {
      opacity: 1;
    }
  }

/* Collection description (custom.description metafield) revealed over the
     product photo on hover/focus. An absolute overlay inside the figure's
     clipping box, so it never shifts the grid or affects the JS height-lock.
     A near-opaque scrim in the scheme background keeps the one-liner legible
     over any cutout; the copy settles at the bottom as an editorial caption. */
  .menu-categories__tile-desc {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    padding: var(--padding-md);
    background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / 0.96) 0%,
      rgb(var(--color-background-rgb) / 0.86) 45%,
      rgb(var(--color-background-rgb) / 0.55) 100%
    );
    color: rgb(var(--color-foreground-rgb) / 0.92);
    font-size: var(--font-size--xs, 0.8rem);
    line-height: 1.4;
    text-align: start;
    opacity: 0;
    transform: translateY(4px);
    transition:
      opacity 240ms var(--menu-categories-ease),
      transform 240ms var(--menu-categories-ease);
    pointer-events: none;
  }

/* ---- Feature tile: caption over the photo, not under it ----
     Used for the Tools Activity landing tiles, which play the same role one
     level down that the Shop overview's feature cards play up top -- so they
     borrow that treatment rather than the name-plate footer the product tiles
     use. The photo runs the full card and the caption sits on it behind a
     scrim, which is also what lets a 4:5 photo carry its own title without a
     separate band of panel background under it. */
  .menu-categories__tile--feature .menu-categories__tile-link {
    display: block;
    position: relative;
    padding: 0;
    /* Clip the scrim and the photo's hover zoom to the card's own corners. */
    overflow: hidden;
    border-radius: var(--menu-categories-tile-radius, 0px);
  }

/* Same gold rule the Shop feature cards use, extending on hover. */
  .menu-categories__tile-caption-title::after {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    margin-top: var(--padding-2xs, 0.375rem);
    background-color: var(--color-primary);
    transform: scaleX(0.55);
    transform-origin: left center;
    transition: transform 280ms var(--menu-categories-ease);
  }

/* "View all" closes out a (necessarily truncated) product grid with a way
     to see the full collection. Same tile cell/grid track as the photo tiles
     above so it sits inline with them, but no figure -- the content is
     centred top-to-bottom in the available height instead. */
  .menu-categories__tile-view-all-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--padding-xs, 0.5rem);
    height: 100%;
    min-height: 120px;
    padding: var(--padding-md);
    color: rgb(var(--color-foreground-rgb) / 0.8);
    text-decoration: none;
    text-align: center;
    font-size: var(--font-size--sm, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px dashed rgb(var(--color-border-rgb) / 0.45);
    box-shadow: var(--menu-categories-shadow-card-resting), var(--menu-categories-shadow-card-hover-off);
    transition:
      color var(--animation-speed, 150ms) var(--menu-categories-ease),
      border-color var(--animation-speed, 150ms) var(--menu-categories-ease),
      box-shadow var(--animation-speed, 150ms) var(--menu-categories-ease),
      transform var(--animation-speed, 150ms) var(--menu-categories-ease);

    &:hover,
    &:focus-visible {
      color: var(--color-primary);
      border-color: rgb(var(--color-primary-rgb) / 0.5);
      box-shadow: var(--menu-categories-shadow-card-resting), var(--menu-categories-shadow-card-hover);
      transform: translateY(-2px);
    }

    &:hover .menu-categories__view-all-arrow,
    &:focus-visible .menu-categories__view-all-arrow {
      transform: translateX(3px);
    }

    &:focus-visible {
      outline: var(--focus-outline-width, 2px) solid var(--color-primary);
      outline-offset: calc(-1 * var(--focus-outline-width, 2px));
    }
  }

.menu-categories__view-all-arrow {
    display: inline-block;
    transition: transform var(--animation-speed, 150ms) var(--menu-categories-ease);
  }

/* Truly flat menus (no sub-category has its own children, and none of
     them are image-bearing link types either, e.g. Support, Knife
     Knowledge, Custom & Services) have no sidebar/tile-grid split: the body
     holds a single icon-card grid spanning the full content width. */
  .menu-categories__panel[data-menu-has-subcategories='false'] .menu-categories__body {
    grid-template-columns: 1fr;
  }

/* Icon cards: a deliberate row of equal-width cards, each a gold glyph
     above its title. Used in place of a plain text dropdown for flat
     page/article-link menus (Support, Knife Knowledge, Custom & Services).
     auto-fit (not auto-fill) collapses empty tracks and stretches the actual
     cards to fill the row evenly, so 3-6 items read as one intentional row
     instead of a left-packed remainder with dead space on the right. */
  .menu-categories__icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--padding-md);
  }

.menu-categories__icon-card-link {
    display: flex;
    flex-direction: column;
    gap: var(--padding-sm);
    height: 100%;
    padding: var(--padding-xl);
    border: 1px solid rgb(var(--color-border-rgb) / 0.6);
    border-radius: var(--menu-categories-tile-radius, 0px);
    color: var(--color-foreground);
    text-decoration: none;
    box-shadow: var(--menu-categories-shadow-card-resting), var(--menu-categories-shadow-card-hover-off);
    transition: border-color var(--animation-speed, 150ms) var(--menu-categories-ease),
      background-color var(--animation-speed, 150ms) var(--menu-categories-ease),
      box-shadow var(--animation-speed, 150ms) var(--menu-categories-ease),
      transform var(--animation-speed, 150ms) var(--menu-categories-ease);

    &:hover,
    &:focus-visible {
      border-color: var(--color-primary);
      background-color: rgb(var(--color-foreground-rgb) / 0.04);
      box-shadow: var(--menu-categories-shadow-card-resting), var(--menu-categories-shadow-card-hover);
      transform: translateY(-2px);
    }

    &:hover .menu-categories__icon-card-title,
    &:focus-visible .menu-categories__icon-card-title {
      color: var(--color-primary);
    }

    &:focus-visible {
      outline: var(--focus-outline-width, 2px) solid var(--color-primary);
      outline-offset: var(--focus-outline-offset, 2px);
    }
  }

.menu-categories__icon-card-glyph {
    display: inline-flex;
    color: var(--color-primary);

    svg {
      width: 28px;
      height: 28px;
    }
  }

.menu-categories__icon-card-title {
    font-size: var(--font-size--sm, 0.875rem);
    font-weight: 600;
    line-height: 1.3;
  }

/* Finder-style persistent columns: the rail stays put while the content
     pane to its right swaps between the tile-grid overview and a drilled
     category's own sidebar+grid. Below 1200px there isn't room for both a
     rail and a full category panel, so the rail hides itself once drilled
     in (see the [data-drilled] query below) and the Back button becomes
     the only way back, matching the original full-replace behavior. */
  .menu-categories__shop-columns {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: var(--padding-2xl, 2rem);
    align-items: start;
  }

@media (min-width: 1200px) {
  /* At full width the rail's first item is the way back, so the drilled
       level's in-panel Back row is redundant here -- hide it so the level's
       sidebar/grid start at the same height as the rail's list. (Below 1200px
       the rail is hidden and this Back button is the only way back.) */
    .menu-categories__breadcrumb--back-only {
      display: none;
    }
}

/* "Shop" root: a slim category rail on the left, big image tiles on the
     right — the panel should feel like a flagship landing the instant it
     opens, not a bare list. */
  .menu-categories__shop-aside {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md, 0.75rem);
    /* Same reason as .menu-categories__sidebar: without min-width: 0 the rail
       grid item grows to fit its widest nowrap description and overlaps the
       tile grid (the bug this comment was added to fix). */
    min-width: 0;
    border-inline-end: 1px solid rgb(var(--color-border-rgb) / 0.6);
    padding-inline-end: var(--padding-lg);
  }

/* While drilled in, the rail's list must line up with the drilled category's
     sidebar/grid (which have no header above them). So drop the "SHOP" eyebrow,
     which would otherwise push the rail's list down, and surface the rail's
     "back to overview" item in its place as the list's first row -- keeping the
     three columns top-aligned with no JS offset. At the overview (not drilled)
     the eyebrow shows and the back item is hidden, since there's nowhere to go
     back to. */
  .menu-categories__shop-back-item {
    display: none;
  }

/* The rail back control reuses the sidebar-link look, but as a <button> it
     needs the default button chrome reset, and is left-aligned (arrow + label)
     rather than the space-between layout the category links use for their
     trailing chevron. */
  .menu-categories__shop-rail-back {
    justify-content: flex-start;
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
  }

/* Lay the tiles in a single row that splits the available width evenly, so
     the panel never needs to scroll vertically regardless of how many items
     are grouped. The wide, fixed panel gives each tile a generous footprint. */
  .menu-categories__shop-feature {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--padding-lg);
    align-content: start;
  }

/* A short gold rule under the title that extends on hover — a quiet,
     brand-coloured "this is interactive" cue beyond the corner arrow. */
  .menu-categories__feature-title::after {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    margin-top: var(--padding-2xs, 0.375rem);
    background-color: var(--color-primary);
    transform: scaleX(0.55);
    transform-origin: left center;
    transition: transform 280ms var(--menu-categories-ease);
  }

/* Collection description (custom.description metafield) for the Shop overview
     feature cards. Already inside the bottom-anchored, scrim-backed feature
     body, so it only needs to reveal beneath the title on hover/focus — no
     extra box. max-height + opacity keeps the resting card showing just the
     title, with the description sliding in on interaction. */
  .menu-categories__feature-desc {
    display: block;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    color: rgb(255 255 255 / 0.88);
    font-size: var(--font-size--xs, 0.8rem);
    line-height: 1.4;
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.5);
    opacity: 0;
    transition:
      max-height 280ms var(--menu-categories-ease),
      margin-top 280ms var(--menu-categories-ease),
      opacity 240ms var(--menu-categories-ease);
  }

@keyframes shop-card-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@media (prefers-reduced-motion: reduce) {
  .menu-categories__feature-image,
    .menu-categories__feature-title::after,
    .menu-categories__feature-cue,
    .menu-categories__feature-scrim,
    .menu-categories__sidebar-link,
    .menu-categories__help-arrow,
    .menu-categories__hero-image,
    .menu-categories__hero-arrow,
    .menu-categories__tile-image,
    .menu-categories__tile-link,
    .menu-categories__tile-desc,
    .menu-categories__tile-scrim,
    .menu-categories__tile-cue,
    .menu-categories__tile-caption-title::after,
    .menu-categories__feature-desc,
    .menu-categories__link::after,
    .menu-categories__scroll-progress,
    .menu-categories__scroll-progress-fill,
    .menu-categories__panel::before,
    .menu-categories__panel::after,
    .menu-categories__tile-view-all-link,
    .menu-categories__view-all-arrow {
      transition: none;
    }

  /* No image zoom on hover for reduced-motion users: keep the background and
       gold-title cues, but drop the scale so nothing moves. */
    .menu-categories__tile-link:hover .menu-categories__tile-image {
      transform: none;
    }
}

.menu-categories__back {
    /* Lives inline in .menu-categories__breadcrumb's row now, not stacked
       above it, so no margin-bottom — the row's own gap handles spacing
       from the breadcrumb trail next to it. */
    display: inline-flex;
    align-items: center;
    gap: var(--padding-2xs, 0.375rem);
    margin-inline-start: calc(var(--padding-sm) * -1);
    padding: var(--padding-2xs, 0.375rem) var(--padding-sm);
    border: none;
    background: none;
    color: rgb(var(--color-foreground-rgb) / 0.75);
    font-size: var(--font-size--sm, 0.875rem);
    cursor: pointer;
    border-radius: var(--padding-2xs, 0.375rem);

    &:hover {
      color: var(--color-primary);
      background-color: rgb(var(--color-foreground-rgb) / 0.06);
    }

    &:focus-visible {
      outline: var(--focus-outline-width, 2px) solid var(--color-primary);
      outline-offset: var(--focus-outline-offset, 2px);
    }
  }

.menu-categories__back-arrow {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-inline-start: 1.5px solid currentColor;
    border-block-start: 1.5px solid currentColor;
    transform: rotate(-45deg);
  }

@media screen and (max-width: 989px) {
  .menu-categories {
      display: none;
    }
}
/* END_BLOCK:_header-menu-categories */

/* START_BLOCK:_header-menu (INDEX:76) */
.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;
    }
  }

  /* The category-browser menu (.menu-categories) hides itself below 990px via its
     own fixed breakpoint rather than the data-menu-style/overflow-list system (it
     has no overflow-list, so data-menu-style never flips to 'drawer' for it on
     non-touch devices). Without this, there's a 750-989px gap where neither the
     menu nor the drawer toggle is visible. Matched directly on the section's
     menu_layout setting (via data-menu-layout, set in sections/header.liquid)
     rather than :has(.menu-categories) so this doesn't depend on :has()
     browser support for core header navigation. */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    #header-component[data-menu-layout='category_browser'] .header__drawer {
      display: flex;
      min-height: var(--header-drawer-min-height);
    }

    /* With the menu hidden in this range, the bottom row would otherwise render
       as an empty strip (background + border) with nothing in it, since the
       category-browser menu is its only content. */
    #header-component[data-menu-layout='category_browser'] .header__row--bottom {
      display: none;
    }
  }

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

    /* A slightly slower, more deliberate open reads as more considered than
       the default snappy timing - scoped locally so it doesn't affect other
       submenu/overflow consumers of --submenu-animation-speed elsewhere. */
    --submenu-animation-speed: 420ms;
  }

  /* Stagger each column's fade-in slightly so the dense megamenus (Knives,
     Shop by Activity) feel composed rather than appearing all at once.
     Capped at 3 steps so it stays snappy on menus with many columns. */
  .menu-list__submenu[data-active] .mega-menu__column {
    animation: mega-menu-column-in var(--submenu-animation-speed) var(--ease-out-cubic) both;
  }

  .menu-list__submenu[data-active] .mega-menu__column:nth-child(2) {
    animation-delay: 40ms;
  }

  .menu-list__submenu[data-active] .mega-menu__column:nth-child(n + 3) {
    animation-delay: 80ms;
  }

  @keyframes mega-menu-column-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .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;
    transition: color var(--animation-speed, 150ms) var(--animation-easing, ease),
      transform var(--animation-speed, 150ms) var(--animation-easing, ease);

    &:hover {
      /* cohesive brand-navy hover instead of a muted grey */
      color: var(--color-primary);
      transform: translateX(2px);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    &:focus-visible {
      outline: var(--focus-outline-width, 2px) solid var(--color-primary);
      outline-offset: var(--focus-outline-offset, 2px);
      border-radius: 2px;
    }
  }

  /* Category headers read as refined editorial labels: small, uppercase,
     generously letter-spaced, set in the accent face and separated from their
     links by air and a whisper-thin rule. This is the main lever for the
     premium feel — quiet typographic hierarchy rather than heavy borders. */
  .mega-menu__link--parent {
    font-family: var(--font-accent--family, var(--menu-parent-font-family));
    font-style: normal;
    font-weight: var(--font-accent--weight, 600);
    font-size: var(--font-size--xs, 0.8125rem);
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-foreground-heading, var(--menu-parent-font-color));
    display: flex;
    width: 100%;
    padding-bottom: var(--padding-sm);
    margin-bottom: var(--padding-sm);
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.14);

    &:hover {
      color: var(--color-primary);
    }

    &:focus-visible {
      outline: var(--focus-outline-width, 2px) solid var(--color-primary);
      outline-offset: var(--focus-outline-offset, 2px);
      border-radius: 2px;
    }
  }

  /* Quiet, subordinate "Shop all" footer link under each category's items. */
  .mega-menu__shop-all {
    display: inline-block;
    font-size: var(--font-size--2xs, 0.75rem);
    color: var(--color-primary);
    text-decoration: none;
    margin-top: var(--padding-sm);
    opacity: 0.85;
    transition: opacity var(--animation-speed, 150ms) var(--animation-easing, ease);

    &:hover {
      opacity: 1;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    &:focus-visible {
      opacity: 1;
      outline: var(--focus-outline-width, 2px) solid var(--color-primary);
      outline-offset: var(--focus-outline-offset, 2px);
      border-radius: 2px;
    }
  }

  /* Generous column spacing inside the dropdown for an airy, premium layout. */
  .menu-list__submenu .mega-menu__grid {
    column-gap: var(--padding-4xl, 2rem);
  }

  /* Bare top-level links with no sub-categories (e.g. a seasonal sale) read
     as a time-limited offer, not a department, via a small gold-bordered
     pill rather than the plain top-level link treatment. */
  .menu-list__link--promo .menu-list__link-title {
    border: 1px solid rgb(var(--color-primary-rgb) / 0.5);
    border-radius: 999px;
    padding-inline: var(--padding-md, 0.75rem);
  }

  .menu-list__link--promo:hover .menu-list__link-title,
  .menu-list__link--promo:focus-visible .menu-list__link-title {
    border-color: var(--color-primary);
    background-color: rgb(var(--color-primary-rgb) / 0.08);
  }

  /* Small notification dot for merchant-flagged links (e.g. New Arrivals) —
     a quiet visual cue that invites a click without adding more text to read. */
  .mega-menu__badge {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-start: var(--padding-2xs, 0.375rem);
    border-radius: 50%;
    background-color: var(--color-primary);
    vertical-align: middle;
    transform: translateY(1px);
  }

  /* Flat menus (no sub-category headings, e.g. Support, Knife Knowledge)
     collapse to a slim, intrinsic-width dropdown instead of stretching a
     single column across the full megamenu panel. */
  .menu-list__submenu[data-menu-has-subcategories='false'] {
    width: auto;
    left: 0;
    right: auto;
  }

  .menu-list__submenu[data-menu-has-subcategories='false'] .mega-menu__grid {
    grid-template-columns: minmax(220px, 320px);
    justify-content: flex-start;
  }

  /* Dense, multi-category menus (Knives, Shop by Activity) get a quiet
     vertical rule between columns to reinforce the grid without adding
     visual weight. */
  .mega-menu__grid:has(.mega-menu__column--span-3, .mega-menu__column--span-4)
    .mega-menu__column:not(:first-child) {
    box-shadow: -1px 0 0 0 rgb(var(--color-border-rgb) / 0.6);
    padding-inline-start: var(--padding-xl);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    width: 200px;
  }

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

/* START_BLOCK:_image (INDEX:79) */
.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:83) */
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:88) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

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

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:93) */
.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:94) */
.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:95) */
.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:97) */
.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:add-to-cart (INDEX:98) */
.button--sold-out-notify {
    opacity: .5;
  }

  .button--sold-out-notify:hover {
    opacity: .65;
  }
/* END_BLOCK:add-to-cart */

/* START_BLOCK:blade-lengths (INDEX:99) */
/* Padding and margin are deliberately absent: .spacing-style owns them for
     every block in the theme, and declaring either here would quietly beat the
     block's own padding settings. */
  /* The hairline is what actually answers "too much to parse": on its own,
     a label plus pills reads as one more line of body copy piled under the
     price. A rule above it turns the same content into a marked-off spec
     block instead, which is what the label alone was being asked to do.
     padding-top is deliberately the SAME token as row-gap (not the wider
     --gap-sm used previously) so the rule sits close to the block it
     introduces rather than looking more separated from its own label than
     the label is from its own pills — the rule belongs to what's below it.

     margin-top is separate from that padding-top and sits on the other
     side of the border: card blocks are only product_card_gap (4px by
     default) apart, which read as the rule sitting right on top of the
     price above it. This margin is what actually creates breathing room
     between the price and the rule, since margin (outside the border) is
     what pushes the rule away from whatever comes before it — the
     padding-top above only controls the gap between the rule and the
     pills that follow it. */
  .blade-lengths-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--blade-lengths-justify, flex-start);
    column-gap: var(--gap-sm);
    row-gap: var(--gap-2xs);
    margin-top: var(--gap-xs);
    padding-top: var(--gap-2xs);
    border-top: 1px solid var(--color-border);
  }

  /* Sentence case, not an eyebrow: "Blade length" reads as a spec label next
     to the numbers, the way the rest of the site states facts rather than
     dressing them up (see the register notes in KNIFE-FINDER.md). Muted with
     the theme's own subdued-text token rather than a bespoke alpha value --
     that token already clears the site's own contrast floor everywhere else
     it's used, so reusing it is the safe default rather than a new number to
     re-justify. flex-shrink: 0 keeps it from being squeezed into a wrap when
     the pills that follow it run long. */
  .blade-lengths__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-size--xs);
    line-height: 1.6;
  }

  /* margin/padding: 0 is not decorative here -- browsers give every <ul> a
     default 40px inline-start padding for bullet indentation, and this one
     used to lose that for free because .spacing-style sat directly on it
     (its padding-inline: 0 zeroed the default as a side effect). Now that
     .spacing-style has moved to the wrapping .blade-lengths-row, this rule
     has to reset it explicitly or the whole list quietly shifts 40px right. */
  .blade-lengths {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* The li is a bare flex item; the pill's own box (padding, background,
     radius) lives on whichever element is inside it — a button where the
     length links to a real variant, a span where it doesn't. */
  .blade-lengths__pill-item {
    display: flex;
  }

  /* Matches the theme's pill primitive (base.css). min-height/min-width:
     24px is WCAG 2.2 SC 2.5.8 (Target Size Minimum, Level AA) — at this
     font size the padding alone renders to about 23px tall, just under the
     line every button-shaped target has to clear. display: inline-flex is
     load-bearing here, not decorative: min-height/min-width are defined by
     spec to have no effect on a plain inline element, which is what a
     <span> defaults to, so without this the button would grow to 24px and
     the non-clickable span pill next to it would silently stay at 23px.
     Applied to both tags via the shared class so they stay the same size
     either way. */
  .blade-lengths__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1em 0.6em;
    min-height: 24px;
    min-width: 24px;
    box-sizing: border-box;
    border-radius: var(--style-border-radius-pills);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));
    color: var(--color-foreground);
    font-size: var(--font-size--xs);
    line-height: 1.6;
    white-space: nowrap;
  }

  /* Button-only: strip the native chrome so a clickable pill is visually
     identical to the plain-span pill next to it, and only the cursor and
     hover give away that it does anything. */
  button.blade-lengths__pill {
    appearance: none;
    border: none;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
  }

  /* :hover never fires — the overlay link wins every hit-test. The JS
     mousemove handler uses elementsFromPoint to find the real pill and
     toggles this class instead. */
  @media (hover: hover) {
    button.blade-lengths__pill:hover,
    button.blade-lengths__pill--js-hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
      box-shadow: 0 0 0 1.5px rgb(var(--color-foreground-rgb) / 0.45);
    }
  }

  /* Strikethrough marks a length sold out; a muted text color makes it recede
     next to the lengths a shopper can actually buy, which is the point of the
     row. An earlier version of this rule used `opacity` on the whole pill
     instead, on the reasoning that scaling text and background together as
     one unit would preserve their contrast ratio relative to each other. That
     reasoning was wrong: text and background start as two DIFFERENT colors,
     and fading both toward the same page color compresses the gap between
     them rather than preserving it — measured out at roughly 3.5:1 on this
     theme's own light scheme once blended against the real page background,
     under the 4.5:1 WCAG AA floor. This rule mutes only the text color, using
     --opacity-subdued-text (the same token the "Blade length:" label itself
     uses), and leaves the pill's own background untouched, so contrast is
     measured the same way an available pill's already is — text against an
     unfaded background — rather than against a hypothetical faded backdrop
     that doesn't map cleanly onto a real WCAG contrast pair. Comfortably
     over 4.5:1 on every shipped color scheme (light, dark, and navy),
     checked directly against each scheme's own real colors, not estimated. */
  .blade-lengths__pill--unavailable {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    text-decoration: line-through;
  }
/* END_BLOCK:blade-lengths */

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

/* START_BLOCK:contact-form (INDEX:106) */
.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__select-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }

  .contact-form__select-label {
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-input-text);
  }

  .contact-form__select {
    width: 100%;
    cursor: pointer;
    color: var(--color-input-text);
    background-color: color-mix(in srgb, var(--color-input-background) 92%, gray);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--padding-xl) center;
    appearance: none;
    -webkit-appearance: none;
    padding: var(--padding-lg) var(--padding-xl);
    padding-right: calc(var(--padding-xl) * 3);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    font-size: inherit;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__select:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:email-signup (INDEX:108) */
.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);
    transition: border-color var(--animation-speed) var(--animation-easing),
      box-shadow var(--animation-speed) var(--animation-easing);
  }

  /* Soft accent focus ring on the whole field (same treatment as the header
     search): a 2px ring (border + spread shadow) with a faint halo instead
     of the default hard offset outline on the inner input. */
  .email-signup__input-group--integrated:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 4px rgb(var(--color-primary-rgb) / 0.1);
  }

  /* The group carries the focus ring; make the inner input's own outline
     transparent (not none) so forced-colors mode still renders a ring. */
  .email-signup__input-group--integrated .email-signup__input:focus-visible {
    outline-color: transparent;
  }

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

  .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-85));
    cursor: pointer;
  }

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

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

/* START_BLOCK:filters (INDEX:110) */
.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-85));
    --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-85));
      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:113) */
.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%;
        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:115) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

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

/* START_BLOCK:image (INDEX:116) */
.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:118) */
.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:119) */
.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:121) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:122) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:123) */
.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-accessory-attach (INDEX:125) */
.accessory-attach {
    display: block;
    margin-block-start: var(--padding-lg);
  }

  .accessory-attach__heading {
    margin: 0 0 var(--padding-xs, 0.5rem);
    font-size: var(--font-size--2xs, 0.75rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  /* The free-saya case. Quiet, not a badge: it's a fact about the order,
     sitting where the offer would otherwise be. */
  .accessory-attach__included {
    display: flex;
    align-items: baseline;
    gap: var(--padding-2xs, 0.25rem);
    margin: 0 0 var(--padding-sm, 0.7rem);
    font-size: var(--font-size--sm, 0.875rem);
    color: rgb(var(--color-foreground-rgb) / 0.85);
  }

  .accessory-attach__included-check {
    width: 9px;
    height: 5px;
    flex: 0 0 auto;
    border-inline-start: 1.5px solid var(--color-primary);
    border-block-end: 1.5px solid var(--color-primary);
    transform: rotate(-45deg) translateY(-1px);
  }

  .accessory-attach__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: rgb(var(--color-border-rgb) / 0.4);
    border-block: 1px solid rgb(var(--color-border-rgb) / 0.4);
  }

  /* Rows, not tiles: this block lives in the narrow buy column, where three
     side-by-side cards would each be too small to read a product name in.
     A row gives the name a full line and keeps the price and the button on
     the same baseline down the whole list. */
  .accessory-attach__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--padding-sm, 0.7rem);
    margin: 0;
    padding-block: var(--padding-sm, 0.7rem);
    background-color: var(--color-background);
  }

  .accessory-attach__media {
    display: block;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .accessory-attach__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .accessory-attach__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .accessory-attach__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--color-foreground);
    font-size: var(--font-size--sm, 0.875rem);
    line-height: 1.3;
    text-decoration: none;

    &:hover {
      color: var(--color-primary);
    }
  }

  .accessory-attach__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--padding-2xs, 0.25rem) var(--padding-xs, 0.5rem);
    font-size: var(--font-size--2xs, 0.75rem);
  }

  .accessory-attach__price {
    font-weight: 600;
    color: rgb(var(--color-foreground-rgb) / 0.9);
  }

  /* The fit line is the whole point of the block, so it gets the accent
     rather than the muted treatment the rest of the metadata takes. */
  .accessory-attach__fit {
    color: var(--color-primary);
  }

  .accessory-attach__form {
    margin: 0;
  }

  .accessory-attach__add {
    white-space: nowrap;
    font-size: var(--font-size--sm, 0.875rem);
    padding-inline: var(--padding-md, 0.8rem);
  }

  .accessory-attach__choose {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-2xs, 0.25rem);
    white-space: nowrap;
    font-size: var(--font-size--sm, 0.875rem);
    color: var(--color-primary);
    text-decoration: none;
  }

  .accessory-attach__choose-arrow,
  .accessory-attach__all-arrow {
    transition: transform var(--animation-speed, 150ms) var(--animation-easing, ease);
  }

  .accessory-attach__choose:hover .accessory-attach__choose-arrow,
  .accessory-attach__all:hover .accessory-attach__all-arrow {
    transform: translateX(3px);
  }

  .accessory-attach__all {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-2xs, 0.25rem);
    margin-block-start: var(--padding-sm, 0.7rem);
    font-size: var(--font-size--sm, 0.875rem);
    color: rgb(var(--color-foreground-rgb) / 0.75);
    text-decoration: none;

    &:hover {
      color: var(--color-primary);
    }
  }

  .accessory-attach [hidden] {
    display: none;
  }
/* END_BLOCK:product-accessory-attach */

/* START_BLOCK:product-addons-disclosure (INDEX:126) */
/* A card, not a button with fields loose beneath it: the border,
     background and shadow all live on this wrapper, so the header and
     whatever it opens onto read as one object a shopper clicked into,
     the whole time it's open. The shadow is the one thing here with no
     equivalent on the variant pills this is otherwise styled from --
     added because a flush, borderless strip of page reads as static
     content, and this is the one control on the page whose entire job
     is to be noticed and pressed. */
  .addons-disclosure {
    width: 100%;
    border: var(--variant-picker-button-border-width) solid var(--color-variant-border);
    border-radius: var(--variant-picker-button-radius);
    background-color: var(--color-variant-background);
    box-shadow: 0 1px 2px rgb(var(--color-foreground-rgb) / 0.05);
  }

  .addons-disclosure__toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 3.25em;
    /* Symmetrical, and wide enough on both sides to clear the caret: the
       label is centred on the box, so reserving the caret's width only
       on the side it sits would push the text off-centre by exactly that
       much. */
    padding: var(--padding-sm) calc(var(--padding-lg) + var(--icon-size-sm) + var(--gap-sm));
    border: none;
    border-radius: inherit;
    background-color: transparent;
    color: var(--color-variant-text);
    font-family: var(--font-body--family);
    font-size: var(--font-paragraph--size);
    font-weight: 500;
    line-height: normal;
    text-align: center;
  }

  .addons-disclosure__toggle:hover {
    background-color: var(--color-variant-hover-background);
    color: var(--color-variant-hover-text);
  }

  /* Sold out: a darker fill alone (the first version of this rule) didn't
     read as "disabled" against a box that's already gray by default --
     graying out only works as a cue when the un-grayed state is visibly
     lighter, and here it wasn't. Struck-through text is what
     blocks/blade-lengths.liquid already uses one row up for the exact
     same fact on the same page (a sold-out blade length's pill), so
     shoppers meet the identical "this option is gone" cue twice in a
     row instead of two different ones -- muted text color plus
     text-decoration: line-through, verified there against every shipped
     color scheme at comfortably over the 4.5:1 WCAG AA floor. The line
     belongs on the label alone, not the whole button: a strikethrough
     drawn across the caret icon would read as a rendering glitch, not a
     sold-out cue, so the caret gets only the color change (inherited via
     currentColor) and none of the rest. pointer-events:none is redundant
     with the disabled attribute for a mouse click, but not for :hover --
     disabled form controls still match :hover in some browsers, which
     without this would tint the button on rollover for a control that
     does nothing. */
  .addons-disclosure__toggle:disabled {
    cursor: not-allowed;
    pointer-events: none;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .addons-disclosure__toggle:disabled .addons-disclosure__label {
    text-decoration: line-through;
  }

  /* Open, the header keeps the hover tint permanently rather than
     reverting to flat once the pointer leaves -- a shopper mid-decision
     about a knife this expensive gets a standing cue that this control
     is engaged, not just a caret that already flipped and could easily
     go unnoticed above fields that speak for themselves. */
  .addons-disclosure--open .addons-disclosure__toggle {
    background-color: var(--color-variant-hover-background);
    color: var(--color-variant-hover-text);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  /* Out of the flow entirely: in flow it would be a third thing for the
     flexbox to centre, and the label would sit left of the box's middle
     by half the caret's width. */
  .addons-disclosure__caret {
    position: absolute;
    inset-inline-end: var(--padding-lg);
    top: 50%;
    transform: translateY(-50%);
  }

  .addons-disclosure--open .addons-disclosure__caret {
    color: var(--color-primary);
    transform: translateY(-50%) rotate(180deg);
  }

  /* The 0fr -> 1fr grid row is what makes this animatable without ever
     measuring anything in script: no height is read, computed or
     written by hand, so the transition always lands on however tall the
     content actually is, whatever the app put there. */
  .addons-disclosure__panel {
    display: grid;
    grid-template-rows: 0fr;
  }

  .addons-disclosure--open .addons-disclosure__panel {
    grid-template-rows: 1fr;
  }

  /* The containing block for .panel-content's absolute positioning
     while closed (see the markup comment for why it's absolute, not
     clipped), and min-height: 0 is what actually lets a grid item with
     nothing in flow measure zero -- a grid item's default min-height is
     its content's own min-content size, which would otherwise hold the
     row open regardless of the 0fr track size asked for. */
  .addons-disclosure__panel-inner {
    position: relative;
    min-height: 0;
  }

  /* Only while a transition is actually running: clipping is what stops
     the panel-content -- already full-height and in flow the moment
     opening starts -- from visibly sticking out past a row still
     partway through growing to meet it. Absent the rest of the time, on
     purpose: a permanent clip here would shave the focus ring (drawn as
     a box-shadow) off any field sitting near the open panel's edge. */
  .addons-disclosure--animating .addons-disclosure__panel-inner {
    overflow: hidden;
  }

  .addons-disclosure__panel-content {
    position: absolute;
    inset-inline: 0;
    top: 0;
    visibility: hidden;
    padding: var(--padding-lg);
    border-block-start: var(--variant-picker-button-border-width) solid var(--color-variant-border);
  }

  .addons-disclosure--revealed .addons-disclosure__panel-content {
    position: static;
    visibility: visible;
  }

  @media (prefers-reduced-motion: no-preference) {
    .addons-disclosure__toggle {
      transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
    }

    .addons-disclosure__caret {
      transition: transform 0.32s var(--ease-out-cubic), color var(--animation-speed) ease;
    }

    .addons-disclosure__panel {
      transition: grid-template-rows 0.32s var(--ease-out-cubic);
    }
  }
/* END_BLOCK:product-addons-disclosure */

/* START_BLOCK:product-custom-property (INDEX:128) */
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:130) */
.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-preorder {
    color: var(--color-lowstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:131) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:product-spec-highlights (INDEX:132) */
/* No box per fact — a rounded bordered rectangle is the same shape as
     the theme's own Saya Cover and Gift Wrapping option buttons, so a row
     of them right above those selectors would read as more controls to
     operate rather than facts to absorb. A single hairline brackets the
     whole row on top instead (no bottom line — the accordion immediately
     below opens with its own row divider), and a vertical hairline
     between blocks does the separating within the row. */
  /* Trailing space is deliberately asymmetric. Below this row sits the
     details column's own 12px block gap, then the accordion's first-row
     divider, then that row's content padding — three separate pieces of
     spacing, none individually wrong, that summed to ~34px between the
     last value here and the first line of the open spec sheet. Since
     this row's bottom edge is already separated from what follows by a
     gap *and* a rule, its own bottom padding was the redundant one, so
     it's the one dropped. Measured against the rendered stack rather
     than eyeballed: 34.4px -> 23.2px.

     Deliberately not fixed by zeroing the open accordion row's
     padding-block-start instead, which was the first thing tried: that
     rule applies to every open row, and the second and third rows have
     no block gap above them, so it put their headings 1px under their
     own divider — fixing the first row by cramping the other two. */
  /* The root is a custom element, which would otherwise be inline — it was a
     div before the notes needed a component to own them. */
  .product-spec-highlights {
    display: block;
  }

  .product-spec-highlights__grid {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding-block-start: var(--gap-sm);
    padding-block-end: 0;
    border-top: 1px solid var(--color-border);
  }

  /* Equal-width blocks regardless of count — one, two or three facts all
     split the row evenly, so a partially-filled product never leaves a
     narrow leftover column beside empty space. The divider is a border on
     every block but the first, rather than a gap-based rule, so it never
     depends on how many blocks actually render. */
  .product-spec-highlights__badge {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xs);
    min-width: 0;
    padding-inline: var(--gap-xs);
    text-align: center;
  }

  .product-spec-highlights__badge + .product-spec-highlights__badge {
    border-inline-start: 1px solid var(--color-border);
  }

  /* 12px at the theme's own subdued-text opacity measures 6.67:1 on the
     light scheme and 9.76:1 on the dark one, comfortably past the 4.5:1
     WCAG AA floor. Uppercase and tracked, it optically reads smaller than
     12px without actually being small enough to strain on a phone. */
  .product-spec-highlights__label {
    margin: 0;
    font-size: var(--font-size--2xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    overflow-wrap: normal;
  }

  /* The whole label is the control rather than the icon alone — at this size
     the icon is a poor target, and the label is what a shopper reads and
     points at anyway. */
  /* Block rather than a flex row, so the icon flows as though it were the
     label's last character: a flex sibling would hold its own column and sit
     marooned beside a two-line label, which is what these become once a
     phone splits the row three ways. */
  .product-spec-highlights__toggle {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .product-spec-highlights__toggle:hover,
  .product-spec-highlights__toggle[aria-expanded='true'] {
    color: var(--color-primary);
  }

  /* Touch only. The label's own box is around 16px tall, well under the
     theme's 44px minimum, so fingers get an invisible target centred on it —
     absolutely positioned so the row's layout is untouched. Withheld from
     fine pointers, where it would otherwise reach past the label and light
     it up on hover from empty space beside the value. */
  @media (pointer: coarse) {
    .product-spec-highlights__toggle::after {
      content: '';
      position: absolute;
      inset-inline: 0;
      top: 50%;
      translate: 0 -50%;
      height: var(--minimum-touch-target);
    }
  }

  /* base.css sizes .svg-wrapper > svg to --icon-size-sm regardless of the
     wrapper, so the icon needs sizing on both or it overflows the box it
     sits in. Two classes deep to win against that rule whatever order the
     stylesheets end up in. */
  .product-spec-highlights__toggle .product-spec-highlights__toggle-icon,
  .product-spec-highlights__toggle .product-spec-highlights__toggle-icon > svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  /* The space before the icon in the markup is load-bearing: it is the only
     break opportunity, so on a narrow column the icon drops to its own line
     rather than pushing an unbreakable label past the column's edge. Hence
     only a hair of margin on top of it. */
  .product-spec-highlights__toggle-icon {
    margin-inline-start: var(--gap-3xs);
    vertical-align: -0.15em;
  }

  /* Collapsed unconditionally, not gated behind a JS-added attribute: an
     earlier version defaulted this open and only collapsed once the
     component upgraded, on the reasoning that the copy should survive a JS
     failure. That traded a real, guaranteed defect (three panels visibly
     open on every load, then animating shut a moment later — a layout
     shift on every single page view) for a hypothetical one (a JS failure
     that never happened even once while that version shipped). This is
     supplementary content, not the thing on the page CLS budgets are meant
     to protect; a toggle that does nothing without JS is a fine trade for
     never shifting anything on load. */
  .product-spec-highlights__note {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--animation-speed-slow) var(--ease-out-quad);
  }

  .product-spec-highlights__note[data-open] {
    grid-template-rows: 1fr;
  }

  /* min-height: 0 is what lets a grid item actually measure zero — its
     default min-height is its content's min-content size, which would hold
     the row open against the 0fr track. */
  .product-spec-highlights__note-inner {
    min-height: 0;
    overflow: hidden;
  }

  .product-spec-highlights__note-content {
    margin-block-start: var(--gap-sm);
    padding: var(--padding-md) var(--padding-lg);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    border-inline-start: 2px solid var(--color-primary);
    border-radius: var(--style-border-radius-xs);
    text-align: start;
  }

  /* The row's labels are tracked uppercase and both properties inherit, so
     the note resets them: this is a sentence to read, not a column header. */
  .product-spec-highlights__note-title {
    margin: 0 0 var(--gap-2xs);
    font-size: var(--font-size--sm);
    font-weight: 500;
    letter-spacing: var(--letter-spacing--body-normal);
    text-transform: none;
    color: var(--color-primary);
  }

  .product-spec-highlights__note-text {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    line-height: var(--line-height--body-normal);
    letter-spacing: var(--letter-spacing--body-normal);
    text-transform: none;
    color: var(--color-foreground);
  }

  @media (prefers-reduced-motion: reduce) {
    .product-spec-highlights__note {
      transition: none;
    }

    .product-spec-highlights__toggle {
      transition: none;
    }
  }

  .product-spec-highlights__value {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: var(--font-size--sm);
    line-height: 1.45;
    color: var(--color-foreground-heading);
    /* Never break inside a word — a value still too wide as one unbroken
       word gets shrunk by assets/spec-grid-fit.js instead, down to this
       floor. Columns here are much narrower than the old full-width rows,
       so a single long word (or the stress-test case, one word standing
       in for a whole phrase) is more likely to need it, not less. */
    overflow-wrap: normal;
    word-break: normal;
    --spec-fact-value-min-size: 11px;
  }
/* END_BLOCK:product-spec-highlights */

/* START_BLOCK:product-specs-list (INDEX:133) */
.product-specs-list__group + .product-specs-list__group {
    margin-top: var(--gap-2xl);
  }

  /* Three versions before this one. First was a colored uppercase eyebrow
     — dropped because the navy competed with the page's own navy buttons
     and links. Second was a large serif heading with a full-width rule
     underneath, matching --font-heading--family at --font-size--xl — fixed
     that but competed with the accordion row's own title once that title
     grew a full-width divider of its own (see _accordion-row.liquid): two
     headings each with a full-width rule, stacked on each other, read as
     the same kind of thing. Third dropped the rule and the size entirely,
     landing right at the fact rows' own label color and only 2px larger —
     too close, so "Blade" and "Handle" read as just another label in the
     stack instead of the thing grouping several of them.

     This is the eyebrow from the third version restored to full
     --color-foreground-heading (the fact labels stay at the subdued
     color, so the contrast between the two is now the cue) plus a short
     underline that hugs the text itself instead of running the row's full
     width — text-decoration, not a block-level border. That's the
     difference that keeps it from repeating the accordion title's own
     divider: a full-width rule reads as "boundary of this whole section,"
     one under just the word "Blade" reads as "this label," which is what
     it actually is. */
  .product-specs-list__heading {
    margin: 0 0 var(--gap-sm);
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    font-weight: var(--font-bold-weight, 600);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-foreground-heading);
    text-decoration: underline;
    text-decoration-color: rgb(var(--color-border-rgb) / var(--opacity-70));
    text-underline-offset: 0.3em;
  }

  /* A list, not a grid. Multi-column meant every value had to survive the
     narrowest column in its row, so "Multi-Layer Damascus (46-Layer)"
     wrapped mid-phrase while "Yes" sat in the same width — the ragged
     result is what read as cheap. One row per fact gives each value the
     full width and puts every label on a single left edge to scan down. */
  .product-specs-list__grid {
    margin: 0;
  }

  .product-specs-list__fact {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: baseline;
    gap: var(--gap-lg);
    padding: var(--gap-lg) 0;
    border-bottom: 1px solid rgb(var(--color-border-rgb) / var(--opacity-70));
  }

  .product-specs-list__fact:last-child {
    border-bottom: none;
  }

  /* Care & Origin's photo rows are the one place this list runs right to
     the accordion row's own edges (see the bleed rule below), so a last
     row with no divider just stops mid-photo instead of closing the way
     every other row does — the accordion's own bottom edge isn't a divider
     of its own to hand off to here the way a plain row's trailing padding
     is. Overrides the rule above for photo facts specifically, leaving the
     plain Blade & Handle / Full Specifications list's genuinely-finished
     last row alone. */
  .product-specs-list__fact--photo:last-child {
    border-bottom: 1px solid rgb(var(--color-border-rgb) / var(--opacity-70));
  }

  /* 12px, not 10px, at the theme's own subdued-text opacity. The previous
     10px at 60% measured 3.40:1 against this scheme's background — under
     the 4.5:1 WCAG AA floor for normal-size text. This pairing measures
     6.67:1 light / 9.76:1 dark. */
  .product-specs-list__label {
    margin: 0;
    font-size: var(--font-size--2xs);
    font-weight: var(--font-bold-weight, 600);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    overflow-wrap: normal;
  }

  .product-specs-list__value {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: var(--font-size--md);
    line-height: 1.45;
    color: var(--color-foreground-heading);
    /* Never break inside a word, only at spaces/hyphens — a value that's
       still too wide as one unbroken word gets shrunk by
       assets/spec-grid-fit.js instead, down to this floor. */
    overflow-wrap: normal;
    word-break: normal;
    --spec-fact-value-min-size: 11px;
  }

  /* Hides the whole accordion row (heading included) when there's nothing
     left to show for this product — every field blank — rather than
     leaving an empty, clickable "Full Specifications" row with nothing
     inside it. */
  accordion-custom:has(.product-specs-list:empty) {
    display: none;
  }

  /* Care & Origin: the same rows as the rest of the spec sheet — same two
     columns, same hairline, same type — with a photo washed in behind
     each one as decoration.

     The photo is decoration and nothing more, and everything here falls
     out of taking that seriously.

     It fades in from both the left and right edges of the row and peaks
     in a plateau roughly two-thirds of the way across (58%-80%), so the
     label column and the start of every value sit on untouched page
     background and the row's own right edge — which now bleeds flush
     against the accordion's frame — dissolves into the page rather than
     ending as a hard photo/frame seam. Earlier passes covered the full
     row at a flat opacity, which turned three rows into three butted
     color blocks with the hairlines lost inside them — the thing that
     read as a mistake left in. An earlier single-sided version faded in
     from the right only and ran the photo at full strength flush to the
     right edge, which solved the left seam but left a hard edge at the
     right instead once that side stopped being padded off. Fading both
     edges leaves the dividers drawn across clean ground on either end
     and lets each photo dissolve rather than end at an edge anywhere, so
     consecutive rows never meet as a seam and neither edge of any single
     row does either.

     Strength is capped by contrast, not by taste — measured off rendered
     pixels with a pure black photo behind, the worst case any image can
     produce, resampled every time a stop moves (shifting the plateau
     shifts how much photo lands under the label column too, so the two
     are not independent). At these stops the 12px label holds 5.36:1 and
     the value 6.69:1 against the light scheme; pure white gives 6.67:1
     and 13.21:1. Both bounds clear the 4.5:1 AA floor with real margin,
     so no photo, present or future, can push either below it, and the
     text keeps the standard spec-sheet colors: no white type, no scrim,
     no drop shadow. Needing any of those would mean the picture had
     stopped being decoration.

     Painted as a background layer on the row itself rather than an
     absolutely-positioned pseudo-element. The pseudo-element version
     rendered short of the row's right edge on the live page while
     measuring full width in isolation — a grid container's abspos child
     is a resolvable puzzle, but the row's own background simply cannot
     disagree with the row about how wide the row is.

     The three rows also sit inside an *open* accordion row, which adds
     padding of its own on three sides that every other block in this
     theme is built to want: --padding-sm above the content so it isn't
     flush against the divider the collapsed header used to fill, the
     same again below because this accordion uses the dividers style, and
     --minimum-touch-target on the right so text never runs under the
     caret button pinned in that corner. A photo meant to bleed reads
     exactly those three gaps as a mistake instead, so this instance zeroes
     that padding on the row's own .details-content, scoped to :has() so
     the other two rows in this same accordion (Full Specifications,
     Product Details) keep their normal padding. The photo is allowed to
     run under the caret circle on the right because that circle paints
     its own background over whatever is beneath it, and by the time the
     gradient reaches that corner it has already faded most of the way
     back to page color anyway. Top and bottom are untouched —
     background-size: cover already fills the row exactly to those edges
     with no seam of its own to fade.

     Zeroing the parent's padding rather than pulling the child back out
     with negative margins on purpose: a negative margin here left the
     close animation glitching — the row would flash to a wrong height for
     a frame before settling to the collapsed one. .details-content
     animates block-size between 0 and auto (see
     snippets/accordion-custom-component.liquid), and a negative-margined
     child changes what "auto" measures at different points in that
     animation, since the margin pulls the child's box outside the area
     the parent's own height is based on. No other row in this accordion
     carries a negative margin, and no other row glitches. Padding has no
     such effect on the parent's own box, so this reaches the same flush
     bleed without disturbing the height the animation is trying to
     interpolate. */
  details[open] .details-content:has(.product-specs-list__fact--photo) {
    padding-block: 0;
    padding-inline-end: 0;
  }

  .product-specs-list__fact--photo {
    align-items: center;
    /* Tall enough that the photo actually reads as a photo — a shorter
       band cropped Fuji's peak and the whetstone's grain down to an
       unreadable smear. Longer values (Care Instructions runs three
       lines) grow past it as any other row would. */
    min-height: 112px;
    background-image: linear-gradient(
        to right,
        rgb(var(--color-background-rgb) / 1) 0%,
        rgb(var(--color-background-rgb) / 0.90) 38%,
        rgb(var(--color-background-rgb) / 0.72) 58%,
        rgb(var(--color-background-rgb) / 0.72) 80%,
        rgb(var(--color-background-rgb) / 0.90) 92%,
        rgb(var(--color-background-rgb) / 1) 100%
      ),
      var(--care-photo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  /* Decoration is exactly what a reader asking for more contrast, or
     running a forced-color palette, has told us to drop. */
  @media (prefers-contrast: more), (forced-colors: active) {
    .product-specs-list__fact--photo {
      background-image: none;
    }
  }
/* END_BLOCK:product-specs-list */

/* START_BLOCK:review (INDEX:136) */
.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:138) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

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

  .social-icons__icon {
    display: none;
  }

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

    .social-icons__icon {
      display: block;
    }

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

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

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

/* START_BLOCK:spacer (INDEX:139) */
/* 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:140) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

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

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

/* START_SNIPPET:bento-grid (INDEX:147) */
.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:148) */
.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:breadcrumbs (INDEX:150) */
{%- comment -%}
    This snippet renders in one of two different parents depending on
    whether the product has media (see product-information-content.liquid):
    as a direct child of .product-information (a full-width grid row,
    products with no media) or nested inside .product-information__media
    (normal block flow, alongside the gallery — the common case). The two
    need different spacing, so the rules below are split by direct-child
    selector rather than a single shared .breadcrumbs rule.

    No grid-column override in either case, on purpose: as a grid-row
    sibling it should inherit the section's own column rule (2 for a
    page-width section, so it lines up with the page margins like
    everything else; 1 / -1 for a full-width section) — hardcoding 1 / -1
    here once made it always span the raw viewport edges, misaligned with
    the page margins in the default page-width layout. Nested inside the
    media column there's no grid at all to opt out of; its width is
    already bounded by that column.
  {%- endcomment -%}

  .product-information > .breadcrumbs {
    /* Full-width row placement (products with no media only, so there's
       only one column and this asymmetry can't arise): the section hands
       this row 16px above (its padding-block-start) and 40px below
       (row-gap: var(--gap)), so it sat 2.5x closer to the nav bar than to
       the product it introduces and read as trailing the nav rather than
       heading the content. A label belongs to what follows it: add a
       matching 16px on top so it clears the nav by 32px, and cancel the
       inherited row gap back down to 16px underneath.

       --gap is set inline on .product-information and inherits down to
       here, so this tracks the merchant's gap setting rather than
       hardcoding 40px. No fallback on purpose — this rule only ever
       applies inside that wrapper, and a fallback would silently add
       space if that ever stopped being true. */
    margin-block-start: var(--padding-lg);
    margin-block-end: calc(var(--padding-lg) - var(--gap));
  }

  .product-information__media > .breadcrumbs {
    /* Nested-in-media placement (the common case, whenever the product has
       photos): plain block flow now, not a grid row, so there's no row-gap
       to cancel out. No top margin — its own column's box already starts
       level with the details column (see the modifier rule below for why
       the title itself needs the offset instead). Only a direct gap down
       to the image sitting below it. */
    margin-block-end: var(--padding-sm);
  }

  .product-information--has-breadcrumbs .product-details {
    /* Nudges the title down a bit now that the chip beside it starts flush
       with the row top (the rule above) — without this the title reads as
       too close to the nav, since it lost the extra clearance the old
       full-width chip row used to push it down by. Scoped to pages where
       the chip actually renders (via the wrapper's modifier class, set in
       product-information-content.liquid) so an ordinary product page —
       no breadcrumb match, or breadcrumbs disabled — is unaffected. */
    margin-block-start: var(--padding-xs);
  }

  .breadcrumbs__back {
    display: inline-flex;

    /* flex-start rather than center so the chevron pins to the first line
       when the label wraps. A long collection name plus its count ("78
       more Santoku (Multi-Purpose Knife)") does run to two lines at 320px,
       and centred across both the chevron floats in the gutter between
       them, pointing at nothing. Identical to center on the single line
       this renders as at every other width. */
    align-items: flex-start;
    gap: var(--gap-2xs);

    /* A chip rather than a bare line of text, because as text it read as
       stray copy rather than as something you could click.

       Borrows the unselected variant button's own tokens rather than
       approximating them, so the two are the same object by construction:
       .variant-option__button-label (assets/base.css:2568) is border +
       --color-variant-border, radius --variant-picker-button-radius,
       fill --color-variant-background. Those are scheme-level tokens and
       .product-information carries the scheme class, so they resolve here.
       Restyling variant buttons in the theme editor now restyles this too,
       which is the point — matching by copied values would drift the first
       time someone changed one. */
    padding: var(--padding-xs) var(--padding-sm);
    border: var(--variant-picker-button-border-width) solid var(--color-variant-border);
    border-radius: var(--variant-picker-button-radius);
    background-color: var(--color-variant-background);

    /* No negative inline margin to optically align the label with the grid.
       .menu-categories__back does exactly that, but it is transparent at
       rest and only fills on hover, so its bleed is never seen. This chip
       is filled and bordered all the time, and pulling it left left the box
       visibly hanging into the page margin, out past the product image
       below it. With a visible box the edge is what the eye tracks, so the
       box gets the alignment and the label sits inset within it. */

    /* 13px, a step below the variant buttons' own size: same family, but
       subordinate to the controls that actually configure the purchase.
       Uppercase earns its place here where it did not on the old trail —
       that ended in a 63-character product title, where uppercase added
       width and flattened the case contrast in "VG-10"/"16 Layer". This
       is a short category name, which is what the recipe is built for. */
    font-size: var(--font-size--xs);
    font-weight: var(--font-subheading--weight);
    letter-spacing: var(--letter-spacing-sm);
    text-transform: uppercase;

    /* Overrides base.css's `a { color: var(--color-primary) }`, and takes
       the variant button's text colour for the same reason as the box. */
    color: var(--color-variant-text);

    /* No underline: the chip itself is the affordance, and the hover is
       the fill deepening. An underline on top would be belt and braces. */
    text-decoration: none;

    transition:
      background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .breadcrumbs__back-icon {
    display: inline-flex;
    align-items: center;
    flex: none;
    width: 0.5em;

    /* Exactly one line box tall, so centring inside it lands the chevron on
       the optical middle of the first line rather than the middle of the
       whole (possibly wrapped) label. */
    height: calc(var(--font-size--xs) * var(--line-height--body-normal));

    transition: transform var(--animation-speed) var(--animation-easing);
  }

  /* Keyboard and pointer land in the same visual state. No outline
     declared here on purpose: base.css already rings every :focus-visible
     in --color-primary, and this should not diverge from it. */
  .breadcrumbs__back:hover,
  .breadcrumbs__back:focus-visible {
    background-color: var(--color-variant-hover-background);
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  /* Same nudge the Labor Day hero gives its CTA arrow, mirrored: the
     chevron points back, so it moves back. */
  .breadcrumbs__back:hover .breadcrumbs__back-icon {
    transform: translateX(-2px);
  }

  @media (prefers-reduced-motion: reduce) {
    .breadcrumbs__back-icon {
      transition: none;
    }
  }
/* END_SNIPPET:breadcrumbs */

/* START_SNIPPET:button (INDEX:151) */
.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:152) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .product__pickup-availabilities {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

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

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

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

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

  .volume-pricing__table {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }

  .preorder-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--padding-xs);
    margin-block-start: var(--padding-sm);
    padding: var(--padding-sm);
    border: 1px solid var(--color-lowstock);
    border-radius: var(--style-border-radius-buttons-primary);
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
  }

  .preorder-notice__icon,
  .preorder-notice__icon svg {
    flex-shrink: 0;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-lowstock);
  }

  .preorder-notice__icon circle:first-of-type {
    opacity: 0.3;
  }

  .preorder-notice__title {
    display: block;
  }

  .buy-buttons-block__preorder-warning {
    display: block;
    margin-block-end: var(--padding-sm);
    padding: var(--padding-sm);
    border: 1px solid var(--color-outofstock);
    border-radius: var(--style-border-radius-buttons-primary);
    color: var(--color-outofstock);
    font-size: smaller;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:153) */
.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:154) */
.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);
    /* Also set on the ancestor (not just .cart-bubble__background, an
       absolutely-positioned sibling of the text) so contrast checkers that
       walk up the DOM for background-color resolve the badge's real
       background instead of falling through to the page background. */
    background-color: var(--color-primary-button-background);
    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:155) */
.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:156) */
.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-85));
  }

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

  .cart-items__property--preorder {
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__preorder-badge {
    display: inline-block;
    padding: 2px var(--padding-xs);
    border: 1px solid var(--color-lowstock);
    border-radius: var(--style-border-radius-buttons-secondary);
    color: var(--color-lowstock);
    font-size: smaller;
  }

  @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:157) */
.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:159) */
.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: contain;
    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:162) */
.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:163) */
.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:164) */
.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:165) */
.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:166) */
/* 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:170) */
.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:172) */
.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:173) */
.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:handle-install-service (INDEX:174) */
/* Same block padding, centered label-above-content shape, and hairline
     label treatment as steel-warning — the two are siblings in the same
     row position (directly above the headline facts) and should read as
     one system, not a lookalike that drifts when that block is restyled. */
  .handle-install-note {
    padding-block: var(--gap-sm);
    padding-inline: var(--gap-sm);
    border-top: 1px solid var(--color-border);
    background: linear-gradient(
      to bottom,
      rgb(var(--color-primary-rgb) / var(--opacity-8)),
      rgb(var(--color-primary-rgb) / var(--opacity-5))
    );
    text-align: center;
  }

  .handle-install-note__label.product-spec-highlights__label {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    max-width: var(--max-width--body-normal);
    margin-block: 0 var(--gap-xs);
    margin-inline: auto;
  }

  .handle-install-note__label::before,
  .handle-install-note__label::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-border);
  }

  .handle-install-note__copy {
    max-width: var(--max-width--body-normal);
    margin: 0 auto;
    text-wrap: balance;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    line-height: var(--line-height--body-normal);
    color: var(--color-foreground);
  }

  /* The one thing steel-warning's copy never needs: an inline link that
     has to read as a link (underlined) while sitting in body-colored
     text, not the scheme's link-blue, so it doesn't clash with the tint
     behind it. */
  .handle-install-note__copy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
/* END_SNIPPET:handle-install-service */

/* START_SNIPPET:header-actions (INDEX:175) */
.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;
  }

  /* Match the cart icon's size so the two read as a pair */
  .account-button__icon,
  .account-button__icon svg {
    display: block;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  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;
    align-items: center;

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

  /* Accent tint on the hovered/focused action. Scoped to #header-component to
     out-specify both the transition reset in header.liquid (which pins header
     link transitions to the transparent-header timing, 0s at rest) and the
     .header-actions__action base color. Opacity stays in the list so the
     existing sibling-dimming keeps animating. */
  #header-component .header-actions__action {
    transition: color var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  #header-component .header-actions__action:is(:hover, :focus-visible) {
    --button-color: var(--color-primary);
  }

  /* The account icon's color routes through --color-account-icon (set on
     .header__row), so re-point it on hover/focus of the account button. */
  #header-component .account-button:is(:hover, :focus-within) {
    --color-account-icon: var(--color-primary);
  }

  #header-component .account-button__icon {
    transition: color var(--animation-speed) var(--animation-easing);
  }

  @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-drawer__heading .cart-bubble .cart-bubble__background {
    /* Set on both: .cart-bubble is the text's actual ancestor (needed for
       contrast checkers to resolve the right background), while
       .cart-bubble__background stays for the pulse animation layer. */
    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;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:176) */
.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:181) */
.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:185) */
.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:186) */
/* 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:187) */
.media-block {
    overflow: hidden;
    position: relative;

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

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:195) */
.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:196) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    /* Matches the brand's 2px corner language */
    --pagination-radius: 2;

    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-primary);
    outline-offset: 2px;
  }

  /* Current page: hairline outline instead of a solid fill (see ::before rules) */
  .pagination__link--current {
    background-color: transparent;
    color: var(--color-foreground);
    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.75;
    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: transparent;
      box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-40));
      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: transparent;
      box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-40));
      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:197) */
.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:201) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

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

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

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

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

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

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:204) */
/* 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:206) */
.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);
    letter-spacing: 0.06em;
    border-radius: var(--badge-border-radius);

    /* Hairline edge in the badge's own scheme border color, so the chip
       reads as a deliberate label rather than a flat sticker */
    box-shadow: inset 0 0 0 1px rgb(var(--color-border-rgb) / 0.9);
  }

  .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:208) */
.product-card {
    position: relative;
    display: block;
    width: 100%;
  }

  /* SINGLE OVERLAY LINK */
  .product-card__link {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
  }

  .product-card__content {
    position: relative;
    z-index: 1;
  }

  .product-card__inner {
    position: relative;
  }

  /* CRITICAL ADA FIX:
     Prevent nested links inside product card content */
  .product-card__inner a {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
  }

  /* Sold-out cards: quiet the image but keep it legible; the "Sold out"
     badge (rendered by the card gallery) carries the actual message. */
  .product-card.unavailable .card-gallery img {
    opacity: 0.65;
    filter: grayscale(25%);
  }

  /* Restrained hover: the image breathes inside its clipped frame
     (.card-gallery has overflow: hidden) and the title gains an accent
     underline. Guarded so touch devices and reduced-motion users see none. */
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .product-card .card-gallery .product-media-container img {
      transition: transform 0.4s var(--animation-timing-fade-in);
    }

    .product-card:hover .card-gallery .product-media-container img {
      transform: scale(1.03);
    }
  }

  /* Mirrors the theme's link underline primitive (base.css) */
  .product-card__inner p[role='heading'] {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed-slow) var(--animation-easing);
  }

  .product-card:hover .product-card__inner p[role='heading'] {
    text-decoration-color: var(--color-primary);
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:209) */
.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:210) */
.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;
    }
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:211) */
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;
    }
  }

  /*
   * Videos are usually shot at a very different aspect ratio than a
   * product's photos (e.g. 9:16 or 16:9 vs. photos all at 3:2), so they're
   * rendered in their own full-width row below the photo grid rather than
   * being cropped/distorted into a photo-sized grid cell.
   */
  .media-gallery__video-row {
    margin-top: var(--image-gap);
  }

  .media-gallery__video-row-item {
    grid-column: 1 / -1;
    /* Always use the video's own aspect ratio, ignoring any fixed
       aspect ratio forced on the rest of the gallery's photos. */
    --gallery-aspect-ratio: var(--media-preview-ratio);
  }

  /*
   * The video plays at its normal in-grid size by default - this button
   * just offers a way to view it larger, without covering the video and
   * blocking its own play/pause interaction the way a full-size overlay
   * button would.
   */
  .media-gallery__video-maximize-button {
    position: absolute;
    right: var(--padding-sm);
    bottom: var(--padding-sm);
    z-index: var(--layer-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: rgb(var(--color-foreground-rgb) / 0.5);
    color: rgb(var(--color-background-rgb));
    cursor: pointer;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / 0.7);
    }
  }

  /*
   * When the zoom dialog is opened from a video (via the maximize button),
   * only let you browse between the product's other videos - hide the
   * photos from the scrollable list and thumbnail column so they don't
   * show up as unrelated options alongside the video(s).
   */
  zoom-dialog[data-media-filter-video] .dialog-zoomed-gallery
    > li:not(.product-media-container--video):not(.product-media-container--external_video),
  zoom-dialog[data-media-filter-video] .dialog-thumbnails-list__thumbnail:not([data-media-type='video']):not(
      [data-media-type='external_video']
    ) {
    display: none;
  }

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

  .cloud-zoom {
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
  }

  @media (hover: hover) and (pointer: fine) and (min-width: 750px) {
    .cloud-zoom:hover {
      cursor: crosshair;
    }
  }

  .cloud-zoom__lens {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--layer-raised);
    background-color: rgb(255 255 255 / 0.35);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out, transform 80ms ease-out, width 80ms ease-out, height 80ms ease-out;
  }

  .cloud-zoom__lens--visible {
    opacity: 1;
  }

  .cloud-zoom__panel {
    position: fixed;
    z-index: var(--layer-overlay);
    overflow: hidden;
    background-color: var(--color-background);
    border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
    border-radius: var(--media-radius);
    box-shadow: var(--shadow-block-start-sm-offset-x) var(--shadow-block-start-sm-offset-y)
      var(--shadow-block-start-sm-blur-radius) var(--shadow-block-start-sm-color);
    pointer-events: none;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
  }

  .cloud-zoom__panel--visible {
    opacity: 1;
    transform: translateX(0);
  }

  .cloud-zoom__panel-image {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: transform 80ms ease-out, width 80ms ease-out, height 80ms ease-out;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:212) */
.dialog-thumbnails-list-container {
    position: relative;
    order: 2;
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    /* Always white, independent of the active color scheme - see the
       cinematic-chrome comment on .dialog-zoomed-gallery__close-button.
       color is set here too since the selected-thumbnail outline below
       uses currentcolor. A near-solid white hairline frames the selected
       thumbnail (the previous --media-border-opacity dependency was never
       defined anywhere, so the border computed to an invalid color and
       never rendered). */
    --active-thumbnail-border-color: rgb(var(--color-white-rgb) / var(--opacity-90));
    color: var(--color-white);

    /* The lightbox is a large focused view, so its thumbnails are larger than
       the merchant's compact main-gallery --thumbnail-width (which otherwise
       reads as tiny here). Scales gently with the stage, capped both ends. */
    --thumbnail-width: clamp(68px, 4.2vw, 96px);

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: var(--gap-xs);
    max-width: 100%;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-sm);
    margin-inline: auto;
    scrollbar-width: none;
    background: var(--zoom-chrome-bg);
    backdrop-filter: var(--zoom-chrome-blur);
    -webkit-backdrop-filter: var(--zoom-chrome-blur);
    border-radius: var(--style-border-radius-md);
    box-shadow: var(--zoom-chrome-shadow);
    /* The edge-fade is driven dynamically by the <scroll-hint> wrapper
       (ScrollHint) only when the row actually overflows; no static mask. */
    animation: thumbnailsSlideInBottom var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
    /* Slide the strip up just after the panel/photo settle, on the same
       spring family, for a brief staged reveal (stage first, then controls). */
    animation-delay: var(--spring-d180-b0-duration);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--spring-d180-b0-duration) var(--spring-d180-b0-easing),
      box-shadow var(--spring-d180-b0-duration) var(--spring-d180-b0-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-current='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);
      transform: scale(1.04);
      box-shadow: var(--zoom-chrome-shadow);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-current='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);
      box-shadow: var(--zoom-chrome-shadow);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-current='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-current='true']) {
      outline: none;
      border: none;
      box-shadow: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-lg);
    right: var(--padding-lg);
  }

  @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 {
    view-transition-name: zoom-dialog-ui;

    /* One shared "glass" material for every always-dark chrome surface
       (thumbnail pill, close/nav/counter), so they read as one material
       rather than three slightly-different recipes. The ::backdrop scrim is
       deliberately kept distinct (it is the scrim, not a pill). The shadow is
       built from pure black so it is independent of the active color scheme
       AND of settings.popover_drop_shadow - the previous --shadow-popover was
       invisible black-on-black on the panel and undefined when that setting
       was off. */
    --zoom-chrome-bg: rgb(0 0 0 / var(--opacity-80));
    --zoom-chrome-blur: blur(10px);
    --zoom-chrome-shadow: 0 4px 20px rgb(0 0 0 / var(--opacity-40));
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
  }

  /* Only image slides close the dialog on click - don't advertise zoom-out
     on video/model slides where clicking does nothing of the sort. */
  .dialog-zoomed-gallery
    :is(
      .product-media-container--video,
      .product-media-container--external_video,
      .product-media-container--model
    ) {
    cursor: default;
  }

  .dialog--preloading {
    opacity: 0;
  }

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

  /* The cinematic dialog has no mix-blend-mode chrome (its nav arrows are
     opaque dark circles), so the contain-fit letterbox gutters should be
     transparent rather than filled with --color-background. The image then
     floats on the dark panel as one cohesive stage instead of being boxed
     in a white mat. Outranks the .media-fit-contain img source rule by
     specificity, leaving the main gallery's blend-mode backdrop intact. */
  .dialog-zoomed-gallery .media-fit-contain :is(img, .deferred-media__poster-image) {
    background-color: transparent;
  }

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

  /* Zoom dialog videos render as ONE contained, natural-size player: a poster
     with a play-button overlay (no auto-play). On click the poster is removed
     and the video plays in its place - centered, at its natural aspect ratio,
     with the native control bar directly beneath it. Never stretched
     edge-to-edge or cropped, and the video does not shift when it appears
     (the poster is display:none once playing so it reserves no space). */
  .dialog-zoomed-gallery
    :is(.product-media-container--video, .product-media-container--external_video)
    .product-media {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* deferred-media is the centering stage; hide the outer product image and
     un-hide deferred-media's own poster so there is exactly one media frame. */
  .dialog-zoomed-gallery
    :is(.product-media-container--video, .product-media-container--external_video)
    .product-media
    > .product-media__image {
    display: none;
  }

  .dialog-zoomed-gallery
    :is(.product-media-container--video, .product-media-container--external_video)
    deferred-media {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    overflow: visible;
  }

  /* Poster button: fills the (definite-sized) deferred-media stage and
     centers the poster image inside it. It must NOT shrink-wrap: the poster
     image below is capped with min(100%, ...), and percentages inside an
     auto-sized box are cyclic - CSS drops the whole min() in that case,
     leaving the poster uncapped. A definite 100% x 100% box keeps the
     percentages resolvable. */
  .dialog-zoomed-gallery
    :is(.product-media-container--video, .product-media-container--external_video)
    deferred-media
    .deferred-media__poster-button {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Remove the poster from layout once playing so the video takes its exact
     place instead of being pushed below it. */
  .dialog-zoomed-gallery
    :is(.product-media-container--video, .product-media-container--external_video)
    deferred-media
    .deferred-media__poster-button.deferred-media__playing {
    display: none;
  }

  /* Poster image + the played native <video>: natural size, contained,
     centered, capped to a comfortable margin inside the dialog panel. The
     min(100%, ...) cap keeps a tall/portrait video within the actual media
     area (not the whole dialog), so it never overlaps the thumbnail rail on
     phones; on desktop the calc() fraction wins and leaves a margin. */
  .dialog-zoomed-gallery
    :is(.product-media-container--video, .product-media-container--external_video)
    deferred-media
    :is(.deferred-media__poster-image, video) {
    display: block;
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    max-width: min(100%, calc(var(--zoom-dialog-width) * 0.9));
    max-height: min(100%, calc(var(--zoom-dialog-height) * 0.85));
    object-fit: contain;
    aspect-ratio: auto;
  }

  /* External embeds (YouTube/Vimeo <iframe>) have no intrinsic size, so they
     need an explicit responsive box at 16:9 - otherwise width:auto collapses
     them to the 300x150 iframe default. */
  .dialog-zoomed-gallery
    :is(.product-media-container--video, .product-media-container--external_video)
    deferred-media
    iframe {
    display: block;
    position: relative;
    inset: auto;
    width: min(100%, calc(var(--zoom-dialog-width) * 0.9));
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: min(100%, calc(var(--zoom-dialog-width) * 0.9));
    max-height: min(100%, calc(var(--zoom-dialog-height) * 0.85));
    border: none;
  }

  .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 screen and (max-width: 749px) {
    .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;
        }
      }
    }
  }

  /*
   * The zoom dialog's chrome (close/nav buttons, counter, thumbnail strip)
   * is intentionally always dark, regardless of the active color scheme -
   * a cinematic lightbox where the photo is the hero and the UI recedes,
   * rather than chrome that's tinted by (and can wash out against) whatever
   * scheme/photo is currently showing.
   */
  .dialog-zoomed-gallery__close-button,
  .dialog-zoomed-gallery__nav-button,
  .dialog-zoomed-gallery__counter {
    color: var(--color-white);
    background-color: var(--zoom-chrome-bg);
    backdrop-filter: var(--zoom-chrome-blur);
    -webkit-backdrop-filter: var(--zoom-chrome-blur);
    box-shadow: var(--zoom-chrome-shadow);
  }

  /* Kill the double-tap-to-zoom delay on the dialog's tap targets so
     rapid prev/next taps respond instantly on touch devices. */
  .dialog-zoomed-gallery__close-button,
  .dialog-zoomed-gallery__nav-button,
  .dialog-thumbnails-list__thumbnail {
    touch-action: manipulation;
  }

  .dialog-zoomed-gallery__close-button,
  .dialog-zoomed-gallery__nav-button {
    position: absolute;
    z-index: var(--layer-raised);
    border-radius: 50%;
    transition: transform var(--animation-speed) var(--ease-out-quad),
      background-color var(--animation-speed) var(--ease-out-quad),
      opacity var(--animation-speed) var(--ease-out-quad);
  }

  .close-button.dialog-zoomed-gallery__close-button {
    position: absolute;
    top: var(--margin-lg);
    right: var(--margin-lg);

    /* Larger, bolder X so it reads clearly inside the dark circle, matching
       the prev/next arrows rather than the tiny faint shared close icon. */
    --icon-stroke-width: 2px;
  }

  .close-button.dialog-zoomed-gallery__close-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .dialog-zoomed-gallery__close-button:hover,
  .dialog-zoomed-gallery__nav-button:hover {
    background-color: rgb(0 0 0 / var(--opacity-90));
    transform: scale(1.04);
  }

  .dialog-zoomed-gallery__nav-button {
    top: 50%;
    translate: 0 -50%;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Dim only the caret glyph, not the whole glass pill, so the disabled
     control still reads as a present (inactive) chrome surface and the
     remaining glyph keeps enough contrast. */
  .dialog-zoomed-gallery__nav-button:disabled {
    pointer-events: none;
  }

  .dialog-zoomed-gallery__nav-button:disabled .icon-caret {
    opacity: var(--opacity-40);
  }

  .dialog-zoomed-gallery__nav-button .icon-caret {
    --icon-stroke-width: 2px;
    display: flex;
    rotate: -90deg;
    transition: opacity var(--animation-speed) var(--ease-out-quad);

    svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }
  }

  .dialog-zoomed-gallery__nav-button--previous {
    left: var(--margin-lg);
  }

  .dialog-zoomed-gallery__nav-button--previous .icon-caret {
    rotate: 90deg;
  }

  .dialog-zoomed-gallery__nav-button--next {
    right: var(--margin-lg);
  }

  .dialog-zoomed-gallery__counter {
    position: absolute;
    top: var(--margin-lg);
    left: 50%;
    translate: -50% 0;
    z-index: var(--layer-raised);
    padding: var(--padding-2xs) var(--padding-sm);
    border-radius: var(--style-border-radius-md);
    font-size: var(--font-size--sm);
    /* Tabular figures hold the pill at a fixed width as the index pages
       (1 -> 10), and a touch of tracking gives an engraved, considered feel. */
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--letter-spacing-sm);
  }

  .dialog-zoomed-gallery__counter-slash {
    margin-inline: 0.25em;
    opacity: var(--opacity-50);
  }

  /* Keep the prev/next arrows on mobile - the lightbox has no swipe gesture,
     so without them thumbnails were the only way to change media on phones.
     They are already minimum-touch-target sized; just tuck them closer to the
     edges so they cover less of the photo on a narrow screen. */
  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery__nav-button--previous {
      left: var(--margin-2xs);
    }

    .dialog-zoomed-gallery__nav-button--next {
      right: var(--margin-2xs);
    }
  }

  /* 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: 100%;
  }

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

  /* Honor reduced-motion for every piece of dialog chrome motion. The image
     morph itself is already skipped in JS (open/close bail to the instant
     path under prefers-reduced-motion); zeroing the view-transition-group
     durations here is defense-in-depth. */
  @media (prefers-reduced-motion: reduce) {
    .dialog-thumbnails-list,
    .dialog--closed .dialog-thumbnails-list {
      animation: none;
      opacity: 1;
    }

    .dialog-thumbnails-list__thumbnail,
    .dialog-zoomed-gallery__close-button,
    .dialog-zoomed-gallery__nav-button,
    .dialog-zoomed-gallery__nav-button .icon-caret {
      transition: none;
    }

    .dialog-zoomed-gallery__close-button:hover,
    .dialog-zoomed-gallery__nav-button:hover {
      transform: none;
    }

    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-duration: 0.01ms;
    }
  }

  /*
   * 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:213) */
.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:214) */
.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:215) */
#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 .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:217) */
/* 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:219) */
.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[data-resource-type='collection'] .resource-card__image {
    object-fit: contain;
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 3 / 2;
    object-fit: contain;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:220) */
.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: contain;
    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:221) */
.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:224) */
/* 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-85));

    @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;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:225) */
/* ----------------------------------------------------------------------------
     Header search: desktop = inline predictive bar, mobile = search icon link.
     Visibility is baked into the variant classes so it's correct before and
     after the JS sets data-menu-style (no flash) and regardless of layout.
  ---------------------------------------------------------------------------- */

  /* Inline predictive bar: desktop (menu layout) only. */
  .search-action--inline {
    display: flex;
    align-items: center;
  }

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

  #header-component[data-menu-style='drawer'] .search-action--inline {
    display: none;
  }

  /* Search icon: mobile (drawer layout) only. */
  .search-action--icon {
    display: none;
    align-items: center;
  }

  @media screen and (max-width: 749px) {
    .search-action--icon {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .search-action--icon {
    display: flex;
  }

  .header-search__icon-link {
    --button-color: var(--color-foreground);

    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    min-height: var(--minimum-touch-target);
    color: var(--button-color);
    cursor: pointer;
  }

  .header-search__icon-link .svg-wrapper,
  .header-search__icon-link svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  /* ---- Inline predictive bar ---- */
  .header-search-predictive {
    position: relative;
    display: flex;
    align-items: center;
  }

  .header-search__form {
    position: relative;
    width: clamp(260px, 30vw, 420px);
  }

  .header-search__field {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    height: 40px;
    padding-inline: var(--padding-sm);
    background: var(--color-input-background, var(--color-background));
    color: var(--color-input-text, var(--color-foreground));
    border: var(--style-border-width-inputs, 1px) solid var(--color-input-border, var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    transition: border-color var(--animation-speed) var(--animation-easing),
      box-shadow var(--animation-speed) var(--animation-easing);
  }

  .header-search__field:focus-within {
    /* Soft accent ring instead of the default offset outline: a 2px ring
       (border + spread shadow) with a faint halo. The transparent outline
       keeps a visible ring in forced-colors mode, where box-shadow is
       dropped but outline colors are substituted. */
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 4px rgb(var(--color-primary-rgb) / 0.1);
    outline: var(--focus-outline-width, 2px) solid transparent;
    outline-offset: calc(-1 * var(--style-border-width-inputs, 1px));
  }

  .header-search__icon {
    display: flex;
    flex: 0 0 auto;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    color: rgb(var(--color-input-text-rgb, var(--color-foreground-rgb)) / var(--opacity-85, 0.85));
  }

  .header-search__icon svg {
    width: 100%;
    height: 100%;
  }

  .header-search__input.search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: var(--font-size--sm, 0.875rem);
    text-overflow: ellipsis;
  }

  .header-search__input.search-input:focus,
  .header-search__input.search-input:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .header-search__input::placeholder {
    color: rgb(var(--color-input-text-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    letter-spacing: 0.02em;
  }

  .header-search__reset {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
  }

  .header-search__reset:hover {
    opacity: 1;
  }

  .header-search__reset[hidden] {
    display: none;
  }

  .header-search__reset svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  /* Results dropdown */
  .header-search__results {
    position: absolute;
    top: calc(100% + var(--gap-2xs));
    right: 0;
    left: auto;
    display: none;
    flex-direction: column;
    width: min(420px, 92vw);
    max-height: min(70vh, 560px);
    overflow: hidden;
    background: var(--color-background);
    border: var(--style-border-width, 1px) solid var(--color-border);
    border-radius: var(--style-border-radius-popover, 8px);
    box-shadow: var(--shadow-popover, 0 8px 24px rgb(0 0 0 / 0.16));
    z-index: var(--layer-window-overlay, 100);
  }

  /* Only open when the input is focused AND the user has typed something
     (:not(:placeholder-shown) = the field has a value). This stops the panel
     from auto-opening on an empty bar — including when keyboard users tab into
     it — so an empty search never dumps the recently-viewed/empty state on the
     page or pulls focus into a list of suggestions.
     mousedown:preventDefault on the dropdown keeps focus-within true long enough
     for a result click to register before the input blurs. */
  .header-search-predictive:focus-within:has(.header-search__input:not(:placeholder-shown))
    .header-search__results {
    display: flex;
  }

  .header-search__results .predictive-search-form__content {
    /* Own containment context so the results grid sizes to the dropdown
       (keeps it a clean 2-column layout instead of inheriting a wide one). */
    container-type: inline-size;
    overflow-y: auto;
    padding-block: var(--padding-sm);
    -webkit-overflow-scrolling: touch;
  }

  .header-search__results .predictive-search-form__footer {
    display: none;
    padding: var(--padding-sm);
    border-top: var(--style-border-width, 1px) solid var(--color-border);
    background: var(--color-background);
  }

  .header-search__results:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .header-search__results .predictive-search__search-button {
    width: 100%;
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:226) */
.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:228) */
.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:230) */
.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:231) */
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:232) */
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:234) */
/*
   * 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;
    /* `auto none` looks like a fallback size but isn't one -- verified in
       a real browser: its computed contain-intrinsic-size is identical to
       declaring nothing at all. `none` means no placeholder length, so a
       slide content-visibility skips before it has ever been measured (the
       common case: anything below the fold on first load) collapses to 0
       height instead of a placeholder. The page then grows out from under
       the scroll position the moment that slide is finally reached, which
       reads as the page fighting the scroll or refusing to move -- the
       same defect fixed for the footer in sections/footer.liquid, but this
       one is the shared base rule for every <slideshow-slide> in the
       theme (product gallery, Related Items, card-gallery hover previews,
       resource-list carousels), so a longer page -- e.g. every accordion
       row expanded -- pushes more of them past the point where this ever
       mattered. 400px is a generic placeholder, not a measurement: once a
       slide is actually visible its real width/aspect-ratio take over
       completely, this number is only ever shown for the split second
       before a not-yet-rendered slide is measured for the first time. */
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
    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:236) */
.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:steel-warning (INDEX:240) */
/* Same block padding and centered label-above-content shape as the
     spec row it sits on top of, so the two read as one system. No icon
     or colored heading — those turned this back into an alert card
     sitting on the grid instead of a row of it.

     Every color here is a scheme token, never a fixed hex — the tint is
     the section's own primary at low opacity, so it follows whatever
     primary the scheme defines (navy on the light scheme, gold on the
     dark ones) instead of pinning this one row to a blue that a root
     change would leave stranded. */
  .steel-warning {
    padding-block: var(--gap-sm);
    padding-inline: var(--gap-sm);
    border-top: 1px solid var(--color-border);
    /* Fades toward the hairline below, so the note lifts off the spec row
       rather than ending in a hard band against it. A flat fill this
       faint read as a grey box over the theme's warm ground; the stronger
       end keeps the tint legible where the eye lands first, at the label. */
    background: linear-gradient(
      to bottom,
      rgb(var(--color-primary-rgb) / var(--opacity-8)),
      rgb(var(--color-primary-rgb) / var(--opacity-5))
    );
    text-align: center;
  }

  /* Label type comes from .product-spec-highlights__label, applied
     alongside this class. Hairlines flank it rather than sitting under
     it: the spec row below already separates its facts with hairlines,
     so the same line used horizontally ties the two rows into one
     system while giving this one a shape of its own. They shrink with
     the label, so a longer heading never squeezes them out.

     Selector names both classes deliberately: the spec label sets
     `margin: 0` at the same specificity as this rule, so a single class
     here would win or lose on stylesheet order alone. */
  .steel-warning__label.product-spec-highlights__label {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    max-width: var(--max-width--body-normal);
    margin-block: 0 var(--gap-xs);
    margin-inline: auto;
  }

  .steel-warning__label::before,
  .steel-warning__label::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-border);
  }

  .steel-warning__copy {
    max-width: var(--max-width--body-normal);
    margin: 0 auto;
    /* Centered prose runs ragged on both edges — three lines stepping
       from long to short read as an accident. Balancing evens the line
       lengths so the block has a deliberate shape. */
    text-wrap: balance;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    line-height: var(--line-height--body-normal);
    color: var(--color-foreground);
  }
/* END_SNIPPET:steel-warning */

/* START_SNIPPET:text (INDEX:246) */
: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:255) */
/* 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:256) */
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:257) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }

  /* Touch devices have no hover, so keep the play/pause control visible. */
  @media (hover: none) {
    .video-interaction-hint {
      opacity: 1;
    }
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:258) */
.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-top) * 1px + var(--anchor-height) * 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 */