/** Shopify CDN: Minification failed

Line 12124:19 Expected identifier but found whitespace
Line 12124:21 Unexpected "{"
Line 12124:31 Expected ":"
Line 12125:18 Expected identifier but found whitespace
Line 12125:20 Unexpected "{"
Line 12125:30 Expected ":"
Line 12125:55 Expected ":"

**/
/* 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:endorsements (INDEX:6) */
.endorsements-section {
    padding-block: var(--endorsements-section-padding-top, 0px) var(--endorsements-section-padding-bottom, 0px);
  }

  .endorsements-section__heading {
    margin: 0;
  }
/* END_SECTION:endorsements */

/* START_SECTION:featured-event (INDEX:8) */
.featured-event__content {
    display: flex;
    flex-direction: column;
    gap: var(--featured-event-gap-mobile, var(--featured-event-gap, 16px));
    align-items: var(--featured-event-align, center);
    text-align: var(--featured-event-text-align, center);
    width: 100%;
    max-width: var(--featured-event-content-width, 720px);
    margin-inline: auto;

    @media screen and (min-width: 750px) {
      gap: var(--featured-event-gap, 16px);
    }
  }

  .featured-event__media {
    z-index: 0;
  }
/* END_SECTION:featured-event */

/* START_SECTION:featured-product (INDEX:10) */
/* ---- Standard layout ---- */
  /* Decorative background paints on a ::before layer so its opacity is
     independent of content and it sidesteps base.css's `.section` reset. */
  .product-hero--has-bg {
    position: relative;
  }

  .product-hero--has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--ph-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--ph-bg-opacity, 1);
    pointer-events: none;
  }

  .product-hero .section-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 6vw, 88px);
  }

  /* ---- Section width (page vs full) ---- */
  .fp-w-page .section-content-wrapper {
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
  }

  .fp-w-full .section-content-wrapper {
    max-width: none;
  }

  .product-hero__main {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
  }

  /* On mobile the grid is a single column; show the product image first
     (above the content) regardless of the desktop media position. */
  @media screen and (max-width: 749px) {
    .product-hero__media {
      order: -1;
    }
  }

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

    .product-hero__main--media-left .product-hero__media {
      order: -1;
    }

    /* No built-in media column (image placed as a block): content spans full width. */
    .product-hero__main--no-media {
      grid-template-columns: 1fr;
    }
  }

  .product-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fp-gap-mobile, var(--fp-gap, 24px));

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

  .product-hero__media {
    display: flex;
    justify-content: center;
  }

  .product-hero__image,
  .product-hero__image-placeholder {
    width: 100%;
    height: auto;
    max-width: 600px;
  }

  /* ---- Split layout: image bleeds to the edge, balanced 50/50 ---- */
  @media screen and (min-width: 750px) {
    .fp-hero--split .section-content-wrapper {
      max-width: none;
      padding-inline: 0;
      gap: clamp(32px, 4vw, 56px);
    }

    .fp-hero--split .product-hero__main {
      gap: 0;
      align-items: stretch;
    }

    .fp-hero--split .product-hero__media {
      justify-content: stretch;
    }

    .fp-hero--split .product-hero__image {
      max-width: none;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .fp-hero--split .product-hero__content {
      justify-content: center;
      padding-block: clamp(24px, 4vw, 64px);
      padding-inline-start: clamp(24px, 5vw, 80px);
      padding-inline-end: clamp(24px, 3vw, 40px);
    }

    .fp-hero--split .product-hero__main--media-left .product-hero__content {
      padding-inline-start: clamp(24px, 3vw, 40px);
      padding-inline-end: clamp(24px, 5vw, 80px);
    }

    .fp-hero--split .product-hero__endorsements {
      padding-inline: clamp(24px, 5vw, 80px);
    }
  }

  /* ---- Background layout: full-bleed image with content on top ----
     Uses the theme section grid (.section): the image bleeds across all
     columns (grid-column: 1 / -1) while the content sits in the central
     page-width column (section--page-width) or spans full width
     (section--full-width), so it lines up with every other section. */
  /* overflow: clip (not hidden) so the hero does NOT become a scroll
     container — otherwise the parallax image's view() timeline resolves
     against this box (which never scrolls) and the animation stays frozen.
     clip still trims the oversized parallax image. */
  .fp-hero--background {
    overflow: clip;
  }

  .fp-hero--background > .fp-hero__bg-media {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .fp-hero__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Optional scroll parallax: the bleed layer is grown slightly taller than the
     hero and drifts within it as the section scrolls through the viewport.
     Intensity (--fp-parallax, 0-100) maps to a deliberately subtle max shift.
     Falls back to a static image where scroll-driven animations or motion aren't
     available.

     The bleed layer is whichever element is the direct child of .fp-hero__bg-media:
     the single <img> (.fp-hero__bg-image) or, when the cycler is active, the
     <image-cycler> wrapper (.fp-cycler--bg). We transform the WRAPPER, not its
     stacked images — they just fill it (height: 100% over a 1fr grid row), so the
     grow + drift keeps the bleed area covered. The `> :is(...)` excludes the
     nested cycler images so they aren't drifted out from under the wrapper (which
     left a gap at the bottom of the hero). */
  .fp-hero--parallax {
    --fp-parallax-shift: calc(var(--fp-parallax, 0) / 100 * 80px);
  }

  @supports (animation-timeline: auto) {
    .fp-hero--parallax .fp-hero__bg-media > :is(.fp-hero__bg-image, .fp-cycler--bg) {
      height: calc(100% + 2 * var(--fp-parallax-shift, 0px));
      margin-block-start: calc(-1 * var(--fp-parallax-shift, 0px));
      animation: fp-parallax-drift both linear;
      animation-timeline: view();
    }
  }

  @keyframes fp-parallax-drift {
    from { transform: translateY(calc(-1 * var(--fp-parallax-shift, 0px))); }
    to { transform: translateY(var(--fp-parallax-shift, 0px)); }
  }

  @media (prefers-reduced-motion) {
    .fp-hero--parallax .fp-hero__bg-media > :is(.fp-hero__bg-image, .fp-cycler--bg) {
      height: 100%;
      margin-block-start: 0;
      animation: none;
    }
  }

  /* Optional subtle zoom: a slow, centered scale that gives the background a
     sense of life. Intensity (--fp-zoom-intensity, 0-100) maps to a small max
     scale; the slider's sign picks the direction (zoom in = grow first,
     zoom out = reverse). Uses the `scale` property so it composes with the
     parallax `transform` rather than overriding it. Targets the same bleed layer
     as the parallax (wrapper in cycler mode) so the two effects compose on one
     element. */
  .fp-hero--zoom .fp-hero__bg-media > :is(.fp-hero__bg-image, .fp-cycler--bg) {
    --fp-zoom-scale: calc(1 + (var(--fp-zoom-intensity, 0) / 100) * 0.1);
    animation: fp-zoom 12s ease-in-out infinite alternate;
  }

  .fp-hero--zoom-out .fp-hero__bg-media > :is(.fp-hero__bg-image, .fp-cycler--bg) {
    animation-direction: alternate-reverse;
  }

  @keyframes fp-zoom {
    from { scale: 1; }
    to { scale: var(--fp-zoom-scale, 1); }
  }

  /* Parallax + zoom together: translate (scroll-driven) and scale (time-driven)
     run as two animations on their own timelines. */
  @supports (animation-timeline: auto) {
    .fp-hero--parallax.fp-hero--zoom .fp-hero__bg-media > :is(.fp-hero__bg-image, .fp-cycler--bg) {
      animation: fp-parallax-drift both linear, fp-zoom 12s ease-in-out infinite alternate;
      animation-timeline: view(), auto;
    }

    .fp-hero--parallax.fp-hero--zoom.fp-hero--zoom-out .fp-hero__bg-media > :is(.fp-hero__bg-image, .fp-cycler--bg) {
      animation-direction: normal, alternate-reverse;
    }
  }

  @media (prefers-reduced-motion) {
    .fp-hero--zoom .fp-hero__bg-media > :is(.fp-hero__bg-image, .fp-cycler--bg),
    .fp-hero--parallax.fp-hero--zoom .fp-hero__bg-media > :is(.fp-hero__bg-image, .fp-cycler--bg) {
      animation: none;
      scale: 1;
    }
  }

  .fp-hero__scrim {
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / var(--fp-scrim, 0));
  }

  /* Optional gradient fade to the color-scheme background, layered over the
     darken scrim. Fades from the scheme background (behind the copy) out to
     transparent, so text stays readable on busy images. The whole gradient —
     direction follows the content position, radial for center — is built in
     Liquid and passed as --fp-fade-gradient. */
  .fp-hero__fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--fp-fade-gradient, none);
  }

  .fp-hero__overlay-content {
    position: relative;
    z-index: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fp-gap-mobile, var(--fp-gap, 24px));
    width: min(560px, 100%);
    margin-block: clamp(24px, 5vw, 72px);

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

  /* Full-width content keeps the standard page gutter so it doesn't touch the edge. */
  .fp-hero--background.section--full-width .fp-hero__overlay-content {
    padding-inline: var(--page-margin);
  }

  .fp-hero--top-left .fp-hero__overlay-content { place-self: start start; }
  .fp-hero--top-center .fp-hero__overlay-content { place-self: start center; }
  .fp-hero--top-right .fp-hero__overlay-content { place-self: start end; }
  .fp-hero--center-left .fp-hero__overlay-content { place-self: center start; }
  .fp-hero--center .fp-hero__overlay-content { place-self: center center; }
  .fp-hero--center-right .fp-hero__overlay-content { place-self: center end; }
  .fp-hero--bottom-left .fp-hero__overlay-content { place-self: end start; }
  .fp-hero--bottom-center .fp-hero__overlay-content { place-self: end center; }
  .fp-hero--bottom-right .fp-hero__overlay-content { place-self: end end; }

  @media screen and (max-width: 749px) {
    .fp-hero__overlay-content {
      width: auto;
      margin-block: clamp(16px, 5vw, 28px);
    }
  }

  /* ---- Image cycler ----
     Slides are stacked in a single grid cell so the container keeps the
     natural size of the images; only opacity animates between them. */
  .fp-cycler {
    display: grid;
  }

  .fp-cycler > .fp-cycler__img {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 800ms ease-in-out;
  }

  .fp-cycler > .fp-cycler__img.is-active {
    opacity: 1;
  }

  /* Product media context: match the single-image sizing it replaces. */
  .product-hero__media .fp-cycler--media {
    width: 100%;
    max-width: 600px;
  }

  @media screen and (min-width: 750px) {
    .fp-hero--split .fp-cycler--media {
      max-width: none;
      height: 100%;
    }
  }

  /* Background context: fill the bleed area. Give the stacked-slide grid an
     explicit 1fr row track so each slide's `height: 100%` resolves to the hero
     height; without it the auto row track grows to the image's intrinsic height
     and `overflow: clip` trims it from the top, leaving the art anchored top
     instead of centered. `min-height: 0` stops the image's intrinsic size from
     forcing the 1fr track taller (so object-fit: cover + center take effect). */
  .fp-cycler--bg {
    width: 100%;
    height: 100%;
    grid-template-rows: 1fr;
  }

  .fp-cycler--bg > .fp-cycler__img {
    height: 100%;
    min-height: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .fp-cycler > .fp-cycler__img {
      transition: none;
    }
  }
/* END_SECTION:featured-product */

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

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

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

  .utilities > * {
    text-align: center;

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

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

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

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

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

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

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

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

/* START_SECTION:footer (INDEX:12) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap-mobile, var(--footer-gap));
  }

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

  @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:13) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
    /* Clip the 100vw slide-background breakout (100vw includes the scrollbar
       width, so without this the bar could cause horizontal scroll). */
    overflow: clip;
  }

  .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;
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    width: 100%;
    margin-inline: auto;
  }

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

  .announcement-bar__slide {
    padding-block: var(--announcement-padding-block-start, 0px) var(--announcement-padding-block-end, 0px);
    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 {
    flex: 0 0 auto;
    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:14) */
:root {
    /* Pre-JS fallback; the live value is set on the document element by header.js /
       utilities.js so it's available on the root scroll container for anchor links. */
    --header-height: 60px;
  }

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

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:hero (INDEX:15) */
.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:icon-highlights (INDEX:16) */
.icon-highlights {
    padding-block: var(--icon-highlights-padding-top, 32px) var(--icon-highlights-padding-bottom, 32px);
  }

  .icon-highlights__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
  }

  .icon-highlights__item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .icon-highlights__icon {
    font-size: 32px;
    line-height: 1;
  }

  .icon-highlights__label,
  .icon-highlights__label > * {
    margin: 0;
    text-wrap: balance;
  }

  .icon-highlights__progress .free-shipping-progress__message {
    order: -1;
    justify-content: center;
  }

  .icon-highlights__progress .free-shipping-progress__status {
    color: inherit;
    font-weight: 400;
  }

  .icon-highlights__progress .free-shipping-progress__status strong {
    font-weight: 700;
  }

  @media screen and (max-width: 749px) {
    .icon-highlights__list {
      gap: 32px;
    }

    .icon-highlights__item {
      flex: 1 1 100%;
      max-width: none;
    }
  }
/* END_SECTION:icon-highlights */

/* 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
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

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

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

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

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

/* START_SECTION:main-cart (INDEX: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__recommendations {
    grid-column: 1;
  }

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

  .cart-page--empty .cart-page__recommendations {
    width: 100%;
    max-width: 32rem;
  }

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

  html:active-view-transition-type(empty-cart-page),
  html:active-view-transition-type(active-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);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:24) */
.main-collection-grid {
    grid-column: var(--grid-column--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }
/* END_SECTION:main-collection */

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

  /* Separate mobile gap: redefine the marquee gap below 750px so every gap
     consumer (including the scroll keyframe) stays in sync. */
  @media screen and (max-width: 749px) {
    marquee-component.marquee--separate-mobile-gap {
      --marquee-gap: var(--marquee-gap-mobile);
    }
  }

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

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

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

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

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

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

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

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

/* START_SECTION:media-with-content (INDEX: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:predictive-search (INDEX:31) */
input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

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

  /* The header border-bottom is the search field's underline (shared
     .search-field look) — keep it at the theme's standard border color on
     focus, instead of the old fade-to-transparent seam. */
  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: var(--color-border);
    }
  }

  @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 {
    /* Match the active-filter chip style (squared, bold, paragraph type),
       but on a background-2 fill instead of the foreground fill. */
    --pills-pill-background-color: var(--color-background-2);

    white-space: nowrap;
    color: var(--color-foreground);
    border-radius: 0;
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    font-weight: 700;
    text-decoration: none;
    margin: 2px;
  }

  .predictive-search-results__pill mark {
    /* Read as one uniform filter-style chip; don't de-emphasize the matched text. */
    background-color: transparent;
    font-weight: inherit;
    color: inherit;
  }

  .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 {
    --pills-pill-background-color: var(--color-background-3);

    outline: var(--border-width-sm) solid var(--color-border);
    text-decoration: none;
  }

  .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__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), &:has(.trowel-product-card__link: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 {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

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

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  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);
    }
  }
/* END_SECTION:predictive-search */

/* 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;
    border-radius: 0;
    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;
      /* No backdrop-filter here: the bar's fill is an opaque --color-background,
         so the blur only ever showed through the 2px border ring (negligible),
         but it forced the whole bar onto a re-sampling composited backing. On
         iOS, dismissing a top-layer product modal re-rasterizes that backing
         and the bar's non-self-composited children (product-identifier + price)
         blink — the add-to-cart button has its own layer so it survives.
         Dropping the filter removes the re-sampling backing and the blink. */
    }
  }

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

  /* Product identifier (shared modal sub-header) reused in the sticky bar. */
  .sticky-add-to-cart__bar .product-identifier {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  /* Back-to-top trigger wrapping the identifier (opt-in section setting). */
  .sticky-add-to-cart__identifier-trigger {
    flex: 1;
    min-width: 0;
    display: flex;
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
  }

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

  .sticky-add-to-cart__bar .product-identifier__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__bar .product-identifier__subtitle {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
  }

  .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__button {
      padding: var(--padding-lg);
    }

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

    /* Wrap the savings badge onto its own line below the price (cart-style) so
       the compare-at + sale prices no longer steal width from the product title. */
    .sticky-add-to-cart__price .savings-badge {
      display: flex;
      margin-top: 2px;
    }

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

    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 compare price; title/subtitle truncate to fit */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:product-list (INDEX:34) */
/* Product-list carousel navigation uses the header-row nav (top-right, both
     arrows together) on both breakpoints instead of arrows overlaid on the
     cards. The overlaid arrows are suppressed; the header nav's per-breakpoint
     visibility is driven by the section's --nav-desktop / --nav-mobile classes.
     Scoped to .section-product-list so other resource-list sections are
     unaffected. The direct-child chain matches the section carousel's own arrows
     and leaves any per-card image-carousel arrows untouched. */
  .section-product-list .resource-list__carousel
    > slideshow-component
    > slideshow-container
    > slideshow-arrows {
    display: none;
  }

  @media screen and (min-width: 750px) {
    /* Mirror the mobile placement on desktop: pin the nav to the right of the
       heading container, reserving room so the heading never runs under it. */
    .section-product-list--nav-desktop .section-resource-list__header:has(.resource-list__header-nav) {
      position: relative;
      padding-inline-end: calc(var(--minimum-touch-target, 44px) * 2 + 4px);
    }

    .section-product-list--nav-desktop .section-resource-list__header > .resource-list__header-nav {
      position: absolute;
      inset-block: 0;
      inset-inline-end: 0;
      display: flex;
      align-items: center;
      gap: 4px;
      margin: 0;
    }
  }

  @media screen and (max-width: 749px) {
    /* Mobile arrows toggled off: hide the nav (it may still render for desktop)
       and reclaim the heading's reserved space. */
    .section-product-list:not(.section-product-list--nav-mobile) .resource-list__header-nav {
      display: none;
    }

    .section-product-list:not(.section-product-list--nav-mobile) .section-resource-list__header {
      padding-inline-end: 0;
    }
  }
/* END_SECTION:product-list */

/* START_SECTION:product-recommendations (INDEX:35) */
/* Product-recommendations carousel navigation uses the header-row nav
     (top-right, both arrows together) on both breakpoints instead of arrows
     overlaid on the cards. The overlaid arrows are suppressed; the header nav's
     per-breakpoint visibility is driven by the section's --nav-desktop /
     --nav-mobile classes. Scoped to .section-product-recommendations so other
     resource-list sections are unaffected. The direct-child chain matches the
     section carousel's own arrows and leaves any per-card image-carousel arrows
     untouched. Mirrors sections/product-list.liquid. */
  .section-product-recommendations .resource-list__carousel
    > slideshow-component
    > slideshow-container
    > slideshow-arrows {
    display: none;
  }

  @media screen and (min-width: 750px) {
    /* Mirror the mobile placement on desktop: pin the nav to the right of the
       heading container, reserving room so the heading never runs under it. */
    .section-product-recommendations--nav-desktop .section-resource-list__header:has(.resource-list__header-nav) {
      position: relative;
      padding-inline-end: calc(var(--minimum-touch-target, 44px) * 2 + 4px);
    }

    .section-product-recommendations--nav-desktop .section-resource-list__header > .resource-list__header-nav {
      position: absolute;
      inset-block: 0;
      inset-inline-end: 0;
      display: flex;
      align-items: center;
      gap: 4px;
      margin: 0;
    }
  }

  @media screen and (max-width: 749px) {
    /* Mobile arrows toggled off: hide the nav (it may still render for desktop)
       and reclaim the heading's reserved space. */
    .section-product-recommendations:not(.section-product-recommendations--nav-mobile) .resource-list__header-nav {
      display: none;
    }

    .section-product-recommendations:not(.section-product-recommendations--nav-mobile) .section-resource-list__header {
      padding-inline-end: 0;
    }
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:quick-order-list (INDEX:36) */
.quick-order-list {
    /* Keep in sync with .quantity-selector's own --quantity-selector-width in
       base.css — the stepper resolves the base value, this copy only feeds the
       column-width calc below. */
    --quantity-selector-width: 144px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:slideshow (INDEX:41) */
.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-mobile, var(--slideshow-gap, 0)), 10px);
      }
    }

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

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

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

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

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

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

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

  .announcement-bar__slide--has-bg {
    position: relative;
    display: grid;
    place-content: center;
    min-height: var(--announcement-bg-height, auto);
    padding-inline: var(--padding-md, 1rem);
  }

  /* Break the background (and the link hit-area) out of the page-width
     column so it spans the full viewport; the section clips the
     scrollbar-width excess of 100vw. */
  .announcement-bar__slide-media,
  .announcement-bar__slide--has-bg .announcement-bar__link {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(50% - 50vw);
    inset-inline-end: auto;
    width: 100vw;
  }

  .announcement-bar__slide-media {
    z-index: 0;
  }

  .announcement-bar__slide--has-bg .announcement-bar__text {
    position: relative;
    z-index: 1;
  }

  .announcement-bar__slide--has-bg .announcement-bar__link {
    z-index: 2;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:44) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_blog-post-featured-image (INDEX:47) */
.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:48) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

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

/* START_BLOCK:_cart-summary (INDEX:53) */
.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:54) */
.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__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:57) */
.collection-image {
    width: var(--image-width);
  }

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

/* START_BLOCK:_collection-link (INDEX:59) */
.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:_details-row (INDEX:62) */
.details-row__value:has(.details-row__icon) {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
  }

  .details-row__icon {
    font-size: 20px;
    line-height: 1;
  }
/* END_BLOCK:_details-row */

/* START_BLOCK:_featured-blog-posts-card (INDEX:64) */
.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:65) */
.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:_footer-social-icons (INDEX:68) */
.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:69) */
.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;

    /* Make sure the logo visually hugs the left edge of the column when it is the first item in the left column */
    margin-inline: calc(-1 * var(--padding-inline-start));

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    display: flex;
    height: 100%;
  }

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

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

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

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    letter-spacing: var(--menu-top-level-letter-spacing, normal);
    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;

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

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

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

  /* Dropdown caret next to items that have a submenu */
  .menu-list__link:has(.menu-list__caret) {
    flex-direction: row;
    align-items: center;
  }

  .menu-list__link:has(.menu-list__caret) .menu-list__link-title {
    padding-inline-end: var(--padding-2xs);
  }

  [slot='overflow'] .menu-list__link:has(.menu-list__caret) .menu-list__link-title {
    padding-inline-end: var(--padding-2xs);
  }

  .menu-list__caret {
    font-size: 1.25em;
    line-height: 1;
    transition: transform var(--submenu-animation-speed) var(--animation-easing);
  }

  .menu-list__link[aria-expanded='true'] .menu-list__caret {
    transform: rotate(180deg);
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }

  /* Extend the top-level trigger's hover target through the header's padding
     band (and bottom border) so it fills the full navbar height and reaches the
     open panel with NO dead strip below the text — mousing straight down from a
     trigger into its mega menu never crosses unhovered space. box-sizing:
     content-box makes the block padding GROW the box (the link is height:100%,
     which under the global border-box would keep padding internal); the equal
     negative margins cancel the layout impact so siblings/centering are
     untouched (text stays centered via justify-content). The bottom edge stops
     EXACTLY at the row's border-box bottom (= the panel's top) — never past it
     onto the page content below (the hero scrim), which is what the reverted
     ::after bridge did and what caused the live open/close flicker. Verified in
     the store-config Playwright harness (gap 0, no overflow past the row). */
  .menu-list__list-item:not([slot='overflow']) > .menu-list__link {
    box-sizing: content-box;
    padding-block: var(--header-padding) calc(var(--header-padding) + var(--border-bottom-width, 0px));
    margin-block: calc(-1 * var(--header-padding)) calc(-1 * (var(--header-padding) + var(--border-bottom-width, 0px)));
  }

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

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

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

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

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

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

    background-color: transparent;
  }

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

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

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

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

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

    visibility: visible;
  }

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

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

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

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

    display: contents;
    white-space: normal;

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

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

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

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

  .header-menu {
    height: 100%;
  }

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

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

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

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    letter-spacing: var(--menu-child-letter-spacing, normal);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    /* Half the tier gap above and below each link, so the visual space
       between adjacent links equals the merchant's third-level Item gap. */
    padding: calc(var(--menu-child-gap, 0.5rem) / 2) 0;

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

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    letter-spacing: var(--menu-parent-letter-spacing, normal);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);
    /* Category headings keep their fixed padding; the third-level Item gap
       only spaces the links below them. */
    padding-block: var(--padding-2xs);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Second-level collection cards fill the grid space the text columns didn't
     use: stacked vertically on smaller screens, side-by-side filling the full
     width and height of the mega menu on desktop. */
  .mega-menu__cards {
    display: flex;
    flex-direction: column;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    grid-column: span var(--cards-span-tablet, 1);
    align-self: start;
  }

  .mega-menu__cards .mega-menu-collection-card {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  @media screen and (min-width: 990px) {
    .mega-menu__cards {
      flex-direction: row;
      grid-column: span var(--cards-span-desktop, 1);
      align-self: stretch;
    }

    .mega-menu__cards .mega-menu-collection-card {
      flex: 1 1 0;
      min-width: 0;
      height: 100%;
      aspect-ratio: auto;
    }
  }

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

  /* Single-item collection dropdown: a simple product-card grid inside the submenu. */
  .menu-list__cd-grid {
    display: grid;
    grid-template-columns: repeat(var(--cd-columns, 4), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;
  }

  /* Menu items default to white-space: nowrap; product titles inside the
     dropdown must wrap and stay inside their grid column. */
  .menu-list__cd-grid,
  .menu-list__cd-grid * {
    white-space: normal;
  }

  .menu-list__cd-grid > .mega-menu__column {
    min-width: 0;
  }

  /* Staggered entrance for mega menu items, mirroring the mobile drawer animation.
     Only runs while the submenu is open (hover / aria-expanded), so it replays on
     each open and never fires on initial page load. */
  @media screen and (min-width: 750px) {
    .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu .mega-menu__column,
    .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu .mega-menu__content-list-item,
    .menu-list__submenu:hover .mega-menu__column,
    .menu-list__submenu:hover .mega-menu__content-list-item {
      animation: mega-menu-item-in var(--submenu-animation-speed) var(--ease-out-cubic) backwards;
      animation-delay: calc((var(--mega-menu-animation-index, 1) - 1) * 0.04s);
    }
  }

  @keyframes mega-menu-item-in {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:73) */
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:77) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

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

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

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

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

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

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

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

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

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

/* START_BLOCK:_product-card-gallery (INDEX:80) */
.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 {
    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, var(--font-size--xs));
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_BLOCK:_product-card-gallery */

/* START_BLOCK:_product-details (INDEX:83) */
/* 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:88) */
.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);
  }

  /* The author/facet search bridge (search-authors / search-facets, rendered
     by the search-results section) can match even when native product search
     returns 0 — e.g. searching an author's name — so "No results found" would
     sit directly above real results. This block renders in a different
     section (search-header), so Liquid can't see those matches; suppress the
     message from CSS instead. .search-authors is the page-context wrapper
     both bridge snippets share. */
  body:has(.search-authors) .search-results__no-results {
    display: none;
  }

  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:89) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
  }

  .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;
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:90) */
.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:accelerated-checkout (INDEX:91) */
.accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

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

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

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

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_BLOCK:accelerated-checkout */

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

  .accordion__empty {
    margin: 0;
    padding-block: var(--padding-sm);
    opacity: 0.7;
  }

  .accordion__category-heading {
    margin: 0;
    padding-block-end: var(--padding-xs, 4px);
    font-family: var(--category-heading-font-family);
    font-style: var(--category-heading-font-style);
    font-weight: var(--category-heading-font-weight);
    font-size: var(--category-heading-font-size);
    line-height: var(--category-heading-font-line-height);
    text-transform: var(--category-heading-font-case);
  }

  .accordion__category + .accordion__category {
    margin-block-start: var(--accordion-category-gap, 24px);
  }

  .accordion accordion-custom + accordion-custom {
    margin-block-start: var(--accordion-item-gap, 0);
  }

  .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);
    letter-spacing: var(--summary-font-letter-spacing, normal);
    color: var(--summary-font-color, inherit);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:add-to-cart (INDEX:93) */
.add-to-cart-button.add-to-cart-button--preorder {
    --button-color: #FFFFFF;
    --button-background-color: #9F7E50;
    --button-hover-background-color: #B08E5E;
  }

  .add-to-cart-block--preorder {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-sm);
  }

  @media screen and (max-width: 749px) {
    .add-to-cart-block--mobile-fill {
      flex: 1 1 100%;
      display: flex;
    }

    .add-to-cart-block--mobile-fill add-to-cart-component {
      display: flex;
      flex: 1 1 auto;
    }

    .add-to-cart-block--mobile-fill .add-to-cart-button {
      width: 100%;
    }

    .add-to-cart-block--preorder {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
  }

  .preorder-shipping-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: #9F7E50;
    font-family: var(--font-paragraph--family);
    font-weight: 700;
    font-size: var(--font-paragraph--size);
    line-height: 1.2;
  }

  .preorder-shipping-indicator .material-icon {
    font-size: 1.2em;
  }
/* END_BLOCK:add-to-cart */

/* START_BLOCK:author-meta-list (INDEX:95) */
.author-meta-list-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6em;
    row-gap: 0.2em;
  }

  .author-meta-list.author-meta-list {
    margin: 0;
    line-height: 1.2;
  }

  .author-meta-list__prefix,
  .author-meta-list__conjunction,
  .author-meta-list__comma {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-weight: var(--font-body--weight);
  }

  .author-meta-list__prefix {
    margin-inline-end: 0.35em;
  }

  .author-meta-list__name {
    color: var(--color-foreground-heading, var(--color-foreground));
    font-weight: var(--font-body--weight-bold, 700);
    /* Keep each full name on one line so it wraps as a whole unit
       instead of breaking mid-name (e.g. "Tom" / "Nettles"). The line
       wraps only at the boundaries between names. */
    white-space: nowrap;
  }

  a.author-meta-list__name--link {
    color: inherit;
    text-decoration: none;
  }

  a.author-meta-list__name--link:hover,
  a.author-meta-list__name--link:focus-visible {
    color: var(--color-primary-hover, var(--color-foreground));
  }
/* END_BLOCK:author-meta-list */

/* START_BLOCK:author-summary (INDEX:96) */
.author-summary__entry {
    display: flex;
    flex-direction: column;
    gap: var(--padding-sm);
  }

  .author-summary__entry + .author-summary__entry {
    margin-block-start: var(--author-summary-entry-gap, var(--padding-sm));
  }

  .author-summary__row {
    display: flex;
    gap: var(--padding-sm);
    align-items: center;
  }

  .author-summary__headshot {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px dotted var(--author-headshot-border-color, var(--color-border));
    padding: 6px;
    box-sizing: border-box;
  }

  .author-summary__headshot--placeholder {
    background-clip: content-box;
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
  }

  .author-summary__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }

  .author-summary__info {
    display: flex;
    flex-direction: column;
    gap: var(--padding-2xs);
  }

  .author-summary__name.author-summary__name {
    margin: 0;
    color: var(--color-foreground-heading, var(--color-foreground));
    font-weight: var(--font-body--weight-bold, 700);
  }

  .author-summary__subheading.author-summary__subheading {
    margin: 0;
    margin-block-start: var(--author-summary-illustrator-gap, var(--padding-lg, var(--padding-sm)));
    color: var(--color-foreground-heading, var(--color-foreground));
    font-weight: var(--font-body--weight-bold, 700);
  }

  /* When there are no authors, the illustrator heading is the first child —
     drop its top margin so the wrapper's padding stays even all around. */
  .author-summary__subheading.author-summary__subheading:first-child {
    margin-block-start: 0;
  }

  .author-summary__subheading + .author-summary__entry {
    margin-block-start: var(--author-summary-entry-gap, var(--padding-sm));
  }

  .author-summary__role {
    margin: 0;
    opacity: 0.7;
  }

  .author-summary__lifespan {
    margin: 0;
    opacity: 0.7;
  }

  .author-summary__bio {
    margin: 0;
  }

  .author-summary__more {
    margin-block-start: var(--padding-xs, 0.5rem);
  }

  .author-summary .small_paragraph,
  .author-summary .small_paragraph > * {
    font-family: var(--font-small_paragraph--family);
    font-style: var(--font-small_paragraph--style);
    font-weight: var(--font-small_paragraph--weight);
    font-size: var(--font-small_paragraph--size);
    line-height: var(--font-small_paragraph--line-height);
    letter-spacing: var(--font-small_paragraph--letter-spacing);
    text-transform: var(--font-small_paragraph--case);
  }

  .author-summary .paragraph_3,
  .author-summary .paragraph_3 > * {
    font-family: var(--font-paragraph_3--family);
    font-style: var(--font-paragraph_3--style);
    font-weight: var(--font-paragraph_3--weight);
    font-size: var(--font-paragraph_3--size);
    line-height: var(--font-paragraph_3--line-height);
    letter-spacing: var(--font-paragraph_3--letter-spacing);
    text-transform: var(--font-paragraph_3--case);
  }
/* END_BLOCK:author-summary */

/* START_BLOCK:badge (INDEX:97) */
.badge-block {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    width: fit-content;
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--badge-color, var(--color-primary));
  }

  /* Product-badge mode: lay out one-or-more inherited badges in a row. */
  .badge-block-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    width: fit-content;
  }

  .badge-block--placeholder {
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .badge-block__icon {
    font-size: 1.2em;
  }

  /* Squared off to match the theme — no rounded corners. */
  .badge-block--filled {
    padding: 0.5em 0.85em;
    color: var(--badge-text-color, var(--color-background));
    background-color: var(--badge-color, var(--color-primary));
  }
/* END_BLOCK:badge */

/* START_BLOCK:breadcrumb (INDEX:98) */
.breadcrumb-block {
    width: var(--width);
    max-width: 100%;
  }

  .breadcrumb-block.breadcrumb-block,
  .breadcrumb-block.breadcrumb-block > * {
    color: var(--color-text-2);
  }

  .breadcrumb-block--custom-color.breadcrumb-block--custom-color,
  .breadcrumb-block--custom-color.breadcrumb-block--custom-color > * {
    color: var(--color);
  }

  .breadcrumb-block.small_paragraph,
  .breadcrumb-block.small_paragraph > * {
    font-family: var(--font-small_paragraph--family);
    font-style: var(--font-small_paragraph--style);
    font-weight: var(--font-small_paragraph--weight);
    font-size: var(--font-small_paragraph--size);
    line-height: var(--font-small_paragraph--line-height);
    letter-spacing: var(--font-small_paragraph--letter-spacing);
    text-transform: var(--font-small_paragraph--case);
  }

  .breadcrumb-block.paragraph_3,
  .breadcrumb-block.paragraph_3 > * {
    font-family: var(--font-paragraph_3--family);
    font-style: var(--font-paragraph_3--style);
    font-weight: var(--font-paragraph_3--weight);
    font-size: var(--font-paragraph_3--size);
    line-height: var(--font-paragraph_3--line-height);
    letter-spacing: var(--font-paragraph_3--letter-spacing);
    text-transform: var(--font-paragraph_3--case);
  }

  .breadcrumb-block__list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--breadcrumb-separator-gap);
    row-gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    max-inline-size: min(100%, var(--max-width, 100%));
    justify-content: var(--justify-content, flex-start);
  }

  /* Overflow: horizontal scroll instead of wrapping. Applied per breakpoint
     (overflow_behavior_desktop / _mobile), each within its media query. */
  .breadcrumb-block__scroll {
    display: block;
    position: relative;
  }

  @media screen and (max-width: 749px) {
    .breadcrumb-block--scroll-mobile .breadcrumb-block__list {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .breadcrumb-block--scroll-mobile .breadcrumb-block__list::-webkit-scrollbar {
      display: none;
    }

    .breadcrumb-block--scroll-mobile .breadcrumb-block__item {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .breadcrumb-block--scroll-mobile.breadcrumb-block--snap-start .breadcrumb-block__list {
      justify-content: flex-start;
    }

    .breadcrumb-block--scroll-mobile.breadcrumb-block--snap-end .breadcrumb-block__list {
      justify-content: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .breadcrumb-block--scroll-desktop .breadcrumb-block__list {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .breadcrumb-block--scroll-desktop .breadcrumb-block__list::-webkit-scrollbar {
      display: none;
    }

    .breadcrumb-block--scroll-desktop .breadcrumb-block__item {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .breadcrumb-block--scroll-desktop.breadcrumb-block--snap-start .breadcrumb-block__list {
      justify-content: flex-start;
    }

    .breadcrumb-block--scroll-desktop.breadcrumb-block--snap-end .breadcrumb-block__list {
      justify-content: flex-end;
    }
  }

  /* Scroll hint: fade each edge into the section's color-scheme background.
     breadcrumb-scroll.js toggles data-overflow-start / -end so a side's fade
     only shows while there is hidden content there (and none when it fits or
     is scrolled fully to that end). */
  .breadcrumb-block__scroll::before,
  .breadcrumb-block__scroll::after {
    content: '';
    position: absolute;
    inset-block: 0;
    width: var(--breadcrumb-scroll-fade-width, 2rem);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .breadcrumb-block__scroll::before {
    inset-inline-start: 0;
    background: linear-gradient(to right, var(--color-background), transparent);
  }

  .breadcrumb-block__scroll::after {
    inset-inline-end: 0;
    background: linear-gradient(to left, var(--color-background), transparent);
  }

  .breadcrumb-block__scroll[data-overflow-start]::before,
  .breadcrumb-block__scroll[data-overflow-end]::after {
    opacity: 1;
  }

  .breadcrumb-block__item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--breadcrumb-separator-gap);
  }

  .breadcrumb-block__item + .breadcrumb-block__item::before {
    content: var(--breadcrumb-separator, '›');
    display: inline-block;
    color: inherit;
    opacity: 0.75;
  }

  .breadcrumb-block__link {
    color: inherit;
    text-decoration-color: transparent;
  }

  /* Hover only on devices that truly hover (no sticky hover on touch). Tap
     feedback comes from :active; keyboard nav from :focus-visible. */
  @media (hover: hover) {
    .breadcrumb-block__link:hover {
      text-decoration-color: currentColor;
    }
  }

  .breadcrumb-block__link:focus-visible,
  .breadcrumb-block__link:active {
    text-decoration-color: currentColor;
  }

  .breadcrumb-block .breadcrumb-block__text--current {
    color: var(--color-text-2);
  }

  .breadcrumb-block--background {
    background-color: var(--breadcrumb-background-color);
    border-radius: var(--breadcrumb-corner-radius);
    padding-block-start: max(var(--breadcrumb-background-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--breadcrumb-background-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--breadcrumb-background-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--breadcrumb-background-padding), var(--padding-inline-end, 0));
  }

  /* Collapse: hold the trail to one line, folding the front behind a `…` toggle
     and revealing as many trailing items as fit. breadcrumb-collapse.js measures
     the fit and toggles breadcrumb-block--collapsed (only when the collapse
     behaviour is active for the current viewport, per the collapse-mobile /
     -desktop settings), so the rules below never apply on a wrap breakpoint or
     once the visitor expands the trail. */
  .breadcrumb-block__collapse {
    display: contents;
  }

  .breadcrumb-collapse__ellipsis {
    display: none;
    flex: 0 0 auto;
  }

  .breadcrumb-collapse__toggle {
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    cursor: pointer;
  }

  /* The ellipsis toggle sits at the front of the list even when hidden (not
     collapsed / expanded). Keep the first real item from drawing a separator
     against it. */
  .breadcrumb-block:not(.breadcrumb-block--collapsed) .breadcrumb-collapse__ellipsis + .breadcrumb-block__item::before {
    content: none;
  }

  /* One-line collapsed layout. breadcrumb-collapse.js reveals as many trailing
     items as fit — `… › Category › Topic` when it fits, `… › Topic` when it
     doesn't — and clips the deepest item with an ellipsis only when it alone is
     too wide. Folded items hide; the trail never wraps in this state. */
  .breadcrumb-block--collapsed .breadcrumb-block__list {
    flex-wrap: nowrap;
  }

  .breadcrumb-block--collapsed .breadcrumb-block__item {
    white-space: nowrap;
  }

  .breadcrumb-block--collapsed .breadcrumb-collapse__folded {
    display: none;
  }

  .breadcrumb-block--collapsed .breadcrumb-collapse__ellipsis:not([hidden]) {
    display: inline-flex;
  }

  /* The deepest item shrinks and ellipsis-clips its own label (scoped with `>`
     so comma-separated links nested inside stay inline). */
  .breadcrumb-block--collapsed .breadcrumb-collapse__clip {
    min-width: 0;
  }

  .breadcrumb-block--collapsed .breadcrumb-collapse__clip > .breadcrumb-block__link,
  .breadcrumb-block--collapsed .breadcrumb-collapse__clip > .breadcrumb-block__text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* END_BLOCK:breadcrumb */

/* START_BLOCK:bundle-included (INDEX:100) */
.bundle-promo {
    width: 100%;
  }

  .bundle-promo__title {
    margin: 0 0 0.25rem;
    color: var(--color-foreground);
  }

  /* Bold paragraph option: keep the .label-header muted color (it would
     otherwise lose to .bundle-promo__title's foreground at equal specificity). */
  .bundle-promo__title.label-header {
    color: var(--color-text-2);
  }

  .bundle-promo__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    column-gap: var(--padding-md, 16px);
    row-gap: var(--padding-lg, 24px);
    margin-top: 1rem;
  }

  /* Default layout: vertical stack of small (horizontal) cards. */
  .bundle-promo__stack {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md, 16px);
    margin-top: 1rem;
  }

  /* Shrink the small card's image (overrides the trowel card's default
     flex: 0 0 35%); the content takes the freed width. */
  .bundle-promo__stack .trowel-product-card--size-small .trowel-product-card__image-wrapper {
    flex: 0 0 var(--bundle-card-image-width, 96px);
  }

  .bundle-promo__cell {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs, 8px);
  }

  /* `display: flex` above beats the [hidden] UA rule (display:none), so the JS
     toggle wouldn't hide overflow cards without this. */
  .bundle-promo__cell[hidden] {
    display: none;
  }

  .bundle-promo__empty {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  /* ---------- Truncation (bundle-included.js) ---------- */

  .bundle-promo__content {
    position: relative;
  }

  /* Fade the tail of the clipped list to signal there's more. Only while
     collapsed; cleared when expanded inline or while the drawer holds the list. */
  .bundle-included-list[data-state='collapsed'] .bundle-promo__content::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 5rem;
    background: linear-gradient(to bottom, transparent, var(--color-background));
    pointer-events: none;
  }

  .bundle-promo__more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
  }

  .bundle-promo__more[hidden] {
    display: none;
  }

  .bundle-promo__more-icon {
    transition: transform 0.2s ease;
  }

  .bundle-included-list[data-state='expanded'] .bundle-promo__more-icon {
    transform: rotate(180deg);
  }

  /* On mobile with the drawer on, the trigger opens a drawer instead of
     expanding inline — show the expand glyph, not the collapse arrow.
     Doubled class (0,2,0) to beat .button-tertiary__icon's display:inline-flex
     (0,1,0, same as a single class here) which otherwise wins on load order and
     leaks the drawer glyph onto desktop. */
  .bundle-promo__more-icon.bundle-promo__more-icon--drawer {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .bundle-promo__grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .bundle-included-list[data-mobile-drawer='true'] .bundle-promo__more-icon--arrow {
      display: none;
    }

    .bundle-included-list[data-mobile-drawer='true'] .bundle-promo__more-icon--drawer {
      display: inline-block;
      transform: none;
    }
  }
/* END_BLOCK:bundle-included */

/* START_BLOCK:buy-buttons (INDEX:102) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;
  }

  .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 button {
    padding-block: var(--padding-lg);
  }

  .buy-buttons-block .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
    font-family: var(--font-h3--family, var(--button-font-family-primary));
    font-weight: 700;
    font-size: clamp(1.125rem, 1.25vw + 0.75rem, 1.3rem);
  }

  .buy-buttons-block .quantity-selector input[type='number'] {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
  }

  .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;
    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;
  }
/* END_BLOCK:buy-buttons */

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

/* START_BLOCK:contact-form (INDEX:107) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

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

/* START_BLOCK:copy-discount-code (INDEX:108) */
.copy-discount-code {
    display: flex;
    flex-direction: column;
  }

  .copy-discount-code--left {
    align-items: flex-start;
    text-align: left;
  }

  .copy-discount-code--center {
    align-items: center;
    text-align: center;
  }

  .copy-discount-code--right {
    align-items: flex-end;
    text-align: right;
  }

  .copy-discount-code__button {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 0.4rem;
    margin: 0;
    padding: var(--cdc-padding-block, 20px) var(--cdc-padding-inline, 28px);
    background: transparent;
    color: inherit;
    border: var(--cdc-border-width, 2px) var(--cdc-border-style, dashed) var(--cdc-border-color, var(--color-foreground));
    border-radius: var(--cdc-border-radius, 16px);
    cursor: pointer;
    transition: opacity 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
  }

  /* With a scheme override, the global .color-* rule paints a square
     background on the wrapper, filling the corners outside the rounded
     border — move the background onto the button so the radius clips it. */
  .copy-discount-code[class*=' color-'] {
    background-color: transparent;
  }

  .copy-discount-code[class*=' color-'] .copy-discount-code__button {
    background-color: var(--color-background);
  }

  .copy-discount-code__button:hover {
    opacity: 0.85;
  }

  .copy-discount-code__heading {
    color: var(--color-text-2, inherit);
  }

  .copy-discount-code[style*='--cdc-heading-font-family'] .copy-discount-code__heading {
    font-family: var(--cdc-heading-font-family);
    font-style: var(--cdc-heading-font-style);
    font-weight: var(--cdc-heading-font-weight);
    font-size: var(--cdc-heading-font-size);
    line-height: var(--cdc-heading-line-height);
    letter-spacing: var(--cdc-heading-letter-spacing);
    text-transform: var(--cdc-heading-case);
  }

  .copy-discount-code__code-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: inherit;
  }

  .copy-discount-code__code {
    font-weight: 700;
  }

  .copy-discount-code[style*='--cdc-code-font-family'] .copy-discount-code__code {
    font-family: var(--cdc-code-font-family);
    font-style: var(--cdc-code-font-style);
    font-weight: var(--cdc-code-font-weight);
    font-size: var(--cdc-code-font-size);
    line-height: var(--cdc-code-line-height);
    letter-spacing: var(--cdc-code-letter-spacing);
    text-transform: var(--cdc-code-case);
  }

  .copy-discount-code__subtext {
    color: var(--color-text-2, inherit);
  }

  .copy-discount-code[style*='--cdc-subtext-font-family'] .copy-discount-code__subtext {
    font-family: var(--cdc-subtext-font-family);
    font-style: var(--cdc-subtext-font-style);
    font-weight: var(--cdc-subtext-font-weight);
    font-size: var(--cdc-subtext-font-size);
    line-height: var(--cdc-subtext-line-height);
    letter-spacing: var(--cdc-subtext-letter-spacing);
    text-transform: var(--cdc-subtext-case);
  }

  .copy-discount-code__icon {
    font-size: 1.25em;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.85;
  }

  .copy-discount-code[data-state='copied'] .copy-discount-code__icon {
    opacity: 1;
    color: var(--color-primary, currentColor);
  }

  /* Visually hidden so it never reserves space below the box (no bottom
     margin) — the icon swapping to a check is the visual confirmation, while
     this still announces "Copied!" to assistive tech via aria-live. */
  .copy-discount-code__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .copy-discount-code__placeholder {
    color: var(--color-text-3, var(--color-foreground));
    opacity: 0.6;
    font-style: italic;
  }
/* END_BLOCK:copy-discount-code */

/* START_BLOCK:customer-reviews (INDEX:111) */
.customer-reviews {
    width: 100%;
    color: var(--color-foreground);
    background-color: var(--color-background);
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
  }

  .customer-reviews--bordered {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--color-border);
  }

  /*
   * Visually hide the Judge.me Product Reviews Widget app block on any page
   * that contains our Customer reviews block. Judge.me's app block injects
   * jdgm.data.reviewWidget[productId] inline at render time; we read that
   * data and render our own UI, so its visible HTML is unwanted.
   */
  body:has(.customer-reviews) [id*="judge_me_reviews_review_widget"],
  body:has(.customer-reviews) [id*="judge_me_reviews_product_review_widget"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(100%) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  /* Dialog */
  .customer-reviews__dialog {
    width: min(48rem, 100vw);
    max-width: 100vw;
    max-height: 100dvh;
    padding: 0;
    border: 1px solid var(--color-border);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .customer-reviews__dialog::backdrop {
    background-color: rgb(0 0 0 / 0.55);
  }

  .customer-reviews__dialog-inner {
    display: grid;
    grid-template-rows: auto 1fr;
    max-height: 100dvh;
  }

  .customer-reviews__dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1rem, 3vw, 1.5rem);
    border-bottom: 1px solid var(--color-border);
  }

  .customer-reviews__dialog-title {
    margin: 0;
  }

  .customer-reviews__dialog-close {
    appearance: none;
    background: none;
    border: 0;
    padding: 0.5rem;
    margin: -0.5rem;
    color: var(--color-foreground);
    cursor: pointer;
    line-height: 0;
  }

  .customer-reviews__dialog-close svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
  }

  .customer-reviews__dialog-body {
    overflow-y: auto;
    padding: clamp(1rem, 3vw, 1.5rem);
    display: grid;
    gap: 1.5rem;
  }

  @media (max-width: 749px) {
    .customer-reviews__dialog {
      width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
    }
  }

  @media (max-width: 749px) {
    .customer-reviews {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }

  .customer-reviews__summary {
    display: grid;
    align-content: start;
    gap: 1rem;
  }

  .customer-reviews__summary-top {
    display: grid;
    gap: 0.75rem;
  }

  .cr-rating-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .cr-rating-line__stars {
    display: inline-flex;
    align-items: center;
    gap: 0.0625rem;
  }

  .cr-rating-line__value {
    margin: 0;
    color: var(--color-foreground);
    font-weight: 700;
    line-height: 1.1;
  }

  .cr-count {
    margin: 0;
    color: var(--color-text-2);
  }

  .cr-histogram {
    display: grid;
    gap: 0.375rem;
  }

  .cr-histogram__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-2);
  }

  .cr-histogram__label {
    white-space: nowrap;
    min-width: 3.5rem;
  }

  .cr-histogram__bar {
    position: relative;
    height: 0.5rem;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    overflow: hidden;
  }

  .cr-histogram__bar-fill {
    width: var(--pct, 0%);
    height: 100%;
    background-color: var(--color-primary);
    transition: width 0.4s ease-out;
  }

  .cr-histogram__pct {
    min-width: 3ch;
    text-align: end;
  }

  .customer-reviews__cta {
    display: grid;
    gap: 0.75rem;
    margin-block-start: 0.5rem;
  }

  .customer-reviews__intro {
    margin: 0;
    color: var(--color-foreground);
  }

  .customer-reviews__write {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .customer-reviews__write-icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
  }

  .customer-reviews__gate-prompt {
    margin: 0.5rem 0 0;
    color: var(--color-text-2);
  }

  .customer-reviews__login-link {
    color: var(--color-foreground);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .customer-reviews__login-link:hover {
    color: var(--color-primary-hover);
  }

  .customer-reviews__feed {
    display: grid;
    gap: 1.5rem;
    align-content: start;
    min-width: 0;
  }

  .customer-reviews__loading,
  .customer-reviews__empty,
  .customer-reviews__error {
    margin: 0;
    color: var(--color-text-2);
  }

  /* Cards */
  .cr-card {
    display: grid;
    gap: 0.75rem;
    padding-block-end: 1.5rem;
    border-bottom: 1px solid var(--color-border);
  }

  .cr-card:last-child {
    border-bottom: none;
    padding-block-end: 0;
  }

  .cr-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .cr-card__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
  }

  .cr-card__avatar {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .cr-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cr-card__author-text {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
  }

  .cr-card__name {
    color: var(--color-foreground);
    font-weight: 600;
  }

  .cr-card__date {
    color: var(--color-text-2);
    font-size: 0.875rem;
  }

  .cr-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--color-foreground);
    color: var(--color-background);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .cr-card__verified-icon {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
  }

  .cr-card__rating-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .cr-card__stars {
    display: inline-flex;
    align-items: center;
    gap: 0.0625rem;
  }

  .cr-card__title {
    color: var(--color-foreground);
    font-weight: 600;
  }

  .cr-card__body {
    color: var(--color-foreground);
  }

  .cr-card__body > *:first-child {
    margin-block-start: 0;
  }

  .cr-card__body > *:last-child {
    margin-block-end: 0;
  }

  .cr-card__photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .cr-card__photo {
    display: inline-block;
    width: 6rem;
    height: 6rem;
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .cr-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cr-card__reply {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0.75rem;
    margin-block-start: 0.5rem;
  }

  .cr-card__reply-arrow {
    width: 1.25rem;
    height: 1.25rem;
    margin-block-start: 0.25rem;
    fill: var(--color-text-2);
  }

  .cr-card__reply-author {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.25rem;
    font-weight: 600;
  }

  .cr-card__reply-logo {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    overflow: hidden;
    flex: 0 0 auto;
  }

  .cr-card__reply-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .customer-reviews__see-all {
    justify-self: start;
    margin-block-start: 0.5rem;
  }

  /* Shared star */
  .cr-star {
    position: relative;
    display: inline-block;
    line-height: 0;
  }

  .cr-star--sm { width: 1rem; height: 1rem; }
  .cr-star--md { width: 1.125rem; height: 1.125rem; }

  .cr-star__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .cr-star__svg--empty {
    fill: rgb(var(--color-foreground-rgb) / var(--opacity-15));
  }

  .cr-star__svg--fill {
    fill: var(--color-primary);
    clip-path: inset(0 calc(100% - var(--fill-pct, 0%)) 0 0);
  }
/* END_BLOCK:customer-reviews */

/* START_BLOCK:details-table (INDEX:112) */
/* Variable visibility: hide the whole "Product details" group (its heading +
     this table) on the storefront when the product has no details. Each
     _details-row self-hides on a blank metafield value, so a table that renders
     zero .details-row elements means there's nothing to show.

     Scoped to the *immediate* wrapping group via the direct-child path
     (> .group-block-content > .details-table) so ancestor groups (e.g. the
     column that also holds the table of contents) are never hidden. Disabled in
     the theme editor — where the design-mode class is present and rows always
     render — so the merchant can still add, remove, and reorder rows on an
     otherwise-empty product. */
  .group-block:not(:has(.group-block-content--design-mode)):has(> .group-block-content > .details-table):not(:has(.details-row)) {
    display: none;
  }

  .details-table {
    width: 100%;
  }

  .details-table__rows {
    display: grid;
    grid-template-columns: max-content 1fr;
    width: 100%;
    margin: 0;
  }

  .details-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    column-gap: var(--details-column-gap, 24px);
    padding: var(--details-padding-block, 14px) var(--details-padding-inline, 20px);
    align-items: baseline;
  }

  .details-table--alternating .details-row:nth-child(odd) {
    background-color: var(--details-row-bg);
  }

  .details-table--dividers .details-row + .details-row {
    border-top: var(--details-divider-width, 1px) solid var(--color-border);
  }

  .details-row__label {
    margin: 0;
  }

  /* Only override default .label-header typography when a merchant
     picks a type preset / color in block settings. */
  .details-table[style*='--details-label-color'] .details-row__label {
    color: var(--details-label-color);
  }

  .details-table[style*='--details-label-font-family'] .details-row__label {
    font-family: var(--details-label-font-family);
    font-style: var(--details-label-font-style);
    font-weight: var(--details-label-font-weight);
    font-size: var(--details-label-font-size);
    line-height: var(--details-label-line-height);
    letter-spacing: var(--details-label-letter-spacing);
    text-transform: var(--details-label-case);
  }

  .details-row__value {
    margin: 0;
    color: var(--details-value-color, var(--color-foreground));
  }

  .details-table[style*='--details-value-font-family'] .details-row__value {
    font-family: var(--details-value-font-family);
    font-style: var(--details-value-font-style);
    font-weight: var(--details-value-font-weight);
    font-size: var(--details-value-font-size);
    line-height: var(--details-value-line-height);
    letter-spacing: var(--details-value-letter-spacing);
    text-transform: var(--details-value-case);
  }

  .details-row__placeholder {
    color: var(--color-text-3, var(--color-foreground));
    opacity: 0.6;
    font-style: italic;
  }

  /* Row truncation (details-table-toggle).
     The rows container is clipped exactly to the bottom of the last visible
     row, so every row past the cutoff is hidden entirely. Open/closed animates
     via max-height; the button swaps between the keyboard up / down material
     icons. Visibility is driven by the [hidden] attribute, toggled once the JS
     decides there are enough rows to truncate — so a short table never shows a
     dead toggle. */
  .details-table-toggle {
    display: block;
  }

  .details-table__rows.is-collapsible {
    overflow: hidden;
  }

  @media (prefers-reduced-motion: no-preference) {
    .details-table__rows.is-collapsible {
      transition: max-height 0.35s ease;
    }
  }

  .details-table-toggle__icon {
    transition: transform 0.2s ease;
  }

  /* Element-qualified so display:flex beats .button-tertiary's inline-flex;
     the [hidden] rule keeps it hidden until the JS opts in. Full-width hitbox
     with the icon + label flush left. */
  details-table-toggle .details-table-toggle__trigger {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    padding-block: 0.8rem;
    padding-inline: var(--details-padding-inline, 20px);
  }

  .details-table-toggle__trigger[hidden] {
    display: none;
  }
/* END_BLOCK:details-table */

/* START_BLOCK:email-signup (INDEX:113) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
    }

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

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

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

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

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

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

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

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

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

/* START_BLOCK:endorsement-highlights (INDEX:114) */
.endorsement-highlights {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 56px);
    background: transparent;
  }

  @media screen and (min-width: 750px) {
    .endorsement-highlights {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
  }

  .endorsement-highlight {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
  }

  .endorsement-highlight__quote {
    margin: 0;
    color: var(--color-foreground);
  }

  .endorsement-highlight__quote > :first-child {
    margin-block-start: 0;
  }

  .endorsement-highlight__quote > :last-child {
    margin-block-end: 0;
  }

  .endorsement-highlight__person {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .endorsement-highlight__avatar {
    flex-shrink: 0;
  }

  .endorsement-highlight__avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .endorsement-highlight__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }

  .endorsement-highlight__name {
    font-weight: 700;
    color: var(--color-foreground);
  }

  .endorsement-highlight__title {
    color: var(--color-text-2, var(--color-foreground));
  }
/* END_BLOCK:endorsement-highlights */

/* START_BLOCK:featured-product-image (INDEX:116) */
.fp-image-block {
    display: flex;
    width: 100%;
  }

  .fp-image-block--left {
    justify-content: flex-start;
  }

  .fp-image-block--center {
    justify-content: center;
  }

  .fp-image-block--right {
    justify-content: flex-end;
  }

  .fp-image-block__img,
  .fp-image-block__placeholder {
    width: 100%;
    height: auto;
    max-width: var(--fp-image-max-width, 600px);
    display: block;
  }
/* END_BLOCK:featured-product-image */

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

  /* Sticky sidebar on desktop. align-self: start keeps the wrapper at its natural
     height (not stretched to the grid row) so sticky positioning can take effect.
     The scroll lives on the bordered filters box below (.facets__filters-wrapper),
     not here, so the scrollbar is contained inside the border rather than outside it. */
  .facets-block-wrapper--vertical:not(#filters-drawer) {
    @media screen and (min-width: 750px) {
      position: sticky;
      top: var(--catalog-sidebar-top, var(--margin-lg));
      align-self: start;
    }
  }

  /* When the sticky header nav is active it floats over the page, so push the sticky
     sidebar down by the header height (mirrors product-details in
     product-information-content.liquid) — otherwise the nav obstructs the top of the filters. */
  body:has(#header-group #header-component[data-sticky-state='active'])
    .facets-block-wrapper--vertical:not(#filters-drawer) {
    @media screen and (min-width: 750px) {
      --catalog-sidebar-top: calc(var(--header-height, 0px) + var(--margin-lg));
    }
  }

  /* When the sticky header nav is active it floats over the page, so push the sticky
     sidebar down by the header height (mirrors product-details in
     product-information-content.liquid) — otherwise the nav obstructs the top of the filters. */
  body:has(#header-group #header-component[data-sticky-state='active'])
    .facets-block-wrapper--vertical:not(#filters-drawer) {
    @media screen and (min-width: 750px) {
      --catalog-sidebar-top: calc(var(--header-height, 0px) + var(--margin-lg));
    }
  }

  .facets-toggle {
    --icon-offset: 0px;

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

  /* Filter trigger: theme-wide tertiary button (bold, underlined label + material icon). */
  .facets-toggle__button {
    box-shadow: none;
    gap: var(--gap-2xs, 0.25rem);

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

  /* The mobile sort sits in the right-hand control group across from Filter.
     Its tertiary-button styling (icon + primary label) is shared with the
     desktop control via `.sorting-filter__container--native` in sorting.liquid. */
  .facets-toggle .sorting-filter,
  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      width: fit-content;
    }
  }

  .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) {
    #filters-drawer.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

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

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

  /* Mobile: the filters drawer is a bottom-sheet (shared bottom-drawer
     pattern), not a right side-sheet. The <dialog> is the transparent
     host pinned to the bottom; the painted, rounded surface is the
     <bottom-drawer> child (styled by bottom-drawer.css). Override the
     side-sheet sizing/borders that `.facets` / `.facets--drawer` set by
     default so they don't fight the bottom-sheet chrome. */
  @media screen and (max-width: 749px) {
    .facets.facets--drawer.dialog-modal--bottom-drawer {
      position: fixed;
      inset: auto 0 0 0;
      width: 100vw;
      max-width: 100vw;
      height: var(--drawer-mobile-max-height, 95dvh);
      max-height: var(--drawer-mobile-max-height, 95dvh);
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      border-radius: 0;
      /* overflow:visible so the drawer child's rounded top corners paint
         (overrides .facets--drawer[open] { overflow: hidden }). */
      overflow: visible;
    }
  }

  .facets-drawer__drawer {
    min-height: 0;
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

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

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Vertical sidebar: pad the whole set and space facets evenly with a wrapper
     gap rather than per-item padding, so every group sits at a consistent
     rhythm. Scoped to vertical so the horizontal filter bar keeps its row layout. */
  .facets--vertical .facets__filters-wrapper {
    padding: var(--padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--padding-2xs);
  }

  /* Border only — padding is owned by the base rule above so it stays a single
     source of truth (a duplicate padding here would override edits to it). */
  @media screen and (min-width: 750px) {
    /* The bordered box is the scroll container: its own scrollbar sits inside the
       2px border. Height is capped to the viewport minus the sticky top offset
       (which already includes the navbar height when the header is sticky) and a
       matching bottom gap, so the border encloses the scrollbar top to bottom. */
    .facets--vertical .facets__filters-wrapper {
      border: 2px solid var(--color-border);
      /* Background from the chosen color-scheme slot (schema setting); defaults to
         the same tint as the product media gallery. */
      background-color: var(--filters-wrapper-bg, var(--color-background-2, #f5f4f4));
      max-height: calc(100dvh - var(--catalog-sidebar-top, var(--margin-lg)) - var(--margin-lg));
      overflow-y: auto;
      overscroll-behavior: contain;
      /* Reserve the scrollbar space always (stable) so toggling scrollability
         doesn't shift the layout, and keep the gutter track transparent. */
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
    }
  }

  /* The divider is offset from each title by the summary's top padding; the
     wrapper gap handles separation between facets, so drop the bottom padding. */
  .facets--vertical .facets__summary {
    padding-block: 0;
  }

  /* First group has nothing above it: drop its top padding and divider line. */
  .facets--vertical .facets__filters-wrapper > :first-child {
    padding-block-start: 0;
  }

  .facets--vertical .facets__filters-wrapper > :first-child::before {
    display: none;
  }

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

  /* Drawer: drop the divider above the first filter group so the top matches the
     bottom (dividers are per-item top-borders, so the last group has none below
     it) — mirrors the sidebar's first-child rule above. */
  .facets--drawer .facets__filters-wrapper > :first-child::before {
    display: none;
  }

  @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) {
    /* Vertical sidebar: drop the per-filter divider lines; the whole list is
       wrapped in the bordered scroll container defined above instead. */
    .facets--vertical .facets__item::before,
    .facets--vertical .sorting-filter::before {
      content: none;
    }
  }

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

  /* Match the checkbox option label font (.checkbox__label-text) on filter
     labels only — the sort control keeps its tertiary-button styling. */
  .facets__form-wrapper .facets__label {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: var(--font-paragraph--size);
  }

  /* 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);
    border-block-end: 2px solid var(--color-border);
    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;
    }
  }

  /* Heading nested inside the bordered vertical filters box: sits flush at the
     top of the box (the wrapper's flex gap handles spacing to the first facet),
     so drop the default heading margins. Font is driven by the type-preset
     inline style. */
  .facets--filters-title--nested {
    margin: 0;
  }

  .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 {
    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-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:120) */
.policy-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
  }

  .policy-list__link {
    text-decoration: none;
    outline-color: #0000;
    white-space: nowrap;
  }

  .policy-list__link:is(:hover, :focus-visible) {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* 4px filled square separator (matches the product-card format strip). */
  .policy-list__separator {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: currentColor;
    opacity: 0.6;
    flex: 0 0 auto;
    user-select: none;
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:123) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

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

/* START_BLOCK:image (INDEX:124) */
.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');
  }

  /* The width setting acts as a max-width so the image never upscales past the chosen size. */
  .image-block.size-style {
    width: 100%;
    max-width: var(--size-style-width-mobile, var(--size-style-width));
  }

  @media screen and (min-width: 750px) {
    .image-block.size-style {
      max-width: var(--size-style-width);
    }
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  /* Height is independent per breakpoint (mirrors the width setting). Custom height
     drives the image size (grows/upscales as the value increases); width follows the
     aspect ratio and is capped by the width setting. Kept off unless Custom is picked
     so the default layout is untouched. */
  @media screen and (max-width: 749px) {
    .image-block--height-mobile-fill .image-block__image {
      height: 100%;
    }

    .image-block--custom-height-mobile .image-block__image,
    .image-block--custom-height-mobile .placeholder-image {
      width: auto;
      height: var(--image-block-custom-height-mobile);
      max-width: 100%;
      align-self: flex-start;
    }
  }

  @media screen and (min-width: 750px) {
    .image-block--height-fill .image-block__image {
      height: 100%;
    }

    .image-block--custom-height .image-block__image,
    .image-block--custom-height .placeholder-image {
      width: auto;
      height: var(--image-block-custom-height);
      max-width: 100%;
      align-self: flex-start;
    }
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:127) */
.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:128) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--gap);
  }

  /* Top-level items — typography from the block's Top level settings
     (via menu-font-styles → --menu-top-level-* vars). */
  .menu__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-desktop);
    line-height: var(--menu-top-level-font-line-height-desktop);
    letter-spacing: var(--menu-top-level-letter-spacing, normal);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
  }

  .menu__link:hover,
  .menu__link:focus-visible {
    color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
  }

  .menu__sublist {
    margin-block-start: var(--menu-sublist-gap, 8px);
  }

  .menu__subitem + .menu__subitem {
    margin-block-start: var(--menu-sublist-gap, 8px);
  }

  /* Second-level items — typography from the block's Second level settings
     (via submenu-font-styles → --menu-parent-* vars). */
  .menu__sublink {
    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);
    letter-spacing: var(--menu-parent-letter-spacing, normal);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);
    text-decoration: none;
  }

  .menu__sublink:hover,
  .menu__sublink:focus-visible {
    color: var(--menu-parent-active-font-color);
  }

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

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

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:130) */
.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:131) */
.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:132) */
.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:price (INDEX:133) */
.tax-note:empty {
    display: none;
  }

  /* Damaged-condition price — the reduced price for a non-default Condition
     variant renders in the theme's damaged-warning accent (matches the
     condition switcher in snippets/variant-main-picker.liquid). */
  product-price .price--damaged {
    color: #e77800;
  }

  /* On-sale price — matches the sale badge accent (--color-sale, defined
     globally in assets/base.css). */
  product-price .price--sale {
    color: var(--color-sale);
  }

  form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }

  /* Volume pricing note should match unit-price styling (small, grey text) */
  product-price .volume-pricing-note,
  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
    display: block;
    font-family: var(--font-body--family);
    font-weight: normal;
    font-size: var(--font-size--xs);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:price */

/* START_BLOCK:product-custom-property (INDEX:136) */
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-description (INDEX:137) */
.product-description__anchor {
    display: block;
  }

  .product-description__heading {
    margin-block: 0 0.8rem;
  }

  .product-description--truncated .product-description__teaser {
    margin-block: 0;
  }

  /* The teaser now renders truncated rich text (it may contain <p>, <em>,
     <strong>, links); collapse the outer paragraph margins so the teaser stays
     as tight as the old single-line version. */
  .product-description--truncated .product-description__teaser > :first-child {
    margin-block-start: 0;
  }

  .product-description--truncated .product-description__teaser > :last-child {
    margin-block-end: 0;
  }

  /* When the truncated block's text didn't exceed the cutoff it renders the
     whole formatted description in place (marked 'complete'); the separate full
     description block below is then duplicate data, so hide it. */
  body:has(.product-description--complete) .product-description--full {
    display: none;
  }

  .product-description__read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-primary);
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    font-weight: 700;
    text-decoration: none;
    transition: none;
  }

  .product-description__read-more:hover {
    color: var(--color-primary-hover);
  }

  .product-description__read-more-label {
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-underline-offset: 0.2em;
  }

  /* Inline expand / collapse (product-description-toggle).
     Visibility is driven by the [hidden] attribute, toggled by the JS once it
     decides whether the current breakpoint should truncate — not by a media
     query — so it works on mobile, desktop, or both. */
  .product-description-toggle {
    display: block;
    position: relative;
  }

  .product-description-toggle__icon {
    transition: transform 0.2s ease;
  }

  .product-description-toggle__content.is-collapsible {
    overflow: hidden;
  }

  .product-description-toggle__content.is-clamped {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 7.5rem), rgb(0 0 0 / 0.12) calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 7.5rem), rgb(0 0 0 / 0.12) calc(100% - 2.5rem), transparent);
  }

  @media (prefers-reduced-motion: no-preference) {
    .product-description-toggle__content.is-collapsible {
      transition: max-height 0.35s ease;
    }
  }

  /* Shown by JS (removes [hidden]). Element-qualified so display:flex beats
     .button-tertiary's inline-flex; the [hidden] rule's higher specificity
     keeps it hidden when inactive (e.g. on desktop with desktop truncation off,
     or before JS runs). The button spans the full width for a forgiving hitbox
     while its icon + label stay flush left, lined up with the TOC button. */
  product-description-toggle .product-description-toggle__trigger {
    display: flex;
    z-index: 2;
    width: 100%;
    justify-content: flex-start;
    padding-block: 0.8rem;
    padding-inline: 0;
  }

  .product-description-toggle__trigger[hidden] {
    display: none;
  }

  /* Collapsed (both breakpoints): float over the fade at the bottom of the box. */
  .product-description-toggle[data-state='collapsed'] .product-description-toggle__trigger {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }

  /* Expanded: by default the Collapse button sits in normal flow at the end of
     the content (desktop behaviour). */
  .product-description-toggle[data-state='expanded'] .product-description-toggle__trigger {
    margin-block-start: 0.8rem;
  }

  .product-description-toggle[data-state='expanded'] .product-description-toggle__icon {
    transform: rotate(180deg);
  }

  /* On mobile only, the expanded Collapse button sticks to the bottom so it's
     reachable at any scroll position. While it floats over the text it reads as
     a real button — solid background fill + a 2px border. Once it lands at the
     bottom of the description (sticky scroll ends), the JS flips data-stuck to
     'false' and the border fades out so it sits flush with the end of content.
     Border-color (not width) is animated, so resting causes no layout shift. */
  @media screen and (max-width: 749px) {
    .product-description-toggle[data-state='expanded'] .product-description-toggle__trigger {
      position: sticky;
      bottom: 0;
      background: var(--color-background);
      border: 2px solid var(--color-border);
      transition:
        bottom 0.3s var(--ease-out-quad, ease),
        border-color 0.2s ease;
    }

    .product-description-toggle[data-state='expanded'][data-stuck='false']
      .product-description-toggle__trigger {
      border-color: transparent;
    }

    /* Clear the sticky add-to-cart bar when it has slid in at the bottom.
       --pdt-atc-height is the bar's measured height, set by the JS (it's
       content-driven, so we can't assume a fixed value); the nested calc is a
       fallback estimate for before/without the script. */
    body:has(.sticky-add-to-cart__bar[data-stuck='true'])
      .product-description-toggle[data-state='expanded']
      .product-description-toggle__trigger {
      bottom: calc(
        var(--pdt-atc-height, calc(var(--height-buy-buttons, 4.5rem) + var(--padding-sm, 1.2rem) * 2)) + 1.5rem
      );
    }
  }
/* END_BLOCK:product-description */

/* START_BLOCK:product-hero-endorsements (INDEX:139) */
.product-hero__endorsements {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 56px);
  }

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

  .product-hero__endorsement {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
  }

  .product-hero__endorsement-quote {
    margin: 0;
    color: var(--color-foreground);
  }

  .product-hero__endorsement-quote > :first-child {
    margin-block-start: 0;
  }

  .product-hero__endorsement-quote > :last-child {
    margin-block-end: 0;
  }

  .product-hero__endorser {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .product-hero__endorser-avatar {
    flex-shrink: 0;
  }

  .product-hero__endorser-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .product-hero__endorser-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }

  .product-hero__endorser-name {
    font-weight: 700;
    color: var(--color-foreground);
  }

  .product-hero__endorser-title {
    color: var(--color-text-2, var(--color-foreground));
  }
/* END_BLOCK:product-hero-endorsements */

/* START_BLOCK:product-inventory (INDEX:140) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

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

/* START_BLOCK:product-recommendations (INDEX:141) */
.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;
  }

  @media screen and (max-width: 749px) {
    /* Mobile arrows toggled off: the nav still renders (so base.css hides the
       cards' overlaid arrows on mobile), but we hide the nav itself and reclaim
       the heading's reserved space, leaving the mobile carousel arrow-free. */
    .block-product-recommendations:not(.block-product-recommendations--nav-mobile) .resource-list__header-nav {
      display: none;
    }

    .block-product-recommendations:not(.block-product-recommendations--nav-mobile) .section-resource-list__content:has(.resource-list__header-nav) {
      padding-inline-end: 0;
    }
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:product-series (INDEX:143) */
.product-series {
    display: flex;
    width: 100%;
  }

  .product-series__inner {
    display: flex;
    align-items: stretch;
    max-width: 100%;
    width: fit-content;
    border: 2px solid var(--color-border);
    overflow: hidden;
    background: var(--color-background);
  }

  .product-series__inner--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  /* Hover mirrors the variant option buttons: an instant (no-transition)
     background / border / text swap using the scheme's variant-hover tokens. */
  .product-series__inner--link:hover,
  .product-series__inner--link:hover .product-series__main {
    background: var(--color-variant-hover-background, var(--color-background-2));
  }

  .product-series__inner--link:hover {
    border-color: var(--color-variant-hover-border, var(--color-border));
  }

  .product-series__inner--link:hover .product-series__title,
  .product-series__inner--link:hover .product-series__volume-text {
    color: var(--color-variant-hover-text, var(--color-foreground));
  }

  .product-series__main {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    background: #f5f4f4;
  }

  .product-series__image {
    flex-shrink: 0;
    align-self: stretch;
    width: calc(1em * var(--font-paragraph--line-height, 1.5) + 0.5rem);
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
  }

  .product-series__image-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .product-series__title {
    align-self: center;
    padding: 0.25rem 0.625rem 0.25rem 0;
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-weight: 700;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    letter-spacing: var(--font-paragraph--letter-spacing);
    color: var(--color-foreground);
    white-space: nowrap;
  }

  .product-series__volume {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.25rem 0.625rem;
    border-left: 2px solid var(--color-border);
  }

  .product-series__volume-text {
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-weight: 700;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    letter-spacing: var(--font-paragraph--letter-spacing);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.55));
    white-space: nowrap;
  }
/* END_BLOCK:product-series */

/* START_BLOCK:product-upsell (INDEX:146) */
.product-upsell {
    width: 100%;
  }

  .product-upsell__title {
    margin: 0 0 1rem;
    color: var(--color-foreground);
  }

  /* Bold paragraph option: keep the .label-header muted color (it would
     otherwise lose to .product-upsell__title's foreground at equal specificity). */
  .product-upsell__title.label-header {
    color: var(--color-text-2);
  }

  .product-upsell__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    column-gap: var(--padding-md, 16px);
    row-gap: var(--padding-lg, 24px);
  }

  .product-upsell__cell {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs, 8px);
  }

  /* ── Carousel ── free side-scroll with a fade on whichever edge overflows. */
  .product-upsell__track {
    --bundle-fade-start: 0px;
    --bundle-fade-end: 0px;
    display: flex;
    gap: var(--padding-md, 16px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--bundle-fade-start),
      #000 calc(100% - var(--bundle-fade-end)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--bundle-fade-start),
      #000 calc(100% - var(--bundle-fade-end)),
      transparent 100%
    );
  }

  .product-upsell__track::-webkit-scrollbar {
    display: none;
  }

  bundle-carousel[data-overflow-start] .product-upsell__track {
    --bundle-fade-start: 36px;
  }

  bundle-carousel[data-overflow-end] .product-upsell__track {
    --bundle-fade-end: 36px;
  }

  .product-upsell__track .product-upsell__cell {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }

  .product-upsell__empty {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  @media screen and (max-width: 749px) {
    .product-upsell__grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .product-upsell__track .product-upsell__cell {
      flex-basis: 60vw;
    }

    /* Opt the cards' quick-add pill into mobile (it's desktop-hover-only
       by default). Drives the base quick-add snippet's mobile show hooks. */
    .product-upsell--quick-add-mobile .quick-add__button {
      --quick-add-mobile-display: inline-flex;
      --quick-add-mobile-opacity: 1;
    }
  }
/* END_BLOCK:product-upsell */

/* START_BLOCK:review (INDEX:148) */
.rating-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

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

  .rating-wrapper .rating-number {
    --color: var(--rating-number-color);
    color: var(--rating-number-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-wrapper .rating-count {
    --color: var(--count-color);
    color: var(--count-color);
    margin: 0;
    white-space: nowrap;
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:150) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

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

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

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

  .social-icons__icon {
    display: none;
  }

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

    .social-icons__icon {
      display: block;
    }

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

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

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

/* START_BLOCK:spacer (INDEX:151) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:152) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:trowel-product-card-grid (INDEX:154) */
.trowel-product-card-grid {
    width: 100%;
  }

  .trowel-product-card-grid__grid {
    display: grid;
    grid-template-columns: repeat(var(--tpc-columns, 4), minmax(0, 1fr));
    column-gap: var(--tpc-columns-gap, 8px);
    row-gap: var(--tpc-rows-gap, 24px);
    width: 100%;
  }

  @media screen and (max-width: 749px) {
    .trowel-product-card-grid__grid {
      grid-template-columns: repeat(var(--tpc-mobile-columns, 2), minmax(0, 1fr));
    }
  }

  .trowel-product-card-grid__empty {
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }
/* END_BLOCK:trowel-product-card-grid */

/* START_BLOCK:trowel-product-card (INDEX:155) */
.trowel-product-card-block {
    display: block;
    width: 100%;
  }

  .trowel-product-card-block__empty {
    padding: var(--padding-md, 16px);
    color: rgb(var(--color-foreground-rgb) / 0.6);
    text-align: center;
    border: 1px dashed rgb(var(--color-foreground-rgb) / 0.2);
    border-radius: var(--style-border-radius-sm, 4px);
  }
/* END_BLOCK:trowel-product-card */

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

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:author-list-filter (INDEX:159) */
/* Layout-neutral: the element exists only to re-apply the type-to-search
     query after section morphs (see facets.js AuthorFacetSearch). */
  author-facet-search {
    display: contents;
  }
/* END_SNIPPET:author-list-filter */

/* START_SNIPPET:background-media (INDEX:162) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:163) */
.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:164) */
.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:bundle-badge (INDEX:166) */
.product-badges__badge--bundle {
    gap: 0.3em;
  }

  .product-badges__badge--bundle .product-badges__badge-icon {
    font-size: 1.1em;
    line-height: 1;
  }

  .product-badges__badge--bundle .product-badges__badge-icon-img {
    width: 1.1em;
    height: 1.1em;
    object-fit: contain;
  }
/* END_SNIPPET:bundle-badge */

/* START_SNIPPET:button (INDEX:168) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

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

  .button-tertiary {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-primary);
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    font-weight: 700;
    text-decoration: none;
    transition: none;
  }

  @media (hover: hover) {
    .button-tertiary:hover {
      color: var(--color-primary-hover);
    }
  }

  .button-tertiary[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .button-tertiary__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    color: currentcolor;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
  }

  .button-tertiary__label {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid currentcolor;
  }

  .button__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
  }

  .button__icon {
    flex-shrink: 0;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    color: currentcolor;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
  }
/* END_SNIPPET:button */

/* START_SNIPPET:card-gallery (INDEX:170) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  /* When the product card sits inside a section carousel (.resource-list__carousel —
     the mobile `carousel_on_mobile` track or a full carousel layout), collapse the
     card's OWN image carousel to the first image only: no peeking second slide, no
     swipe. The outer carousel handles paging; a swiper-in-a-swiper is confusing.
     The nested slideshow's drag is already disabled in JS (slideshow.js `isNested`),
     but the section carousel's inherited `--slide-width` (60vw) and slide `gap`
     cascade down into the inner gallery slides, leaking slide 2 into view. Dropping
     every trailing inner slide out of layout with `display: none` can't be defeated
     by that width/gap inheritance or by `content-visibility`. Scoped under
     `.card-gallery` so it never touches the OUTER carousel's `.resource-list__slide`
     slides. Desktop grids aren't inside `.resource-list__carousel`, so they keep the
     card's image swiper. (Mirrors the NCP product-card fix.) */
  .resource-list__carousel .card-gallery slideshow-slide ~ slideshow-slide {
    display: none;
  }

  .resource-list__carousel .card-gallery slideshow-slides {
    overflow: hidden;
    --slide-width: 100%;
    gap: 0;
  }

  .resource-list__carousel .card-gallery :is(slideshow-controls, slideshow-arrows) {
    display: none;
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -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;
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bundle-upsells (INDEX:172) */
/* Compact inline "Swap to bundle" row, nested under the parent cart line's
     quantity controls. Reads as a sub-row of the item — no card, no full-width
     button — using the existing cart typography / badge styles. */
  .cart-bundle-upsell {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs, 8px);
    width: 100%;
    margin-block-start: var(--margin-xs, 12px);
    padding-block-start: var(--padding-xs, 10px);
  }

  .cart-bundle-upsell__thumb-link {
    flex: 0 0 auto;
    display: block;
    text-decoration: none;
  }

  .cart-bundle-upsell__thumb {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    object-position: center;
    background: var(--color-background-2, #f5f4f4);
  }

  .cart-bundle-upsell__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-3xs, 4px);
    min-width: 0;
    flex: 1 1 auto;
  }

  .cart-bundle-upsell__title {
    font-family: var(--cart-title-font-family, var(--font-subheading--family));
    font-style: var(--cart-title-font-style, var(--font-subheading--style));
    font-weight: var(--font-weight-bold, 700);
    /* Prominent, but a step below the main cart line title. */
    font-size: var(--font-size--md);
    line-height: 1.2;
    color: var(--color-foreground);
    text-decoration: none;
    overflow-wrap: break-word;
  }

  .cart-bundle-upsell__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-2xs, 6px);
  }

  .cart-bundle-upsell__price-current {
    font-size: var(--font-size--md);
    font-weight: 700;
    color: var(--color-foreground);
  }

  .cart-bundle-upsell__price-compare {
    font-size: var(--font-size--sm);
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-foreground-rgb) / 0.5);
    text-decoration: line-through;
  }

  .cart-bundle-upsell__includes {
    margin: 0;
    font-size: var(--font-size--xs);
    line-height: 1.2;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  /* Enumerated "You also get:" list — same muted scale as the intro line. */
  .cart-bundle-upsell__includes-list {
    margin: 0;
    padding-inline-start: 1.15em;
    list-style: disc;
    font-size: var(--font-size--xs);
    line-height: 1.3;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .cart-bundle-upsell__includes-list li {
    overflow-wrap: break-word;
  }

  /* Tertiary text action (underlined label + swap icon). Cart-scaled font. */
  .cart-bundle-upsell__cta {
    margin-block-start: var(--margin-3xs, 4px);
    font-size: var(--font-size--sm);
    line-height: 1.2;
    text-align: start;
  }

  .cart-bundle-upsell__cta .button-tertiary__icon {
    font-size: 1.15em;
  }

  .cart-bundle-upsell__cta:disabled {
    opacity: 0.6;
    cursor: default;
  }

  /* Loading state: while the swap is in flight (aria-busy), replace the leading
     icon with a spinner of the same size — the label stays put. */
  .cart-bundle-upsell__cta-spinner {
    display: none;
  }

  .cart-bundle-upsell__cta[aria-busy='true'] .cart-bundle-upsell__cta-icon {
    display: none;
  }

  .cart-bundle-upsell__cta[aria-busy='true'] .cart-bundle-upsell__cta-spinner {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cart-bundle-upsell-spin 0.6s linear infinite;
  }

  @keyframes cart-bundle-upsell-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-bundle-upsell__cta[aria-busy='true'] .cart-bundle-upsell__cta-spinner {
      animation-duration: 1.5s;
    }
  }
/* END_SNIPPET:cart-bundle-upsells */

/* START_SNIPPET:cart-products (INDEX:179) */
.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, 12px);
  }

  /* Cart drawer: separate grid area for variants */
  .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(3, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    /* Subtle breathing room around the meta rows (badges / author / variant). */
    .cart-items__line-badges,
    .cart-items__author,
    .cart-items__variants-wrapper {
      padding-block: var(--padding-2xs);
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row: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, 12px);
  }

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

  /* Attach the per-product upsell row to the LAST card of its group: pull it up
     tight against that card and move the group divider to AFTER the upsell, so
     it reads as belonging to the book above it (not the product below). The
     last card carries .cart-items__table-row--group-continues (set in Liquid)
     rather than relying on a relative :has() selector. */
  .cart-items__table-row.cart-items__table-row--group-continues {
    padding-bottom: var(--padding-2xs, 4px);
  }

  .cart-items--dividers .cart-items__table-row.cart-items__table-row--group-continues {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__group-upsell:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap, 12px);
  }

  /* When a bundle upsell follows the format upsells, the two read as one
     "after this product" block: suppress the divider between them and let the
     bundle row close the group with its own bottom divider. The continuation
     class is set in Liquid (the bundle row is precomputed) rather than via a
     :has() relational selector. */
  .cart-items--dividers .cart-items__group-upsell.cart-items__group-upsell--continues {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__group-bundle-upsell:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap, 12px);
  }

  /* Preorder notice that closes its group (no upsell follows) carries the
     group's divider, so preorder items are separated from the next item like
     every other card. The last card of the group drops its own divider
     (--group-continues), so without this the group would have none. */
  .cart-items--dividers .cart-items__preorder-row--group-end:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap, 12px);
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
    /* Let long, unbreakable content (titles, variant strings, upsell labels)
       break instead of forcing the details column wider than its track and
       overflowing the cart to the right on narrow screens. Inherited, so it
       covers the title / author / variants / upsells inside this cell. */
    min-width: 0;
    overflow-wrap: break-word;
  }

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

  /* Line-level discount (e.g. bulk discount): bold, full foreground, package icon */
  .cart-items__discount {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    color: var(--color-foreground);
    font-weight: var(--font-weight-bold);
  }

  .cart-items__discount-icon {
    font-size: var(--font-size--md);
    flex-shrink: 0;
  }

  /* Bundle "[x] items included" disclosure — native <details>; the summary is the
     expand/collapse toggle, the caret flips when open. */
  .cart-items__included {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__included-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-3xs, 4px);
    cursor: pointer;
    list-style: none;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-foreground);
  }

  .cart-items__included-summary::-webkit-details-marker {
    display: none;
  }

  .cart-items__included-caret {
    font-size: var(--font-size--md);
    transition: transform var(--animation-speed, 0.15s) var(--animation-easing, ease);
  }

  .cart-items__included[open] .cart-items__included-caret {
    transform: rotate(180deg);
  }

  .cart-items__included-list {
    margin-block-start: var(--margin-3xs);
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--color-text-2, var(--color-foreground));
  }

  .cart-items__included-qty {
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  /* "Bundle" badge above the title on a bundle line item. Self-contained badge
     styling (the global .product-badges__badge styles are scoped per-consumer). */
  .cart-items__line-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-block-end: var(--margin-3xs);
  }

  .cart-items__line-badges .product-badges__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size, var(--font-size--2xs));
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
    line-height: 1.1;
  }

  .cart-items__line-badges .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block, 3px);
    padding-inline: var(--badge-rectangle-padding-inline, 8px);
  }

  /* The generic `.cart-items__details * { font-size: --font-size--sm }` rule
     leaks onto a badge's inner label <span> — the bundle and preorder badges
     wrap their label in one, so those rendered a size larger than the plain-text
     badges (NEW / sold out). Re-assert the badge's own font-size on every
     non-icon descendant so all line badges match. The :where() keeps this at the
     same (0,2,0) specificity as the icon rule below, which it excludes. */
  .cart-items__line-badges .product-badges__badge :where(:not(.product-badges__badge-icon, .product-badges__badge-icon-img)) {
    font-size: inherit;
  }

  .cart-items__title {
    font-family: var(--cart-title-font-family, var(--font-subheading--family));
    font-style: var(--cart-title-font-style, var(--font-subheading--style));
    font-weight: var(--cart-title-font-weight, var(--font-subheading--weight));
    font-size: var(--cart-title-font-size, var(--font-size--lg));
    line-height: var(--cart-title-line-height, inherit);
    letter-spacing: var(--cart-title-letter-spacing, inherit);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    text-wrap: balance;
    display: block;
    margin-block-start: calc((var(--cart-title-font-size, var(--font-size--lg)) - 1lh) / 2);
  }

  /* Preorder ship notice — a solid, tinted block attached directly below its
     product's card(s) as a full-width row. Background/text come from the Preorder
     badge color (set inline as --preorder-notice-bg / --preorder-notice-fg). */
  .cart-items__preorder-row {
    display: block;
  }

  .cart-items__preorder-cell {
    display: block;
    /* Bottom gap so the tinted box doesn't slam into the next product below it.
       Applied as the cell's padding, NOT the box's margin: the notice row lives
       inside .cart-items__table, whose `.cart-items__table * { margin: 0 }` rule
       zeroes any margin on descendants (rows/cells/box). Padding is unaffected.
       Top stays 0 so the box keeps attaching tightly to its own product's card. */
    padding: 0 0 var(--cart-items-gap, 12px);
  }

  .cart-items__preorder-notices {
    --preorder-notice-bg: #9F7E50;
    --preorder-notice-fg: #FFFFFF;

    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs, 6px);
    padding: var(--padding-sm, 12px);
    background: var(--preorder-notice-bg);
    color: var(--preorder-notice-fg);
  }

  /* Individual notice — "<title> ships in <Month>". White text, ship icon. */
  .cart-items__preorder-notice {
    display: flex;
    align-items: center;
    gap: var(--gap-3xs, 4px);
    font-size: var(--font-size--sm);
    line-height: 1.2;
    color: var(--preorder-notice-fg);
  }

  .cart-items__preorder-icon {
    font-size: 1.1em;
    flex-shrink: 0;
  }

  /* Author line — self-contained so it renders correctly on the cart page/drawer
     where blocks/author-meta-list.liquid's stylesheet isn't loaded. */
  .cart-items__author {
    margin-block-start: var(--margin-3xs);
    line-height: 1.2;
  }

  .cart-items__author .author-meta-list__conjunction,
  .cart-items__author .author-meta-list__comma {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-weight: var(--font-body--weight);
  }

  .cart-items__author .author-meta-list__name {
    color: var(--color-text-2);
    font-weight: var(--font-body--weight-bold, 700);
  }

  /* Format upsells — inline tertiary "Add ebook / audiobook for $X" links under
     the line item. Uses the shared .button-tertiary pattern; only the cart-line
     scale (smaller font) is overridden here. */
  .cart-items__format-upsells {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-2xs);
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__format-upsell-button {
    font-size: var(--font-size--sm);
    line-height: 1.2;
    text-align: start;
  }

  .cart-items__format-upsell-button:disabled {
    opacity: 0.5;
    cursor: default;
  }

  .cart-items__format-upsell-button .button-tertiary__icon {
    font-size: 1.1em;
  }

  /* Bundle "compare-at" pricing on a format upsell: regular price struck
     through, discounted price in the sale accent. Strike-through / opacity come
     from the global .compare-at-price. */
  .cart-items__format-upsell-compare {
    margin-inline-start: 0.25em;
    font-weight: var(--font-paragraph--weight);
  }

  .cart-items__format-upsell-sale {
    margin-inline-start: 0.25em;
    color: var(--color-sale);
  }

  /* Format upsell block — the "Add <format> for" rows shown once after a
     product's group of cards. A vertical stack of flex rows, no background. */
  .cart-items__companion {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs, 8px);
    margin-block-start: var(--margin-xs, 12px);
    margin-inline-start: 0;
    padding: 0;
    background: none;
    border: 0;
  }

  .cart-items__companion-row {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs, 6px);
    width: 100%;
  }

  /* Prices live inside the trailing .cart-items__companion-add-text run, which
     sits under the label's continuous underline — so they only need their own
     color + spacing, not their own border. Match the current price's size and use the
     muted text_2 token; the compound selector beats the global
     .compare-at-price (font-size: md, opacity: 0.4) from base.css. */
  .cart-items__companion-compare.compare-at-price {
    font-size: var(--font-size--sm);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-text-2);
    opacity: 1;
    margin-inline-start: 0.4em;
  }

  .cart-items__companion-price {
    font-weight: 700;
    color: var(--color-foreground);
    white-space: nowrap;
    margin-inline-start: 0.4em;
  }

  /* Add row: the whole affordance — "+ Add <icon> <format> for <compare>
     <price> <SAVE>" — is one left-aligned group with a single border-bottom
     (not a per-word underline). After the format is added it re-renders as an
     "added" row where the price moves to the right, like a normal line item. */
  .cart-items__companion-add-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-2xs, 6px);
    width: fit-content;
    max-width: 100%;
  }

  /* Add row link — reuses .button-tertiary (bold + hover). The underline is a
     single border-bottom on the label, so it runs continuously under "Add",
     the format icon, the trailing "<format> for <compare> <price>" run, and the
     prices nested inside it. The leading + icon (a sibling of the label) and the
     SAVE badge (outside the button) stay un-underlined. */
  .cart-items__companion-add {
    font-size: var(--font-size--sm);
    line-height: 1.2;
    text-align: start;
  }

  /* Keep the shared .button-tertiary__label border so the format icon it wraps
     is underlined along with the text. */
  .cart-items__companion-add .button-tertiary__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    text-decoration: none;
    border-block-end: 1px solid currentColor;
  }

  .cart-items__companion-add-format-icon {
    font-size: 1.15em;
    line-height: 1;
  }

  .cart-items__companion-add .button-tertiary__icon {
    font-size: 1.1em;
  }

  /* Loading state — cart-line-upsell.js sets aria-busy on the button while the
     add request is in flight. Swap the plus glyph for a spinner. */
  .cart-items__companion-add[aria-busy='true'] {
    cursor: default;
  }

  .cart-items__companion-add[aria-busy='true'] .button-tertiary__label {
    opacity: 0.6;
  }

  .cart-items__companion-add[aria-busy='true'] .button-tertiary__icon {
    position: relative;
    visibility: hidden;
  }

  .cart-items__companion-add[aria-busy='true'] .button-tertiary__icon::before {
    content: '';
    visibility: visible;
    position: absolute;
    inset: 0;
    margin: auto;
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: companion-spin 0.6s linear infinite;
  }

  @keyframes companion-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* All selected variants on a single line, separated by " / " dividers. */
  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant-value {
    display: inline;
    margin: 0;
    font-weight: var(--font-body--weight);
    color: var(--color-text-2);
  }

  /* The chosen Format value is colored in the format's accent (set inline). */
  .cart-items__variant-value--format {
    font-weight: var(--font-weight-bold, 700);
  }

  /* Per-format material icon at the start of the variant line, in the format's
     accent color, so each edition's card is identifiable at a glance. */
  .cart-items__variant-format-icon {
    display: inline-flex;
    vertical-align: -0.2em;
    margin-inline-end: 0.25em;
  }

  .cart-items__variant-format-icon .material-symbols-outlined {
    font-size: 1.15em;
  }

  .cart-items__variant-divider {
    font-weight: var(--font-body--weight);
    color: var(--color-text-2);
  }

  /* Per-product upsell row: a full-width block row after a product's cards,
     indented to line up with the card details column (past the cover). */
  .cart-items__group-upsell,
  .cart-items__group-bundle-upsell {
    display: block;
  }

  .cart-items__group-upsell-cell {
    display: block;
    padding-block: var(--padding-2xs, 4px) var(--padding-xs, 10px);
    padding-inline-start: calc(clamp(2.5rem, 15cqi, 7.5rem) + var(--gap-md));
  }

  .cart-items__group-upsell-cell .cart-items__companion {
    margin-block-start: 0;
  }

  /* In its full-width row the bundle upsell drops the extra top margin it used
     when nested under a line's quantity controls. */
  .cart-items__group-upsell-cell .cart-bundle-upsell {
    margin-block-start: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-2xs);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
  }

  .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 {
    --cart-stepper-size: 32px;
    /* 100px = 2 × 32px buttons + a 36px input, the minimum that shows a
       3-digit quantity without clipping at the cart's small font size. */
    --cart-stepper-width: 100px;

    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
    width: var(--cart-stepper-width);
  }

  .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus) {
    width: var(--cart-stepper-size);
    height: var(--cart-stepper-size);
  }

  .cart-items__quantity .quantity-selector input {
    max-width: calc(var(--cart-stepper-width) - var(--cart-stepper-size) * 2);
  }

  .cart-items__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: transparent;
    color: var(--color-foreground);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    box-shadow: none;
    overflow: visible;
    cursor: pointer;
  }

  .cart-items__remove:hover {
    color: var(--color-primary-hover);
  }

  .cart-items__remove svg {
    width: 22px;
    height: 22px;
  }

  .cart-items__remove-text {
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    min-height: var(--minimum-touch-target);
    display: inline-flex;
    align-items: center;
  }

  .cart-items__remove-text:hover {
    color: var(--color-primary-hover);
  }

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

  /* Line total: discounted price (bold) with the original struck through.
     Matches the trowel product card price (font / size / color). */
  .cart-items__price-line {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  .cart-items__price-current {
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-weight: 700;
    font-size: var(--font-size--xl);
    line-height: var(--font-paragraph--line-height);
    letter-spacing: var(--font-paragraph--letter-spacing);
    text-transform: var(--font-paragraph--case);
    color: var(--color-foreground);
  }

  /* On-sale price color — mirrors the trowel product card's sale price. */
  .cart-items__price-current--on-sale {
    color: var(--color-sale);
    -webkit-text-stroke: 0.4pt;
  }

  /* strike-through / opacity come from the global .compare-at-price; we drop its
     bold weight and step the size down so it reads as a secondary, struck price. */
  .cart-items__price-compare {
    font-size: var(--font-size--sm);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
  }

  /* Savings pill (shared .product-badges--small) under a sale / bundle line's price,
     right-aligned with the rest of the price column. */
  .cart-items__savings-badge {
    display: flex;
    justify-content: flex-end;
    margin-block-start: var(--margin-3xs, 4px);
  }


  .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;
    background-color: var(--color-background-2, #f5f4f4);
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  /* Sale badge — mirrors the trowel product card badge. Metrics (font, padding,
     line-height) match the medium badge tier used by the line badges and upsell
     cards so every badge in the cart renders the same pill size. */
  .cart-items__badges {
    position: absolute;
    z-index: 2;
    top: var(--padding-2xs, 4px);
    left: var(--padding-2xs, 4px);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .cart-items__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: 3px;
    padding-inline: 8px;
    font-size: var(--font-size--2xs, 0.6875rem);
    font-family: var(--font-{{ settings.badge_font_family }}--family);
    font-weight: var(--font-{{ settings.badge_font_family }}--weight);
    text-transform: {{ settings.badge_text_transform }};
    border-radius: {{ settings.badge_corner_radius }}px;
    line-height: 1.1;
  }

  .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 area for variants */
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

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

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (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-recommendations (INDEX:180) */
/* The strip reads as another section of the cart, not a promotional box: no
     fill, just an inset top divider (matching the cart line-item dividers) and
     the cart's own spacing. `--cart-rec-pad` is the host surface's content
     inset, set by the drawer (on .cart-drawer__upsells) so the carousel can
     break out edge-to-edge; it must NOT be declared here or the local value
     would shadow the inherited one. The list reads it with a 0 fallback so the
     cart page (no host override) simply doesn't break out. */
  .cart-recommendations {
    display: block;
    /* Anchor for the grouped nav + label-fade overlay. */
    position: relative;
  }

  /* Post-add upsells follow the line items, so separate them with the same
     inset divider + spacing the line items use between rows. The empty-cart
     recommendations sit at the top of the flow and need no divider. */
  .cart-recommendations--upsell {
    margin-block-start: var(--gap-xl, 24px);
    padding-block-start: var(--gap-xl, 24px);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  .cart-recommendations__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm, 10px);
    margin-bottom: var(--margin-md, 16px);
  }

  .cart-recommendations__heading {
    margin: 0;
  }

  /* Each group is a column: a sticky label above that group's own cards row.
     No dividers — the label alignment alone establishes the two groups. */
  .cart-recommendations__group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm, 10px);
  }

  /* Slightly smaller / lower-emphasis than the section heading. Sticky to the
     left gutter so it stays visible while scrolling within its group, then hands
     off to the next group's label (bounded by its own group's width). Its
     min-height matches the overlaid nav so the labels and arrows read on one
     line. */
  .cart-recommendations__group-label {
    position: sticky;
    left: 0;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: var(--cart-rec-label-h, 1.75rem);
    max-inline-size: 100%;
    font-size: var(--font-size--sm);
    font-weight: var(--font-weight-medium, 600);
    line-height: 1.2;
    color: var(--color-text-2);
    white-space: nowrap;
  }

  /* Grouped upsell: the ‹ › nav overlays the label row (far right) instead of
     sitting in a title row; `top` clears the section's inset padding so it lands
     on the label line. A fade sits just behind it so the scrolling labels
     dissolve into the surface rather than colliding with the arrows. */
  .cart-recommendations--grouped .cart-recommendations__nav {
    position: absolute;
    top: var(--gap-xl, 24px);
    right: 0;
    z-index: 3;
    height: var(--cart-rec-label-h, 1.75rem);
  }

  /* Spans past the content inset to the surface's true right edge (the breakout
     gutter) so the scrolling card labels dissolve fully behind the arrows
     instead of peeking through to their right. The transparent→solid transition
     stays at ~3.85rem from the left so the labels fade before the arrows. */
  .cart-recommendations__label-fade {
    position: absolute;
    top: var(--gap-xl, 24px);
    right: calc(-1 * var(--cart-rec-pad, 0px));
    z-index: 2;
    height: var(--cart-rec-label-h, 1.75rem);
    width: calc(7rem + var(--cart-rec-pad, 0px));
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--color-background) 3.85rem);
  }

  .cart-recommendations__nav {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs, 6px);
    flex: 0 0 auto;
  }

  .cart-recommendations__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 1.75rem;
    height: 1.75rem;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--color-foreground);
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  .cart-recommendations__arrow .material-icon {
    font-size: 1.5rem;
  }

  .cart-recommendations__arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }

  /* Hide the ‹ › nav on mobile — the track is swipeable (proximity snap) so the
     arrows are redundant there and read as clutter in the drawer. Desktop keeps
     them. The label-fade goes with them in the grouped context (it exists only
     to keep the scrolling labels from colliding with the arrows). */
  @media screen and (max-width: 749px) {
    .cart-recommendations__nav,
    .cart-recommendations__label-fade {
      display: none;
    }
  }

  /* Horizontal scroll track. Breaks out of the host's content padding with
     negative inline margins so the cards scroll to the surface's true edge;
     the start inset keeps the first card (and the label row) aligned with the
     heading and the rest of the cart content. The END inset is NOT applied
     here: a scroll container's own `padding-inline-end` isn't reliably reserved
     at the scroll extent (iOS Safari drops it), so the last card would slam
     against the surface edge. It lives on `.cart-recommendations__scroll`
     instead, where it's part of the scrollable content width. */
  .cart-recommendations__list {
    margin-inline: calc(-1 * var(--cart-rec-pad, 0px));
    padding-inline-start: var(--cart-rec-pad, 0px);
    overflow-x: auto;
    /* Gentle (proximity, NOT mandatory) snap — cards snap when you settle near
       one, but it never force-pulls, so it doesn't fight the cart's vertical
       scroll. scroll-padding keeps the first card aligned with the gutter. */
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--cart-rec-pad, 0px);
    scrollbar-width: none;
  }

  .cart-recommendations__list::-webkit-scrollbar {
    display: none;
  }

  /* Sized to its content so the whole set of group columns scrolls as one unit.
     The inter-group gap matches the inter-card gap so spacing stays uniform.
     Carries the track's END inset (see `.cart-recommendations__list`): as part
     of this box's max-content width it's included in the scrollable area, so the
     last card lands at the same gutter as the first instead of the surface edge. */
  .cart-recommendations__scroll {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-lg, 16px);
    inline-size: max-content;
    padding-inline-end: var(--cart-rec-pad, 0px);
  }

  .cart-recommendations__cards {
    display: flex;
    gap: var(--gap-lg, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: start;
  }

  .cart-recommendations__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* === Cart Quick Add dialog ===
     One reusable variant chooser for the strip's multi-variant cards. The
     dialog element itself only changes presentation per breakpoint: a
     lightweight sub-modal anchored over the cart drawer panel (or centered on
     the cart page) on desktop, a bottom sheet on mobile. Both re-aim
     base.css's .dialog-drawer move-and-fade keyframes through the sanctioned
     --start/end-x/y custom-property hooks — never re-declare `animation` here
     (see css-effects-conventions). */
  .cart-quick-add {
    display: block;
  }

  .cart-quick-add__dialog {
    --animation-speed: 0.24s;

    padding: 0;
    background-color: var(--color-background);
    color: var(--color-foreground);
    overflow: hidden;
  }

  /* Flex only while open — an unconditional display would override the UA's
     display:none on the closed dialog. */
  .cart-quick-add__dialog[open] {
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 750px) {
    .cart-quick-add__dialog {
      --cart-quick-add-width: min(26rem, 92vw);

      width: var(--cart-quick-add-width);
      max-height: min(85dvh, 44rem);
      margin: auto;
      border-radius: var(--style-border-radius-popover);
    }

    /* Inside the drawer, center the popover over the drawer panel instead of
       the viewport (same right-anchoring technique the drawer itself uses) so
       it reads as a sub-modal of the cart sheet. --cart-drawer-width is set
       inline on the drawer dialog (header-actions.liquid) and inherits down
       the DOM tree into this nested dialog. */
    .cart-drawer .cart-quick-add__dialog {
      --cart-quick-add-anchor: min(var(--cart-drawer-width, var(--sidebar-width)), 95vw);
      --cart-quick-add-width: min(24rem, calc(var(--cart-quick-add-anchor) - 2 * var(--gap-xl, 24px)));

      margin: auto calc((var(--cart-quick-add-anchor) - var(--cart-quick-add-width)) / 2) auto auto;
    }

    /* Neutralize the drawer slide on desktop: a small slide-down + fade,
       matching the theme's centered modals. */
    .dialog-drawer.cart-quick-add__dialog[open] {
      --start-x: 0px;
      --end-x: 0px;
      --start-y: -10px;
      --end-y: 0px;
      --start-opacity: 0;
    }

    .dialog-drawer.cart-quick-add__dialog.dialog-closing {
      --start-x: 0px;
      --end-x: 0px;
      --start-y: 0px;
      --end-y: -10px;
      --start-opacity: 1;
      --end-opacity: 0;
    }
 
    /* Modal-ception dimming: the drawer's own backdrop already dims the
       page, so the quick add's native full-viewport backdrop would
       double-dim everything behind the drawer. Make it inert here and dim
       ONLY the drawer panel instead, via an overlay on the drawer dialog
       (its fixed box is the containing block, so inset: 0 clips the dim to
       the panel exactly, whatever the drawer width). animation: none is
       required — base.css's .dialog-modal[open]::backdrop backdropFilter
       animation (fill: forwards) would otherwise beat a plain
       backdrop-filter reset. Deliberate opt-out scoped to our own dialog's
       backdrop; the cart page (not nested) and mobile keep the native
       full-viewport backdrop. */
    .cart-drawer .cart-quick-add__dialog[open]::backdrop {
      background: transparent;
      backdrop-filter: none;
      animation: none;
    }

    .cart-drawer__dialog:has(.cart-quick-add__dialog[open])::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 5;
      background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
      pointer-events: none;
      transition: opacity var(--animation-speed) var(--animation-easing);
      animation: cart-quick-add-panel-dim-in var(--animation-speed) var(--animation-easing);
    }

    /* The closing dialog keeps [open] until its keyframe ends, so the
       overlay persists long enough to fade out with it. */
    .cart-drawer__dialog:has(.cart-quick-add__dialog.dialog-closing)::after {
      opacity: 0;
    }

    @keyframes cart-quick-add-panel-dim-in {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }
  }

  @media screen and (max-width: 749px) {
    .cart-quick-add__dialog {
      width: 100dvw;
      max-width: 100dvw;
      height: auto;
      max-height: 85dvh;
      margin: 0;
      inset-block-end: 0;
      inset-block-start: auto;
      /* Bottom-sheet chrome: rounded top corners (square when the popover
         radius setting is 0) + the grab bar below. */
      border-radius: var(--style-border-radius-popover) var(--style-border-radius-popover) 0 0;
      padding: 0;
      /* The grab bar drags the sheet with inline transforms. */
      will-change: transform;
    }

    .dialog-drawer.cart-quick-add__dialog[open] {
      --start-x: 0px;
      --end-x: 0px;
      --start-y: 100%;
      --end-y: 0px;
      --start-opacity: 1;
    }

    .dialog-drawer.cart-quick-add__dialog.dialog-closing {
      --start-x: 0px;
      --end-x: 0px;
      /* --drawer-close-from is set inline by <bottom-sheet-handle> when a
         drag dismisses the sheet, so the close animation continues from the
         dragged offset instead of snapping back to rest for a frame. */
      --start-y: var(--drawer-close-from, 0px);
      --end-y: 100%;
      --start-opacity: 1;
      --end-opacity: 1;
    }
  }

  .cart-quick-add__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Grab bar: desktop hides it (the gesture only makes sense on touch); on
     mobile the whole 32px strip is grabbable, the visible pill is just the
     centred chip. */
  .cart-quick-add__handle {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .cart-quick-add__handle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 32px;
      flex: 0 0 auto;
      cursor: grab;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .cart-quick-add__handle:active {
      cursor: grabbing;
    }

    .cart-quick-add__handle-pill {
      display: block;
      width: 40px;
      height: 5px;
      border-radius: 999px;
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      pointer-events: none;
    }

    /* The handle strip supplies the top spacing on mobile. */
    .cart-quick-add__body {
      padding-block-start: var(--padding-2xs, 4px);
    }
  }

  .cart-quick-add__close {
    position: absolute;
    top: var(--padding-2xs, 4px);
    inset-inline-end: var(--padding-2xs, 4px);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    min-height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  /* The body is the flex column the card template is cloned into; only the
     options region scrolls, so the summary and the qty/add footer stay put. */
  .cart-quick-add__body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg, 16px);
    min-height: 0;
    padding: var(--padding-lg);

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

  .cart-quick-add__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-md, 12px);
    /* Clear the floating close button. */
    padding-inline-end: calc(var(--minimum-touch-target) - var(--padding-xs));
  }

  .cart-quick-add__media {
    width: 4.5rem;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0;
    background: var(--color-background-3);
  }

  .cart-quick-add__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .cart-quick-add__title {
    margin: 0;
  }

  .cart-quick-add__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-top: var(--margin-3xs, 4px);
  }

  .cart-quick-add__price-current {
    font-size: var(--font-size--md);
    font-weight: 700;
  }

  .cart-quick-add__price--on-sale .cart-quick-add__price-current {
    color: var(--color-sale);
    -webkit-text-stroke: 0.4pt;
  }

  .cart-quick-add__price-compare {
    font-size: var(--font-size--sm);
    color: rgb(var(--color-foreground-rgb) / 0.5);
    text-decoration: line-through;
  }

  /* Option controls reuse the PDP variant picker's global .variant-option
     classes (variant-main-picker.liquid), so they inherit the theme's pill
     look and the greyed [data-option-available='false'] state for sold-out
     combinations. Only the scroll containment and the "combination doesn't
     exist" state are ours. */
  .cart-quick-add__options {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .cart-quick-add__options .variant-option + .variant-option {
    margin-top: var(--padding-md);
  }

  /* A value with no matching variant for the current selection is hidden by
     cart-quick-add.js (matching the PDP, which drops it server-side). The base
     .variant-option__button-label { display: flex } would beat the UA
     [hidden] { display: none } at equal specificity, so make the hide explicit. */
  .cart-quick-add__options .variant-option__button-label[hidden] {
    display: none;
  }

  /* The Condition damaged-accent alert icon (rendered in the wrapper) only
     shows once cart-quick-add.js flips .variant-option--condition-alert on the
     option (a damaged/used value is chosen). The #e77800 icon + select coloring
     themselves come from the global .variant-option__alert-icon /
     .variant-option--condition-alert rules (variant-main-picker.liquid). */
  .cart-quick-add__condition:not(.variant-option--condition-alert) .cart-quick-add__alert-icon {
    display: none;
  }

  .cart-quick-add__error {
    margin: 0;
    font-size: var(--font-size--sm);
    color: var(--color-error, #b00020);
  }

  .cart-quick-add__footer {
    display: flex;
    align-items: stretch;
    gap: var(--gap-sm, 10px);
  }

  /* The stepper reuses the global .quantity-selector styling; pin its width
     so the add-to-cart button takes the remaining row. */
  .cart-quick-add__footer .cart-quick-add__quantity {
    flex: 0 0 auto;
  }

  /* 16px floor prevents iOS auto-zoom on focus (same rule as every other
     focusable text input in the theme). */
  .cart-quick-add__quantity input[type='number'] {
    font-size: max(1rem, var(--font-paragraph--size, 1rem));
  }

  .cart-quick-add__footer .cart-quick-add__submit {
    position: relative;
    flex: 1 1 auto;
  }

  /* Loading state: swap the label for a centered spinner without resizing
     the button (same pattern as the cards' "Add"). */
  .cart-quick-add__submit-spinner {
    display: none;
  }

  .cart-quick-add__submit[aria-busy='true'] .cart-quick-add__submit-label {
    visibility: hidden;
  }

  .cart-quick-add__submit[aria-busy='true'] .cart-quick-add__submit-spinner {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1em;
    height: 1.1em;
    margin: -0.55em 0 0 -0.55em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cart-upsell-spin 0.6s linear infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-quick-add__submit[aria-busy='true'] .cart-quick-add__submit-spinner {
      animation-duration: 1.5s;
    }
  }
/* END_SNIPPET:cart-recommendations */

/* START_SNIPPET:cart-summary (INDEX:181) */
.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-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);
  }

  /* In the drawer the full-width divider lives on .cart-drawer__summary, so
     drop this inset border/spacing to avoid a second line. */
  .cart-drawer__summary .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: 0;
    border-block-start: none;
    padding-block-start: 0;
  }

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

  /* Discount reductions read as savings — color them in the sale accent so
     discount codes and cart-level discounts match the on-sale price color used
     on the cart line items. */
  .cart-discounts__value {
    color: var(--color-sale);
  }

  /* Remove control on an applied discount-code row (replaces the old pill). */
  .cart-discounts__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-3xs);
    background: transparent;
    border: none;
    color: var(--color-foreground);
    cursor: pointer;
    --close-icon-opacity: 0.4;
  }

  .cart-discounts__remove svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  @media (hover: hover) {
    .cart-discounts__remove:hover {
      --close-icon-opacity: 1;
      color: var(--color-primary-hover);
    }
  }

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

  /* When the estimated-total row is folded into the checkout button (and there's
     no tax note or installments to show), the totals container only carries the
     visually-hidden payment_terms hook. Pull it out of the flex flow so it stops
     adding a second, empty gap above the checkout button. It must stay in the DOM
     for the payment_terms hook + cartTotal ref, so this hides rather than removes. */
  .cart-totals__container:not(.cart-totals__container--has-installments):has(> .cart-totals__total.visually-hidden):not(:has(.cart-totals__tax-note)) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }

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

  /* Estimated total label: subheading preset at the h5 size. Two-class
     selector beats .label-header's single-class defaults. */
  .cart-totals__total .label-header {
    font-family: var(--font-subheading--family);
    font-style: var(--font-subheading--style);
    font-weight: var(--font-subheading--weight);
    font-size: var(--font-h5--size);
  }

  /* Match the PDP price.liquid styling (assets/base.css `.price`). */
  .cart-totals__total-value {
    font-size: var(--font-size--2xl);
    font-weight: 700;
    letter-spacing: var(--letter-spacing--display-tight);
    white-space: nowrap;
  }

  .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__ctas .cart__checkout-button .button-text {
    white-space: nowrap;
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount {
    width: 100%;
  }

  /* Full-width block so the expanded discount field can fill the column. */
  cart-discount-component {
    display: block;
    width: 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);
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }

  /* Discount entry + donation trigger sit above the estimated total, on one row
     and across from each other: discount on the left, donation on the right. */
  .cart-extras {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    width: 100%;
    margin-block-start: var(--margin-3xs);
  }

  /* Discount entry: a tertiary button that morphs into the code input.
     Collapsed = just the button (no border/background/padding); expanded = a
     bordered input field. Width is animated in JS (assets/cart-discount.js);
     border, background and the icon/label cross-fade here. */
  .cart-discount__field {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding-block: 0;
    border: var(--style-border-width-inputs) solid transparent;
    border-radius: var(--style-border-radius-inputs);
    background-color: transparent;
    /* Width is animated in JS; padding (height), border and background cross-fade
       here so the button grows into a taller bordered input rather than jumping. */
    transition: padding-block var(--drawer-animation-speed) var(--animation-easing),
      background-color var(--drawer-animation-speed) var(--animation-easing),
      border-color var(--drawer-animation-speed) var(--animation-easing);
  }

  .cart-discount__field.is-expanded {
    width: 100%;
    padding-block: var(--padding-lg);
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  /* Collapsed: the tertiary button is the only thing in flow. */
  .cart-discount__toggle {
    flex-shrink: 0;
    white-space: nowrap;
    transition: opacity var(--drawer-animation-speed) var(--animation-easing);
  }

  /* Expanded: the button (icon + label) drops out of flow and fades out, while
     the input fades in. Pin it to the input's text position (centered, indented
     by the input's inline padding) so "Discount code" cross-fades in place with
     the matching placeholder instead of sliding. */
  .cart-discount__field.is-expanded .cart-discount__toggle {
    position: absolute;
    inset-inline-start: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
  }

  .cart-discount__input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--form-input-text-color);
    font-size: var(--form-input-font-size);
    /* Match the button-tertiary line box so expanding only grows rightward. */
    line-height: var(--font-paragraph--line-height);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--drawer-animation-speed) var(--animation-easing);
  }

  .cart-discount__input::placeholder {
    color: var(--form-input-placeholder-color);
  }

  .cart-discount__field.is-expanded .cart-discount__input {
    width: auto;
    padding-inline: var(--padding-md);
    opacity: 1;
    pointer-events: auto;
  }

  /* Tertiary "Apply" button. Collapsed: taken out of flow (absolute) and faded
     out so it doesn't widen the button-sized field; expanded: returns to flow at
     the trailing edge and fades in alongside the input. */
  .cart-discount__apply {
    position: absolute;
    inset-inline-end: 0;
    flex-shrink: 0;
    padding-inline-end: var(--padding-md);
    opacity: 0;
    /* visibility (not display) so it fades, but still leaves the tab order while
       collapsed since pointer-events alone wouldn't block keyboard focus. */
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      visibility var(--drawer-animation-speed) var(--animation-easing);
  }

  .cart-discount__field.is-expanded .cart-discount__apply {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .cart-extras__col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    min-width: 0;
  }

  /* Collapsed, the discount is just its button (content width); the donation is
     pushed to the right edge. When the input expands, the discount column grows
     to fill the whole row and the donation collapses out of the way. */
  .cart-extras__discount {
    flex: 0 1 auto;
  }

  .cart-extras:has(.cart-discount__field.is-expanded) .cart-extras__discount {
    flex: 1 1 auto;
  }

  .cart-extras .cart-donation--inline {
    flex: 0 0 auto;
    width: auto;
    margin-inline-start: auto;
    justify-content: flex-end;
    transition: opacity var(--drawer-animation-speed) var(--animation-easing);
  }

  /* Expanded: drop the row gap and collapse the donation so the field can take
     the full width. The donation's `margin-inline-start: auto` would otherwise
     swallow the free space the discount column needs to grow into, leaving the
     field stuck at its content width. overflow:hidden clips it as it goes. */
  .cart-extras:has(.cart-discount__field.is-expanded) {
    gap: 0;
  }

  .cart-extras:has(.cart-discount__field.is-expanded) .cart-donation--inline {
    max-width: 0;
    margin-inline-start: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* Anchor the amount popover to the right so it doesn't overflow the cart edge. */
  .cart-extras .cart-donation--inline .cart-donation__popover {
    left: auto;
    right: 0;
    transform: none;
  }

  .cart-extras__field {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    padding-inline: var(--padding-md);
  }

  .cart-extras__field input {
    flex: 1;
    min-width: 0;
    background: transparent;
    color: var(--form-input-text-color);
    border: none;
    outline: none;
    font-size: var(--form-input-font-size);
    padding-block: var(--padding-sm);
  }

  .cart-extras__field input::placeholder {
    color: var(--form-input-placeholder-color);
  }

  .cart-extras__field input::-webkit-outer-spin-button,
  .cart-extras__field input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  .cart-extras__field-symbol {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-extras__field-action {
    flex-shrink: 0;
  }

  /* Donation control — a tertiary trigger below the checkout button that
     reveals a small popover of suggested amounts anchored above it. */
  .cart-donation {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .cart-donation__trigger,
  .cart-donation__trigger:hover,
  .cart-donation__trigger .button-tertiary__label {
    color: var(--color-accent);
  }

  .cart-donation__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-donation__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .cart-donation__icon svg {
    width: 100%;
    height: 100%;
  }

  /* The relative overlay: floats above the trigger, holds only the amount
     buttons (and the custom-input takeover). */
  .cart-donation__popover {
    position: absolute;
    bottom: calc(100% + var(--gap-2xs));
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    width: max-content;
    max-width: min(420px, 90vw);
    padding: var(--padding-sm);
    background-color: var(--color-background);
    border: var(--style-border-width-inputs) solid var(--color-accent);
    box-shadow: 0 6px 20px rgb(var(--color-foreground-rgb) / 0.15);
  }

  .cart-donation__popover[hidden] {
    display: none;
  }

  .cart-donation__presets {
    /* These tokens are scoped onto `.variant-option` on the product page, so
       they're unset here — forward them from the same source the variant
       picker uses so the preset borders match in width and radius. */
    --options-border-width: var(--variant-picker-button-border-width);
    --options-border-radius: var(--variant-picker-button-radius);
    display: flex;
    gap: var(--gap-2xs);
  }

  /* The class-level `display: flex` on the presets / custom field would
     otherwise beat the `[hidden]` attribute's default `display: none`; restore
     it so the "Other" toggle can swap the two views. */
  .cart-donation__presets[hidden],
  .cart-donation__custom[hidden] {
    display: none;
  }

  .cart-donation__preset {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3em;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font: inherit;
    white-space: nowrap;
    color: var(--color-variant-text);
    background-color: var(--color-variant-background);
    border: var(--options-border-width) solid var(--color-border);
    border-radius: var(--options-border-radius);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
  }

  .cart-donation__preset:hover {
    background-color: var(--color-variant-hover-background);
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .cart-donation__custom {
    width: 100%;
  }

  .cart-donation__error {
    margin: 0;
    font-size: var(--font-size--2xs);
    color: var(--color-error, #c0392b);
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:cart-upsell (INDEX:182) */
/* Card: badges + image + title + price on top, a full-width "Add" footer bar
     underneath. Fixed width so the carousel scrolls a predictable amount per
     arrow press. The flex column (top grows, footer pinned at the bottom) keeps
     the footer aligned across cards of differing height. */
  .cart-upsell {
    display: flex;
    flex-direction: column;
    width: var(--cart-upsell-card-width, 13rem);
    height: 100%;
    background: var(--color-background-2, #f5f4f4);
    border-radius: 0;
  }

  /* Bundle card: a subtle animated gradient border (color-foreground, 2px) that
     slowly travels around the card so bundles stand out in the strip. Painted as
     a masked ::after ring so it doesn't affect layout; the conic-gradient angle
     is animated via a registered custom property. */
  @property --cart-upsell-bundle-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  .cart-upsell--bundle {
    position: relative;
  }

  .cart-upsell--bundle::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(
      from var(--cart-upsell-bundle-angle),
      rgb(var(--color-foreground-rgb) / 0.12),
      var(--color-foreground),
      rgb(var(--color-foreground-rgb) / 0.12),
      var(--color-foreground),
      rgb(var(--color-foreground-rgb) / 0.12)
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: cart-upsell-bundle-border 6s linear infinite;
  }

  @keyframes cart-upsell-bundle-border {
    to {
      --cart-upsell-bundle-angle: 360deg;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-upsell--bundle::after {
      animation: none;
    }
  }

  /* Sized to its content so the "includes" list reads directly under the price;
     the footer is pinned to the bottom via margin-block-start: auto on __add. */
  .cart-upsell__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--gap-md, 12px);
    padding: var(--padding-sm, 12px);
    flex: 0 0 auto;
  }

  .cart-upsell__media {
    display: block;
    flex: 0 0 auto;
    width: 3.75rem;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0;
    background: var(--color-background-3);
  }

  .cart-upsell__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .cart-upsell__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xs, 4px);
    min-width: 0;
  }

  /* Badge row styling comes from the shared .product-card-badges snippet; only
     the spacing before the title is component-local. */
  .cart-upsell__badges {
    margin-bottom: var(--margin-3xs, 4px);
  }

  /* Title uses the global .h6 utility (heading preset). Only the link reset is
     component-local. */
  .cart-upsell__title {
    text-decoration: none;
    margin: 0;
    font-size: var(--font-h5--size);
    color: var(--color-foreground);
  }

  .cart-upsell__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    margin-top: var(--margin-3xs, 4px);
    text-align: start;
  }

  .cart-upsell__price-current {
    font-size: var(--font-size--lg);
    font-weight: 700;
    color: var(--color-foreground);
  }

  .cart-upsell__price-current--on-sale {
    color: var(--color-sale);
    -webkit-text-stroke: 0.4pt;
  }

  .cart-upsell__price-compare {
    font-size: var(--font-size--sm);
    color: rgb(var(--color-foreground-rgb) / 0.5);
    text-decoration: line-through;
  }

  /* Bundle "includes" list: a full-width row above the CTA. Its own inline
     padding matches the card body; the __top block's bottom padding supplies the
     gap above, so no top padding here. */
  .cart-upsell__includes {
    flex: 0 0 auto;
    padding: 0 var(--padding-sm, 12px) var(--padding-sm, 12px);
  }

  .cart-upsell__includes-label {
    margin: 0 0 var(--margin-3xs, 4px);
    font-size: var(--font-size--xs);
    line-height: 1.2;
    color: var(--color-text-2);
  }

  .cart-upsell__includes-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xs, 4px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cart-upsell__includes-item {
    display: flex;
    align-items: flex-start;
    gap: 0.35em;
    font-size: var(--font-size--sm);
    line-height: 1.25;
  }

  .cart-upsell__includes-icon {
    flex: 0 0 auto;
    font-size: 1.1em;
    line-height: 1.25;
  }

  .cart-upsell__includes-text {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Already in the cart — muted checkmark rows. */
  .cart-upsell__includes-item--have {
    color: var(--color-text-2);
    font-weight: var(--font-paragraph--weight, 400);
  }

  /* Being added by the swap — emphasized rows in the primary text color. */
  .cart-upsell__includes-item--add {
    color: var(--color-foreground);
    font-weight: 700;
  }

  /* Full-width "Add" footer bar pinned to the bottom of the card. */
  .cart-upsell__add {
    flex: 0 0 auto;
    margin-block-start: auto;
  }

  .cart-upsell__add-component {
    display: block;
  }

  /* Tertiary "Add" CTA rendered as a full-width footer bar (icon + underlined
     label), centered, with its own padding. Tinted fill sets it apart from the
     card body. Override the base `.button-tertiary` chrome at (0,2,0). */
  .cart-upsell .cart-upsell__add-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: var(--padding-sm, 12px);
    background: var(--color-background-3);
    border: none;
    border-radius: 0;
    color: var(--color-foreground);
    font-size: var(--font-size--md);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
  }

  .cart-upsell .cart-upsell__add-label {
    text-decoration: underline;
    text-underline-offset: 2px;
    /* Suppress the base .button-tertiary__label border-bottom so the label
       shows a single text underline, not a border + underline double line. */
    border-bottom: none;
  }

  .cart-upsell .cart-upsell__add-icon {
    font-size: 1.2em;
  }

  .cart-upsell .cart-upsell__add-button:disabled {
    opacity: 0.5;
    cursor: default;
  }

  @media (hover: hover) {
    .cart-upsell .cart-upsell__add-button:not(:disabled):hover {
      background: color-mix(in srgb, var(--color-background-3) 90%, var(--color-foreground));
      color: var(--color-foreground);
    }
  }

  /* Loading state: while the add is in flight (aria-busy), swap the icon + label
     for a centered spinner without changing the button's size. */
  .cart-upsell__add-spinner {
    display: none;
  }

  .cart-upsell__add-button[aria-busy='true'] .cart-upsell__add-icon,
  .cart-upsell__add-button[aria-busy='true'] .cart-upsell__add-label {
    visibility: hidden;
  }

  .cart-upsell__add-button[aria-busy='true'] .cart-upsell__add-spinner {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1em;
    height: 1.1em;
    margin: -0.55em 0 0 -0.55em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cart-upsell-spin 0.6s linear infinite;
  }

  @keyframes cart-upsell-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-upsell__add-button[aria-busy='true'] .cart-upsell__add-spinner {
      animation-duration: 1.5s;
    }
  }
/* END_SNIPPET:cart-upsell */

/* START_SNIPPET:catalog-toolbar (INDEX:183) */
.catalog-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-block-end: var(--margin-md);
  }

  .catalog-toolbar:empty {
    display: none;
  }

  /* The toolbar always contains a .facets-remove container (empty until filters
     are active), so :empty above won't catch the "nothing to show" case. Hide the
     grid wrapper when there's no search bar and no active-filter chips so it takes
     up no space. */
  .catalog-toolbar-wrapper:not(:has(.catalog-search, facet-remove-component)) {
    display: none;
  }

  /* <search> defaults to inline in some browsers; force block so the form lays out. */
  .catalog-search {
    display: block;
    width: 100%;
    max-width: 520px;
  }

  .catalog-search__form {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--gap-xs);
  }

  .catalog-search__icon {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--padding-sm);
    display: flex;
    align-items: center;
    pointer-events: none;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60, 0.6));
  }

  .catalog-search__icon svg {
    width: var(--icon-size-xs, 16px);
    height: var(--icon-size-xs, 16px);
  }

  .catalog-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--minimum-touch-target);
    padding-block: 0;
    padding-inline: calc(var(--padding-sm) * 2 + var(--icon-size-xs, 16px)) var(--padding-sm);
    border: var(--style-border-width, 1px) solid var(--color-border);
    border-radius: var(--style-border-radius-md, 0);
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: inherit;
    font-size: var(--font-paragraph--size);
  }

  .catalog-search__input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60, 0.6));
  }

  .catalog-search__input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: 2px;
  }

  .catalog-search__submit {
    flex: 0 0 auto;
  }
/* END_SNIPPET:catalog-toolbar */

/* START_SNIPPET:collection-card (INDEX:185) */
.collection-card {
    --collection-card-ratio: 1;

    position: relative;
    width: 100%;
    height: 100%;
  }

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--collection-card-ratio);
  }

  .collection-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
  }

  .collection-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--color-foreground);
  }

  .collection-card__image .image-block__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--hover-transition-duration, 0.4s) var(--hover-transition-timing, ease);
  }

  .collection-card__placeholder {
    fill: var(--color-background);
    opacity: 0.6;
  }

  /* Dark scrim so the title stays legible over any image. */
  .collection-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(16, 15, 26, 0.45);
    transition: background-color var(--hover-transition-duration, 0.4s) var(--hover-transition-timing, ease);
  }

  /* Brighten & zoom on hover, matching the mega-menu collection card. */
  @media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
    .collection-card:hover .collection-card__image .image-block__image {
      transform: scale(1.04);
    }

    .collection-card:hover .collection-card__image::after {
      background-color: rgba(16, 15, 26, 0.3);
    }
  }

  .collection-card__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--padding-lg);
    text-align: center;
  }

  .collection-card__title {
    color: #fff;
    text-wrap: balance;
  }

  /* Bento layout: fixed-height cards. */
  .collection-card--image-height-fixed {
    height: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--height-small);
    aspect-ratio: unset;
  }

  /* Editorial layout: flexible single-row aspect. */
  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio.collection-card--image-bg {
    aspect-ratio: 99;
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:193) */
.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:194) */
.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:195) */
.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:196) */
.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 {
      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:201) */
/* 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 {
    /* Higher-visibility chip: text-1 (foreground) fill, tertiary-button typography. */
    --pills-pill-background-color: var(--color-foreground);

    border-radius: 0;
    color: var(--color-background);
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    font-weight: 700;
    text-decoration: none;

    &:hover {
      --pills-pill-background-color: var(--color-foreground);
    }

    @media screen and (min-width: 750px) {
      /* Override pills__pill--desktop-small so chips keep tertiary-button text size. */
      font-size: var(--font-paragraph--size);
    }

    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets-remove__pill-icon {
    font-size: 18px;
    color: currentcolor;
  }

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

  /* Chips rendered in the catalog toolbar above the product grid */
  .facets-remove--grid {
    padding: 0;
  }

  .facets-remove--grid:has(facet-remove-component) {
    margin-block: 0;
  }

  .facets-remove__pill--query {
    font-weight: 700;
  }

  /* "Clear all" renders as a tertiary button (X icon on the left); drop the
     link padding so it sits like the other tertiary triggers. */
  .facets__clear-all-link.button-tertiary {
    padding: 0;
  }

  /* The "Clear all" button is server-rendered only when >1 filter is active here,
     so make it visible (the default rule hides it pending a JS toggle). */
  .facets-remove--grid .facets__clear-all-link {
    display: inline-flex;
    align-items: center;
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form (INDEX:208) */
.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 {
    /* 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;
    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 */

/* START_SNIPPET:grid-density-controls (INDEX:209) */
.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:210) */
/* Optional max-width cap (merchant "Max width" setting). Defaults to none, so
     groups without the setting are unaffected. Reuses the shared text-block width
     presets (--max-width--narrow/normal/wide) for a consistent vocabulary. */
  .group-block {
    max-width: var(--group-block-max-width, none);
  }

  .group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

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

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

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

  /* The search/cart glyphs are centered because their .svg-wrapper is
     stretched to the full button height (sections/header.liquid excludes
     .account-button from that rule). This wrapper is slotted into the
     shopify-account shadow button instead, which lays it out at its natural
     20px height above the button's vertical center — stretch the slotted
     chain to the shadow button's height so the person glyph centers like
     the other header actions. */
  .account-button span[slot='signed-out-avatar']:has(> .account-button__icon) {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 100%;
  }

  .account-button__icon.svg-wrapper {
    height: 100%;
  }

  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-3xl);

    @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(--cart-drawer-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;
    /* Content itself doesn't scroll: the free-shipping bar pins to the top and
       the summary pins to the bottom, while .cart-drawer__items scrolls between. */
    overflow: hidden;
    min-height: 0;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  .cart-drawer__free-shipping {
    flex-shrink: 0;
    padding: var(--padding-xs) var(--padding-lg) var(--padding-md);
    border-block-end: 1px solid var(--color-border);
  }

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

  /* Empty cart notice — sits at the top of the unified content flow (header ->
     notice -> upsell -> login -> shop-all), no longer a vertically-centred island. */
  .cart-drawer__items--empty {
    gap: var(--gap-xl);
  }

  .cart-drawer__empty-notice {
    margin: 0;
    font-size: var(--font-size--lg);
    text-align: center;
  }

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

  /* Attach the per-product "Add <format>" upsell row to its group's last card:
     drop that card's divider and move it BELOW the upsell, so the buttons read
     as belonging to the book above them. (.cart-items__table-row--group-continues
     is set in Liquid by snippets/cart-products.liquid.) */
  .cart-drawer__items .cart-items__table-row.cart-items__table-row--group-continues {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: var(--gap-xs, 8px);
  }

  .cart-drawer__items .cart-items__group-upsell:not(:last-child) {
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  /* When a bundle upsell follows the format upsells, suppress the divider
     between them so the bundle reads as part of the same "after this product"
     block and the only divider sits beneath the bundle. (.cart-items__group-upsell--continues
     is set in Liquid by snippets/cart-products.liquid when a bundle row follows.) */
  .cart-drawer__items .cart-items__group-upsell.cart-items__group-upsell--continues {
    border-bottom: none;
    margin-bottom: 0;
  }

  /* The bundle upsell is the last row of its product group, so it carries the
     group's closing divider (the format-upsell row above drops its own). */
  .cart-drawer__items .cart-items__group-bundle-upsell:not(:last-child) {
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  /* A preorder ship-notice row closes its product group when no format/bundle
     upsell follows it (--group-end is set in Liquid by cart-products.liquid) —
     carry the group's divider so preorder items are separated from the next
     item like every other card. The group's last card drops its own divider
     (--group-continues), so without this a preorder group would have none. */
  .cart-drawer__items .cart-items__preorder-row--group-end:not(:last-child) {
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* Full-width top divider mirroring the free-shipping bar's bottom border. */
    border-block-start: 1px solid var(--color-border);
    /* While the discount input is focused the soft keyboard would cover the
       pinned summary, so we grow the summary's bottom padding by the keyboard's
       height (--cart-keyboard-offset, set from assets/cart-discount.js; 0
       otherwise). The summary stays pinned to the bottom, so its content lifts
       above the keyboard while its own background fills the gap down to the
       bottom edge — nothing from the items list shows through. */
    padding-block-end: calc(var(--cart-drawer-summary-padding) + var(--cart-keyboard-offset, 0px));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  /* Tighten the spacing between the discount/totals area and the checkout button
     on mobile — the estimated total is folded into the button, so the totals
     block above the CTA is mostly empty and the default gaps read as dead space. */
  @media screen and (max-width: 749px) {
    .cart-drawer__summary {
      gap: var(--gap-xs);
    }

    .cart-drawer__summary .cart-totals {
      gap: var(--gap-xs);
    }
  }

  /* The summary slides up into view when the cart becomes active (it is a fresh
     node inserted by the empty -> active morph) and slides back down out of view
     when the cart empties (via the empty-cart-drawer view transition below). */
  @media screen and (prefers-reduced-motion: no-preference) {
    .cart-drawer__summary {
      transition: transform var(--animation-speed) var(--animation-easing),
        padding-block-end var(--animation-speed) var(--animation-easing);

      @starting-style {
        transform: translateY(100%);
      }
    }

    html:active-view-transition-type(empty-cart-drawer) .cart-drawer__summary {
      view-transition-name: cart-drawer-summary;
    }

    ::view-transition-old(cart-drawer-summary) {
      animation: cart-drawer-summary-out var(--animation-speed) var(--animation-easing) forwards;
    }

    @keyframes cart-drawer-summary-out {
      to {
        transform: translateY(100%);
        opacity: 0;
      }
    }
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__content {
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    flex: 0 1 auto;
    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__items {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-inline: var(--cart-drawer-padding);
    /* Even block padding so the last item (e.g. the upsell carousel) isn't flush
       against the bottom edge of the scroll area. */
    padding-block: var(--padding-lg);
    overflow-y: auto;
    /* Vertical-only scroller. `overflow-y: auto` with `overflow-x` unset computes
       to `overflow-x: auto`, which quietly makes this a HORIZONTAL scroll
       container too — so the upsell carousel's edge-to-edge breakout (and iOS's
       nested-sticky/overlay-scrollbar quirks) could show a horizontal scrollbar
       and let the whole drawer slide sideways. Pin the inline axis: the breakout
       reaches exactly this element's padding-box edge (nothing real is clipped)
       and the carousel keeps its own `.cart-recommendations__list` scroll. */
    overflow-x: hidden;
    /* Always reserve space for the scrollbar so the items area doesn't shift
       horizontally when the cart grows long enough to become scrollable. */
    scrollbar-gutter: stable;

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

  /* The upsell carousel breaks out of the items' content padding to span the
     full drawer width: hand it the drawer's inline padding so its track can
     extend edge-to-edge while the heading stays aligned with the cart content. */
  .cart-drawer__upsells {
    --cart-rec-pad: var(--padding-xl);

    @media screen and (min-width: 750px) {
      --cart-rec-pad: var(--padding-3xl);
    }
  }

  /* Inline donation trigger at the foot of the scroll area, separated from the
     upsells (or the last line item) above it. */
  .cart-drawer__items .cart-donation {
    margin-block-start: var(--padding-lg);
    margin-block-end: var(--padding-2xs);
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    padding-block-end: var(--padding-xs);
    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);
    }
  }

  header-actions {
    display: flex;

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

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

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

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

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

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

  .cart-bubble--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),
    html:active-view-transition-type(active-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }

      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }
  }

  :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:212) */
.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);
    /* Snap the product cards like the other product-card carousels. Use
       `proximity` (not `mandatory`) because this horizontal scroller is nested
       inside the drawer's vertical scroll — mandatory would fight the in-progress
       vertical gesture on mobile. scroll-padding matches the first item's start
       margin so the first card lands flush with the gutter. */
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

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

  /* Icon-only back control: the chevron goes back, the title beside it is its own link */
  .menu-drawer__back-button.menu-drawer__back-button--icon {
    width: fit-content;
    flex: 0 0 auto;
    padding-inline: var(--padding-xl) var(--padding-sm);
  }

  .menu-drawer__back-title {
    flex: 1 1 auto;
    align-self: center;
    margin-inline-end: auto;
    padding-block: var(--padding-md);
    padding-inline-end: var(--padding-md);
    font-family: var(--font-h3--family, var(--button-font-family-primary));
    font-weight: 700;
    font-size: clamp(1.125rem, 1.25vw + 0.75rem, 1.3rem);
    line-height: 1.2;
    color: var(--color-foreground);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

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

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

  /* Keep every top-level drawer item the same height whether or not it has a
     sub-menu. On items with children the caret/plus wrapper's block padding
     (padding-lg/padding-md) plus the larger icon glyph (--icon-size-md) exceeds
     the shared --mainlist min-height and forces those rows taller than plain
     links. Zero the wrapper's block padding so the row height is governed by
     that min-height for all top-level items. */
  .menu-drawer__menu-item--mainlist > .svg-wrapper,
  .menu-drawer__list-item--divider .menu-drawer__menu-item--mainlist > .svg-wrapper {
    padding-block: 0;
  }

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

  /*
   * Consistent header-nav icon sizing.
   *
   * base.css forces the hamburger and every drawer icon (back, close, forward
   * carets, +) down to --icon-size-xs, which reads noticeably smaller than the
   * search / account / cart icons (those render at --icon-size-md). Match them
   * all to --icon-size-md so the header nav is one size throughout.
   *
   * Scoped under `header-drawer` so these out-rank base.css's equal-specificity
   * rules (which otherwise win on source order) without touching the desktop
   * inline mega menu.
   */
  header-drawer .header__icon--summary .material-icon,
  header-drawer .menu-drawer .material-icon {
    font-size: var(--icon-size-md);
  }

  header-drawer .header__icon--summary .header-drawer-icon,
  .menu-drawer__close-button .header-drawer-icon,
  .menu-drawer__back-button > .svg-wrapper {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:218) */
.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:221) */
/* Shared underline search field (.search-field / __icon / __input): used by
     the searchable list filters here + author-list-filter AND the site search
     modal (snippets/search-modal.liquid) — keep changes surface-agnostic. */
  .search-field {
    /* Size the magnifier to the placeholder text so the two read as a pair
       (the global --icon-size-xs is ~25% smaller than --font-paragraph--size,
       which left the icon looking undersized next to the serif placeholder). */
    --search-field-icon-size: var(--font-paragraph--size, 1.125rem);

    position: relative;
    margin-block-end: var(--gap-sm);
  }

  .search-field__icon {
    /* The theme's global icon stroke (up to 2px) reads as chunky at this
       size, so use a thin, consistent stroke for the magnifier. */
    --icon-stroke-width: 1.25px;

    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60, 0.6));
  }

  /* Beat the global .svg-wrapper width/height (--icon-size-sm), which would pin
     this to a fixed box and break the inset-block:0 stretch that vertically
     centers the icon in the full-height input. The SVG itself stays sized by
     --search-field-icon-size below. */
  .search-field__icon.svg-wrapper {
    width: auto;
    height: auto;
  }

  .search-field__icon svg {
    width: var(--search-field-icon-size);
    height: var(--search-field-icon-size);
  }

  /* Specificity bumped to beat base.css's
     `input:not([type='checkbox'], [type='radio'])` (0,1,1), which would
     otherwise force `--color-input-background` (white) onto the field. */
  .search-field .search-field__input {
    width: 100%;
    height: var(--minimum-touch-target);
    padding-block: 0;
    padding-inline: calc(var(--padding-xs) + var(--search-field-icon-size)) 0;
    border: none;
    border-block-end: var(--style-border-width, 1px) solid var(--color-border);
    border-radius: 0;
    background-color: transparent;
    color: var(--color-foreground);
    font-family: inherit;
    font-size: var(--font-paragraph--size);
  }

  .search-field__input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60, 0.6));
  }

  .search-field__input:focus-visible {
    outline: none;
    border-block-end-color: var(--color-foreground);
  }

  /* Registered so the fade lengths interpolate smoothly along the scroll
     timeline below (unregistered custom props would snap between keyframes). */
  @property --facets-fade-top {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
  }

  @property --facets-fade-bottom {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
  }

  .facets__inputs-list--scrollable {
    --facets-fade-size: 2rem;
    --facets-fade-top: 0px;
    --facets-fade-bottom: var(--facets-fade-size);

    /* Keep a stable height when a search narrows the list to one or two
       matches, so results aren't collapsed or swallowed by the edge fade. */
    min-height: 120px;
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: var(--padding-2xs);

    /* Reserve a fade-height gutter below the last row so the bottom mask fade
       always lands on empty space, never on the last item. This must be
       UNCONDITIONAL — do NOT move it into the @supports block or zero it there.
       The scroll-timeline animation below is supposed to shrink
       --facets-fade-bottom to 0 at full scroll, but on the live store (Chromium,
       scroll timelines fully supported) that custom property freezes at its base
       2rem and never reaches 0, leaving the last item under the fade at the
       bottom. It also covers browsers with no scroll-timeline support (Firefox),
       where the bottom fade is static. Either way, the last row scrolls clear. */
    padding-block-end: var(--facets-fade-size);

    /* Scroll-hint fade: soft cut at the edges that have more content. Falls
       back to a static bottom fade where scroll timelines aren't supported. */
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--facets-fade-top),
      #000 calc(100% - var(--facets-fade-bottom)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--facets-fade-top),
      #000 calc(100% - var(--facets-fade-bottom)),
      transparent 100%
    );

    /* Transparent scrollbar track so the gutter shows the panel, not white. */
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-30, 0.3)) transparent;
  }

  .facets__inputs-list--scrollable::-webkit-scrollbar {
    width: 6px;
  }

  .facets__inputs-list--scrollable::-webkit-scrollbar-track {
    background: transparent;
  }

  .facets__inputs-list--scrollable::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-30, 0.3));
    border-radius: 3px;
  }

  @supports (animation-timeline: scroll()) {
    .facets__inputs-list--scrollable {
      animation: facets-scroll-fade linear;
      animation-timeline: scroll(self block);
    }

    @keyframes facets-scroll-fade {
      0% {
        --facets-fade-top: 0px;
        --facets-fade-bottom: var(--facets-fade-size);
      }
      1%,
      99% {
        --facets-fade-top: var(--facets-fade-size);
        --facets-fade-bottom: var(--facets-fade-size);
      }
      100% {
        --facets-fade-top: var(--facets-fade-size);
        --facets-fade-bottom: 0px;
      }
    }
  }

  .facets__inputs-list--scrollable .facets__inputs-list-item--search-hidden {
    display: none;
  }

  .facets__search-empty {
    padding-block: var(--padding-xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70, 0.7));
    font-size: var(--font-paragraph--size);
  }

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

  /* The checkbox active/hover label treatment (bold, text-1/text-2 colours,
     instant) is shared by every facet checkbox in base.css. */

  /* 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:222) */
/* 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:225) */
.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__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:mega-menu-collection-card (INDEX:226) */
.mega-menu-collection-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--menu-image-border-radius, 0px);
    text-decoration: none;
    isolation: isolate;
  }

  .mega-menu-collection-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--color-foreground);
  }

  .mega-menu-collection-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--hover-transition-duration, 0.4s) var(--hover-transition-timing, ease);
  }

  .mega-menu-collection-card__image--placeholder {
    background-color: var(--color-foreground);
    fill: var(--color-background);
    opacity: 0.6;
  }

  /* Dark overlay so the title stays legible over any image, matching the
     home-page collection card's solid scrim. */
  .mega-menu-collection-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(16, 15, 26, 0.45);
    transition: background-color var(--hover-transition-duration, 0.4s) var(--hover-transition-timing, ease);
  }

  .mega-menu-collection-card__title {
    position: relative;
    z-index: 1;
    padding: var(--padding-sm, 0.8rem);
    color: #fff;
    text-align: center;
    white-space: normal;
    text-wrap: balance;
  }

  @media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
    .mega-menu-collection-card:hover .mega-menu-collection-card__image {
      transform: scale(1.04);
    }

    .mega-menu-collection-card:hover .mega-menu-collection-card__media::after {
      background-color: rgba(16, 15, 26, 0.3);
    }
  }
/* END_SNIPPET:mega-menu-collection-card */

/* START_SNIPPET:nested-taxonomy-filter (INDEX:230) */
/* Top padding inside the panel content separates the category list from the
     group summary, matching the rhythm of the other facets' inputs. */
  .nested-taxonomy__inputs {
    display: block;
    padding-block-start: var(--padding-xs);
  }

  /* Category and topic labels truncate with an ellipsis (inherited from the
     shared facet checkbox styles) so long names stay on one line and never
     overflow the sidebar box, matching every other filter. */

  /* Hover/state colour changes are instant — kill every transition on the
     checkbox subtree (box fill, border, label, tick). */
  .facets .nested-taxonomy .checkbox,
  .facets .nested-taxonomy .checkbox .checkbox__label,
  .facets .nested-taxonomy .checkbox .checkbox__label-text,
  .facets .nested-taxonomy .checkbox .checkbox__box,
  .facets .nested-taxonomy .checkbox .icon-checkmark,
  .facets .nested-taxonomy .checkbox .icon-checkmark path {
    transition: none;
  }

  /* Active (checked) row: bold and the primary text colour (text-1). */
  .facets .nested-taxonomy .checkbox__input:checked + .checkbox__label .checkbox__label-text {
    font-weight: 700;
    color: var(--color-foreground);
  }

  /* Hover: inactive row darkens to text-1; active row lightens to text-2. */
  .facets .nested-taxonomy .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground);
  }

  .facets
    .nested-taxonomy
    .checkbox:not(.checkbox--disabled):hover
    .checkbox__input:checked
    + .checkbox__label
    .checkbox__label-text {
    color: var(--color-text-2);
  }

  /* Hovering an active row also switches its filled box to text-2. */
  .facets
    .nested-taxonomy
    .checkbox:not(.checkbox--disabled):hover
    .checkbox__input:checked
    + .checkbox__label
    .icon-checkmark {
    background-color: var(--color-text-2);
    border-color: var(--color-text-2);
  }

  /* Material box equivalent: hovering an active (checked) row tints the glyph
     to text-2; the indeterminate (mixed) parent box does the same. */
  .facets
    .nested-taxonomy
    .checkbox--material:not(.checkbox--disabled):hover
    .checkbox__input:checked
    + .checkbox__label
    .checkbox__box,
  .facets
    .nested-taxonomy
    .checkbox--material:not(.checkbox--disabled):hover
    .checkbox__box--indeterminate {
    color: var(--color-text-2);
  }

  /* Every row — parent category, child topic, leaf, orphan — is a plain
     `checkbox` snippet inside a list item, so all labels render identically. */
  .nested-taxonomy__list,
  .nested-taxonomy__topics {
    display: flex;
    flex-direction: column;
    gap: var(--facets-mobile-gap, var(--gap-sm));

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

  .nested-taxonomy__category--parent {
    position: relative;
  }

  /* The checkbox is its own hit area — box + label only. Keep it to content
     width and lift it above the full-row toggle that sits behind it, so the
     empty space beside the label falls through to the accordion summary. */
  .nested-taxonomy__category--parent > .checkbox {
    position: relative;
    z-index: 1;
    width: fit-content;
    /* Reserve room for the caret so a wrapping label never runs under it. */
    max-width: calc(100% - var(--icon-size-xs) - var(--padding-sm));
  }

  /* Custom elements are inline by default; the accordion needs to be a block so
     the topics list flows full-width below the parent checkbox. */
  .nested-taxonomy__accordion {
    display: block;
  }

  /* Expand/collapse hit area: the summary fills the whole parent row behind the
     checkbox, so clicking anywhere beside the label toggles the accordion. The
     caret sits at the right; height matches the checkbox box. */
  .nested-taxonomy__toggle {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 0;
    height: var(--checkbox-size);
    padding-block: 0;
    padding-inline-end: var(--padding-2xs);
    justify-content: flex-end;
    cursor: pointer;
  }

  .nested-taxonomy__toggle .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70, 0.7));
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .nested-taxonomy__toggle:hover .icon-caret {
    color: var(--color-foreground);
  }

  /* Indent topics so their checkboxes line up under the parent label text.
     The Material box advance width is 1em (= --checkbox-size + 4px). */
  .nested-taxonomy__topics {
    padding-block: var(--gap-sm) 0;
    padding-inline-start: calc(var(--checkbox-size) + 4px + var(--checkbox-label-padding));
  }
/* END_SNIPPET:nested-taxonomy-filter */

/* START_SNIPPET:overlay (INDEX:233) */
.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:234) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:235) */
.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-products-list (INDEX:239) */
.predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  /* The small trowel-product-card is a horizontal row, so lay the list out as a
     single column on mobile and two columns on desktop — not the 4-up grid the
     vertical resource-card used (defined in predictive-search-resource-carousel).
     Scoped to the list (two classes) so it wins regardless of stylesheet order. */
  .predictive-search-results__list.predictive-search-results__wrapper-products {
    grid-template-columns: 1fr;

    @container (min-width: 550px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .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;
  }
/* END_SNIPPET:predictive-search-products-list */

/* START_SNIPPET:predictive-search-resource-carousel (INDEX:240) */
.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-resource-carousel */

/* START_SNIPPET:price-filter (INDEX:242) */
/* 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-card-badges (INDEX:244) */
.product-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .product-card-badges .product-badges__badge {
    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, var(--font-size--xs));
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
    line-height: 1.1;
  }

  .product-card-badges .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block, 4px);
    padding-inline: var(--badge-rectangle-padding-inline, 10px);
  }
/* END_SNIPPET:product-card-badges */

/* START_SNIPPET:product-card (INDEX:246) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:247) */
.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 {
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      /* Pack rows to the top: this grid stretches to match the (often taller)
         facets sidebar, and the default align-content would distribute that
         extra height into the auto rows — opening a big gap between the
         toolbar/active-filter chips and the product grid when few products
         are shown. */
      align-content: start;

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

  /* Infinite-scroll "Loading more…" indicator. Hidden until the host element
     gets `data-loading-more` (paginated-list.js), so it takes no layout space
     while idle and never leaves a permanent gap below the grid. */
  .product-grid__loading-more {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--padding-sm, 8px);
    padding-block: var(--padding-lg, 20px);
    color: var(--color-text-2, var(--color-foreground));
  }

  [data-loading-more] .product-grid__loading-more {
    display: flex;
  }

  .product-grid__loading-more-spinner {
    width: 1.1em;
    height: 1.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: product-grid-loading-more-spin 0.6s linear infinite;
  }

  @keyframes product-grid-loading-more-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-grid__loading-more-spinner {
      animation-duration: 1.5s;
    }
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:249) */
.product-information {
    gap: var(--gap-mobile, var(--gap)) 0;

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

  /* Breadcrumb slot: one breadcrumb can be placed above the media and/or in
     the details column, shown per breakpoint via the section's desktop/mobile
     position settings. */
  @media screen and (max-width: 749px) {
    .breadcrumb-slot[data-show-mobile='false'] {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .breadcrumb-slot[data-show-desktop='false'] {
      display: none;
    }
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content (INDEX:250) */
.dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

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

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  .dialog-zoomed-gallery__dialog {
    view-transition-name: zoom-dialog-ui;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:251) */
.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:254) */
.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;
  }

  .quantity-selector--dropdown {
    --quantity-selector-width: auto;

    flex: 0 0 auto;
    position: relative;
    padding-inline: var(--padding-md);
  }

  .quantity-selector--dropdown .quantity-minus,
  .quantity-selector--dropdown .quantity-plus,
  .quantity-selector--dropdown input[type='number'] {
    display: none;
  }

  .quantity-selector--dropdown .quantity-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    cursor: pointer;
    padding-block: 0;
    padding-inline-end: 1em;
    padding-inline-start: 0;
    line-height: 1;
    min-height: var(--minimum-touch-target);
    align-self: stretch;
  }

  .quantity-selector--dropdown::after {
    content: '';
    position: absolute;
    inset-inline-end: var(--padding-md);
    top: 50%;
    width: 0.45em;
    height: 0.45em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }

  .quantity-selector--dropdown .quantity-dropdown:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .quantity-selector--dropdown .quantity-dropdown:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal (INDEX:255) */
#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;
  }
  /* Stock Horizon pins the add-to-cart to the bottom of the details column
     (margin-top:auto + sticky) with a scroll-fade mask, which suits a long,
     scrolling product form. This theme's quick-add content is short (price +
     format + add-to-cart), so pinning left a large empty gap between the variant
     picker and the button. Keep the buy controls in normal flow directly under
     the picker instead. */
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: 0;
    position: static;
    padding-bottom: var(--padding-xl);
    background-color: var(--color-background);
  }

  .quick-add-modal__content .product-details :is(.buy-buttons-block)::before {
    display: none;
  }

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

  /* The rules below intentionally FLATTEN a stock media-gallery into a static,
     non-interactive vertical stack of slides (pointer-events off, arrows/controls
     hidden, slides forced visible). That's correct for Horizon's stock galleries,
     but this theme's product page uses a real carousel — media_presentation
     "trowel-gallery" renders <media-gallery data-presentation="trowel-gallery"
     class="trowel-media-gallery"> with swipe/drag/arrows (slideshow-component) and
     a thumbnail rail. When that gallery is morphed into the modal, flattening it
     broke thumbnails, arrows and swipe. So every gallery-internal rule here is
     scoped to media-gallery:not(.trowel-media-gallery); the trowel gallery keeps
     its own (globally-bundled) carousel styles and behaves exactly like the PDP.
     Thumbnails are wired by trowel-media-gallery.js, loaded by this snippet. */
  .quick-add-modal__content .product-information__media media-gallery:not(.trowel-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 media-gallery:not(.trowel-media-gallery) slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media media-gallery:not(.trowel-media-gallery) slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media media-gallery:not(.trowel-media-gallery) slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media media-gallery:not(.trowel-media-gallery) 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
    media-gallery:not(.trowel-media-gallery)
    slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery:not(.trowel-media-gallery) slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media media-gallery:not(.trowel-media-gallery) 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 media-gallery:not(.trowel-media-gallery) 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
    media-gallery:not(.trowel-media-gallery)
    :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  /* Trowel gallery: flow naturally in the (sticky, scrollable) media column
     instead of the stock absolute-fill, so the carousel + thumbnail rail size to
     their content and stay interactive. */
  .quick-add-modal__content .product-information__media .trowel-media-gallery {
    position: relative;
    width: 100%;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal */

/* START_SNIPPET:quick-add (INDEX:256) */
/* 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-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);
  }

  /* The Choose button is icon-only — a single round icon button with no text
     label or inner pill wrapper. */
  .quick-add__button--choose {
    width: var(--button-size-md);
    justify-content: center;
    justify-items: center;
  }

  .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 */

/* START_SNIPPET:resource-card (INDEX:258) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:259) */
.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-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:search-authors (INDEX:265) */
/* Predictive dropdown: reuse the query-pill look, just lay the group out. */
  .predictive-search-results__authors {
    padding-inline: var(--padding-xl);
  }

  .predictive-search-results__authors-title {
    padding-inline: 0;
  }

  .predictive-search-results__authors-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2xs);
    margin-bottom: var(--margin-lg);
  }

  .predictive-search-results__card--author .predictive-search-results__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
  }

  /* Person photos render as circles everywhere in the theme (endorsement
     rail, author summary) — match that here. */
  .predictive-search-results__pill-avatar,
  .search-authors__avatar {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  /* Full search results page: self-contained chip styling (this section does
     not load the predictive-search section CSS). */
  .search-authors {
    margin-block-end: var(--margin-lg);

    /* Desktop side gutters come from the section grid (.section > * lands in
       the center column), but .product-grid-container flips to display: block
       under 750px, so the mobile gutter must be explicit. */
    @media screen and (max-width: 749px) {
      padding-inline: var(--page-margin);
    }
  }

  .search-authors__heading {
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: 0 var(--margin-sm);
    text-transform: var(--title-case);
  }

  .search-authors__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2xs);
    margin: 0;
    padding: 0;
  }

  .search-authors__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: var(--padding-2xs) var(--padding-sm);
    background-color: var(--color-background-2);
    color: var(--color-foreground);
    border-radius: 0;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--animation-speed) var(--animation-easing);
  }

  .search-authors__pill:hover,
  .search-authors__pill:focus-visible {
    background-color: var(--color-background-3);
    outline: var(--border-width-sm) solid var(--color-border);
    text-decoration: none;
  }

  /* "Books by <author>" grid on the results page: the small trowel card is a
     horizontal row, so one column on mobile, two on desktop (mirrors the
     predictive products list layout). */
  .search-authors-books {
    margin-block-end: var(--margin-lg);

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

  .search-authors-books__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
/* END_SNIPPET:search-authors */

/* START_SNIPPET:search-modal (INDEX:267) */
/* 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(--style-border-width);
    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;
    /* Match the results content gutter (.predictive-search-results__wrapper-queries)
       so the tertiary View all never sits flush against the modal edge. */
    padding-inline: var(--padding-xl);

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

  /* The field adopts the shared underline .search-field look (defined in
     snippets/list-filter.liquid): the header's own full-width border-bottom IS
     the underline, so the inner wrapper carries no border/outline of its own. */
  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: none;
    color: var(--color-foreground);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .search-modal__content .predictive-search-form__header-inner.search-field {
    /* The facet instances separate the field from the list below with this
       margin; in the modal the header border-bottom does that job. */
    margin-block-end: 0;
  }

  /* Match the facet field's icon inset (the shared class pins it flush left). */
  .search-modal__content .search-field .search-field__icon {
    inset-inline-start: var(--margin-xl);

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

  .search-modal__content .search-field .search-field__input {
    /* Underline comes from the header's border-bottom, full modal width. */
    border-block-end: none;
    padding-inline-start: calc(var(--margin-xl) + var(--search-field-icon-size) + var(--padding-xs));

    @media screen and (min-width: 750px) {
      padding-inline-start: calc(var(--margin-md) + var(--search-field-icon-size) + var(--padding-xs));
    }
  }

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

  /* The header border-bottom is the search field's underline; it keeps the
     theme's standard border color on focus (no darkening, no highlight). */
  .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;
  }

  /* Tertiary label underline (the Read more reference pattern): under the
     text only — icons stay clean. */
  .predictive-search__button-label {
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-underline-offset: 0.2em;
  }

  /* Tertiary-styled Clear: .button-tertiary supplies the color/typography;
     this block only keeps the touch target and the hide/show fade. The
     element-qualified selectors below outrank .button-tertiary (0,1,0) so the
     sizing survives regardless of stylesheet aggregation order. */
  button.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);
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

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

  /* Tertiary-styled View all: .button-tertiary supplies color/typography and
     the trailing arrow_forward icon; hover is the tertiary color change. */
  button.predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  /* Tertiary-styled close: .button-tertiary + the material 'close' glyph
     (modal-shell convention); this block only keeps the touch target. */
  button.predictive-search__close-modal-button {
    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);
    }
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:268) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:269) */
.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);
  }

  /* Inset mode: the section keeps its own scheme + background media full-bleed
     (they're absolutely positioned, so the section's padding doesn't shrink
     them) while the content box becomes an inset card with its own scheme,
     background image and border. */
  .custom-section--inset {
    padding: var(--inset-padding, 0px);
  }

  .custom-section-inset {
    position: relative;
  }

  .custom-section-inset > .section-content-wrapper {
    position: relative;
    z-index: var(--layer-flat);
  }

  /* Keep the overall section at its configured height by taking the inset
     padding out of the content wrapper's min-height. */
  .custom-section--inset .section-content-wrapper.section-content-wrapper {
    min-height: calc(
      var(--section-min-height, 'auto') - var(--section-height-offset, 0px) - 2 * var(--inset-padding, 0px)
    );
  }

  /* Separate mobile inset padding; must come after the base rules above so it
     wins at equal specificity. */
  @media screen and (max-width: 749px) {
    .custom-section--inset {
      padding: var(--inset-padding-mobile, var(--inset-padding, 0px));
    }

    .custom-section--inset .section-content-wrapper.section-content-wrapper {
      min-height: calc(
        var(--section-min-height, 'auto') - var(--section-height-offset, 0px) - 2 *
          var(--inset-padding-mobile, var(--inset-padding, 0px))
      );
    }
  }

  /* Optional scroll parallax on the background image. Mirrors the
     featured-product hero: grow the image slightly and drift it within the
     section as it scrolls through the viewport. Uses the shared
     `fp-parallax-drift` keyframes defined in sections/featured-product.liquid.
     `overflow: clip` (not the base `.background-image-container`'s hidden) keeps
     the container from becoming a scroll container, so the image's view()
     timeline resolves against the page and actually advances on scroll. */
  .custom-section--parallax {
    --fp-parallax-shift: calc(var(--fp-parallax, 0) / 100 * 80px);
  }

  .custom-section--parallax .background-image-container {
    overflow: clip;
  }

  @supports (animation-timeline: auto) {
    .custom-section--parallax .background-image-container img {
      height: calc(100% + 2 * var(--fp-parallax-shift, 0px));
      margin-block-start: calc(-1 * var(--fp-parallax-shift, 0px));
      animation: fp-parallax-drift both linear;
      animation-timeline: view();
    }
  }

  @media (prefers-reduced-motion) {
    .custom-section--parallax .background-image-container img {
      height: 100%;
      margin-block-start: 0;
      animation: none;
    }
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:275) */
.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:277) */
.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-controls (INDEX:279) */
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;
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow (INDEX:281) */
slideshow-slides {
    align-items: var(--slideshow-align-items, normal);
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }
/* END_SNIPPET:slideshow */

/* START_SNIPPET:sorting (INDEX:282) */
.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);
  }

  /* Native-select sort (use_native_select), rendered as an inline tertiary
     control rather than a bordered select box: a leading `swap_vert` icon,
     the bold/underlined "Sort" label, and the applied value as plain text
     (text-2). The real <select> is an invisible overlay covering the whole
     control, so clicking anywhere opens the browser-native picker; the
     value text re-renders server-side when the section reloads on change.
     Shared by the mobile toolbar and the desktop controls bar. */
  .sorting-filter__container--native {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    width: fit-content;
    padding: 0;
    margin-inline-end: 0;
  }

  .sorting-filter__container--native::before {
    content: 'swap_vert';
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--color-primary);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }

  .sorting-filter__container--native .facets__label {
    margin: 0;
    font-size: var(--font-paragraph--size);
    font-weight: 700;
    color: var(--color-foreground);
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-underline-offset: 0.2em;
    white-space: nowrap;
  }

  .sorting-filter__container--native .sorting-filter__native-value {
    font-size: var(--font-paragraph--size);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-text-2, var(--color-foreground));
    white-space: nowrap;
  }

  /* Invisible full-size overlay = the click/keyboard target. */
  .sorting-filter__container--native .sorting-filter__select-wrapper {
    position: absolute;
    inset: 0;
    padding: 0;
    border-radius: 0;
    opacity: 0;
  }

  .sorting-filter__container--native .sorting-filter__select {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  /* The overlay is invisible, so surface keyboard focus on the wrapper.
     Gated to fine pointers: a native <select> always matches :focus-visible
     while focused (per spec), so on touch the outline lingers after tapping
     to change the sort until you tap elsewhere. Desktop keyboard/mouse users
     still get the focus ring. */
  @media (hover: hover) and (pointer: fine) {
    .sorting-filter__container--native:has(.sorting-filter__select:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:290) */
: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:trowel-product-card (INDEX:293) */
.trowel-product-card {
    display: flex;
    flex-direction: column;
    gap: var(--padding-sm, 12px);
    /* Default style = no fill. The 'filled' variant paints its own background
       (--color-background-2) further down; transparent here so the default card
       doesn't inherit the scheme's --color-background as a panel. */
    background: transparent;
    transition: scale 120ms ease-out;
    /* Fill the grid cell's height so the price/rating row (margin-top: auto)
       is pushed to the bottom and aligns across cards of differing content. */
    height: 100%;
  }

  .trowel-product-card:active {
    scale: 0.98;
  }

  /* ── Quick add — site-wide tertiary button ──
     The shared quick-add snippet's button is buried under base.css's heavy
     .button styles (clamp font-size up to 1.3rem, ~0.9em/1.4em padding, fixed
     heights, pill radius, gradient + frosted backdrop) AND the snippet's own
     collapse/reveal animation — which on this card rendered as an oversized,
     overflowing box. Rather than patch individual properties, we reset the
     whole thing here and render the trigger as the site-wide tertiary button
     (see snippets/button.liquid §.button-tertiary): no fill or border,
     --color-primary bold text, an underlined label and a leading
     material-symbols icon. Hidden by default; fades in on card hover (see
     @media (hover)). Selectors match base.css's specificity but load after
     it, so they win. */
  .trowel-product-card .quick-add {
    --padding-inline-end: 0px;
    --padding-block-end: 0px;
    --border-radius: 0px;

    /* Re-inherit the card's own (working) scheme — the forced quick-add
       scheme resolves to unreadable/transparent values on this store. */
    --color-background: inherit;
    --color-background-rgb: inherit;
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
  }

  /* The trigger itself: a bare tertiary button. (display is set in the desktop
     media query below so the snippet's mobile hiding still wins.) */
  .trowel-product-card .quick-add__button {
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    width: fit-content;
    height: auto;
    min-height: 0;
    /* Give the trigger a solid background + border so the label stays legible
       over any product media image, regardless of its colors. Uses the card's
       primary background (background 1) via the re-inherited scheme above. */
    padding: 0.4rem 0.65rem;
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-size: var(--font-paragraph--size);
    font-weight: 700;
    line-height: var(--font-paragraph--line-height);
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    background: var(--color-background);
    background-image: none;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
  }

  /* Kill base.css's inner top-down "sheen" gradient (.button::before) — the
     tertiary trigger is flat. Also covers the hover-state pseudo-element. */
  .trowel-product-card .quick-add__button::before,
  .trowel-product-card .quick-add__button:hover::before {
    display: none;
  }

  /* No zoom on hover — base quick-add scales the button up on hover; keep it
     static (the opacity fade-in is preserved separately). */
  .trowel-product-card .quick-add__button:hover {
    scale: none;
  }

  /* Inner icon + label row — drop the snippet's separate pill background,
     fixed height, and overflow clipping. */
  .trowel-product-card .quick-add__button .add-to-cart-text {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: auto;
    height: auto;
    min-height: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  /* Icon — the leading material glyph at the tertiary button's icon size,
     inheriting the button color via currentColor. Works for both the inline
     SVG (Choose) and the material glyph (Add / labeled Choose). */
  .trowel-product-card .quick-add__button .add-to-cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    font-size: 20px;
  }

  .trowel-product-card .quick-add__button .add-to-cart-icon svg {
    width: 20px;
    height: 20px;
  }

  .trowel-product-card .quick-add__button .add-to-cart-icon .material-symbols-outlined {
    font-size: 20px;
  }

  /* Label — show it inline, always; undo the collapse/blur/translate reveal. */
  .trowel-product-card .quick-add__button .add-to-cart-text__content {
    display: inline-block;
    grid-template-columns: none;
    min-width: 0;
    overflow: visible;
  }

  .trowel-product-card .quick-add__button .add-to-cart-text__content span {
    display: inline;
    min-width: 0;
    padding: 0;
    opacity: 1;
    translate: 0;
    filter: none;
  }

  /* The visible label text — underlined like .button-tertiary__label. */
  .trowel-product-card .quick-add__button .add-to-cart-text__content span span {
    display: inline-block;
    min-width: 0;
    padding: 0;
    opacity: 1;
    translate: 0;
    filter: none;
    border-bottom: 1px solid currentcolor;
  }

  /* Show the trigger on desktop only (mobile keeps the snippet's hidden state,
     since there's no hover there). It still starts at opacity 0 and fades in
     on card hover via the @media (hover) block below. */
  @media screen and (min-width: 750px) {
    .trowel-product-card .quick-add__button {
      display: inline-flex;
    }
  }

  /* The blanket display rule above (equal specificity to base.css, loaded
     later) would un-hide the inactive quick-add button — so the "Choose" cart
     icon shows alongside "Add". Re-assert base.css's hide rules at higher
     specificity so only the active button renders. */
  .trowel-product-card .quick-add[data-quick-add-button='add'] .quick-add__button--choose,
  .trowel-product-card .quick-add[data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  /* Hover-only affordances: skip on touch devices so mobile has no hover state */
  @media (hover: hover) {
    .trowel-product-card:is(:hover, :focus-within) .trowel-product-card__title {
      color: var(--color-primary-hover, var(--color-foreground));
    }

    .trowel-product-card:is(:hover, :focus-within) .quick-add__button {
      opacity: 1;
    }

    /* Tertiary-button hover: shift to the primary-hover color. */
    .trowel-product-card .quick-add__button:hover {
      color: var(--color-primary-hover);
    }
  }

  .trowel-product-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
  }

  .trowel-product-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Image */
  .trowel-product-card__image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-background-2, #f5f4f4);
  }

  /* Optional per-instance image width (set inline as --tpc-image-width on the
     article). Centered within the card. Skipped on the small/horizontal layout,
     which sizes the image via flex-basis. */
  .trowel-product-card:not(.trowel-product-card--size-small) .trowel-product-card__image-wrapper {
    width: var(--tpc-image-width, 100%);
    max-width: 100%;
    margin-inline: auto;
  }

  /* Badges — above carousel controls */
  .trowel-product-card__image-wrapper .product-badges {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .trowel-product-card__image-wrapper .product-badges--bottom-left {
    bottom: var(--padding-xs, 8px);
    left: var(--padding-xs, 8px);
  }

  .trowel-product-card__image-wrapper .product-badges--top-left {
    top: var(--padding-xs, 8px);
    left: var(--padding-xs, 8px);
  }

  .trowel-product-card__image-wrapper .product-badges--top-right {
    top: var(--padding-xs, 8px);
    right: var(--padding-xs, 8px);
  }

  .trowel-product-card__image-wrapper .product-badges__badge {
    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, var(--font-size--xs));
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .trowel-product-card__image-wrapper .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block, 4px);
    padding-inline: var(--badge-rectangle-padding-inline, 10px);
  }

  .trowel-product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .trowel-product-card__image--placeholder {
    width: 100%;
    height: 100%;
    background: rgb(var(--color-foreground-rgb) / 0.08);
  }

  /* ── Carousel ── */
  .trowel-product-card__image-wrapper slideshow-component {
    position: absolute;
    inset: 0;
  }

  .trowel-product-card__image-wrapper slideshow-container,
  .trowel-product-card__image-wrapper slideshow-slides,
  .trowel-product-card__slide {
    height: 100%;
  }

  /* base.css paints slideshow-container with --color-background, which would
     cover the card's --color-background-2 backdrop */
  .trowel-product-card__image-wrapper slideshow-container {
    background-color: transparent;
  }

  /* Hide disabled arrows (e.g. left arrow on first slide). Use opacity so the
     remaining arrow keeps its flex slot — matches trowel-media-gallery. */
  .trowel-product-card slideshow-arrows .slideshow-control[disabled] {
    opacity: 0 !important;
    pointer-events: none;
  }

  /* Stop the "cycle through the images before landing on the first" flash on
     cards that lazy-load into view (search / infinite scroll). The card's
     carousel is a native `scroll-snap-type: x mandatory` scroller (base.css);
     while a freshly-inserted card's slides progressively lay out and its lazy
     images decode, mandatory snap keeps re-targeting a snap point and visibly
     walks the scroll position through the slides before settling on slide 0.
     Suspending snap ONLY while the card is idle (before the shopper engages it)
     removes that re-target driver but keeps the scroller scrollable, so native
     mobile swiping still works from the first touch. slideshow.js adds
     [actioned] on pointerenter (desktop hover / first mobile touch), at which
     point full `x mandatory` snapping returns unchanged — so the swipe feel is
     identical the moment the card is actually used. Not applied to the nested
     in-carousel case above (single visible slide there anyway). */
  .trowel-product-card slideshow-component:not([actioned]) slideshow-slides {
    scroll-snap-type: none;
  }

  /* When the card sits inside a section carousel (.resource-list__carousel — the
     mobile `carousel_on_mobile` track or a full carousel layout), collapse the
     card's OWN image carousel to the first image only: no peeking second slide,
     no swipe. The outer carousel handles paging; a swiper-in-a-swiper is confusing.
     The nested slideshow's drag is already disabled in JS (slideshow.js `isNested`),
     but the section carousel's inherited `--slide-width` (60vw) and slide `gap`
     cascade down into the card's slides, leaking slide 2 into view. Dropping every
     trailing slide out of layout with `display: none` can't be defeated by that
     width/gap inheritance or by `content-visibility`. (Mirrors the NCP
     alfred-product-card fix.) */
  .resource-list__carousel .trowel-product-card slideshow-slide ~ slideshow-slide {
    display: none;
  }

  .resource-list__carousel .trowel-product-card slideshow-slides {
    overflow: hidden;
    --slide-width: 100%;
    gap: 0;
    /* The section carousel reserves vertical room for its cards' hover-lift +
       shadow via `.resource-list__carousel slideshow-slides { margin-block:-16px;
       padding-block:16px }`. That selector ALSO matches this nested card
       slideshow, so its slide's content box shrank by 32px and the image
       rendered short of the square wrapper — leaving a gap at the bottom that
       made multi-image cards sit out of line with single-image ones in the
       mobile carousel. The nested slideshow never lifts, so zero it back out. */
    margin-block: 0;
    padding-block: 0;
  }

  .resource-list__carousel .trowel-product-card :is(slideshow-controls, slideshow-arrows) {
    display: none;
  }

  /* Material icon sizing — base has no default for this variant */
  .trowel-product-card .icon-material-arrow {
    display: inline-flex;
  }

  .trowel-product-card .icon-material-arrow svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .trowel-product-card__slide-link {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
  }

  /* Content */
  .trowel-product-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
  }

  /* Series + volume — font set inline from the theme type preset */
  .trowel-product-card__series {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    color: var(--color-text-2);
  }

  .trowel-product-card__series-sep {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
  }

  /* Title — font set inline from the theme type preset */
  .trowel-product-card__title {
    margin: 0;
    color: var(--color-foreground);
  }

  /* Author list — demote to the secondary text slot (overrides the
     author-meta-list block's default --color-foreground-heading on names). */
  .trowel-product-card .author-meta-list__name {
    color: var(--color-text-2);
    /* Keep each full name on one line so it wraps as a whole unit
       instead of breaking mid-name (e.g. "Tom" / "Nettles"). */
    white-space: nowrap;
  }

  /* Tighten author line spacing — beat the aggressive .paragraph > *
     preset line-height that lands directly on the inline name children
     (the inline line-height:1 on the <p> only covers the parent). */
  .trowel-product-card .author-meta-list,
  .trowel-product-card .author-meta-list > * {
    line-height: 1;
  }

  /* Price + Rating row */
  .trowel-product-card__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 0.5rem;
  }

  /* Price */
  .trowel-product-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-width: 0;
  }

  /* Price — font set inline from the theme type preset */
  .trowel-product-card__price-current {
    color: var(--color-foreground);
    white-space: nowrap;
  }

  .trowel-product-card__price-current--on-sale {
    color: var(--color-sale);
    -webkit-text-stroke: 0.4pt;
  }

  /* Damaged-condition price — reduced price for a non-default Condition variant,
     in the theme's damaged-warning accent (matches the PDP condition switcher). */
  .trowel-product-card__price-current--damaged {
    color: #e77800;
    -webkit-text-stroke: 0.4pt;
  }

  .trowel-product-card__price-compare {
    color: var(--color-foreground);
    opacity: 0.4;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    white-space: nowrap;
  }

  /* Rating */
  .trowel-product-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .trowel-product-card__star {
    display: flex;
    align-items: center;
    color: var(--color-primary, var(--color-foreground));
    line-height: 1;
  }

  .trowel-product-card__star svg {
    height: 1lh;
    width: 1lh;
    aspect-ratio: 1 / 1;
  }

  /* Rating — font set inline from the theme type preset */
  .trowel-product-card__rating-value {
    color: var(--color-foreground);
  }

  .trowel-product-card__rating-count {
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  /* Variant indicator — font set inline from the theme type preset */
  .trowel-product-card__variants {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  /* Variant value currently selected by an active filter: bold + full
     foreground, matching the format strip's active treatment. */
  .trowel-product-card__variant-name--active {
    font-weight: 700;
    color: var(--color-foreground);
  }

  .trowel-product-card__variant-sep {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: currentColor;
    flex: 0 0 auto;
  }

  /* Format strip — product-type row under the price. Regular weight + muted
     secondary text; the filtered format(s) bold to the primary foreground. Font
     inherits the variant-indicator preset (passed inline from the snippet). */
  .trowel-product-card__format-strip {
    margin-top: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--color-text-2);
  }

  .trowel-product-card__format-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-2);
  }

  /* Filtered format: bold + primary foreground, in place. */
  .trowel-product-card__format-item--active {
    font-weight: 700;
    color: var(--color-foreground);
  }

  .trowel-product-card__format-icon {
    font-size: 1.15em;
  }

  /* 4px filled square separator, muted, vertically centered; none trailing. */
  .trowel-product-card__format-sep {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: currentColor;
    flex: 0 0 auto;
  }

  /* Content-badges sit above the title; only used on the small variant. */
  .trowel-product-card__content-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .trowel-product-card__content-badges .product-badges__badge {
    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, var(--font-size--xs));
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .trowel-product-card__content-badges .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block, 4px);
    padding-inline: var(--badge-rectangle-padding-inline, 10px);
  }

  /* Badge placement per size: large/medium use the overlay; small moves them above the title. */
  .trowel-product-card--size-large .trowel-product-card__content-badges,
  .trowel-product-card--size-medium .trowel-product-card__content-badges {
    display: none;
  }

  .trowel-product-card--size-small .trowel-product-card__image-wrapper .product-badges {
    display: none;
  }

  /* ──────────────────────────────────────────────────────
     Size variants — keyed off the article's modifier class
     so the snippet works standalone.
     ────────────────────────────────────────────────────── */

  /* Large / featured = full vertical layout. Text sizes come from the type presets. */

  /* Medium — drop author + rating (text sizes come from the type presets) */
  .trowel-product-card--size-medium .author-meta-list,
  .trowel-product-card--size-medium .trowel-product-card__rating {
    display: none;
  }

  .trowel-product-card--size-medium .trowel-product-card__price-row {
    justify-content: flex-start;
  }

  /* Small — row layout with compact content */
  .trowel-product-card--size-small {
    flex-direction: row;
    align-items: stretch;
    gap: var(--padding-sm, 12px);
  }

  .trowel-product-card--size-small .trowel-product-card__image-wrapper {
    /* Honour the per-instance image width (rem) when set; default 35% of the row. */
    flex: 0 0 var(--tpc-image-width, 35%);
    align-self: flex-start;
  }

  .trowel-product-card--size-small .trowel-product-card__link {
    flex: 1;
    justify-content: center;
  }

  /* Center the content against the image instead of stretching to its full
     height (which would push the price row to the bottom via margin-top:auto). */
  .trowel-product-card--size-small .trowel-product-card__content {
    flex: 0 1 auto;
  }

  .trowel-product-card--size-small .author-meta-list,
  .trowel-product-card--size-small .trowel-product-card__rating,
  .trowel-product-card--size-small .trowel-product-card__variants,
  .trowel-product-card--size-small .slideshow-controls__dots,
  .trowel-product-card--size-small slideshow-arrows,
  .trowel-product-card--size-small .quick-add {
    display: none;
  }

  /* Override the inline title font-size (set from the title type preset) so the
     small variant reads one step down. !important is required to beat the inline style. */
  .trowel-product-card--size-small .trowel-product-card__title {
    font-size: var(--font-h5--size) !important;
  }

  .trowel-product-card--size-small .trowel-product-card__price-row {
    justify-content: flex-start;
    padding-top: 0;
    margin-top: 4px;
  }

  /* Style: Filled — wrap the card in a tinted panel */
  .trowel-product-card--style-filled {
    background: var(--color-background-2, #f5f4f4);
    border-radius: var(--style-border-radius-sm);
    padding: var(--padding-sm, 12px);
  }

  .trowel-product-card--style-filled .trowel-product-card__image-wrapper {
    background: transparent;
  }

  .trowel-product-card--style-filled.trowel-product-card--size-small {
    padding: var(--padding-xs, 8px);
  }

  /* ──────────────────────────────────────────────────────
     Featured — large vertical card with an auto-tinted panel.
     The content panel fills with --tpc-featured-bg (the product image's
     average colour, computed in trowel-featured-color.js) and the text
     inverts to the scheme's --color-background. Until the colour resolves
     (or if the canvas read is blocked) it falls back to --color-foreground,
     which is guaranteed to contrast --color-background.
     ────────────────────────────────────────────────────── */
  .trowel-product-card--size-featured {
    gap: 0;
    background: var(--tpc-featured-bg, var(--color-foreground));
    transition: scale 120ms ease-out, background-color 240ms ease-out;
  }

  /* Image sits flush above the panel; neutralise the filled style's inset. */
  .trowel-product-card--size-featured.trowel-product-card--style-filled {
    padding: 0;
    border-radius: 0;
  }

  .trowel-product-card--size-featured .trowel-product-card__content {
    padding: var(--padding-lg, 32px);
    gap: 6px;
  }

  /* Invert text onto the tinted panel. */
  .trowel-product-card--size-featured .trowel-product-card__title,
  .trowel-product-card--size-featured .trowel-product-card__series,
  .trowel-product-card--size-featured .trowel-product-card__series-title,
  .trowel-product-card--size-featured .trowel-product-card__series-volume,
  .trowel-product-card--size-featured .author-meta-list__name,
  .trowel-product-card--size-featured .trowel-product-card__price-current,
  .trowel-product-card--size-featured .trowel-product-card__price-current--on-sale,
  .trowel-product-card--size-featured .trowel-product-card__rating-value {
    color: var(--color-background);
  }

  .trowel-product-card--size-featured .trowel-product-card__price-compare {
    color: var(--color-background);
    opacity: 0.5;
  }

  .trowel-product-card--size-featured .trowel-product-card__rating-count {
    color: rgb(var(--color-background-rgb) / 0.6);
  }

  /* Keep the title legible on the panel on hover (no primary-hover swap). */
  @media (hover: hover) {
    .trowel-product-card--size-featured:is(:hover, :focus-within) .trowel-product-card__title {
      color: var(--color-background);
    }
  }
/* END_SNIPPET:trowel-product-card */

/* START_SNIPPET:trowel-product-media-gallery (INDEX:294) */
/* ── Trowel Media Gallery ── */

  /* Desktop: width-capped shell — since the stage is 1:1, capping width
     effectively caps height, keeping gallery + thumbnails within the viewport.
     Budget: viewport − header − section padding − thumb row − gaps */
  @media screen and (min-width: 750px) {
    .trowel-media-gallery {
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: var(--gap-sm, 8px);
      --_gallery-chrome: calc(
        var(--header-height, 100px) +
        var(--padding-lg, 1rem) * 2 +
        80px +
        var(--gap-sm, 8px) +
        2rem
      );
      width: min(100%, calc(100vh - var(--_gallery-chrome)));
      max-width: 100%;
      margin-inline-start: auto;
    }

    .trowel-media-gallery__main {
      overflow: hidden;
      position: relative;
      background-color: var(--color-background-2, #f5f4f4);
      width: 100%;
      aspect-ratio: 1 / 1;
    }

    .trowel-media-gallery__thumbs {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
      gap: var(--gap-xs, 4px);
    }
  }

  /* Mobile: natural stacking, inset to match page content padding */
  @media screen and (max-width: 749px) {
    .trowel-media-gallery {
      padding-inline: var(--page-margin, 16px);
    }

    .trowel-media-gallery__main {
      width: 100%;
      position: relative;
      background-color: var(--color-background-2, #f5f4f4);
      overflow: hidden;
      aspect-ratio: 1 / 1;
    }

    .trowel-media-gallery__thumbs {
      display: flex;
      gap: var(--gap-xs, 4px);
      overflow-x: auto;
      padding-block: var(--gap-xs, 4px);
      -webkit-overflow-scrolling: touch;
      margin-inline: calc(-1 * var(--page-margin, 16px));
      padding-inline: var(--page-margin, 16px);
    }

    .trowel-media-gallery__thumb {
      width: calc((100vw - 2 * var(--page-margin, 16px) - 4 * var(--gap-xs, 4px)) / 5);
      min-width: calc((100vw - 2 * var(--page-margin, 16px) - 4 * var(--gap-xs, 4px)) / 5);
    }
  }

  /* Slideshow fills the main area */
  .trowel-media-gallery__main slideshow-component {
    height: 100%;
  }

  .trowel-media-gallery__main slideshow-container,
  .trowel-media-gallery__main slideshow-slides {
    height: 100%;
  }

  /* base.css paints slideshow-container with --color-background, which would
     cover the gallery's light-gray backdrop and defeat cutout PNG transparency */
  .trowel-media-gallery__main slideshow-container {
    background-color: transparent;
  }

  .trowel-media-gallery__slide {
    height: 100%;
  }

  .trowel-media-gallery__slide .product-media {
    height: 100%;
    aspect-ratio: unset;
  }

  /* Fill the square stage — the source image covers the wrapper (cropping the
     overflowing axis) so every product photo reads as a square, honouring the
     media's focal point for what stays in frame. */
  .trowel-media-gallery__main .product-media__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focal-point, center center);
  }

  /* Video media: center the embed in the square stage, keeping its ratio */
  .trowel-media-gallery__slide .product-media:has(.trowel-media-gallery__video) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .trowel-media-gallery__video {
    display: block;
    width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio, 16 / 9);
    border: 0;
  }

  /* Native (Shopify-hosted) video should fit, not crop */
  video.trowel-media-gallery__video {
    object-fit: contain;
  }

  /* ── Badge overlay on main image ── */
  .trowel-media-gallery__main .product-badges {
    position: absolute;
    z-index: 3;
    display: flex;
    gap: var(--gap-xs, 4px);
  }

  .trowel-media-gallery__main .product-badges--top-left {
    top: var(--padding-xs, 8px);
    left: var(--padding-xs, 8px);
  }

  .trowel-media-gallery__main .product-badges--top-right {
    top: var(--padding-xs, 8px);
    right: var(--padding-xs, 8px);
  }

  .trowel-media-gallery__main .product-badges--bottom-left {
    bottom: var(--padding-xs, 8px);
    left: var(--padding-xs, 8px);
  }

  /* Shared thumbnail styles */
  .trowel-media-gallery__thumb {
    appearance: none;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--color-background-2, #f5f4f4);
    flex-shrink: 0;
    transition: border-color 0.15s ease;
    position: relative;
  }

  /* Play badge on video thumbnails */
  .trowel-media-gallery__thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-white, #fff);
    font-size: 2rem;
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.5));
  }

  .trowel-media-gallery__thumb--active {
    border-color: var(--color-foreground, #000);
  }

  .trowel-media-gallery__thumb:focus-visible {
    outline: 2px solid var(--color-foreground, #000);
    outline-offset: 2px;
  }

  .trowel-media-gallery__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ── Arrow controls: clean fade+slide in/out, hide at gallery ends ── */
  /* Cancel base.css's one-shot hover animation so transitions can run both ways.
     !important is scoped to this one property — base.css's hover rule out-specifies us. */
  .trowel-media-gallery slideshow-arrows .slideshow-control {
    animation: none !important;
    opacity: 0;
    transform: translateX(var(--padding-sm, 8px));
    transition:
      opacity var(--animation-speed, 200ms) var(--animation-easing, ease),
      transform var(--animation-speed, 200ms) var(--animation-easing, ease);
  }

  .trowel-media-gallery slideshow-component:hover slideshow-arrows .slideshow-control,
  .trowel-media-gallery slideshow-component:focus-within slideshow-arrows .slideshow-control {
    opacity: 1;
    transform: translateX(0);
  }

  /* At the start/end of the gallery, hide the unreachable arrow.
     Use opacity (not display:none) so the remaining arrow keeps its flex slot
     and doesn't shift across the gallery. */
  .trowel-media-gallery slideshow-arrows .slideshow-control[disabled] {
    pointer-events: none;
  }

  .trowel-media-gallery slideshow-arrows .slideshow-control[disabled],
  .trowel-media-gallery slideshow-component:hover slideshow-arrows .slideshow-control[disabled],
  .trowel-media-gallery slideshow-component:focus-within slideshow-arrows .slideshow-control[disabled] {
    opacity: 0;
  }

  /* Mobile: persistent arrows (no hover state on touch). The disabled-arrow
     rule above out-specifies this one (extra [disabled] attribute selector),
     so the unreachable arrow at either end stays hidden. */
  @media screen and (max-width: 749px) {
    .trowel-media-gallery--mobile-persistent-arrows slideshow-arrows .slideshow-control {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Material icon sizing — override the stroke-based sizing used by arrow/caret */
  .trowel-media-gallery .icon-material-arrow {
    display: inline-flex;
  }

  .trowel-media-gallery .icon-material-arrow svg {
    width: 1.75rem;
    height: 1.75rem;
  }
/* END_SNIPPET:trowel-product-media-gallery */

/* START_SNIPPET:variant-main-picker (INDEX:301) */
/* Variant picker container styles - unique to main variant picker.
     Merchant-configurable typography flows in via inline CSS custom
     properties on the <variant-picker> root; the rules below read them
     with fallbacks to the prior defaults. Colors stay driven by the
     section's color scheme. */
  .variant-picker {
    /* <variant-picker> is a custom element, which defaults to display:inline —
       where width:100% is ignored and the host shrink-wraps to its content.
       That lets the mobile overflow row push the whole page wider than the
       viewport, so pin it to block. */
    display: block;
    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 button label price display */
  .variant-option__button-label:has(.variant-option__button-label__price) {
    flex-direction: column;
    white-space: normal;
    gap: var(--gap-2xs, 0.25em);
    padding-block: var(--padding-md);
  }

  .variant-option__button-label:has(.variant-option__button-label__price) .variant-option__button-label__text {
    font-weight: 700;
    text-align: center;
  }

  /* Optional Material Symbol icon (from the book_format metaobject) sitting
     to the left of the value title. Keep the title + icon on one row, icon
     scaled to the title's font-size. */
  .variant-option__button-label__text:has(.variant-option__button-label__icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
  }

  .variant-option__button-label__icon {
    font-size: 1.15em;
    line-height: 1;
    flex-shrink: 0;
  }

  .variant-option__button-label__price {
    display: flex;
    align-items: center;
    gap: 0.375em;
    z-index: 2;
    pointer-events: none;
    font-size: 0.9em;
  }

  /* "Out of stock" tag on unavailable format buttons. Absolutely
     positioned as a badge across the top edge so it's taken out of the
     flex flow — the button keeps the same height as its in-stock
     siblings instead of growing to fit a descriptor line. Sits above the
     strikethrough so it stays legible. */
  .variant-option__button-label__stock {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    padding: 0.25em 0.6em;
    font-size: 0.6em;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: var(--color-background);
    background-color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .variant-option__button-label__compare-price {
    text-decoration: line-through;
    opacity: 0.5;
  }

  .variant-option__button-label__sale-price {
    color: var(--color-sale);
  }

  .variant-option__button-label:has(:checked) .variant-option__button-label__compare-price {
    opacity: 0.55;
  }

  .variant-option__button-label:has(:checked) .variant-option__button-label__sale-price {
    color: var(--color-sale);
  }

  /* Kill the theme's sliding pill + border-sweep animation system for
     non-swatch button-style variants. The redesigned look uses a simple
     filled/bordered selected state instead. */
  .variant-option__button-label:not(.variant-option__button-label--has-swatch),
  .variant-option__button-label:not(.variant-option__button-label--has-swatch)::before,
  .variant-option__button-label:not(.variant-option__button-label--has-swatch)::after {
    transition: none;
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) .variant-option__button-label__pill {
    display: none;
  }

  /* Available (non-selected) buttons: full foreground text so they clearly
     read as selectable, overriding any default muted tone. */
  .variant-option__button-label:not(
      .variant-option__button-label--has-swatch,
      :has([data-option-available='false'])
    ) {
    color: var(--color-foreground);
  }

  /* Selected button: foreground border + text + shaded background fill. */
  .variant-option__button-label:has(:checked):not(
      .variant-option__button-label--has-swatch,
      :has([data-option-available='false'])
    ) {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-color: var(--color-foreground);
    color: var(--color-foreground);
  }

  .variant-option__button-label:has(:checked):not(
      .variant-option__button-label--has-swatch,
      :has([data-option-available='false'])
    )::before {
    border-color: var(--color-foreground);
  }

  .variant-option__button-label:has(:checked):not(
      .variant-option__button-label--has-swatch,
      :has([data-option-available='false'])
    ):hover {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-color: var(--color-foreground);
    color: var(--color-foreground);
  }

  /* Unavailable buttons: crosshatched, greyed, fully disabled — no hover
     animation, cursor not-allowed, no pointer interaction. */
  .variant-option__button-label:not(.variant-option__button-label--has-swatch):has(
      [data-option-available='false']
    ) {
    cursor: not-allowed;
    color: rgb(var(--color-foreground-rgb) / 0.35);
    background-color: transparent;
    pointer-events: none;
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch):has(
      [data-option-available='false']
    )
    .variant-option__button-label__price {
    opacity: 0.5;
  }

  /* Make the diagonal strikethrough on unavailable buttons clearly visible. */
  .variant-option__strikethrough {
    overflow: visible;
    pointer-events: none;
  }

  .variant-option__strikethrough line {
    stroke: currentColor;
    stroke-width: 1.5;
    opacity: 0.6;
  }

  /* Non-heading-accent variant options reset back to the section's
     foreground color and inherit weight/case/spacing, matching the
     prior look for non-Format/Language/Condition options. */
  .variant-option:not(.variant-option--heading-accent) > .label-header {
    font-weight: var(--variant-picker-label-font-weight, inherit);
    text-transform: var(--variant-picker-label-text-transform, inherit);
    letter-spacing: var(--variant-picker-label-letter-spacing, inherit);
    color: inherit;
  }

  /* Value typography: button labels, dropdown selects, swatch value text,
     and the condition switch-link text. Uses neutral fallbacks so the
     existing inherited look is preserved until merchant overrides. */
  .variant-option__button-label__text,
  .variant-option__swatch-value,
  .variant-option__select,
  .variant-option__switch-link__text {
    font-family: var(--variant-picker-value-font, inherit);
    font-size: var(--variant-picker-value-font-size, inherit);
    font-weight: var(--variant-picker-value-font-weight, inherit);
    text-transform: var(--variant-picker-value-text-transform, inherit);
  }

  /* Inline dropdown variant option style (e.g. "Language") */
  .variant-option--dropdowns-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-wrap: wrap;
  }

  .variant-option--dropdowns-inline > label {
    font-weight: 600;
    margin: 0;
  }

  .variant-option--dropdowns-inline .variant-option__select-wrapper {
    border: 0;
    border-radius: 0;
    margin: 0;
    background: transparent;
    display: inline-flex;
    align-items: baseline;
    overflow: visible;
  }

  .variant-option--dropdowns-inline .variant-option__select-wrapper:hover {
    border-color: transparent;
  }

  .variant-option--dropdowns-inline .variant-option__select {
    padding: 0;
    font-weight: 600;
    background: transparent;
    width: auto;
  }

  .variant-option--dropdowns-inline .variant-option__select-wrapper .icon {
    position: static;
    transform: none;
    margin-inline-start: 0.15rem;
    flex-shrink: 0;
  }

  /* Locked state: only one value is effectively selectable, so drop the
     caret and mute the value to match the heading — no false hope of
     another option. */
  .variant-option--dropdowns-inline-locked .variant-option__select-wrapper .icon {
    display: none;
  }

  .variant-option--dropdowns-inline-locked .variant-option__select {
    color: var(--color-text-2, #9593A0);
  }

  /* Single-value option: reuse the inline-dropdown layout, with the value
     styled like the locked dropdown value (muted, 600 weight). The label is
     a span (no control), so re-apply the inline label weight here. */
  .variant-option--single > .label-header {
    font-weight: 600;
    margin: 0;
  }

  .variant-option__single-value {
    font-family: var(--variant-picker-value-font, inherit);
    font-size: var(--variant-picker-value-font-size, inherit);
    font-weight: var(--variant-picker-value-font-weight, 600);
    text-transform: var(--variant-picker-value-text-transform, inherit);
    color: var(--color-text-2, #9593A0);
  }

  /* Condition switcher: toggles between a dropdown view and a text
     switch-link view. Once the user clicks the switch link, the
     condition-switcher client script locks it into dropdown mode for
     the rest of the page session. */
  condition-switcher {
    display: block;
  }

  condition-switcher[data-mode='switch_link'] [data-view='dropdown'],
  condition-switcher[data-mode='dropdown'] [data-view='switch-link'] {
    display: none;
  }

  /* Highlight non-default conditions (e.g. "Damaged") so it's clear
     the customer is not looking at a standard-condition variant. */
  .variant-option--condition-alert .variant-option__select {
    color: #e77800;
  }

  [data-view='switch-link'] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  /* Text switch link (the clickable "Switch to damaged copy (save $X)"). */
  .variant-option__switch-link {
    all: unset;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    cursor: pointer;
    position: relative;
    width: fit-content;
    font-size: 0.95em;
    box-sizing: border-box;
  }

  .variant-option__switch-link:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__switch-link__icon {
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
    opacity: 0.9;
  }

  .variant-option__switch-link__icon .material-icon {
    font-size: 1.1em;
    line-height: 1;
  }

  /* Damaged-condition alert icon rendered inside the condition dropdown
     wrapper. Color matches the #E77800 value text to make the warning
     consistent across both views. */
  .variant-option__alert-icon {
    display: inline-flex;
    align-items: center;
    color: #e77800;
    margin-inline-end: 0.25rem;
  }

  .variant-option__alert-icon .material-icon {
    font-size: 1.1em;
    line-height: 1;
  }

  .variant-option__switch-link__text {
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.15s ease;
  }

  .variant-option__switch-link:hover .variant-option__switch-link__text {
    opacity: 0.75;
  }

  .variant-option__switch-link__savings {
    white-space: nowrap;
  }

  /* Mobile overflow for button-style options (e.g. Format / Book Format).
     When enabled, the fieldset's own flex/grid layout is neutralised and the
     layout moves onto an inner scroller so the legend stays above. On desktop
     the scroller reproduces the original wrap/grid layout; on mobile it
     becomes a single horizontal scroll row with a subtle fade hint, so the
     options take up far less vertical space. */
  .variant-picker[data-mobile-overflow] .variant-option--buttons {
    display: block;
    /* fieldsets default to min-inline-size:min-content, which would let the
       row grow past the viewport — pin it so the inner scroller is what
       scrolls, not the page. */
    min-inline-size: 0;
    min-width: 0;
  }

  .variant-picker[data-mobile-overflow] .variant-option__overflow {
    position: relative;
    max-width: 100%;
  }

  .variant-picker[data-mobile-overflow] .variant-option__scroller {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    max-width: 100%;
  }

  @media screen and (min-width: 750px) {
    .variant-picker[data-mobile-overflow]
      .variant-option--equal-width-buttons
      .variant-option__scroller {
      --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));
    }
  }

  @media screen and (max-width: 749px) {
    .variant-picker[data-mobile-overflow] .variant-option__scroller {
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* Full-bleed the scroll track to both screen edges (mirrors the media
         gallery's thumb strip). The picker sits in the centered content
         column (.product-details, grid column 2), inset from the viewport by
         --page-margin on each side, with no intermediate horizontal padding —
         so a symmetric negative margin cancels exactly that inset to reach
         both screen edges, and the matching padding re-insets the cards so the
         first one still lines up with the legend/price/body at rest.

         CRITICAL — max-width: none. The base rule caps this at max-width:100%
         (added to stop the row widening the page). That cap also stops the
         negative margins from expanding the box past the column width, so the
         left margin bled past the screen edge while the right edge fell short:
         the "overflows left, gap on the right" bug. Lifting the cap lets the
         box grow to exactly the column width + 2*--page-margin (= 100vw), so
         it hits both edges WITHOUT widening the page (it never exceeds the
         viewport; cards that overflow it scroll internally). */
      max-width: none;
      margin-inline: calc(-1 * var(--page-margin, 16px));
      padding-inline: var(--page-margin, 16px);
      scroll-padding-inline-start: var(--page-margin, 16px);
    }

    .variant-picker[data-mobile-overflow] .variant-option__scroller::-webkit-scrollbar {
      display: none;
    }

    .variant-picker[data-mobile-overflow] .variant-option__scroller > .variant-option__button-label {
      flex: 0 0 auto;
      min-width: max-content;
      scroll-snap-align: start;
    }
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:302) */
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);
    }
  }

  .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:303) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:304) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */

/* START_SNIPPET:year-range-filter (INDEX:305) */
.year-range {
    --year-range-handle-size: 14px;

    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    container-type: inline-size;
    padding-block: var(--padding-xs);
    /* Keep input borders + slider handles off the panel edge so nothing clips. */
    padding-inline: calc(var(--year-range-handle-size) / 2);
  }

  .year-range--horizontal {
    min-width: 280px;
  }

  /* Slider: native dual range inputs stacked over a shared track. The track is
     inset by half a handle so the square handles never overflow at the extremes. */
  .year-range__slider {
    position: relative;
    height: var(--year-range-handle-size);
    padding-inline: calc(var(--year-range-handle-size) / 2);
  }

  /* Full-width gray bar with the selected span filled in the foreground color.
     Painted as one gradient so it always reads cleanly behind the handles. */
  .year-range__track {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    pointer-events: none;
    background: linear-gradient(
      to right,
      var(--color-border) 0,
      var(--color-border) var(--from-pct, 0%),
      var(--color-foreground) var(--from-pct, 0%),
      var(--color-foreground) var(--to-pct, 100%),
      var(--color-border) var(--to-pct, 100%),
      var(--color-border) 100%
    );
  }

  /* Scoped under .year-range (0,2,0) so the background/appearance resets beat
     base.css's global `input:not([type=checkbox],[type=radio])` rule (0,1,1),
     which would otherwise paint --color-input-background over the track. */
  .year-range .year-range__range {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: var(--year-range-handle-size);
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    /* Let pointer events through the input body; only the thumb is interactive,
       so both overlapping handles stay grabbable. */
    pointer-events: none;
  }

  .year-range__range--min {
    z-index: 3;
  }

  .year-range__range--max {
    z-index: 4;
  }

  .year-range__range::-webkit-slider-runnable-track {
    height: var(--year-range-handle-size);
    background: transparent;
    border: 0;
  }

  .year-range__range::-moz-range-track {
    height: var(--year-range-handle-size);
    background: transparent;
    border: 0;
  }

  .year-range__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: var(--year-range-handle-size);
    height: var(--year-range-handle-size);
    border-radius: 0;
    border: 0;
    background: var(--color-foreground);
    cursor: pointer;
    pointer-events: auto;
  }

  .year-range__range::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--year-range-handle-size);
    height: var(--year-range-handle-size);
    border-radius: 0;
    border: 0;
    background: var(--color-foreground);
    cursor: pointer;
    pointer-events: auto;
  }

  .year-range__range:focus-visible {
    outline: none;
  }

  .year-range__range:focus-visible::-webkit-slider-thumb {
    outline: var(--focus-outline-width, 2px) solid var(--color-foreground);
    outline-offset: 2px;
  }

  .year-range__range:focus-visible::-moz-range-thumb {
    outline: var(--focus-outline-width, 2px) solid var(--color-foreground);
    outline-offset: 2px;
  }

  /* Inline From / To labels — the slider is the primary control, these are the
     secondary read-out. Click a year to edit it in place. */
  .year-range__values {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }

  .year-range__value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    min-width: 0;
  }

  .year-range__value--to {
    text-align: right;
  }

  /* Muted "From:" / "To:" labels */
  .year-range__value-label {
    color: var(--color-text-2, var(--color-foreground));
    font-size: var(--font-paragraph--size);
    opacity: 0.7;
  }

  .year-range__value-label::after {
    content: ':';
  }

  /* Prominent year value — paragraph preset, bolded, matching button-tertiary.
     Shared type for the static label and the inline editor. */
  .year-range__value-year,
  .year-range__value-input {
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    font-weight: 700;
    color: var(--color-primary);
  }

  .year-range__value-year {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  @media (hover: hover) {
    .year-range__value-year:hover {
      color: var(--color-primary-hover);
    }
  }

  .year-range__value-year:focus-visible {
    outline: var(--focus-outline-width, 2px) solid var(--color-foreground);
    outline-offset: 2px;
  }

  /* Scoped under .year-range (0,2,0) so the background/border/padding resets beat
     the global input rule (0,1,1) — keeps the inline editor borderless. */
  .year-range .year-range__value-input {
    width: 5ch;
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid currentColor;
    padding: 0;
    text-align: inherit;
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .year-range__value-input:focus-visible {
    outline: none;
  }

  .year-range__value-input::-webkit-outer-spin-button,
  .year-range__value-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .year-range__value--to .year-range__value-year,
  .year-range__value--to .year-range__value-input {
    text-align: right;
  }
/* END_SNIPPET:year-range-filter */