/** Shopify CDN: Minification failed

Line 19163:2 Unexpected "{"
Line 19163:3 Expected identifier but found "%"
Line 19164:23 Unexpected "1024"
Line 19165:3 Expected identifier but found "%"
Line 19174:4 Unexpected "{"
Line 19174:5 Expected identifier but found "%"
Line 19177:65 Expected identifier but found whitespace
Line 19178:5 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:cart-drawer (INDEX:3) */
/*
   * The drawer host must occupy no space in the document.
   *
   * Its only children are a <template> and a closed <dialog> — both display:none — but
   * as an unknown element it defaults to `display: inline`, which still generates a
   * line box in this section's wrapper. That was harmless while the component lived
   * inside the header (snippets/header-actions.liquid); now that it is a body-level
   * section between #header-group and <main>, the line box became ~22px of real page
   * height that pushed every page's content down — and on the home page it left
   * homepage-scroll-snap permanently 22px short of its pinned position, so
   * #isPinned() (assets/homepage-scroll-snap.js) never returned true and the pager
   * never engaged: the page could not be scrolled or paged past its first section.
   */
  cart-drawer-component.cart-drawer {
    display: block;
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:client-services (INDEX:4) */
.client-services {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-xl);
  }


  .client-services__title {
    margin-block-end: max(0px, calc(var(--margin-2xl) - var(--gap, 0px)));
    font-size: 24px;
    font-weight: 700;
    line-height: var(--line-height--body-tight);
    color: var(--color-foreground);
  }

  .client-services__nav-details {
    width: 100%;
  }

  .client-services__nav-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xs);
    font-family: var(--font-heading--family);
    font-size: var(--font-size--xs);
    font-weight: var(--font-heading--weight);
    line-height: var(--line-height--body-tight);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  .client-services__nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    margin-block-start: var(--margin-xl);
  }

  .client-services__nav-link {
    display: inline-block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height--body-tight);
    /* Full-contrast foreground, not --color-foreground-subdued: that token is 3.83:1 on
       scheme-1 and fails WCAG AA for text. The active state is carried by weight and the
       underline, never by color alone. */
    color: var(--color-foreground);
    text-decoration: none;
    text-underline-offset: 0.3em;
  }

  .client-services__nav-link:hover {
    text-decoration: underline;
  }

  .client-services__nav-link--active {
    font-weight: var(--font-heading--weight);
    text-decoration: underline;
  }

  .client-services__content {
    min-width: 0;
  }

  /* Blocks that declare "tag": null (text, button) render bare and carry their own
     --width. Blocks that don't (page-content, and every @app block) get a Shopify-
     generated .shopify-block wrapper with no width at all. layout-panel-flex sets
     align-items: flex-start, so that wrapper shrink-wraps to fit-content and anything
     inside sized at 100% — such as the Gorgias iframe, which does set width="100%" —
     resolves against a collapsed box. */
  .client-services__content .shopify-block {
    width: 100%;
  }

  /* rte-formatter is a custom element the theme never styles, so it defaults to inline. */
  .client-services__content rte-formatter {
    display: block;
    width: 100%;
  }

  /* Only for embeds that set no width of their own: a bare <iframe> falls back to the
     HTML default of 300px. Iframes that do declare a width keep it. */
  .client-services__content rte-formatter iframe:not([width]) {
    width: 100%;
  }

  .client-services__content rte-formatter :is(iframe, img, video, table) {
    max-width: 100%;
  }

  @media screen and (max-width: 749px) {
    .client-services__nav--divider .client-services__nav-details {
      padding-block-end: var(--padding-sm);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }
  }

  /* ------------------------------------------------- contact page only */
  [data-template='client-services-contact'] .client-services__content .group-block-content.layout-panel-flex--row {
    gap: 24px;
  }

  @media screen and (min-width: 750px) {
    [data-template='client-services-contact']  .group-block-content.layout-panel-flex {
      gap: 48px !important;
    }

    .client-services {
      grid-template-columns: minmax(0, var(--client-services-nav-width, 200px)) minmax(0, 1fr);
      gap: 0;
    }

    .client-services__nav {
      padding-inline-end: var(--padding-2xl);
    }

    .client-services__nav--divider {
      border-inline-end: var(--style-border-width) solid var(--color-border);
    }

    .client-services__nav-toggle {
      display: none;
    }

    .client-services__content {
      padding-inline-start: var(--padding-3xl);
    }
  }

  /* The <h4>s in these columns ("Customer care", "Telephone", "Hours of operation", "Leave us a message") . */
  [data-template='client-services-contact'] .client-services__content .rte h4 {
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: 1.143; /* 16px on 14px */
    letter-spacing: normal; /* 0% */
    text-transform: uppercase;
  }

  [data-template='client-services-returns'] .client-services__content .text-block > * {
    max-width: 545px;
  }
/* END_SECTION:client-services */

/* START_SECTION:collection-links (INDEX:5) */
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:editorial-banner (INDEX:13) */
.editorial-banner {
    width: 100%;
  }

  .editorial-banner__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .editorial-banner__media {
    position: relative;
    width: 100%;
    min-height: var(--editorial-banner-height, 400px);
    overflow: hidden;
    background: #f0f0f0;
  }

  .editorial-banner__image {
    display: block;
    width: 100%;
    height: var(--editorial-banner-height, 400px);
    object-fit: cover;
  }

  .editorial-banner__image--placeholder {
    opacity: 0.35;
  }
/* END_SECTION:editorial-banner */

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

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

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

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

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

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

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

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

/* START_SECTION:footer-payment-methods (INDEX:17) */
.footer-payment-methods {
    width: 100%;
  }

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

  .footer-payment-methods__item {
    display: flex;
    align-items: center;
  }

  .footer-payment-methods__img {
    display: flex;
    align-items: center;
    height: var(--payment-icon-list-height);
    line-height: 0;
  }

  .footer-payment-methods__img svg {
    height: 100%;
    width: auto;
    object-fit: contain;
  }
/* END_SECTION:footer-payment-methods */

/* START_SECTION:footer-utilities (INDEX:18) */
.footer-utilities {
    border-top: 1px solid #d9dce0;
  }

  .utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    color: var(--color-foreground);

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

  /* Each icon-payment-*.svg's viewBox is now cropped tight to that mark's own
     ink (measured from Figma node 4138:10248, "footer/payment_logos/desktop"),
     not to a shared row height - Figma sizes these marks individually (heights
     range ~9-13px at the desktop frame's own scale), so a single shared
     container height here would misrepresent every mark that isn't Mastercard.
     The desktop per-mark width/height rules below (86akg295j) are the measured
     Figma values; do not collapse them back into one height variable. The
     artwork already carries its intended tones (e.g. Mastercard's two
     gray/black circles); a brightness(0) filter here previously flattened
     those to solid black, which is a defect - never reintroduce a colour
     filter on this row. */

  @media screen and (min-width: 750px) {
    .footer-utilities .payment-icon-list__img--visa,
    .footer-utilities .payment-icon-list__img--visa svg {
      width: 29.79px;
      height: 9.04px;
    }

    .footer-utilities .payment-icon-list__img--mastercard,
    .footer-utilities .payment-icon-list__img--mastercard svg {
      width: 16.66px;
      height: 10.23px;
    }

    .footer-utilities .payment-icon-list__img--amex,
    .footer-utilities .payment-icon-list__img--amex svg {
      width: 35.57px;
      height: 12.36px;
    }

    .footer-utilities .payment-icon-list__img--paypal,
    .footer-utilities .payment-icon-list__img--paypal svg {
      width: 35.06px;
      height: 9.44px;
    }

    .footer-utilities .payment-icon-list__img--apple-pay,
    .footer-utilities .payment-icon-list__img--apple-pay svg {
      width: 31.72px;
      height: 13.17px;
    }

    .footer-utilities .payment-icon-list__img--google-pay,
    .footer-utilities .payment-icon-list__img--google-pay svg {
      width: 32.55px;
      height: 12.53px;
    }

    .footer-utilities .payment-icon-list__img--shop-pay,
    .footer-utilities .payment-icon-list__img--shop-pay svg {
      width: 41.55px;
      height: 9.86px;
    }

    .footer-utilities .payment-icon-list__img--klarna,
    .footer-utilities .payment-icon-list__img--klarna svg {
      width: 44.24px;
      height: 10.14px;
    }
  }

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

  .footer-utilities__group-copyright .footer-utilities__text {
    font-weight: 700;
    color: var(--color-foreground);
  }

  /* Mobile: locale (left) | copyright (right) on row 1, payment icons full-width on row 2 */
  /* Block order in footer-group.json: copyright (1st) | payment_icons (2nd) | locale_selector (3rd) */
  @media screen and (max-width: 749px) {
    .footer-utilities .payment-icon-list__list {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      width: 100%;
      gap: 12px;
    }

    /* Icons keep their natural aspect ratio and shrink by the same factor,
       so a full row always fits without wrapping on narrow screens. */
    .footer-utilities .payment-icon-list__item,
    .footer-utilities .payment-icon-list__img {
      flex: 0 1 auto;
      width: auto;
      min-width: 0;
    }

    .footer-utilities .payment-icon-list__img {
      justify-content: center;
    }

    /* The row shrinks as a whole via the gap/flex-shrink behaviour above it, not
       by distorting individual marks - each icon keeps the shared container
       height (see block setting `icon_height`) and its Figma-relative width. */
    .footer-utilities .payment-icon-list__img svg {
      width: 100%;
      max-width: 100%;
    }

    .utilities {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      row-gap: 20px;
      align-items: center;
      text-align: left;
      padding-block-start: 0 !important;
    }

    .utilities > * {
      grid-column: 1;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      justify-self: start;
      text-align: left;
    }

    .utilities > *:nth-child(3) {
      grid-row: 1;
    }

    .utilities > *:nth-child(1) {
      grid-row: 2;
    }

    .utilities > *:nth-child(2) {
      grid-row: 3;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:19) */
.footer-divider {
    width: 100%;
    height: 1px;
    background: #d9dce0;
  }

  .footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--footer-gap);
    align-items: flex-start;
  }

  .footer-content > * {
    width: auto !important;
    min-width: 0 !important;
  }

  .footer-content > *:has(.email-signup-block) {
    max-width: 314px;
  }

  .footer-content > .group-block:not(:has(.email-signup-block)) > .group-block__media-wrapper {
    display: none;
  }

  /* Desktop: email on left, menus fill remaining space with equal internal spacing */
  @media screen and (min-width: 990px) {
    .footer-content {
      flex-wrap: nowrap;
    }

    .footer-content > .group-block:not(:has(.email-signup-block)) {
      flex: 1 1 0% !important;
      width: 0 !important;
    }

    .footer-content > .group-block:not(:has(.email-signup-block)) > .group-block-content {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      justify-content: space-between !important;
      gap: var(--footer-gap);
      width: 100%;
    }

    .footer-content > .group-block:not(:has(.email-signup-block)) > .group-block-content > * {
      width: auto !important;
      min-width: 0 !important;
      flex: 0 1 auto !important;
    }
  }

  /* Tablet: email left, menus 2x2 beside it */
  @media screen and (max-width: 989px) and (min-width: 750px) {
    .footer-content > .group-block:not(:has(.email-signup-block)) {
      flex: 1 1 0%;
    }

    .footer-content > .group-block:not(:has(.email-signup-block)) > .group-block-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--footer-gap);
    }
  }

  /* Mobile: stack vertically, with each menu on its own row */
  @media screen and (max-width: 749px) {
    .footer-content {
      flex-direction: column;
      gap: 20px;
      padding-block-end: 16px !important;
    }

    .footer-content > * {
      width: 100% !important;
      max-width: none !important;
    }

    .footer-content > .group-block:not(:has(.email-signup-block)) > .group-block-content {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    footer .email-signup__input-group--underline {
      box-shadow: none;
      border-block-end: var(--border-width) solid var(--color-input-border);
    }
  }

  /* Footer titles: use section settings (email signup and menus) */
  footer .footer-content .menu .menu__heading,
  footer .footer-content .menu .menu__heading *,
  footer .footer-content .email-signup__heading,
  footer .footer-content .text-block.h1,
  footer .footer-content .text-block.h2,
  footer .footer-content .text-block.h3,
  footer .footer-content .text-block.h4,
  footer .footer-content .text-block.h5,
  footer .footer-content .text-block.h6,
  footer .footer-content .text-block.h1 > *,
  footer .footer-content .text-block.h2 > *,
  footer .footer-content .text-block.h3 > *,
  footer .footer-content .text-block.h4 > *,
  footer .footer-content .text-block.h5 > *,
  footer .footer-content .text-block.h6 > *,
  footer .footer-content .text-block :is(h1, h2, h3, h4, h5, h6) {
    font-size: var(--footer-title-font-size);
    font-weight: var(--footer-title-font-weight);
    text-transform: var(--footer-title-text-transform);
  }

  /* Vertical space between menu and social links: use section setting */
  footer .footer-content .menu .menu__item + .menu__item,
  footer .footer-content .social-links-menu .social-links-menu__item + .social-links-menu__item {
    margin-block-start: var(--footer-link-spacing);
  }

  footer .footer-content .footer-menu-columns .menu__item,
  footer .footer-content .footer-menu-columns .menu__item > * {
    /* Figma calls for 13px here; --font-paragraph--size is the sitewide body
       text size (14px), so it's overridden with a real font-size instead of
       changed globally. The `> *` is needed because .paragraph > * (base.css)
       sets font-size directly on the link, which otherwise wins over the
       inherited value from .menu__item. */
    font-size: 13px;
  }

  footer .footer-content .footer-menu-columns .menu__item {
    --font-paragraph--weight: 500;
    --color: var(--color-foreground-heading);
  }

  footer
    .footer-content
    > .group-block:has(.email-signup-block)
    .text-block.rte {
    color: #b3b3b3;
    font-size: 11px;
    font-weight: 500;
  }

  footer .footer-content .email-signup__input::placeholder {
    color: var(--color-foreground-subdued);
    font-size: 11px;
    font-weight: 500;
  }

  footer .footer-content .email-signup__input-group .email-signup__input--underline {
    padding-block: 12px 2px;
  }

  footer
    .email-signup__input--underline
    + .email-signup__button--integrated {
    align-self: flex-end;
    margin-block-end: 2px;
  }

  footer
    .email-signup__input--underline
    + .email-signup__button--integrated
    > .email-signup__button-icon,
  footer
    .email-signup__input--underline
    + .email-signup__button--integrated
    > .email-signup__button-icon
    > svg {
    width: 5px;
    height: 7px;
  }

  footer .social-links-menu .details-content ul {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 16px;
  }

  footer .social-links-menu .social-links-menu__item + .social-links-menu__item {
    margin-block-start: 0;
  }

  footer .social-links-menu .social-links-menu__item:first-child {
    transform: translateY(3px);
  }

  footer .social-links-menu__label {
    display: none;
  }
/* END_SECTION:footer */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .announcement-bar__close {
    display: none;
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;

    /* Sits above the full-bleed announcement link */
    z-index: 1;

    @media screen and (min-width: 750px) {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .announcement-bar__close .svg-wrapper {
    display: block;
    width: 10px;
    height: 10px;
  }

  .announcement-bar__close .svg-wrapper svg {
    width: 100%;
    height: 100%;
  }
/* END_SECTION:header-announcements */

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

  @media screen and (max-width: 1023px) {
    body {
      --header-height: 48px;
    }
  }

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

    /* Menu items and header icons: black */
    --menu-top-level-font-color: #000;
    --menu-top-level-font-color-rgb: 0 0 0;

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

  /*
   * Was hardcoded to #000, which is correct for the normal opaque header but ignored the
   * white-on-transparent switch above (--menu-top-level-font-color / --color-foreground),
   * leaving nav links and action icons (search/account/cart) black even when the header
   * itself and its logo had already gone white over a transparent, image-backed pane.
   * Both variables already resolve to #000 outside .header[transparent] and whenever the
   * transparent header goes opaque (data-sticky-state='active' or menu hover), so this is
   * a like-for-like swap, not a behavior change for the non-transparent header.
   */
  .header .menu-list__link {
    color: var(--menu-top-level-font-color);
  }

  .header .header-actions__action {
    color: var(--color-foreground);
  }

  /* Shared top-row nav typography */
  .header :is(.menu-list__link, .menu-list--mobile .menu-list__item) {
    font-family: var(--header-nav-font-family);
    font-size: var(--header-nav-font-size);
    font-weight: var(--header-nav-font-weight);
    text-transform: var(--header-nav-text-transform);
  }

  /*
   * Hovering a header action is signalled by dimming the others, not by recolouring
   * anything - see the `.header__column:has(... :hover)` rule further down, which drops
   * every non-hovered action in the column to --opacity-subdued-text. That is the same
   * language the nav uses (blocks/_header-menu.liquid subdues the unhovered links), and
   * it leaves the action itself on --color-foreground, so it stays white over a hero and
   * dark on a solid header like everything else in here.
   *
   * There were five rules here forcing #000 on hover instead - on the action's text, the
   * account icon, and the bag's body, handle and count. They are stock Horizon's, from a
   * header that was always solid, where --color-foreground already resolves to black and
   * they therefore did nothing. On the transparent header they did: hovering HERITAGE
   * turned it black against the hero, and the bag went black while the search icon beside
   * it stayed white - because .header-actions__action:not(.account-button) svg below
   * outranks the inherited colour, so the #000 never reached the icons at all and only
   * the bag's own explicit fill/stroke rules moved. Don't reintroduce them.
   */

  /*
   * Stock Horizon rule hardcoded this to #000, which stayed black even once the
   * header itself, its logo and the nav links had already gone white over a
   * transparent, image-backed pane (see --color-foreground above). Point it at
   * the same variable everything else here already follows, so the search/cart
   * icons match without a second transparent/opaque determination.
   */
  .header .header-actions__action:not(.account-button) svg {
    color: var(--color-foreground);
  }

  /* Header uses 1024px breakpoint: treat as mobile below that so desktop-only content stays hidden */
  @media screen and (max-width: 1023px) {
    .header .mobile\:hidden {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  #header-component .header-menu {
    display: none;
  }

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

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

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

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;

    /* Drives the contrast scrim below; 0 wherever this header paints itself opaque. */
    --header-scrim-opacity: 1;

    /*
     * Drives the open underlay's fill below (.header__underlay-open, and --color-submenu in
     * blocks/_header-menu.liquid which that underlay's third gradient stop reads): 95%
     * white over a 15px backdrop-filter blur, per Figma (mega menu/desktop frame) - frosted
     * glass, not a flat fill. A prior fix mistakenly forced this to 100% on menu-open
     * to solve an unrelated bug (the dimmed region below the panel wasn't blurring, fixed
     * in PR 282's ::before layer) and in doing so hid the blur entirely, which read as the
     * page bleeding through unblurred rather than as frosted glass (17tqamempn7 - Biro's
     * review). Restored to 95% by the menu-open rule further below, which is unconditional
     * (not nested in this [transparent] branch) so it still applies once the header goes
     * sticky and this branch stops matching.
     */
    --header-panel-opacity: 95%;

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

    /*
     * The top-level nav links (.menu-list__link) read their color from this variable
     * instead of --color-foreground directly (see blocks/_header-menu.liquid), and .header
     * otherwise hardcodes it to black for the normal opaque header. Point it at
     * --color-foreground so it follows the same white-when-transparent /
     * dark-when-opaque switch as the logo and everything else here, instead of staying
     * black over a transparent header.
     */
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    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-scrim-opacity: 0;
      --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-scrim-opacity: 0;
      --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);
    }
  }

  /*
   * Panel fill must be the same 95%-opaque frosted glass (95% white + 15px backdrop blur,
   * per Figma) whenever a mega menu is open, no matter the header's transparent/opaque or
   * scrolled/sticky state (17tqamempn7 - Biro's review). Pinned here rather than left to
   * the 95% default above, because that lives inside .header[transparent]'s unscrolled
   * state - once the header goes sticky (data-sticky-state='active') that branch stops
   * applying, so without this unconditional rule the value would only be reliable via the
   * --header-panel-opacity, 95% fallback at each consumer (.header__underlay-open below,
   * --color-submenu in blocks/_header-menu.liquid) rather than guaranteed from one place.
   * Kept as its own unconditional rule, scoped only to the menu-open conditions themselves,
   * so it applies independent of --header-scrim-opacity and the color-scheme swap, which
   * stay deliberately confined to the transparent header's legibility problem above.
   *
   * This was briefly forced to 100% (opaque, no visible blur) to fix an unrelated bug -
   * the dimmed region below the panel wasn't blurring, since fixed properly in PR 282's
   * .header__underlay-open::before layer - which hid the intended frosted-glass look
   * entirely rather than restoring it. Restoring 95% here was necessary but not
   * sufficient: the blur it turns on is a *backdrop* filter, so it also needs no ancestor
   * of the underlays to be a backdrop root. The one that was is the sticky header's
   * `view-transition-name` - see the `.header[data-sticky-state='active']` rules below,
   * which is why the panel blurred at the top of the page but not once scrolled
   * (17tqamempn7). `.header`'s `contain: layout` was investigated and cleared as a cause:
   * measured in Chromium, layout/paint/strict containment, `isolation: isolate`,
   * `display: flow-root` and `will-change: transform` all leave a descendant's
   * backdrop-filter sampling real page content; only `view-transition-name`,
   * `opacity < 1` and `filter` cut it off.
   */
  .header:has(.mega-menu__list:hover),
  .header:has(.menu-list__link:is(:hover, [aria-expanded='true'])),
  .header:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
    --header-panel-opacity: 95%;
  }

  /*
   * Contrast scrim for the transparent header. Over a full-bleed hero the logo, nav and
   * action icons are white with nothing behind them, so a light patch of artwork under
   * the header leaves them unreadable. This darkens the header's own box from its top
   * edge down to nothing at its bottom edge, so it reads as a shadow on the artwork
   * rather than as a bar.
   *
   * A pseudo-element rather than a background on .header, because .header::before is
   * already the search panel's flat fill. --layer-lowest puts it in the same negative
   * layer as .header__underlay-closed and so below every row's content; it paints over
   * that underlay rather than under it (pseudo-elements come last in DOM order), which
   * is why the opaque states have to switch it off rather than rely on being covered.
   *
   * That switch is --header-scrim-opacity, set from inside the opaque branches of
   * .header[transparent] above instead of from a parallel selector list here, so it
   * stays next to the state it belongs to. The two opaque states that don't go through
   * those branches need nothing: the search panel's .header::before fill and the mobile
   * drawer's .header__row background are both opaque and both paint above this.
   *
   * Timed off --header-content-transition-timing so it fades in step with the nav and
   * logo colour switch it exists to support, in both directions.
   */
  .header[transparent]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--layer-lowest);
    background: linear-gradient(
      to bottom,
      rgb(0 0 0 / 28%) 0%,
      rgb(0 0 0 / 12%) 45%,
      rgb(0 0 0 / 0%) 100%
    );
    opacity: var(--header-scrim-opacity, 1);
    transition: opacity var(--header-content-transition-timing);
    pointer-events: none;
  }

  /*
   * The search panel opens flush under the header and is solid, so a transparent header
   * above it would still show the page scrolled behind it. This switches its content to
   * the same solid-state colours and logo the sticky and hovered branches inside
   * .header[transparent] use; the background itself is the .header::before fill below.
   *
   * It can't be folded into those branches. The panel is a modal dialog, so the header
   * goes inert and :hover never fires, and the panel renders at the end of <body> rather
   * than inside the header, so :focus-within can't see it either — hence :has() on the
   * root. Kept flat rather than nested so it doesn't depend on a non-leading `&`.
   *
   * Deliberately no --closed-underlay-height here, unlike those branches. It would flip
   * the underlay's computed height 0px <-> 100% on every open and close, and that box
   * carries `transition: height var(--animation-speed-slow)` — so each cycle started a
   * 0.2s height transition. Both values happen to resolve to a used height of 0 on a
   * transparent header (percentage against a content-height containing block), so it is
   * usually invisible; but closeDialog() restores body.position and re-scrolls while
   * that transition is live, and the moment the containing block is definite the 100%
   * resolves to the full header height and the background visibly slides up as it
   * collapses. Nothing here needs the underlay any more.
   */
  :root:has(.search-modal dialog[open]) .header[transparent] {
    --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;
  }

  /*
   * ...and paint the header flat while the panel is open, for a transparent and a solid
   * header alike. Its normal fill is the top/bottom row colours mixed to 95% over a 15px
   * backdrop blur — frosted glass, not a blend mode. The panel below it is a flat fill,
   * so the page still showing faintly through the header, blurred, reads as a smudge
   * along the top of an otherwise clean surface.
   *
   * Its own layer rather than a swap of the underlay's background: a gradient does not
   * interpolate to a flat colour, so a transition on `background` snaps however it is
   * written. Fading an opaque layer in over the frosting is the same result and does
   * animate. At full opacity it covers the blur, so the blur needs no switch of its own
   * — which is just as well, since backdrop-filter would snap too.
   *
   * Deliberately on .header and not inside .header__underlay-closed, whose height is
   * zero on a transparent header. Hanging the fill off that box means opening the box,
   * and the box brings its own frosted gradient plus a 0.2s height transition — so the
   * fill would uncover frosting on the way out and the header would then linger,
   * shrinking, for 0.2s after the panel had gone. `contain: layout` on .header already
   * makes it the containing block for this, at full header height, in both states.
   *
   * That containment was briefly swapped for `position: relative` on the theory that it
   * was the backdrop-filter root starving the underlays' blur; measurement showed it is
   * not one in Chromium, and the swap changed neither the blur nor a single box
   * dimension, so it has been reverted (17tqamempn7). The real backdrop root is the
   * sticky header's `view-transition-name` — see the `.header[data-sticky-state]` rules
   * below.
   */
  .header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--color-scheme-top-row);
    opacity: 0;
    transition: opacity var(--animation-speed) var(--ease-out-quad);
    pointer-events: none;
  }

  /*
   * Matched to search-panel-slide-in/out in snippets/search-modal.liquid, in both
   * directions — which takes two different signals, because the dialog's own timing is
   * asymmetric. showModal() sets [open] as the slide-in starts, so [open] alone is
   * correct going in. Coming out, dialog.js adds .dialog-closing, awaits the slide-out
   * and only then drops [open] — so keying the fade-out on [open] too would hold the
   * fill for the whole animation and drop it in one frame after the panel had already
   * gone. :not(.dialog-closing) starts the fade with the panel instead.
   */
  :root:has(.search-modal dialog[open]:not(.dialog-closing)) .header::before {
    opacity: 1;
  }

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

  /*
   * Biro's requirement is that the mega menu panel is slightly transparent AND slightly
   * blurred whenever it is open, scrolled or not — the same universality the
   * --header-panel-opacity rule further up already gives the transparency half
   * (17tqamempn7). The blur half is a *backdrop* filter on .header__underlay-open, and a
   * named view transition breaks it: per the View Transitions spec an element with a
   * `view-transition-name` other than `none` has layout containment and forms a stacking
   * context, which makes it a CSS backdrop-filter root — a boundary its descendants'
   * backdrop-filter cannot sample past. Since the name above is applied on exactly the
   * scrolled state, the panel frosted correctly at the top of the page and went
   * tinted-but-sharp the moment the header went sticky.
   *
   * Measured in Chromium against hard-edged page content, rather than inferred: of the
   * properties on this element, only `view-transition-name`, `opacity < 1` and `filter`
   * kill a descendant's backdrop-filter. `contain: layout`/`paint`/`strict`,
   * `isolation: isolate`, `display: flow-root` and `will-change: transform` do not — so
   * .header's own `contain: layout style` stays, and the sibling `opacity: 1` above is
   * only a hazard mid-transition, which a menu open over an already-active header never
   * reaches.
   *
   * Dropping the name only while a menu is open, rather than dropping it outright: the
   * name exists so the sticky header keeps its own snapshot during the theme's
   * same-document view transitions (facets, results-list, cart items, product card, zoom
   * dialog — see assets/view-transitions.js), all of which are driven from page content
   * with the header menus closed. The two states are mutually exclusive in practice, so
   * the transition is not being traded away, only stood down for the one state that
   * needs the blur. Same treatment, and same reason, as the drawer rule below.
   */
  .header[data-sticky-state='active']:has(.mega-menu__list:hover),
  .header[data-sticky-state='active']:has(.menu-list__link:is(:hover, [aria-expanded='true'])),
  .header[data-sticky-state='active']:has(
      .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])
    ) {
    view-transition-name: none;
  }

  /* Stabilize header while drawer is open — no opacity/view-transition thrash */
  .header:has(#Details-menu-drawer-container[open]),
  .header:has(#Details-menu-drawer-container[open])[data-sticky-state='active'] {
    transition: none;
    view-transition-name: none;
  }

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

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

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

  .header__underlay-closed,
  .header__underlay-open {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
  }

  /*
   * --header-panel-background is the home page's override, written onto the header by
   * homepage-scroll-snap.js from whichever panel is behind it (see its #syncHeaderOpacity).
   * Everywhere else it is unset and the header's own colour scheme applies as before.
   *
   * The fill exists so the header stays legible once it goes opaque, and the scheme it is
   * built from is white — the page's own colour on every other template, so the two agree
   * by default. The home page is a pager whose panels each carry their own scheme, so there
   * the two can disagree, and a white bar above a panel that isn't white reads as a seam
   * across the top of the page rather than as the header's background.
   *
   * Deliberately only here. The open underlay below is the mega menu's own surface, which
   * is that white by design, and .header::before is the search panel's — both are surfaces
   * the header is joining, not the panel it is sitting on.
   */
  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      color-mix(in srgb, var(--header-panel-background, var(--color-scheme-top-row)) 95%, transparent) 0
        var(--top-row-height),
      color-mix(in srgb, var(--header-panel-background, var(--color-scheme-bottom-row)) 95%, transparent)
        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(
      color-mix(in srgb, var(--color-scheme-top-row) var(--header-panel-opacity, 95%), transparent) 0
        var(--top-row-height),
      color-mix(in srgb, var(--color-scheme-bottom-row) var(--header-panel-opacity, 95%), transparent)
        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);
  }

  /* Dim the page behind expanded desktop menus without restoring the mobile drawer backdrop.
   * Blurred, not just dimmed: .header__underlay-open above this covers only the header/menu
   * panel height, so without its own backdrop-filter this layer left everything below the
   * panel dimmed but sharp — the menu only "blurred the background at the top" (17tqamempn7). */
  @media screen and (min-width: 1024px) {
    #header-component[data-menu-style='menu'] .header__underlay-open::before {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100dvh;
      background: rgb(0 0 0 / 35%);
      -webkit-backdrop-filter: blur(15px);
      backdrop-filter: blur(15px);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--submenu-animation-speed) var(--ease-out-cubic);
    }

    #header-component[data-menu-style='menu']:has(.menu-list__link[aria-expanded='true'])
      .header__underlay-open::before {
      opacity: 1;
    }
  }

  /* 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(
        color-mix(in srgb, var(--color-scheme-top-row) 95%, transparent) 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: 1023px) {
    .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: 1024px) {
      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: 1023px) {
      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;

    @media screen and (min-width: 1024px) {
      gap: var(--gap-2xs);
    }

    .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: 1024px) {
        --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: 1023px) {
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;

      /* Wireframe mobile: menu | centered logo | search | cart */
      &:not(.header__columns--mobile-logo-left) {
        --header-template-columns: var(--header-mobile-bookend) 1fr auto auto;

        position: relative;
        grid-template-areas: 'menu . search cart';
        padding-inline-start: var(--page-margin);
        padding-inline-end: 30px;

        .header__drawer,
        header-drawer {
          grid-area: menu;
          position: relative;
          z-index: 1;
        }

        .menu-drawer-container .header__icon--summary {
          justify-content: flex-start;
        }

        .header-logo {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          z-index: 0;
          min-width: 0;
        }

        .search-action {
          grid-area: search;
          position: relative;
          z-index: 1;
          margin-inline-end: 20px;
        }

        header-actions {
          grid-area: cart;
          position: relative;
          z-index: 1;
        }
      }
    }
  }

  /* 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:not(.header__columns--mobile-logo-left) {
    --header-template-columns: var(--header-mobile-bookend) 1fr auto auto;

    position: relative;
    grid-template-areas: 'menu . search cart';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline-start: var(--page-margin);
    padding-inline-end: 30px;

    .header__drawer,
    header-drawer {
      grid-area: menu;
      position: relative;
      z-index: 1;
    }

    .menu-drawer-container .header__icon--summary {
      justify-content: flex-start;
    }

    .header-logo {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 0;
      min-width: 0;
    }

    .search-action {
      grid-area: search;
      position: relative;
      z-index: 1;
      margin-inline-end: 20px;
    }

    header-actions {
      grid-area: cart;
      position: relative;
      z-index: 1;
    }
  }

  /* Mobile layout: logo left; search, cart, menu right (theme setting: mobile_logo_left) */
  @media screen and (max-width: 1023px) {
    .header__columns.header__columns--mobile-logo-left {
      --header-template-columns: 1fr auto auto var(--header-mobile-bookend);
      grid-template-areas: 'logo search cart menu';
      padding-inline-start: var(--page-margin);
      padding-inline-end: 30px;

      .header-logo {
        grid-area: logo;
        justify-self: start;
        min-width: 0;
      }

      .search-action {
        grid-area: search;
        margin-inline-end: 20px;
      }

      header-actions {
        grid-area: cart;
      }

      header-drawer {
        grid-area: menu;
      }
    }
  }

  #header-component[data-menu-style='drawer'] .header__columns.header__columns--mobile-logo-left {
    --header-template-columns: 1fr auto auto var(--header-mobile-bookend);
    grid-template-areas: 'logo search cart menu';
    padding-inline-start: var(--page-margin);
    padding-inline-end: 30px;

    .header-logo {
      grid-area: logo;
      justify-self: start;
      min-width: 0;
    }

    .search-action {
      grid-area: search;
      margin-inline-end: 20px;
    }

    header-actions {
      grid-area: cart;
    }

    header-drawer {
      grid-area: menu;
    }
  }

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

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

    @media screen and (max-width: 1023px) {
      width: 16px;
      height: 24px;
    }

    /*
     * Box alignment (flex align-items: center) already lines up the icon's
     * geometric box-center with the nav text's line box, but the caps-only
     * nav text has no descender, so its ink sits ~1.4px above a
     * box-centered icon. Measured against the header-nav font (Scto Grotesk
     * B, 13px, --header-nav-line-height): icon ink-center sat 1.37px below
     * the nav-link ink-center. Desktop-only — there's no adjacent nav text
     * to align to on the mobile icon row.
     */
    @media screen and (min-width: 1024px) {
      transform: translateY(-1.4px);
    }
  }

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

  /*
   * The mobile drawer is the other opaque panel .header[transparent]::after's comment
   * further up refers to as already-handled: `.header__row`'s background-color swap
   * below makes the row opaque, but on a transparent header (white logo, white icons
   * over a hero) nothing swapped the foreground to match, so the white icons sat on
   * their own new white background. Same solid-state swap already used for the search
   * modal (":root:has(.search-modal dialog[open]) .header[transparent]" above) rather
   * than a hardcoded colour, so the drawer picks up whatever the ambient page scheme
   * actually is instead of an assumed value. No --closed-underlay-height here either,
   * for the same reason the search-modal rule leaves it out.
   */
  .header[transparent]:has(#Details-menu-drawer-container[open]) {
    --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;
  }

  /* Keep header + announcement above the drawer without breaking sticky positioning */
  .header-section:has(#Details-menu-drawer-container[open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  .header:has(#Details-menu-drawer-container[open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  .header:has(#Details-menu-drawer-container[open]) .header__row {
    position: relative;
    z-index: calc(var(--layer-menu-drawer) + 1);
    background-color: var(--color-background);
  }

  .header:has(#Details-menu-drawer-container[open]) .header-logo,
  .header:has(#Details-menu-drawer-container[open]) .search-action,
  .header:has(#Details-menu-drawer-container[open]) header-actions,
  .header:has(#Details-menu-drawer-container[open]) .header__icon--menu {
    position: relative;
    z-index: calc(var(--layer-menu-drawer) + 2);
  }

  /* Keep the mobile logo page-centered while the drawer is open */
  @media screen and (max-width: 1023px) {
    .header:has(#Details-menu-drawer-container[open])
      .header__columns:not(.header__columns--mobile-logo-left)
      .header-logo {
      position: absolute;
    }
  }

  #header-component[data-menu-style='drawer']:has(#Details-menu-drawer-container[open])
    .header__columns:not(.header__columns--mobile-logo-left)
    .header-logo {
    position: absolute;
  }

  /* Keep announcement bar visible above the drawer while menu is open */
  body:has(#Details-menu-drawer-container[open]) #header-group > .shopify-section:has(.announcement-bar) {
    position: relative;
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

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

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

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

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

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

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

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

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

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

  }

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

  /* 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;
  }
/* END_SECTION:header */

/* START_SECTION:heritage-brand (INDEX:79) */
.heritage-brand {
    row-gap: 3.5rem;
  }

  .heritage-brand__media {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.0625rem;
  }

  .heritage-brand__image {
    width: 100%;
    height: 100%;
    aspect-ratio: 576 / 477;
    object-fit: cover;
    object-position: var(--focal-point, center center);
    display: block;
  }

  .heritage-brand__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .heritage-brand__heading {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 23px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-foreground-heading);
  }

  .heritage-brand__article {
    display: grid;
    justify-items: start;
    gap: 1.5rem;
  }

  .heritage-brand__text {
    font-size: 0.9375rem;
    line-height: 1.3333;
    letter-spacing: -0.01em;
  }

  .heritage-brand__text > *:first-child {
    margin-block-start: 0;
  }

  .heritage-brand__text > *:last-child {
    margin-block-end: 0;
  }

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

    .heritage-brand__body {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 0;
      align-items: start;
    }

    .heritage-brand__article {
      max-width: 35.75rem;
    }

    .heritage-brand__heading {
      margin-block-start: 0;
    }
  }
/* END_SECTION:heritage-brand */

/* START_SECTION:heritage-hero (INDEX:80) */
.heritage-hero {
    position: relative;
    display: grid;
    align-content: end;
    justify-items: center;
    min-height: var(--heritage-hero-height-mobile, 70svh);
    overflow: hidden;
    isolation: isolate;
  }

  .heritage-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .heritage-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / var(--heritage-hero-overlay, 0.45)) 0%, rgb(0 0 0 / 0) 60%);
    /* Purely decorative - without this it sits above the play/pause toggle button (both are
       absolutely-positioned children/pseudo of .heritage-hero__media) and swallows every
       click meant for it. */
    pointer-events: none;
  }

  .heritage-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focal-point, center center);
    display: block;
  }

  /*
    .deferred-media__poster-button has no position of its own (base.css), so without this it
    stays non-positioned while .heritage-hero__video next to it is positioned (base.css's
    generic ":is(deferred-media, product-model) > .deferred-media__poster-button ~ *" rule) -
    positioned siblings paint above non-positioned ones regardless of z-index or source order,
    so the video would otherwise intercept every click meant for the play/pause toggle button.
  */
  .heritage-hero__media .deferred-media__poster-button {
    position: relative;
    z-index: 1;
  }

  .heritage-hero__video-poster {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .heritage-hero__video {
      display: none;
    }

    .heritage-hero__video-poster {
      display: block;
    }
  }

  .heritage-hero__content {
    display: grid;
    justify-items: center;
    gap: 0.625rem;
    width: 100%;
    max-width: 50rem;
    padding-inline: var(--page-margin);
    text-align: center;
  }

  .heritage-hero__eyebrow {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 23px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #ffffff;
  }

  .heritage-hero__heading {
    margin: 0;
    font-size: clamp(2rem, 5.5vw, 2.8125rem);
    font-weight: var(--font-heading--weight, 700);
    line-height: 1.25;
    letter-spacing: -0.011em;
    text-wrap: balance;
  }

  .heritage-hero__content .heritage-cta {
    margin-block-start: 0.5rem;
  }

  @media screen and (min-width: 750px) {
    .heritage-hero {
      min-height: var(--heritage-hero-height, 90svh);
    }
  }
/* END_SECTION:heritage-hero */

/* START_SECTION:heritage-milestones (INDEX:81) */
.heritage-milestones {
    row-gap: 3rem;
  }

  .heritage-milestones__header {
    display: grid;
    justify-items: center;
    row-gap: 0.75rem;
    text-align: center;
  }

  .heritage-milestones__header .heritage-cta {
    margin-block-start: 0.5rem;
  }

  .heritage-milestones__eyebrow {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 23px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-foreground-muted);
  }

  .heritage-milestones__heading {
    margin: 0;
    font-size: clamp(1.625rem, 3.5vw, 2rem);
    font-weight: var(--font-heading--weight, 700);
    line-height: 1.25;
    text-wrap: balance;
  }

  .heritage-milestones__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 0.625rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--page-margin) * -1);
    padding-inline: var(--page-margin);
    scrollbar-width: none;
  }

  .heritage-milestones__grid::-webkit-scrollbar {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .heritage-milestones__grid {
      grid-auto-flow: row;
      grid-auto-columns: auto;
      grid-template-columns: repeat(var(--heritage-milestones-columns, 5), minmax(0, 1fr));
      overflow-x: visible;
      margin-inline: 0;
      padding-inline: 0;
    }
  }
/* END_SECTION:heritage-milestones */

/* START_SECTION:heritage-quote (INDEX:82) */
.heritage-quote__inner {
    display: grid;
    justify-items: center;
    row-gap: 2rem;
    margin: 0;
    text-align: center;
  }

  .heritage-quote__text {
    margin: 0;
    max-width: 70rem;
    font-size: clamp(1.125rem, 2.2vw, 1.5625rem);
    font-weight: var(--font-body--weight, 400);
    line-height: 1.44;
    text-wrap: pretty;
  }

  .heritage-quote__text > *:first-child {
    margin-block-start: 0;
  }

  .heritage-quote__text > *:last-child {
    margin-block-end: 0;
  }

  .heritage-quote__attribution {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    line-height: 23px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-foreground-muted);
  }

  .heritage-quote__attribution::before {
    content: '';
    display: block;
    width: 1.25rem;
    border-block-start: 0.0625rem solid currentcolor;
  }
/* END_SECTION:heritage-quote */

/* START_SECTION:heritage-story (INDEX:83) */
.heritage-story {
    justify-items: center;
    row-gap: 1.5rem;
  }

  .heritage-story__heading {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .heritage-story__text {
    width: 100%;
    max-width: var(--heritage-story-max-width, 55.8125rem);
    font-size: 0.9375rem;
    line-height: 1.5333;
    letter-spacing: -0.01em;
    text-align: center;
  }

  .heritage-story__text > *:first-child {
    margin-block-start: 0;
  }

  .heritage-story__text > *:last-child {
    margin-block-end: 0;
  }
/* END_SECTION:heritage-story */

/* START_SECTION:heritage-values (INDEX:84) */
.section.heritage-values {
    row-gap: 4rem;
  }

  .heritage-values__header {
    display: grid;
    justify-items: center;
    row-gap: 0.75rem;
    text-align: center;
  }

  .heritage-values__header .heritage-cta {
    margin-block-start: 0.5rem;
  }

  .heritage-values .heritage-cta {
    gap: 0;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 0.0625rem;
  }

  .heritage-values .heritage-cta__icon {
    display: none;
  }

  .heritage-values .heritage-cta:hover {
    text-decoration-color: transparent;
  }

  .heritage-values__eyebrow {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 23px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-foreground-muted);
  }

  .heritage-values__heading {
    margin: 0;
    font-size: clamp(1.625rem, 3.5vw, 2rem);
    font-weight: var(--font-heading--weight, 700);
    line-height: 1.25;
    text-wrap: balance;
  }

  .heritage-values__subheading {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-foreground-muted);
  }

  .heritage-values__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: 2.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--page-margin) * -1);
    padding-inline: var(--page-margin);
    scrollbar-width: none;
  }

  .heritage-values__grid::-webkit-scrollbar {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .heritage-values__grid {
      grid-auto-flow: row;
      grid-auto-columns: auto;
      grid-template-columns: repeat(var(--heritage-values-columns, 3), minmax(0, 1fr));
      overflow-x: visible;
      margin-inline: 0;
      padding-inline: 0;
    }
  }
/* END_SECTION:heritage-values */

/* START_SECTION:hero (INDEX:85) */
.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--bottom-divider {
    border-block-end: var(--hero-divider-width) solid var(--hero-divider-color);
  }

  @media screen and (max-width: 749px) {
    .hero {
      min-height: calc(var(--hero-min-height-mobile, 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;
  }

  /*
   * When both a desktop and mobile image are set, the media above is a <picture class="hero__media">
   * (art direction via a <source media="(max-width: 749px)">, see media_slot_1/media_slot_2) rather
   * than the class living on an <img>/<video> directly. Sizing only `.hero__media` fills that
   * <picture> box correctly but leaves its child <img> unsized — a <picture> never passes its own
   * box down to the image it resolves to, so the img falls back to its intrinsic width/height
   * attributes, rendering at its own aspect ratio instead of the panel's. That height is then
   * purely a function of the img's rendered *width*, not the viewport: it only falls short of a
   * full-screen hero once the window is narrow enough that width / intrinsic-aspect-ratio < the
   * hero's height, which is exactly why this appeared on "some screen sizes" rather than every one.
   * Targeting the `> img`/`> video` child too makes the fill rule reach the actual rendered media
   * regardless of which element the class ended up on.
   */
  .hero__media,
  .hero__media > img,
  .hero__media > video {
    height: 100%;
    width: 100%;
    object-fit: var(--hero-media-object-fit, cover);
    object-position: var(--hero-media-position-x, 50%) var(--hero-media-position-y, 50%);
    transform: scale(var(--hero-media-zoom, 100%));
    transform-origin: var(--hero-media-position-x, 50%) var(--hero-media-zoom-origin-y, 50%);
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  @media screen and (max-width: 749px) {
    .hero__media,
    .hero__media > img,
    .hero__media > video {
      object-position: var(--hero-media-position-x-mobile, 50%) var(--hero-media-position-y-mobile, 50%);
      transform: scale(var(--hero-media-zoom-mobile, 100%));
      transform-origin: var(--hero-media-position-x-mobile, 50%) var(--hero-media-zoom-origin-y-mobile, 50%);
    }
  }

  /* 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:home-leather-edit (INDEX:86) */
.home-leather-edit-section {
    overflow: hidden;
  }

  .home-leather-edit {
    display: grid;
    gap: 0;
    width: 100%;
  }

  .home-leather-edit__intro {
    padding: 0 1.25rem;
  }

  .home-leather-edit__heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: var(--font-heading--weight, 700);
    text-transform: capitalize;
    line-height: 1;
  }

  .home-leather-edit__stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .home-leather-edit__panels {
    display: contents;
  }

  .home-leather-edit__panel:not([hidden]) {
    display: contents;
  }

  .home-leather-edit__panel[hidden] {
    display: none;
  }

  .home-leather-edit__copy {
    display: contents;
  }

  .home-leather-edit__aside {
    order: 1;
    padding: 0 1.25rem;
  }

  .home-leather-edit__description {
    order: 2;
    padding-inline: 1.25rem;
    margin-block-start: 0.9375rem;
    font-size: 0.9375rem;
    line-height: 1.35;
    max-width: 21.375rem;
  }

  .home-leather-edit__cta {
    order: 3;
    margin-block-start: 1.0625rem;
    margin-inline: 1.25rem;
    display: inline-flex;
    padding-block-end: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    width: fit-content;
  }

  .home-leather-edit__media {
    order: 4;
    width: 82%;
    margin-inline: auto;
    margin-block-start: 0;
    aspect-ratio: 431 / 566;
    overflow: hidden;
  }

  .home-leather-edit__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .home-leather-edit__media-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  .home-leather-edit__product-meta {
    order: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    max-width: 13.875rem;
    margin-inline: auto;
    margin-block-start: 0;
  }

  .home-leather-edit__product-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: var(--font-heading--weight, 700);
    line-height: 1.2;
    text-transform: none;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .home-leather-edit__product-title-link {
    color: inherit;
  }

  .home-leather-edit__product-price {
    margin: 0;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: var(--font-body--weight);
  }

  .home-leather-edit__product-price .price {
    justify-content: center;
  }

  .home-leather-edit__gender {
    display: flex;
    gap: 1.375rem;
    align-items: center;
    margin-block-start: 0.5rem;
  }

  .home-leather-edit__gender-tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 0.05rem solid transparent;
    padding: 0.25rem 0 0.125rem;
    margin: 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: #838282;
    cursor: pointer;
  }

  .home-leather-edit__gender-tab--active,
  .home-leather-edit__gender-tab[aria-selected='true'] {
    color: var(--color-foreground);
    font-weight: 500;
    border-bottom-color: currentColor;
  }

  .home-leather-edit__gender-tab:focus-visible {
    outline: 0.125rem solid currentColor;
    outline-offset: 0.25rem;
  }

  .home-leather-edit__description > *:first-child {
    margin-block-start: 0;
  }

  .home-leather-edit__description > *:last-child {
    margin-block-end: 0;
  }

  .home-leather-edit__cta:focus-visible {
    outline: 0.125rem solid currentColor;
    outline-offset: 0.25rem;
  }

  .home-leather-edit__rail-wrap {
    order: 6;
    position: relative;
    display: block;
  }

  .home-leather-edit__rail-controls {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.375rem;
    pointer-events: none;
  }

  .home-leather-edit__rail-button {
    appearance: none;
    background: none;
    border: 0;
    padding: 0.25rem;
    margin: 0;
    color: inherit;
    cursor: pointer;
    pointer-events: auto;
  }

  .home-leather-edit__rail-button .svg-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.75rem;
    height: 0.75rem;
    transform: scaleX(-1);
  }

  .home-leather-edit__rail-button--next .svg-wrapper {
    transform: none;
  }

  .home-leather-edit__rail-button:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .home-leather-edit__rail-button:focus-visible {
    outline: 0.125rem solid currentColor;
    outline-offset: 0.25rem;
  }

  .home-leather-edit__rail {
    display: flex;
    gap: 0;
    overflow: auto;
    scroll-snap-type: x mandatory;
    max-height: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .home-leather-edit__rail::-webkit-scrollbar {
    display: none;
  }

  .home-leather-edit__thumb {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 0.05rem solid transparent;
    padding: 0;
    margin: 0;
    flex: 0 0 calc(100% / 3);
    width: auto;
    min-width: 0;
    aspect-ratio: 130 / 215;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    /*
     * Without this the UA `button { color: buttontext }` rule wins over inheritance,
     * so the currentColor used by the active underline and the focus ring resolves to
     * a system colour that renders tinted on mobile instead of the theme foreground.
     */
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  .home-leather-edit__thumb[hidden] {
    display: none;
  }

  .home-leather-edit__thumb--active,
  .home-leather-edit__thumb[aria-current='true'] {
    border-bottom-color: currentColor;
  }

  /*
   * The rail is a scroll container, so an outward ring on a full-height thumb is
   * clipped top and bottom and renders as two stray vertical lines. Draw it inside
   * the thumb instead. The :focus reset covers engines without :focus-visible, which
   * base.css falls back to (see the @supports block around base.css:367).
   */
  .home-leather-edit__thumb:focus-visible {
    outline: 0.125rem solid currentColor;
    outline-offset: -0.125rem;
  }

  .home-leather-edit__thumb:focus:not(:focus-visible) {
    outline: none;
  }

  .home-leather-edit__thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media screen and (max-width: 749px) {
    .home-leather-edit-section--custom-mobile-padding {
      padding-block-start: var(--home-leather-edit-padding-top-mobile);
    }

    /*
     * Each thumbnail is a different product's photo forced into a narrow
     * 130:215 box via object-fit: cover, so a fixed center-crop cuts off
     * different parts of different photos. `contain` always shows the
     * whole photo instead (same fix already used for the main image under
     * the homepage-scroll-snap layout, see base.css).
     */
    .home-leather-edit__thumb-image {
      object-fit: contain;
    }
  }

  @media screen and (min-width: 750px) {
    .home-leather-edit-section--custom-height {
      min-height: var(--home-leather-edit-min-height);
      align-content: center;
    }

    .home-leather-edit {
      grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
      align-items: start;
      gap: var(--gap-xl, 2rem);
    }

    .home-leather-edit__intro {
      grid-column: 1;
      padding-block-start: var(--padding-4xl);
      padding-inline-start: calc(var(--page-margin) + var(--padding-xl));
      padding-inline-end: 0;
    }

    .home-leather-edit__heading {
      font-size: var(--font-h4--size, 1.5625rem);
    }

    .home-leather-edit__stage {
      display: grid;
      grid-column: 2;
      grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem) 10.5rem;
      align-items: center;
      gap: 2.75rem;
    }

    .home-leather-edit__panels {
      display: contents;
    }

    .home-leather-edit__panel:not([hidden]) {
      display: contents;
    }

    .home-leather-edit__copy {
      display: contents;
    }

    .home-leather-edit__aside {
      order: unset;
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      padding: 2rem 0 0;
    }

    .home-leather-edit__gender {
      margin-block-start: 0;
    }

    .home-leather-edit__gender-tab {
      text-transform: uppercase;
      color: rgb(var(--color-foreground-rgb) / 0.55);
    }

    .home-leather-edit__gender-tab--active,
    .home-leather-edit__gender-tab[aria-selected='true'] {
      font-weight: 700;
      color: var(--color-foreground);
    }

    .home-leather-edit__description {
      order: unset;
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      justify-self: start;
      margin-block-start: 4.5rem;
      margin-inline: 0;
      padding-inline: 0;
      max-width: 14.625rem;
    }

    .home-leather-edit__cta {
      order: unset;
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      justify-self: start;
      margin-block-start: 9.75rem;
      margin-inline: 0;
    }

    .home-leather-edit__media {
      order: unset;
      grid-column: 1;
      grid-row: 1;
      justify-self: center;
      width: min(100%, 30.5rem);
      margin: 0;
      aspect-ratio: 3 / 4;
    }

    .home-leather-edit__product-meta {
      order: unset;
      grid-column: 1;
      grid-row: 2;
      justify-self: center;
      margin: 0;
      padding: 0;
      gap: 0.75rem;
      max-width: 13.75rem;
    }

    .home-leather-edit__product-title {
      font-size: 1.125rem;
      line-height: 1.25;
    }

    .home-leather-edit__product-price {
      font-size: 1rem;
    }

    .home-leather-edit__rail-wrap {
      order: unset;
      grid-column: 3;
      grid-row: 1 / span 2;
      display: grid;
      grid-template-columns: 1fr;
      position: relative;
      max-height: 42.375rem;
      overflow: visible;
    }

    .home-leather-edit__rail-controls {
      position: absolute;
      inset: auto;
      left: -2rem;
      top: 50%;
      transform: translateY(-50%);
      flex-direction: column;
      justify-content: flex-start;
      gap: 0.75rem;
      padding: 0;
      pointer-events: auto;
    }

    .home-leather-edit__rail-button .svg-wrapper {
      transform: rotate(-90deg);
    }

    .home-leather-edit__rail-button--next .svg-wrapper {
      transform: rotate(90deg);
    }

    .home-leather-edit__rail {
      flex-direction: column;
      max-height: 42.375rem;
      overflow: auto;
      scroll-snap-type: y mandatory;
    }

    .home-leather-edit__thumb {
      flex: 0 0 auto;
      flex-basis: auto;
      width: 100%;
      aspect-ratio: 3 / 4;
    }
  }

  /*
   * Between 750px and 1000px, the description/CTA column and the rail column above both
   * hold their full desktop max-width regardless of how little room is left (CSS Grid
   * sizes non-flexible tracks to their max before handing anything to the `1fr` media
   * column) — so the media column, which gets whatever's left over, collapses to a
   * sliver. Capping the other two columns' max-widths in this range gives it back a
   * reasonable share.
   */
  @media screen and (min-width: 750px) and (max-width: 999px) {
    .home-leather-edit__stage {
      grid-template-columns: minmax(9rem, 1fr) minmax(9rem, 11rem) 7rem;
      gap: 1.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-leather-edit__rail {
      scroll-behavior: auto;
    }
  }
/* END_SECTION:home-leather-edit */

/* START_SECTION:how-to-measure (INDEX:87) */
.how-to-measure-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px 80px;
  }

  .how-to-measure-page__title {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
  }

  .how-to-measure-page__row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }

  @media (min-width: 768px) {
    .how-to-measure-page__row {
      flex-direction: row;
      gap: 56px;
    }
  }

  .how-to-measure-page__image-wrapper {
    flex: 0 0 auto;
    width: 100%;
    max-width: 360px;
  }

  .how-to-measure-page__image,
  .how-to-measure-page__image-placeholder {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }

  .how-to-measure-page__image-placeholder {
    aspect-ratio: 284 / 520;
    background: #f3f3f3;
  }

  .how-to-measure-page__detail {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 389px;
    font-size: 13px;
    line-height: 20px;
    color: #616161;
  }

  .how-to-measure-page__detail-inner {
    display: flow-root;
  }

  .how-to-measure-page__detail :is(p, li, ul, ol, h1, h2, h3, h4, h5, h6) {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }

  .how-to-measure-page__detail strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    color: #000;
  }

  .how-to-measure-page__detail p + p {
    margin-block-start: 0.25rem;
  }

  .how-to-measure-page__detail p:has(strong) {
    margin-block-start: 28px;
  }

  .how-to-measure-page__detail-inner > *:first-child,
  .how-to-measure-page__detail p:has(strong):first-child {
    margin-block-start: 0;
  }

  .how-to-measure-page__detail p:empty,
  .how-to-measure-page__detail p:has(> br:only-child) {
    display: none;
  }

  .how-to-measure-page__detail p:has(strong) + p {
    margin-block-start: 6px;
  }
/* END_SECTION:how-to-measure */

/* START_SECTION:layered-slideshow (INDEX:88) */
.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));
  }

  /*
    Direct-child img/svg (the poster image and the no-media placeholder_svg_tag fallback)
    use a child combinator; video is matched as a descendant instead, since it's now
    wrapped in a display:contents <deferred-media> (for the play/pause toggle button) and so
    is a grandchild, not a direct child, of .layered-slideshow__panel-content. Using a bare
    "svg" descendant selector here would also stretch the toggle button's own inline icon
    SVG (nested inside .deferred-media__poster-icon) to fill the panel and collapse it to
    0x0 in the process - scoping img/svg to direct children avoids that.
  */
  .layered-slideshow__panel-content > :is(img, svg),
  .layered-slideshow__panel-content video {
    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;
    /* Purely decorative once the panel has a deferred-media play/pause toggle button
       underneath it - without this, the poster (still in the box tree, opacity: 0 or not)
       intercepts clicks meant for that button instead of letting them through. */
    pointer-events: none;
  }

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

  /*
    .deferred-media__poster-button has no position of its own (base.css), so without this it
    stays non-positioned while .layered-slideshow__video next to it is positioned (base.css's
    generic ":is(deferred-media, product-model) > .deferred-media__poster-button ~ *" rule) -
    positioned siblings paint above non-positioned ones regardless of z-index or source order,
    so the video would otherwise intercept every click meant for the play/pause toggle button.
  */
  .layered-slideshow__panel-content .deferred-media__poster-button {
    position: relative;
    z-index: 1;
  }

  /*
    An inert panel's video is genuinely paused (assets/layered-slideshow.js calls
    pauseMedia() for every non-active panel on init and on tab change), so its toggle
    button un-hides itself like any other paused instance - but inert panels stack
    behind the active one only partially: the sliver where an inert panel's own width
    isn't covered by the (higher z-indexed) active panel's content can leave its button
    visibly peeking through, even though `inert` already makes it non-interactive.
    Force it out of view there rather than relying on layering to hide it.
  */
  .layered-slideshow__panel[inert] .video-interaction-hint {
    display: none;
  }

  /* 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:89) */
.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:91) */
.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:92) */
/**
   * 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:93) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

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

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

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

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

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

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

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

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

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

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

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

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

  html:active-view-transition-type(empty-cart-page) {
    .cart-items-component {
      view-transition-name: cart-page-content;
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:95) */
.product-grid-container--collection {
    min-width: 0;
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  /*
   * Figma's product card/mobile component (104:5614) specifies 13px for the PLP
   * card title, distinct from the 14px desktop frame. The product-title block
   * setting has no breakpoint dimension, so 14px is the JSON base (matching
   * desktop) and this rule scopes 13px below the grid's own mobile/desktop
   * split (see --product-grid-columns-desktop, min-width: 750px above).
   */
  @media screen and (max-width: 749px) {
    .product-grid-container--collection [class*='__product_title_4nY4eT'] {
      font-size: 0.8125rem;
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:main-page (INDEX:96) */
.main-page-section .text-block.custom-typography :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
  }

  .main-page-section .section-content-wrapper {
    max-width: 565px;
    margin: 0 auto;
    padding-inline: 0px;
  }

  .main-page-section rte-formatter p {
    font-size: 15px;
    font-weight: 300;
    color: #1d1d1b;
  }

  .main-page-section strong {
    font-weight: 700;
    font-size: 15px;
  }

  .main-page-section h1 {
    font-weight: 700;
    font-size: 24px;
    color: #1d1d1b;
  }

  .main-page-section h3 {
    font-weight: 700;
    font-size: 17px;
    margin-top: 20px;
    color: #1d1d1b;
  }

  .main-page-section h4 {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #1d1d1b;
    margin-top: 20px;
  }

  .main-page-section a {
    text-decoration: underline;
  }

  .main-page-section blockquote {
    border-inline-start: none;
    margin-block: 20px;
  }

  .main-page-section blockquote p {
    font-style: normal;
  }
/* END_SECTION:main-page */

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

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

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

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

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

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

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

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

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

/* START_SECTION:media-with-content (INDEX:98) */
.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:99) */
.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:100) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

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

/* START_SECTION:predictive-search (INDEX:102) */
input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .predictive-search-dropdown {
    display: block;
  }

  .predictive-search-results__inner {
    color: var(--color-foreground);
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-breadcrumbs (INDEX:103) */
.product-breadcrumbs {
    display: flex;
    justify-content: center;
    width: 100%;
    border-block: 1px solid #d9dce0;
  }

  .product-breadcrumbs .breadcrumbs {
    width: 100%;
  }

  .product-breadcrumbs .breadcrumbs__list {
    justify-content: center;
    gap: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000;
  }

  .product-breadcrumbs .breadcrumbs__list a {
    color: inherit;
    text-decoration: none;
  }

  .product-breadcrumbs .breadcrumbs__list a:hover {
    text-decoration: underline;
  }

  .product-breadcrumbs .breadcrumbs__list li[aria-hidden='true'] {
    padding-inline: 8px;
  }

  .product-breadcrumbs .breadcrumbs__list li[aria-current='page'] {
    color: #111;
  }
/* END_SECTION:product-breadcrumbs */

/* START_SECTION:product-hotspots (INDEX:104) */
/* 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:105) */
/* Figma: pdp/desktop/default/sticky add to cart (node 6282:19324) — pinned to the TOP
     of the viewport (below the site's own sticky header), full-width, translucent blurred
     bar with title+price left, Add to Cart button right. Not a bottom floating pill. */
  body:has(#header-group #header-component[data-sticky-state='active']) sticky-add-to-cart {
    --sticky-header-offset: var(--header-height);
  }

  .sticky-add-to-cart__bar {
    position: fixed;
    top: var(--sticky-header-offset, 0);
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(-100%);
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    width: 100%;
    padding-block: 20px;
    padding-inline: var(--page-margin, 24px);
    background: rgb(255 255 255 / 0.9);
    backdrop-filter: blur(7.5px);
    box-shadow: 0 2px 4.55px rgb(0 0 0 / 0.1);

    @starting-style {
      opacity: 0;
      transform: translateY(-100%);
    }
  }

  @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: translateY(0%);
    opacity: 1;
  }

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

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

  .sticky-add-to-cart__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: var(--color-foreground);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

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

  .sticky-add-to-cart__price {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: var(--color-foreground);
  }

  .sticky-add-to-cart__colour {
    display: flex;
    align-items: center;
    gap: 33px;
    flex-shrink: 0;
  }

  .sticky-add-to-cart__colour-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .sticky-add-to-cart__edit {
    font-size: 14px;
    line-height: 28px;
    color: var(--color-foreground);
    text-decoration: underline;
  }

  .sticky-add-to-cart__colour-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    color: var(--color-foreground);
    margin: 0;
  }

  .sticky-add-to-cart__colour-value {
    font-weight: 400;
  }

  .sticky-add-to-cart__swatch .swatch {
    width: 24px;
    height: 24px;
  }

  .sticky-add-to-cart__button {
    flex-shrink: 0;
    height: var(--height-buy-buttons);
    position: relative;
    text-transform: uppercase;
  }

  /* Figma only specifies this bar for desktop ("pdp/desktop/default/sticky add to cart") —
     not implemented on mobile. */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      display: none;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:product-list (INDEX:106) */
.section-resource-list .resource-list__carousel {
    --peek-next-slide-size: 0px;
  }

  /* Figma has the Bestsellers "VIEW ALL" link at 12px at every viewport (86akjgvqr);
     .link has no per-block font-size setting, so it inherits the global
     14px paragraph size everywhere it's used - scope the override to this
     section's own header link rather than touching that global token.
     Scoped to the homepage template only: `product-list` is also reused on
     the cart page and 404 ("You may also like"), which weren't part of this
     ticket and have no Figma spec to match here. */
  [data-template='index'] .section-resource-list__header .link {
    font-size: 12px;
  }

  @media screen and (max-width: 749px) {
    .section-resource-list--custom-mobile-height {
      min-height: var(--product-list-min-height-mobile);
    }

    .section-resource-list--custom-mobile-content-padding .section-resource-list__content > .group-block {
      padding-block-start: var(--product-list-content-padding-top-mobile);
      padding-block-end: var(--product-list-content-padding-bottom-mobile);
    }
  }
/* END_SECTION:product-list */

/* START_SECTION:product-recommendations (INDEX:107) */
/*
   * Biro item 3 / ClickUp 86ajqy57u: on the mobile PDP this section's top padding put
   * 92.4px between the Complete the Look cards and the Bestsellers tab row, against
   * Figma's 20px (4188:11105). The 70px of it comes from this section's own
   * "Top" padding setting (templates/product.json -> padding-block-start: 100, scaled by
   * --spacing-scale 0.7 at 390px).
   *
   * That setting is NOT viewport-scoped and this section type has no mobile padding
   * setting, so editing it to 0 would also drop the desktop PDP's 100px, where Complete
   * the Look sits in the buy-box column and the 100px governs a different relationship
   * that was signed off. Hence a mobile-scoped override here instead of a settings
   * change, leaving the 22.4px of trailing space inside the product section as the whole
   * gap (Figma 20px).
   *
   * !important and the custom property are both required to beat the inline
   * --padding-block-start that spacing-style.liquid writes on this same element - same
   * reason as the precedent in base.css (homepage-scroll-snap / leather-edit).
   */
  @media screen and (max-width: 749px) {
    [data-template='product'] .product-recommendations-tabs .section-resource-list.spacing-style {
      --padding-block-start: 0px !important;
      padding-block-start: 0 !important;
    }
  }

  @media screen and (min-width: 750px) {
    /*
     * Figma "product card v3" (6047:15800): the details stack is gap-[15px] with the
     * price and swatches carrying no padding of their own. The card's own gap setting
     * (product_card_gap, 15px in templates/product.json) is the single source of the
     * 15px rhythm, so anything that used to add its own block padding on top of that
     * gap is zeroed here rather than compensated for elsewhere.
     */
    [data-template='product'] [data-block-id*='price_gLWgA6'] {
      padding-block-start: 0;
    }

    [data-template='product'] .product-recommendations-tabs .color-swatch--plp {
      padding-block-start: 0;
    }

    /* Figma swatch pitch is 6px, not the 12px global .color-swatch__list default. */
    [data-template='product'] .product-recommendations-tabs .color-swatch__list {
      gap: 6px;
    }

    /* The hit-area bleed assumes the 12px gap; halve it so neighbours don't overlap. */
    [data-template='product'] .product-recommendations-tabs .color-swatch__link::before {
      inset-inline: -3px;
    }

    /*
     * 1px white gap between adjacent recommendation card images (86ajf7kxm).
     *
     * Figma separates the image tiles by ~1px of white and leaves the text area pure
     * white with no rule at all, so the separation belongs to the image, not to the grid.
     * A grid `column-gap` would take the 1px out of the cards (360 -> 359.25) and is
     * therefore wrong: the grid is `columns_gap: 0` full-bleed 4 x 360
     * (templates/product.json) and that card width is signed off.
     *
     * `product-media-container` is `box-sizing: border-box` with `aspect-ratio: 18 / 25`,
     * which resolves against the border box, so an inline-start border shrinks the image
     * to 359px while the container stays 360x500. The card's box and the row's total span
     * do not move, and the details below keep the full 360px.
     *
     * The border is explicitly white rather than transparent: every box here
     * (section, item, card content) has a transparent background, so a transparent gap
     * would only look right for as long as the white `body` shows through it.
     *
     * Between every pair, never on the row's outer edges. `max_products` and `columns`
     * are both 4, so the grid is a single row and the adjacent-sibling selector never
     * lands on a row-leading card.
     */
    [data-template='product']
      .product-recommendations-tabs
      .resource-list--grid
      > .resource-list__item
      + .resource-list__item
      .product-media-container {
      border-inline-start: 1px solid #fff;
    }
  }
/* END_SECTION:product-recommendations */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:search-results (INDEX:111) */
/* The design sets the filter bar apart from the query row above it and the grid below.
     Two things make this fiddlier than it looks: the block's own padding settings can't
     do it (--facets-inner-padding-block is only consumed by the mobile bar, which is
     display:none from 750px up), and filters.liquid sets `margin: 0` on this element at
     the same specificity but later in the bundle — hence the doubled class here, which
     wins on specificity instead of relying on source order. */
  .product-grid-container--search.product-grid-container--collection .facets-block-wrapper--horizontal {
    margin-block: var(--search-results-row-gap);
  }

  /* The same gutter the search head rows use, so the filter bar lines up with the query
     row above it. --util-page-margin-offset comes from .section, and each root resolves
     its percentages against its own width, so it is declared here as well as on
     .search-panel rather than shared through :root. */
  .product-grid-container--search {
    --search-panel-gutter: var(--util-page-margin-offset, var(--page-margin));
  }

  .product-grid-container--search.product-grid-container--collection
    .facets--horizontal
    .facets__form {
    padding-inline: var(--search-panel-gutter);
  }

  /* And the grid itself. Its inset is not the `product_grid_width` setting — .grid is
     display:flex and defines --centered/--full-width as tokens only, with no matching
     named grid lines anywhere, so `grid-column: var(--centered)` resolves to nothing.
     The real lever is .main-collection-grid's padding, which normally comes from the
     section's padding-inline-* settings; those are plain px and can't track the page
     gutter, so it is set here instead. */
  .product-grid-container--search .main-collection-grid {
    padding-inline: var(--search-panel-gutter);
  }

  /* The search design's filter bar carries only the category tabs and the filter
     trigger — the result count lives up in the query row, and the media/density
     switches aren't part of it. Specificity is raised past the
     .product-grid-container--collection rules these override, since the two
     stylesheets' bundle order isn't guaranteed. */
  .product-grid-container--search.product-grid-container--collection .products-count-wrapper,
  .product-grid-container--search.product-grid-container--collection .facets__media-view {
    display: none;
  }

  /* Matches the search design's "FILTER +" trigger, which is set larger and wider
     than the collection page's. */
  .product-grid-container--search.product-grid-container--collection .facets__drawer-trigger {
    font-size: var(--search-panel-label-size);
    letter-spacing: 1px;
  }

  .product-grid-container--search .facets__drawer-trigger::after {
    margin-inline-start: 0.35em;
    font-size: 1.4em;
    font-weight: var(--font-body--weight);
    letter-spacing: normal;
    content: '+';
  }
/* END_SECTION:search-results */

/* START_SECTION:section (INDEX:115) */
#shopify-section-founder .section-content-wrapper,
  .heritage-split .section-content-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 2.5rem;
    height: auto !important;
    box-sizing: border-box;
    padding-inline: 0;
  }

  #shopify-section-founder .section-content-wrapper > *,
  .heritage-split .section-content-wrapper > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    flex: none !important;
    --size-style-width: 100% !important;
  }

  #shopify-section-founder .group-block,
  .heritage-split .group-block {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    --size-style-width: 100% !important;
  }

  #shopify-section-founder .section-content-wrapper > .image-block,
  .heritage-split .section-content-wrapper > .image-block {
    display: block !important;
    position: relative;
    width: 688px !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 572 / 502 !important;
    overflow: hidden;
    --ratio: 572 / 502 !important;
    --size-style-width: 688px !important;
    --size-style-height: auto !important;
  }

  #shopify-section-founder .image-block__image,
  #shopify-section-founder .image-block .placeholder-image,
  .heritage-split .image-block__image,
  .heritage-split .image-block .placeholder-image {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 572 / 502 !important;
    object-fit: cover !important;
    object-position: center;
    --ratio: 572 / 502 !important;
  }

  @media screen and (min-width: 750px) {
    #shopify-section-founder .section-content-wrapper,
    .heritage-split .section-content-wrapper {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      justify-content: stretch;
      align-items: start !important;
      gap: clamp(1.5rem, 4vw, 4rem);
    }

    #shopify-section-founder .group-block,
    .heritage-split .group-block {
      align-self: start;
      justify-self: start;
      width: 100% !important;
      max-width: 36rem !important;
      padding-inline-end: 0;
      --size-style-width: 36rem !important;
    }

    #shopify-section-founder .section-content-wrapper > .image-block,
    .heritage-split .section-content-wrapper > .image-block {
      justify-self: start;
      margin-inline-start: 0;
      margin-inline-end: auto;
    }

    .heritage-split.section--columns-reverse .section-content-wrapper > .image-block {
      justify-self: end;
      margin-inline-start: auto;
      margin-inline-end: 0;
    }
  }
/* END_SECTION:section */

/* START_SECTION:seen-in-motion (INDEX:116) */
.seen-in-motion {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
  }

  /* Keep header/share inset when the gallery bleeds full-width */
  .section--full-width .seen-in-motion__header,
  .section--full-width .seen-in-motion__share {
    padding-inline: var(--page-margin);
  }

  .seen-in-motion__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }

  .seen-in-motion__titles {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .seen-in-motion__heading {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--color-foreground);
  }

  .seen-in-motion__subtext {
    margin: 0;
    color: var(--color-foreground-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
  }

  .seen-in-motion__arrows {
    display: none;
    align-items: center;
    gap: 8px;
  }

  @media screen and (min-width: 750px) {
    .seen-in-motion__arrows {
      display: flex;
    }
  }

  .seen-in-motion__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .seen-in-motion__arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .seen-in-motion__arrow .svg-wrapper,
  .seen-in-motion__arrow svg {
    width: 14px;
    height: 14px;
  }

  .seen-in-motion__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .seen-in-motion__viewport::-webkit-scrollbar {
    display: none;
  }

  .seen-in-motion__track {
    display: flex;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .seen-in-motion__slide {
    flex: 0 0 calc((100% - 3px) / 4);
    min-width: 180px;
    scroll-snap-align: start;
  }

  @media screen and (max-width: 989px) {
    .seen-in-motion__slide {
      flex-basis: calc((100% - 1px) / 2.2);
    }
  }

  @media screen and (max-width: 749px) {
    .seen-in-motion__slide {
      flex-basis: 70%;
      min-width: 220px;
    }
  }

  .seen-in-motion__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: inherit;
    text-decoration: none;
  }

  .seen-in-motion__media {
    position: relative;
    aspect-ratio: 360 / 500;
    overflow: hidden;
    background: #f0f0f0;
  }

  .seen-in-motion__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .seen-in-motion__handle {
    margin: 0;
    padding-inline: 18px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    text-transform: lowercase;
    color: var(--color-foreground);
  }

  .seen-in-motion__app-block {
    width: 100%;
  }

  /* Reserve Instafeed's height until its JS has drawn the tiles. The app only
     injects its script after window `load` (tens of seconds on a slow
     connection), and until then the block is 0px tall, so the feed arriving grew
     the page by ~440px right under the PDP gallery - the "sticky"/jumping
     scroll from 17tqamen3vf. Measured from 800px to 2560px the feed is always
     4 tiles at 4:5 with a gap of 0.25% of its width, so its height is
     width * 0.9925 / 4 * 1.25 = width * 0.3102. That layout is an Instafeed
     admin setting, not ours: if it changes, update this ratio. The app renders
     twice and each render inserts a fresh, unsized container (0px tall, tiles
     already inside) before its JS writes an inline height ~100ms later, so the
     reservation holds until that inline height exists - keying on the tiles
     instead let the page collapse and snap back 443px. Once the app has sized
     itself the reservation drops, so a different real height is never
     clipped. */
  @media screen and (min-width: 750px) {
    .seen-in-motion__app-block:has(#insta-feed):not(:has(.instafeed-new-layout-container[style*='height'])) {
      aspect-ratio: 1 / 0.3102;
    }
  }

  .seen-in-motion__share {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    text-align: center;
  }

  .seen-in-motion__share-text {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: var(--color-foreground);
  }

  .seen-in-motion__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .seen-in-motion__social-link {
    display: inline-flex;
    color: inherit;
  }

  .seen-in-motion__social-icon {
    display: block;
    width: 20px;
    height: 20px;
  }

  /* Instafeed's own carousel arrows (app block, not ours): a scoped
     restyle to match Figma's bare white chevron instead of the app's
     default white circular pill. `instafeed-new-arrow*` are undocumented
     app internals, not a published interface - if a future Instafeed
     update renames or restructures them, this override goes silently
     inert and the arrows revert to the app's default pill. Check here
     first if the chevrons look wrong after an app update.

     The 44px box keeps the tap target at --minimum-touch-target even
     though the drawn glyph is ~6x12px; only the background-size shrinks,
     not the button. Figma insets the glyph asymmetrically (~20px on the
     left, ~40px on the right) - treated here as a mockup artifact and
     regularized to 20px on both sides rather than matched literally. */
  .seen-in-motion .instafeed-new-layout-container .instafeed-new-arrow {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-size: 6px 12px !important;
    border-radius: 0 !important;
    /* Figma shows the glyph bare on the photo with no shadow or scrim.
       This feed rotates in pale campaign images (light stone/concrete
       backdrops) where an unshielded white glyph would wash out, so this
       soft shadow is a deliberate departure from Figma for legibility -
       it reads as invisible against the darker UGC photos Figma was
       mocked up against. */
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.55));
  }

  .seen-in-motion .instafeed-new-layout-container .instafeed-new-arrow:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .seen-in-motion .instafeed-new-layout-container .instafeed-new-arrow-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='12' viewBox='0 0 6 12' fill='none'%3E%3Cpath d='M5 1L1 6L5 11' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: left 20px center !important;
    /* Cancel the app's rotate(180deg) - this glyph is already drawn
       pointing left, and the app's rotate is tuned for its own
       symmetric circular icon, not this asymmetric-position override. */
    transform: translateY(-50%) !important;
  }

  .seen-in-motion .instafeed-new-layout-container .instafeed-new-arrow-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='12' viewBox='0 0 6 12' fill='none'%3E%3Cpath d='M1 1L5 6L1 11' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: right 20px center !important;
  }
/* END_SECTION:seen-in-motion */

/* START_SECTION:slideshow (INDEX:122) */
.slideshow-section--bottom-divider {
    border-block-end: var(--slideshow-divider-width) solid var(--slideshow-divider-color);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  /*
    Mobile only: the on-media controls (arrows + progress bar) are absolutely positioned
    10px above the slide bottom, so a slide's content (CTA buttons) with a small
    padding-block-end sat on top of them. Keep the content's bottom padding at least as
    large as the controls' visible height (touch target + the controls' bottom padding)
    plus a gap; a larger merchant padding still wins.
  */
  @media screen and (max-width: 749px) {
    slideshow-component {
      --slideshow-controls-clearance: calc(
        10px + var(--minimum-touch-target) + var(--padding-lg) + var(--padding-md)
      );
    }

    slideshow-component:has(slideshow-controls[controls-on-media]) .slide__content {
      padding-block-end: max(var(--padding-block-end), var(--slideshow-controls-clearance));
    }
  }
/* END_SECTION:slideshow */

/* START_SECTION:store-locator (INDEX:123) */
.store-locator__hero {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 3.25 / 1;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .store-locator__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .store-locator .store-locator__inner {
    grid-column: 2;
  }

  .store-locator__heading {
    margin: 0 0 clamp(24px, 3vw, 48px);
    font-family: 'Scto Grotesk B', var(--font-heading--family), sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 25px;
    line-height: 36px;
    letter-spacing: 0;
    text-transform: none;
  }

  .store-locator__placeholder {
    padding: 40px 0;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    font-family: var(--font-body--family);
  }

  @media screen and (max-width: 749px) {
    .store-locator__hero {
      aspect-ratio: 1.55 / 1;
    }
  }

  #rudsak-store-locator {
    --sl-black: #000;
    --sl-white: #fff;
    --sl-gray: rgb(var(--color-foreground-rgb) / 0.14);

    font-family: var(--font-body--family);
    color: var(--sl-black);
  }

  #rudsak-store-locator input,
  #rudsak-store-locator select {
    border: 1px solid var(--sl-black);
    border-radius: 0;
    font-family: var(--font-body--family);
    color: var(--sl-black);
    background: var(--sl-white);
  }


  #rudsak-store-locator button,
  #rudsak-store-locator a.stockist-directions-link,
  #rudsak-store-locator .stockist-search-button {
    border: 1px solid var(--sl-black);
    border-radius: 0 !important;
    background: var(--sl-black) !important;
    color: var(--sl-white) !important;
    font-family: var(--font-body--family);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
  }

  #rudsak-store-locator button:hover,
  #rudsak-store-locator a.stockist-directions-link:hover {
    background: var(--sl-white) !important;
    color: var(--sl-black) !important;
  }

  #rudsak-store-locator .stockist-result,
  #rudsak-store-locator li {
    border-color: var(--sl-gray);
    border-radius: 0;
  }

  #rudsak-store-locator a {
    color: var(--sl-black);
  }
/* END_SECTION:store-locator */

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

/* START_BLOCK:_announcement (INDEX:125) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

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

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

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:126) */
.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:127) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:128) */
.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:129) */
.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:130) */
.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:131) */
.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:132) */
.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:133) */
.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;
  }

  /* Opt-in focused editorial layout: one primary card with side peeks */
  .section-carousel--editorial-focus {
    min-height: 43.5625rem;
  }

  .carousel-content--editorial-focus {
    --carousel-gap: var(--carousel-gap-mobile, 34px);
    --editorial-card-width: 16.5rem;
    --editorial-peek: calc((100% - var(--editorial-card-width)) / 2);
    --editorial-image-height: 18.5625rem;
    --editorial-gutter: var(--editorial-gutter-mobile, 34px);
    --cursor: default;
  }

  /* Symmetric inline padding lets the focused card sit centred with a peek of the
     adjacent cards on both sides, while the scroller stays start-aligned. */
  .carousel-content--editorial-focus slideshow-slides {
    align-items: flex-start;
    min-height: 0;
    overflow-x: hidden;
    padding-inline: var(--editorial-peek);
    scroll-padding-inline: var(--editorial-peek);
    scroll-snap-type: none;
    scrollbar-width: none;
    touch-action: pan-y;
  }

  .carousel-content--editorial-focus slideshow-slides > .card {
    width: var(--editorial-card-width);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  /*
    Chevrons sit in the gutters between peeks and the focused card,
    vertically centered on the image area, not the caption.
  */
  .carousel-content--editorial-focus slideshow-arrows {
    inset: 0 auto auto 0;
    width: 100%;
    height: var(--editorial-image-height);
    padding-inline: 0;
  }

  .carousel-content--editorial-focus slideshow-arrows .slideshow-control {
    position: absolute;
    top: 50%;
    opacity: 1;
    margin: 0;
    transform: translateY(-50%);
  }

  .carousel-content--editorial-focus .slideshow-control--previous {
    left: 0.75rem;
  }

  .carousel-content--editorial-focus .slideshow-control--next {
    right: 0.75rem;
    left: auto;
    margin-inline-start: 0;
  }

  .carousel-content--editorial-focus slideshow-slides > .card:not([aria-hidden='false']) {
    opacity: 0.72;
    transform: scale(0.92);
    cursor: default;
  }

  .carousel-content--editorial-focus slideshow-slides > .card[aria-hidden='false'] {
    opacity: 1;
    transform: scale(1);
  }

  .carousel-content--editorial-focus .card__content {
    justify-content: flex-start;
  }

  .carousel-content--editorial-focus .card .link,
  .carousel-content--editorial-focus .card .link:hover {
    text-decoration-line: underline;
    text-decoration-color: currentcolor;
    text-underline-offset: 0.15em;
  }

  @media screen and (max-width: 749px) {
    .carousel-content--editorial-focus .image-block,
    .carousel-content--editorial-focus .image-block__image {
      --ratio: 264 / 297;
      aspect-ratio: 264 / 297;
    }

    /* Swipeable by touch on mobile; desktop keeps the arrow-only drag behavior. */
    .carousel-content--editorial-focus slideshow-slides {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      touch-action: pan-x;
    }

    .carousel-content--editorial-focus slideshow-slides > .card {
      scroll-snap-align: center;
    }

    .carousel-content--editorial-focus slideshow-arrows {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .section-carousel--editorial-focus {
      min-height: 56.25rem;
    }

    .carousel-content--editorial-focus {
      --carousel-gap: var(--carousel-gap-desktop, 109px);
      --editorial-card-width: min(54.875rem, 61vw);
      --editorial-gutter: var(--editorial-gutter-desktop, 109px);
      --editorial-image-height: calc(var(--editorial-card-width) * 9 / 16);
    }

    .carousel-content--editorial-focus slideshow-slides {
      align-items: center;
      min-height: 38rem;
    }

    .carousel-content--editorial-focus .slideshow-control--previous {
      left: calc(var(--editorial-peek) - (var(--editorial-gutter) / 2) - 1.375rem);
    }

    .carousel-content--editorial-focus .slideshow-control--next {
      right: calc(var(--editorial-peek) - (var(--editorial-gutter) / 2) - 1.375rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .carousel-content--editorial-focus slideshow-slides > .card {
      transition: none;
    }
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:134) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:135) */
.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:136) */
.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:139) */
.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:141) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:146) */
.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:147) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:149) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:152) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:153) */
.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:154) */
.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;

    /* Hug the left edge when the logo is the first item in the left column */
    .header__column--left & {
      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: 1023px) {
      padding: 0;
    }

    @media screen and (min-width: 1024px) {
      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: 1024px) {
      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);
  }

  /*
   * No separate white logo file exists in theme settings yet (settings.logo_inverse
   * is blank), so this container falls back to rendering the same file as the normal
   * logo. That file is loaded via <img>, which isolates it from the page's CSS - its
   * fill="currentColor" paths resolve inside the image's own document, not against
   * this page's --color-foreground, so recolouring it needs a filter rather than a
   * color change. If a real white/inverse logo is ever uploaded to settings.logo_inverse,
   * this class is omitted and that asset's own colours are trusted instead.
   */
  .header-logo__image-container--inverse-fallback .header-logo__image {
    filter: brightness(0) invert(1);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:155) */
.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: 1024px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

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

  @media screen and (max-width: 1023px) {
    .header__drawer {
      --header-drawer-min-height: 48px;
    }
  }

  .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);
    --menu-link-inline-padding: calc(var(--gap-xl) / 2);

    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);
    line-height: var(--menu-top-level-font-line-height);
    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);
    }
  }

  .menu-list__link-title {
    padding-inline: var(--menu-link-inline-padding);
    /* Let pointerenter hit the <a> (handlers don't bubble for this event) */
    pointer-events: none;
  }

  /*
    The first link's hover padding would otherwise push its text past the page
    margin, breaking alignment with the mega menu columns below it.
  */
  @media screen and (min-width: 1024px) {
    .header__column--left .header-menu .menu-list__list {
      margin-inline-start: calc(-1 * var(--menu-link-inline-padding));
    }
  }

  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

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

  /* Hover bridge below the item so the pointer can move into the submenu without closing */
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: calc(var(--header-padding) + var(--gap-sm));
    margin-bottom: calc(-1 * (var(--header-padding) + var(--gap-sm)));
  }

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

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

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

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

    column-gap: 10px;
    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-5xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .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% calc(var(--full-open-header-height) + 24px) 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)));
  }

  /* The mega menu grows to fit its links so nothing is hidden behind a scroll */
  .menu-list__submenu-inner {
    max-height: none;
    overflow: visible;
  }

  /* Make overflow menu scrollable when content exceeds viewport */
  .overflow-menu::part(overflow-list) {
    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: 'Scto Grotesk B', var(--font-body--family);
    font-style: var(--menu-child-font-style);
    font-weight: 400;
    font-size: 12px;
    line-height: var(--menu-child-font-line-height);
    text-transform: capitalize;
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

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

  .mega-menu__link.mega-menu__link--parent {
    font-family: var(--font-heading--family);
    font-style: var(--menu-parent-font-style);
    font-weight: 700;
    font-size: 12px;
    line-height: var(--menu-parent-font-line-height);
    text-transform: uppercase;
    color: var(--menu-parent-font-color);

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

  .mega-menu__link--emphasis,
  .mega-menu__link.mega-menu__link--parent.mega-menu__link--emphasis {
    font-family: 'Scto Grotesk B', var(--font-body--family);
    font-weight: 500;
  }

  @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__layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--menu-horizontal-gap);
    width: 100%;
  }

  .mega-menu__layout--has-promos {
    gap: clamp(4.5rem, 7vw, 10rem);
  }

  .menu-list__submenu:has(.mega-menu__layout--has-promos) {
    --submenu-padding-block-end: var(--padding-5xl);
  }

  .mega-menu__layout .mega-menu__grid {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mega-menu__layout:not(.mega-menu__layout--has-promos) .mega-menu__grid {
    flex: 0 1 auto;
    width: max-content;
    max-width: 100%;
  }

  .mega-menu__promos {
    display: none;
    flex: 0 0 auto;
    width: 332px;
    max-width: 25%;
    gap: var(--gap-md);
  }

  @media screen and (min-width: 1024px) {
    .mega-menu__promos {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-content: flex-start;
    }
  }

  .mega-menu-promo {
    flex: 0 1 332px;
    width: 100%;
    max-width: 332px;
  }

  .mega-menu-promo__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
  }

  .mega-menu-promo__media {
    display: block;
    width: 100%;
  }

  .mega-menu-promo__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 332 / 395;
    object-fit: cover;
    border-radius: var(--menu-image-border-radius, 0);
  }

  .mega-menu-promo__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-block-start: 0.75rem;
    text-align: center;
  }

  .mega-menu-promo__title {
    font-family: var(--font-heading--family);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
  }

  .mega-menu-promo__cta {
    font-family: var(--font-body--family);
    font-size: 10px;
    font-weight: 400;
    color: #000000;
    line-height: normal;
    letter-spacing: normal;
    text-transform: uppercase;
    /* Same underline treatment as the sitewide `.link` button style (snippets/button.liquid). */
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-decoration-thickness: 0.8px;
    text-underline-offset: 0.25rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /*
    Columns stay at their longest-link width. Extra space is distributed as
    column gaps, so those gaps shrink first when the window narrows.
  */
  .mega-menu__list--text {
    display: grid;
    grid-template-columns: repeat(var(--menu-text-columns, 5), max-content);
    justify-content: start;
    justify-items: start;
    grid-column: 1 / -1;
    width: max-content;
    max-width: 100%;
    column-gap: clamp(5rem, 7vw, 11rem);
    row-gap: var(--menu-vertical-gap);
  }

  /*
    Alongside a promo card the list is stretched and `space-between` spreads the
    columns, so `column-gap` only needs to be a floor. The viewport-sized gap
    above is wider than the space left over next to the promo, which pushed the
    last column (Accessories) into — and below 1280px over — the promo image.
  */
  .mega-menu__layout--has-promos .mega-menu__list--text {
    justify-content: space-between;
    width: 100%;
    column-gap: var(--gap-xl);
  }

  .mega-menu__grid:has(.mega-menu__list--text) {
    grid-template-columns: minmax(0, max-content);
    width: max-content;
    max-width: 100%;
  }

  .mega-menu__layout--has-promos .mega-menu__grid:has(.mega-menu__list--text) {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .mega-menu__stack-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--menu-vertical-gap);
    min-width: 0;
  }

  .mega-menu__list--text .mega-menu__stack-column {
    min-width: max-content;
  }

  .mega-menu__list--text .mega-menu__link {
    white-space: nowrap;
  }

  .mega-menu__stack-group {
    break-inside: avoid;
  }

  /*
    A stacked group with no children is a standalone link ("View all Women"), not a
    category block, so it should read as one more item in the column above it rather
    than as a new section. Cancel the inter-group gap and let the link's own padding
    set the rhythm. Guarded on :not(:first-child) so the same link keeps its normal
    spacing where it heads a column of its own (Outerwear).
  */
  .mega-menu__list--text .mega-menu__stack-group--standalone:not(:first-child) {
    margin-block-start: calc(var(--menu-vertical-gap) * -1);
  }

  /*
    A standalone link is not a section heading, so it drops the heading uppercase and
    renders the menu title as typed in the admin. Unguarded by :not(:first-child) on
    purpose -- it applies wherever the link lands, including where it heads its own
    column (Outerwear). A title stored in caps still renders in caps; casing is the
    navigation menu's to set.
  */
  .mega-menu__list--text .mega-menu__stack-group--standalone .mega-menu__link--parent {
    text-transform: none;
  }

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

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

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

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

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

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

    width: 200px;
  }

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

/* START_BLOCK:_heritage-cta (INDEX:157) */
.heritage-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    color: inherit;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .heritage-cta__icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
  }

  .heritage-cta:hover {
    color: var(--color-primary-hover, inherit);
  }

  .heritage-cta:focus-visible {
    outline: 0.125rem solid currentcolor;
    outline-offset: 0.25rem;
  }
/* END_BLOCK:_heritage-cta */

/* START_BLOCK:_heritage-milestone (INDEX:158) */
.heritage-milestone {
    display: grid;
    align-content: start;
    row-gap: 1.25rem;
    min-height: 22.5rem;
    height: 100%;
    padding: 2rem 1.75rem;
    background-color: var(--color-background);
    scroll-snap-align: start;
  }

  .heritage-milestone__number {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-foreground-muted);
  }

  .heritage-milestone__body {
    display: grid;
    row-gap: 0.75rem;
  }

  .heritage-milestone__heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: var(--font-heading--weight, 700);
    line-height: 1.3;
    text-transform: none;
  }

  .heritage-milestone__text {
    font-size: 0.875rem;
    line-height: 1.5714;
    color: var(--color-foreground-muted);
  }

  .heritage-milestone__text > *:first-child {
    margin-block-start: 0;
  }

  .heritage-milestone__text > *:last-child {
    margin-block-end: 0;
  }
/* END_BLOCK:_heritage-milestone */

/* START_BLOCK:_heritage-value (INDEX:159) */
.heritage-value {
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: 1.5rem;
    scroll-snap-align: start;
  }

  .heritage-value__image {
    width: 100%;
    height: 100%;
    aspect-ratio: 413 / 380;
    object-fit: cover;
    object-position: var(--focal-point, center center);
    display: block;
  }

  .heritage-value__body {
    display: flex;
    flex-direction: column;
    align-items: start;
    row-gap: 0.75rem;
  }

  .heritage-value__heading {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2222;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .heritage-value__text,
  .heritage-value__text p {
    font-size: 0.875rem;
    line-height: 1.5714;
    color: var(--color-foreground-muted);
  }

  .heritage-value__text > *:first-child {
    margin-block-start: 0;
  }

  .heritage-value__text > *:last-child {
    margin-block-end: 0;
  }

  .heritage-value__body .heritage-value__cta {
    margin-block-start: auto;
  }
/* END_BLOCK:_heritage-value */

/* START_BLOCK:_image (INDEX:162) */
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:166) */
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:170) */
.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 .product-badges__badge {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    rotate: 180deg;
    color: var(--color-foreground);
    background-color: var(--badge-background, transparent);
    text-transform: var(--badge-text-transform);
    white-space: nowrap;
  }

  .product-badges__code {
    margin-inline-start: 3px;
  }

  .product-badges__title--bold,
  .product-badges__code--bold {
    font-weight: 700;
  }

  /* Discount-type custom badges (custom_badge.is_discount) render below the card's
     title/price/swatches info, not as an image-overlay corner tag — matching the
     Figma promo-chip placement. `order` pushes it after those blocks in the card's
     flex column regardless of this gallery block's own position in the block order. */
  .product-card-discount-badge {
    order: 1;
    margin: 0;
    /* Matches the title/price blocks' own padding-inline-start setting so this
       lines up with the rest of the card's info instead of sitting flush with
       the card's own edge. */
    padding-inline-start: 12px;
    font-family: var(--font-body--family);
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
  }

  .product-card-discount-badge__code {
    margin-inline-start: 3px;
  }

  .product-card-discount-badge__title--bold,
  .product-card-discount-badge__code--bold {
    font-weight: 700;
  }

  .product-like-button--card-overlay {
    display: none;
    position: absolute;
    z-index: var(--layer-flat);
    bottom: var(--padding-xs);
    right: var(--padding-xs);
  }

  @media screen and (max-width: 749px) {
    :is(.product-recommendations-tabs, .complete-the-look) .quick-add__button:hover,
    :is(.product-recommendations-tabs, .complete-the-look) .quick-add__button:active {
      scale: none;
    }

    :is(.product-recommendations-tabs, .complete-the-look) .quick-add__button:hover::before {
      content: none;
      display: none;
    }

    /* Match Figma: a plain plus mark, no circular button chrome. Complete the Look's
       tiles (snippets/complete-the-look-card.liquid) share this quick-add, so they are
       listed here rather than restyled separately. */
    :is(.product-recommendations-tabs, .product-grid, .complete-the-look) .quick-add__button {
      background: none;
      border: none;
      /* .button draws its border as an inset box-shadow, not `border` — reset it too. */
      box-shadow: none;
      backdrop-filter: none;
      /* Guarantees the plus mark reads against any product photo behind it
         (light or dark), the same way the progress-bar tick and slideshow
         arrows already do (slideshow-controls.liquid) - not a redesign, just
         reusing the existing contrast technique for a glyph that otherwise
         has no chrome of its own to fall back on. */
      mix-blend-mode: difference;
    }

    /* A brief, restrained press cue - "more intuitive to click" per the
       captain's ask - without adding permanent button chrome Figma didn't
       spec. Sized well inside the enlarged touch target (quick-add.liquid)
       so it never reads as the tappable area itself. */
    :is(.product-recommendations-tabs, .product-grid, .complete-the-look) .quick-add__button:active::after {
      content: '';
      position: absolute;
      inset: 0;
      margin: auto;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: currentcolor;
      /* No mix-blend-mode of its own: the parent button already differences
         against the photo, so this circle rides along in that same blended
         group instead of double-blending against it. */
      opacity: 0.35;
    }

    :is(.product-recommendations-tabs, .product-grid, .complete-the-look) .quick-add__button .add-to-cart-text {
      background: none;
      border: none;
    }

    :is(.product-recommendations-tabs, .product-grid, .complete-the-look) .quick-add__button .add-to-cart-icon svg {
      display: none;
    }

    :is(.product-recommendations-tabs, .product-grid, .complete-the-look) .quick-add__button .add-to-cart-icon {
      position: relative;
    }

    :is(.product-recommendations-tabs, .product-grid, .complete-the-look) .quick-add__button .add-to-cart-icon::after {
      content: '';
      position: absolute;
      /* Flush to this container's own right edge (which is the button's right
         edge) instead of centered, so it lines up with the slideshow arrow
         icon, which hugs that same edge. */
      inset: 0 0 0 auto;
      margin: auto;
      /* Matches Figma mobile PLP card spec, not an --icon-size-* token. */
      width: 7px;
      height: 7px;
      /* Deliberately thinner than the theme's --icon-stroke-width setting —
         at this icon's small mobile size the default weight reads too bold. */
      background-color: currentcolor;
      mask: var(--icon-quick-add-plus) no-repeat center / contain;
      -webkit-mask: var(--icon-quick-add-plus) no-repeat center / contain;
    }

    /* Match Figma: smaller chevron on mobile PLP/recs cards than the site-wide default. */
    :is(.product-recommendations-tabs, .product-grid) .slideshow-control .icon-chevron,
    :is(.product-recommendations-tabs, .product-grid) .slideshow-control .icon-chevron > svg {
      width: 0.3rem;
      height: 0.45rem;
    }
  }
/* END_BLOCK:_product-card-gallery */

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

    .product-details__breadcrumbs {
      /* The group column aligns children via align-items (shrink-to-content), so
         without this the box stays only as wide as its widest wrapped line and
         justify-content: center below centers within that narrow box instead of
         the real available width. */
      align-self: stretch;
      width: 100%;
      margin-block-end: 5px;
    }

    .product-details__breadcrumbs .breadcrumbs__list {
      gap: 0;
      font-size: 12px;
      font-weight: 400;
      line-height: 26px;
      color: #838282;
      justify-content: flex-start;
    }

    .product-details__breadcrumbs .breadcrumbs__list a {
      color: inherit;
      text-decoration: none;
    }

    .product-details__breadcrumbs .breadcrumbs__list li[aria-hidden='true'] {
      padding-inline: 8px;
      font-size: 14px;
      line-height: 20px;
    }

    /* Mobile crumbs start at L1 (no Home) */
    .product-details__breadcrumbs .breadcrumbs__list > li:first-child,
    .product-details__breadcrumbs .breadcrumbs__list > li:first-child + li[aria-hidden='true'] {
      display: none;
    }

    .product-details > .group-block > .group-block-content > .group-block:has(+ .color-swatch) {
      margin-block-end: 20px;
    }
  }

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

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

  .product-details > .group-block {
    width: 100%;
  }

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

  .product-details .group-block .group-block > .group-block-content.layout-panel-flex--column > .group-block:first-child > .group-block-content {
    align-items: flex-start;
    width: 100%;
  }

  .product-details .group-block .group-block > .group-block-content.layout-panel-flex--column > .group-block:first-child .text-block {
    flex: 1 1 auto;
    min-width: 0;
  }

  .product-details .text-block :is(h1, h2, h3, .text-block__text) {
    margin-block: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: normal;
    color: var(--color-foreground);
  }

  .product-details product-price {
    margin-block-start: 0;
  }

  .product-details product-price.custom-font-size .price,
  .product-details product-price.custom-font-size .compare-at-price {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: normal;
  }

  .product-details product-price.custom-font-size .price--on-sale {
    font-weight: 700;
  }

  .product-details .text-block.rte :is(p, li, td),
  .product-details .text-block.paragraph :is(p, li, td) {
    font-size: var(--font-size--sm);
    font-weight: 400;
    line-height: var(--font-paragraph--line-height);
  }

  .product-details .variant-option--buttons:not(.variant-option--swatches),
  .product-details .variant-option--buttons.variant-option--equal-width-buttons:not(.variant-option--swatches) {
    --pdp-size-button-height: 36px;
    display: flex;
    flex-wrap: wrap;
    width: auto;
    max-width: 100%;
    gap: 0;
    background-color: transparent;
    padding: 0;
    border: none;
    grid-template-columns: none;
    overflow: visible;
  }

  .product-details .variant-option--buttons:not(.variant-option--swatches) legend {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .product-details .variant-option--buttons[data-is-size-option='true'] legend {
    position: static;
    overflow: visible;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    margin-block-end: 8px;
    padding: 0;
    clip: auto;
    white-space: normal;
    flex: 0 0 100%;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 16px;
    text-transform: capitalize;
    color: var(--color-foreground);
  }

  .product-details .variant-option--buttons[data-is-size-option='true'] .variant-option__swatch-value {
    padding-inline-start: 0.25em;
    font-weight: inherit;
    color: inherit;
  }

  .product-details .variant-option[data-testid='variant-option-single'][data-is-size-option='true'] {
    margin: 0;
    margin-block-end: 8px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 16px;
    text-transform: capitalize;
    color: var(--color-foreground);
  }

  .product-details .variant-option[data-testid='variant-option-single'][data-is-size-option='true'] .variant-option__swatch-value {
    padding-inline-start: 0.25em;
    font-weight: inherit;
    color: inherit;
  }

  .product-details .variant-option__legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--padding-sm);
  }

  .product-details .variant-option__size-guide {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 16px;
    text-transform: capitalize;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .product-details .variant-option__size-guide-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 2.5px;
    height: 5px;
  }

  .product-details .variant-option__size-guide-icon svg {
    display: block;
    width: 2.5px;
    height: 5px;
  }

  .product-details .variant-option--buttons[data-is-color-option='true'] {
    margin-block-end: 30px;
  }

  /* Colour family swatches — beat size-button styles */
  .product-details .color-swatch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin: 0;
    margin-block-end: 30px;
    padding: 0;
    border: none;
  }

  .product-details .color-swatch__legend {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 28px;
    color: var(--color-foreground);
  }

  .product-details .color-swatch__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .product-details .color-swatch__item {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
  }

  .product-details .color-swatch__link {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    text-decoration: none;
    line-height: 0;
    overflow: visible;
  }

  .product-details .color-swatch__link::before,
  .product-details .color-swatch__link::after {
    content: none;
    display: none;
  }

  [data-template='product'] .product-details .color-swatch__link .swatch,
  [data-template='product'] .product-details .color-swatch__link .color-swatch__dot {
    --swatch-width: 18px;
    --swatch-height: 18px;
    display: block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    background-color: var(--swatch-background);
    background-image: var(--swatch-background);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
  }

  /*
   * Selection is drawn by the ring only (2px background + 3px foreground box-shadow in
   * snippets/color-swatch.liquid), never by resizing the dot - 86akjv4vz. The dot stays at
   * the 18px set above in every state at every viewport, so the ring lands on the 24px box
   * Figma draws for the selected swatch (18 + 6). The only selected-state change is dropping
   * the hairline border so it does not show through inside the ring.
   */
  [data-template='product'] .product-details .color-swatch__link.is-selected .swatch,
  [data-template='product'] .product-details .color-swatch__link.is-selected .color-swatch__dot {
    border-color: transparent;
  }

  [data-template='product'] .product-details .color-swatch__link:not(.is-selected):hover .swatch,
  [data-template='product'] .product-details .color-swatch__link:not(.is-selected):hover .color-swatch__dot {
    box-shadow:
      0 0 0 2px var(--color-background, #fff),
      0 0 0 3px rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
  }

  .product-details .variant-option--swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    margin-block-end: 30px;
    padding: 0;
    border: none;
    background: transparent;
  }

  .product-details .variant-option--swatches legend {
    position: static;
    overflow: visible;
    width: 100%;
    height: auto;
    margin: 0;
    margin-block-end: 8px;
    padding: 0;
    clip: auto;
    white-space: normal;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 28px;
    color: var(--color-foreground);
  }

  .product-details .variant-option--swatches .variant-option__swatch-value {
    padding-inline-start: 0.25em;
    font-weight: inherit;
    color: inherit;
  }

  .product-details .variant-option--swatches .variant-option__button-label--has-swatch {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    overflow: visible;
  }

  .product-details .variant-option--swatches .variant-option__button-label--has-swatch::before,
  .product-details .variant-option--swatches .variant-option__button-label--has-swatch::after {
    content: none;
    display: none;
  }

  .product-details .variant-option--swatches .swatch {
    --swatch-width: 24px;
    --swatch-height: 24px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
  }

  .product-details .variant-option--swatches .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .product-details .variant-option--swatches .variant-option__button-label--has-swatch:hover .swatch {
    box-shadow:
      0 0 0 2px var(--color-background, #fff),
      0 0 0 3px rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
  }

  .product-details .variant-option--swatches .variant-option__button-label--has-swatch:has(:checked),
  .product-details .variant-option--swatches .variant-option__button-label--has-swatch:has(:checked):hover {
    outline: none;
  }

  .product-details .variant-option--swatches .variant-option__button-label--has-swatch:has(:checked) .swatch {
    box-shadow:
      0 0 0 2px var(--color-background, #fff),
      0 0 0 3px var(--color-foreground);
  }

  .product-details .variant-option--equal-width-buttons .variant-option__button-label:not(
      .variant-option__button-label--has-swatch
    ) {
    width: 50px;
    min-width: 50px;
    flex: 0 0 auto;
  }

  .product-details .variant-option__button-label:not(.variant-option__button-label--has-swatch) {
    border: 1px solid transparent;
    border-radius: 0;
    margin: 0;
    min-height: var(--pdp-size-button-height);
    height: var(--pdp-size-button-height);
    min-width: 50px;
    width: 50px;
    flex: 0 0 auto;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--color-variant-background);
    color: var(--color-foreground);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-transform: capitalize;
    overflow: visible;
    z-index: 0;
  }

  .product-details
    .variant-option__button-label:has(:checked):not(.variant-option__button-label--has-swatch):not(
      :has([data-option-available='false'])
    ),
  .product-details
    .variant-option__button-label:not(.variant-option__button-label--has-swatch):not(
      :has([data-option-available='false'])
    ):hover {
    z-index: 1;
  }

  .product-details .variant-option__button-label__pill {
    display: none;
  }

  .product-details .variant-option__button-label:not(.variant-option__button-label--has-swatch)::before,
  .product-details .variant-option__button-label:not(.variant-option__button-label--has-swatch)::after {
    display: none;
  }

  .product-details .variant-option__button-label__text {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-transform: capitalize;
  }

  .product-details
    .variant-option__button-label:has(:checked):not(.variant-option__button-label--has-swatch):not(
      :has([data-option-available='false'])
    ) {
    background-color: var(--color-selected-variant-background);
    color: var(--color-selected-variant-text);
    border-width: 1px;
    border-color: var(--color-selected-variant-border);
  }

  .product-details
    .variant-option__button-label:not(.variant-option__button-label--has-swatch):not(
      :has([data-option-available='false'])
    ):hover {
    background-color: var(--color-variant-hover-background);
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .product-details
    .variant-option__button-label:has(:checked):not(.variant-option__button-label--has-swatch):not(
      :has([data-option-available='false'])
    ):hover {
    background-color: var(--color-selected-variant-hover-background);
    color: var(--color-selected-variant-hover-text);
    border-color: var(--color-selected-variant-hover-border);
  }

  .product-details .variant-option__button-label:has([data-option-available='false']) {
    background-color: var(--color-variant-background);
    color: var(--color-foreground-muted);
  }

  /* Buy-box vertical rhythm */
  .product-details > .group-block > .group-block-content.layout-panel-flex--column {
    gap: 0;
  }

  .product-details > .group-block > .group-block-content > .group-block {
    margin-block-end: var(--product-details-block-gap, 30px);
  }

  .product-details .variant-option--buttons[data-is-size-option='true'] {
    margin-block-end: 30px;
  }

  .product-details .buy-buttons-block {
    margin-block-start: 0;
    margin-block-end: 0;
  }

  /* Override buy-buttons.liquid gap: var(--gap-sm) */
  .product-details .product-form-buttons,
  .product-details .product-form-buttons:not(:has(.quantity-rules)) {
    gap: 10px;
  }

  .product-details .product-klarna-row {
    margin-block-start: 20px;
    margin-block-end: 20px;
  }

  .product-details .product-shipping-information {
    margin-block-end: 0;
  }

  .product-details .product-temperature-rating {
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .product-details .product-model-info {
    margin-block-start: 26px;
    margin-block-end: 26px;
  }

  .product-details .product-disclosures {
    margin-block-start: 0;
    padding-block-start: 26px;
  }

  /*
   * Trigger-row chevron only (not the flyout content) — Figma still specs 2.5x5px here
   * (node 4138:10006), but 86akm0tuv asks for these enlarged and aligned to the label text,
   * a deliberate deviation from that spec. Sized up while correcting toward the source icon's
   * own aspect ratio (icon-disclosure-chevron.svg's viewBox is 8x13 ≈ 0.615) rather than keeping
   * 2.5x5's more exaggerated squish (0.5), and aligned to the label's baseline (see
   * .product-disclosure-row__trigger below) rather than centered in the row's line box, which
   * sits visibly low for a no-descender label per the swatch-checkmark lesson elsewhere in this
   * project.
   */
  .product-details .product-disclosure-row__icon,
  .product-details .product-disclosure-row__icon svg {
    width: 5px;
    height: 8px;
  }

  .product-details .product-disclosure-row__trigger {
    align-items: baseline;
  }

  .product-details .add-to-cart-button {
    min-height: 44px;
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: normal;
    text-transform: uppercase;
    padding-block: 10px;
    padding-inline: 20px 15px;
  }

  /*
   * Desktop: the trailing inset is what puts the cart icon on the same right-hand line as
   * the express payment icons directly below it - Figma has both ~30px in from the 450px
   * column's right edge, staging had the cart icon 14.7px further right (86ajf7kxm).
   * `.product-express-payment__icons` is a 111px flex box holding 82.33px of icons, so
   * its last icon stops 28.67px inside the 1px border = 29.67px from the outer edge; 30px
   * here lands the cart icon within a third of a pixel of it. Mobile has the same offset
   * but is a separate ticket (86ajqy57u), so 390 is left alone.
   */
  @media screen and (min-width: 750px) {
    .product-details .add-to-cart-button {
      padding-inline: 20px 30px;
    }
  }

  .product-details .add-to-cart-button .add-to-cart-text {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    gap: 14px;
  }

  .product-details .add-to-cart-button .add-to-cart-icon,
  .product-details .add-to-cart-button .add-to-cart-icon > svg {
    width: 16px;
    height: 24px;
  }

  @media screen and (max-width: 749px) {
    .product-details .add-to-cart-button {
      font-size: 12px;
    }

    /*
     * Mobile (86ajqy57u): same misalignment as desktop (86ajf7kxm above), same fix.
     * Measured on the staging PDP at 390: `.product-express-payment__icons` is still
     * the fixed-size 111px flex box carrying 82.31px of icon glyphs (icons don't
     * scale with viewport), so its last icon's right edge sits 29.69px inside the
     * button's own right edge - both buttons share the same left/right screen
     * position, so the two right edges are directly comparable. The cart icon was
     * landing 14.69px past that (padding-inline-end: 15px, unchanged from the base
     * rule above). Because the icon-box geometry is pixel-fixed rather than
     * container-relative, the number this derivation lands on is 30px - the same
     * figure desktop uses - so this is stated explicitly rather than left as a
     * silent coincidence: mobile gets its own rule here (not a widened desktop
     * query) so the two breakpoints stay independently documented and adjustable.
     */
    .product-details .add-to-cart-button {
      padding-inline: 20px 30px;
    }

    .product-details shopify-accelerated-checkout {
      --shopify-accelerated-checkout-button-block-size: 40px;
    }

    /*
     * Figma mobile (4188:11120, Frame 463) lays the buy box out as a gap-[15px]
     * auto-layout: colour -> size -> add-to-cart are 15px apart, not the 30px the
     * base rules above set. Scoped to mobile on purpose - the desktop buy box was
     * measured and signed off at 30px, so these must not become unscoped edits to
     * the base rules at .color-swatch / .variant-option--buttons.
     */
    .product-details .color-swatch,
    .product-details .variant-option--buttons[data-is-color-option='true'],
    .product-details .variant-option--buttons[data-is-size-option='true'] {
      margin-block-end: 15px;
    }

    /*
     * Figma mobile (6270:15829) is gap-[26px] between protection rating, model info
     * and the accordion list. .product-model-info already supplies that 26px on both
     * sides; .product-disclosures' own padding-block-start stacked a second 26px on
     * top of it (flex siblings, so no margin collapsing) and the gap rendered at 52px.
     * The temperature -> model-info gap above measures exactly 26px from the margin
     * alone, which is the pattern followed here. Mobile-scoped: desktop keeps its
     * signed-off spacing.
     */
    .product-details .product-disclosures {
      padding-block-start: 0;
    }
  }

  /* Express payment chrome lives in accelerated-checkout block */
  .product-details .product-express-payment {
    width: 100%;
  }

  .product-details .shopify-payment-button {
    width: 100%;
  }

  .product-details shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: 0;
    width: 100%;
  }

  /*
    Seel PDP banner nests inside .product-shipping-information (one grey box).
    Nested styles live on the shipping block. Fallback below if shipping is absent.
  */
  .product-details .seal-banner-container,
  .product-information .seal-banner-container {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 56px;
    margin: 0 !important;
    padding: 12px 20px !important;
    background: #f6f6f6 !important;
    border: none !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif;
    color: #000;
    text-align: center;
  }

  .product-details > .seal-banner-container .seal-banner-icon,
  .product-information > .seal-banner-container .seal-banner-icon {
    display: none !important;
  }

  .product-details > .seal-banner-container .seal-banner-info-link,
  .product-information > .seal-banner-container .seal-banner-info-link {
    display: inline-flex !important;
    align-items: center;
    margin-left: 4px !important;
  }

  .product-details > .seal-banner-container .seal-banner-info-icon,
  .product-information > .seal-banner-container .seal-banner-info-icon {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
  }

  .product-details > .seal-banner-container .seal-banner-title,
  .product-information > .seal-banner-container .seal-banner-title {
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    color: #000 !important;
  }

  .product-details > .seal-banner-container .rudsak-seel-name,
  .product-information > .seal-banner-container .rudsak-seel-name {
    font-weight: 700 !important;
  }

  .product-details > .seal-banner-container .seal-banner-copywirght,
  .product-information > .seal-banner-container .seal-banner-copywirght {
    margin-left: 0.25em !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #000 !important;
  }

  .product-details .seal-widget,
  .product-details .seal_widget,
  .product-information .seal-widget,
  .product-information .seal_widget {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif;
    color: #000;
  }

  .product-details .seal-widget-container,
  .product-information .seal-widget-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 55px;
    margin: 0 !important;
    padding: 10px 20px !important;
    background: rgb(240 240 240 / 0.6) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .product-details .seal-header,
  .product-information .seal-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  .product-details .seal-widget input[type='checkbox'],
  .product-details .seal-widget [data-seel-wfp-input],
  .product-information .seal-widget input[type='checkbox'],
  .product-information .seal-widget [data-seel-wfp-input] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    flex: 0 0 15px !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin: 0.5px 0 0 !important;
    padding: 0 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer;
  }

  .product-details .seal-widget input[type='checkbox']::before,
  .product-details .seal-widget [data-seel-wfp-input]::before,
  .product-information .seal-widget input[type='checkbox']::before,
  .product-information .seal-widget [data-seel-wfp-input]::before {
    content: none !important;
    display: none !important;
  }

  .product-details .seal-widget input[type='checkbox']:checked,
  .product-details .seal-widget [data-seel-wfp-input]:checked,
  .product-information .seal-widget input[type='checkbox']:checked,
  .product-information .seal-widget [data-seel-wfp-input]:checked {
    background-color: #fff !important;
    border-color: #000 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M10 3L4.5 8.5 2 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px !important;
  }

  .product-details .seal-header-text-line,
  .product-information .seal-header-text-line {
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  .product-details .seal-title,
  .product-details .seal-widget [data-seel-wfp-name],
  .product-information .seal-title,
  .product-information .seal-widget [data-seel-wfp-name] {
    margin: 0 !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    color: #000 !important;
  }

  .product-details .seal-price,
  .product-details .seal-widget [data-seel-wfp-price],
  .product-information .seal-price,
  .product-information .seal-widget [data-seel-wfp-price] {
    margin: 0 !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    color: #000 !important;
  }

  .product-details .seal-info,
  .product-information .seal-info {
    width: 12px !important;
    height: 12px !important;
  }

  .product-details .seal-benefits-container-checkbox,
  .product-information .seal-benefits-container-checkbox {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 0 0 0 25px !important;
    border: none !important;
  }

  .product-details .seal-collapse-content,
  .product-information .seal-collapse-content {
    display: contents !important;
  }

  .product-details .seal-benefits,
  .product-details .seal-benefit,
  .product-details .seal-widget [data-seel-wfp-desc],
  .product-details .otherDesc,
  .product-information .seal-benefits,
  .product-information .seal-benefit,
  .product-information .seal-widget [data-seel-wfp-desc],
  .product-information .otherDesc {
    display: inline !important;
    margin: 0 !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 16.5px !important;
    color: #6b6b6b !important;
  }

  .product-details .seal-benefit + .seal-benefit,
  .product-information .seal-benefit + .seal-benefit {
    display: none !important;
  }

  .product-details .seal-footer-powered,
  .product-information .seal-footer-powered {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    line-height: 16.5px !important;
    color: #6b6b6b !important;
  }

  .product-details .seal-footer-powered img,
  .product-details .seal-footer-powered svg,
  .product-information .seal-footer-powered img,
  .product-information .seal-footer-powered svg {
    display: inline-block !important;
    width: 24px !important;
    height: auto !important;
    max-height: 10px !important;
  }

  .product-details .seal-widget a,
  .product-information .seal-widget a {
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 16.5px !important;
    color: #000 !important;
    text-decoration: underline !important;
  }

  .product-details .seal-collapse-toggle,
  .product-details .seal-warning,
  .product-details .seal-cash-back,
  .product-information .seal-collapse-toggle,
  .product-information .seal-warning,
  .product-information .seal-cash-back {
    display: none !important;
  }

  /* Extend Warranty PDP widget — match add-on bar language */
  .product-details .seel_pdp_widget,
  .product-information .seel_pdp_widget {
    --seel-ew-main-color: #000;
    box-sizing: border-box;
    width: 100%;
    margin: 20px 0 0 !important;
    padding: 10px 20px !important;
    background: rgb(240 240 240 / 0.6) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif;
  }

  .product-details .seel_pdp_widget--title_line--name,
  .product-information .seel_pdp_widget--title_line--name,
  .product-details .seel_pdp_widget_listType .seel_pdp_widget--title_line--name,
  .product-information .seel_pdp_widget_listType .seel_pdp_widget--title_line--name {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    color: #000 !important;
    margin-right: 6px !important;
  }

  .product-details .seel_pdp_widget--title_line--proweredby,
  .product-information .seel_pdp_widget--title_line--proweredby {
    font-size: 8px !important;
    color: #6b6b6b !important;
  }

  .product-details .seel_pdp_widget--title_line--logo,
  .product-information .seel_pdp_widget--title_line--logo {
    width: 24px !important;
    height: auto !important;
    max-height: 10px !important;
  }

  .product-details .seel_pdp_widget--description,
  .product-information .seel_pdp_widget--description {
    margin: 0 0 8px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 16.5px !important;
    color: #6b6b6b !important;
  }

  .product-details .seel_pdp_widget--link,
  .product-information .seel_pdp_widget--link,
  .product-details a.seel_pdp_widget--link,
  .product-information a.seel_pdp_widget--link {
    font-size: 9px !important;
    font-weight: 400 !important;
    color: #000 !important;
    text-decoration: underline !important;
  }

  .product-details .seel_pdp_widget--option,
  .product-information .seel_pdp_widget--option {
    border: 1px solid #555 !important;
    border-radius: 0 !important;
    color: #555 !important;
    background: #fff !important;
    max-width: none !important;
    margin: 0 8px 0 0 !important;
  }

  .product-details .seel_pdp_widget--option:last-child,
  .product-information .seel_pdp_widget--option:last-child {
    margin-right: 0 !important;
  }

  .product-details .seel_pdp_widget--option--selected,
  .product-information .seel_pdp_widget--option--selected {
    border-color: #000 !important;
    border-width: 1px !important;
    color: #000 !important;
  }

  .product-details .seel_pdp_widget--option--best-seller-badge,
  .product-information .seel_pdp_widget--option--best-seller-badge {
    display: none !important;
  }

  .product-details .seel_pdp_widget--option_listType,
  .product-information .seel_pdp_widget--option_listType {
    border: 1px solid #555 !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 44px;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background: #fff !important;
  }

  .product-details .seel_pdp_widget--option_listType .seel_pdp_widget--option--term,
  .product-information .seel_pdp_widget--option_listType .seel_pdp_widget--option--term {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #000 !important;
    gap: 10px;
  }

  .product-details .seel_pdp_widget--option--price_listType,
  .product-information .seel_pdp_widget--option--price_listType {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #000 !important;
  }

  .product-details .seel_pdp_widget_listType .seel_pdp_widget--option_checkbox,
  .product-information .seel_pdp_widget_listType .seel_pdp_widget--option_checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 15px !important;
    height: 15px !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    background: #fff !important;
    margin-right: 10px !important;
  }

  .product-details .seel_pdp_widget_listType .seel_pdp_widget--option_checkbox:checked,
  .product-information .seel_pdp_widget_listType .seel_pdp_widget--option_checkbox:checked {
    background-color: #fff !important;
    border-color: #000 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M10 3L4.5 8.5 2 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px !important;
  }

  .product-details .seel_pdp_widget_listType .seel_pdp_widget--option_checkbox:checked::before,
  .product-information .seel_pdp_widget_listType .seel_pdp_widget--option_checkbox:checked::before {
    content: none !important;
    display: none !important;
  }

  .product-details .seal-widget-ew-add-to-cart,
  .product-information .seal-widget-ew-add-to-cart {
    display: none !important; /* keep single ATC */
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:178) */
.search-page-input__parent {
    display: block;
    width: 100%;
  }

  /* Sits as its own row in .search-panel__rows, which supplies the spacing. */
  .search-results__no-results {
    margin: 0;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-subdued);
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:179) */
.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__video is now wrapped in a display:contents deferred-media (for the play/pause
     toggle button), so it's a grandchild, not a direct child, of .slide__image-container */
  .slide__image-container .slide__video,
  .slide__image-container > .slide__video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__image {
    position: relative;
  }

  /*
    display: contents on the wrapping <deferred-media> (for the play/pause toggle button)
    promotes both .slide__video and the button to be direct flex-item children of the
    (display: flex) .slide__image-container, instead of the single item .slide__video was
    before - and since neither the desktop nor mobile toggle button carries a
    --desktop-only/--mobile-only class, both stay in flex flow at every viewport. Left alone,
    .slide__image-container squeezes all of these (both videos when the display override
    below hasn't landed yet, plus both always-present buttons) into equal-width columns
    instead of one full-bleed video - the "duplicated, split into panes" bug (17tqamen3vb
    follow-up). Pulling video/poster/button out of flex flow with position: absolute (as
    .slide__video-poster already did) fixes that regardless of how many are technically
    still `display: block`.
  */
  .slide__image-container .slide__video,
  .slide__image-container > .slide__video-poster,
  .slide__image-container .deferred-media__poster-button {
    position: absolute;
    inset: 0;
  }

  /*
    A position: absolute video (see above) paints above a non-positioned sibling regardless
    of z-index or source order, so the button also needs a stacking position of its own to
    stay clickable above it (same pattern as heritage-hero/layered-slideshow).
  */
  .slide__image-container .deferred-media__poster-button {
    z-index: 1;
  }

  @media screen and (max-width: 749px) {
    /*
      base.css's `:is(deferred-media, product-model) > .deferred-media__poster-button ~
      *:not(template)` rule sets display: block on the wrapped video with higher specificity
      (0,1,2) than a bare `.slide__video--desktop-only` class selector (0,1,0), so it silently
      wins over this display: none and leaves the inactive video visible at every viewport -
      part of the same "duplicated" bug described above. Qualifying with the container class
      raises this to (0,2,0), which reliably wins instead.
    */
    .slide__image-container .slide__video--desktop-only,
    .slide__video-poster--desktop-only,
    .slide__image--desktop-only {
      display: none;
    }

    /*
      The toggle button doesn't carry a --desktop-only/--mobile-only class of its own (it's a
      sibling of the video inside deferred-media, not the video itself), so without this the
      desktop video's button stays visible - and clickable, toggling a video that isn't shown
      - on top of the active mobile video's own button.
    */
    .slide__image-container deferred-media:has(> .slide__video--desktop-only) .deferred-media__poster-button {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .slide__image-container .slide__video--mobile-only,
    .slide__video-poster--mobile-only,
    .slide__image--mobile-only {
      display: none;
    }

    .slide__image-container deferred-media:has(> .slide__video--mobile-only) .deferred-media__poster-button {
      display: none;
    }
  }

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

  .slide__link ~ .slide__image-container {
    pointer-events: none;
  }

  /*
    .slide__content sits above .slide__image-container (it carries its own z-index, so it
    stacks above the image container's video/poster regardless of DOM order); unlike
    .slide__image-container above, it needs pointer-events: none unconditionally (not just
    when a .slide__link sibling exists) - otherwise a linkless video slide's content area
    silently swallows clicks meant for the play/pause toggle button underneath, even over
    space with no text/button content of its own. Its own interactive children (CTA
    buttons, etc.) opt back in via the exception below either way.
  */
  .slide__content {
    pointer-events: none;

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

  /* Let the first tap on a peeking/inactive slide bring it into focus instead of following the link */
  slideshow-slide[aria-hidden='true'] .slide__link {
    pointer-events: none;
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:180) */
.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: default;
  }

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

/* START_BLOCK:accelerated-checkout (INDEX:181) */
.accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  /* Express payment — 44px bar: label column + 111px icon column */
  .product-express-payment {
    position: relative;
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid #555;
    background-color: #fff;
    overflow: hidden;
  }

  .product-express-payment__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    box-sizing: border-box;
    pointer-events: none;
    background-color: #fff;
  }

  .product-express-payment__label {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    padding: 10px 15px 10px 20px;
    box-sizing: border-box;
    color: #555;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: normal;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .product-express-payment__icons {
    display: flex;
    flex: 0 0 111px;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 111px;
    height: 44px;
    box-sizing: border-box;
  }

  .product-express-payment__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: #555;
  }

  .product-express-payment__icon svg {
    display: block;
    overflow: visible;
  }

  .product-express-payment__icon--apple {
    width: 22.583px;
    height: 9.375px;
  }

  .product-express-payment__icon--apple svg {
    width: 22.583px;
    height: 9.375px;
  }

  .product-express-payment__icon--paypal {
    width: 26.743px;
    height: 7.2px;
  }

  .product-express-payment__icon--paypal svg {
    width: 26.743px;
    height: 7.2px;
  }

  .product-express-payment__icon--card {
    width: 15px;
    height: 9.375px;
  }

  .product-express-payment__icon--card svg {
    width: 15px;
    height: 9.375px;
  }

  /* Native Shopify wallet control sits on top (invisible) so clicks open real express pay */
  .product-express-payment__native {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    overflow: hidden;
  }

  .product-express-payment__native .shopify-payment-button,
  .product-express-payment__native shopify-accelerated-checkout,
  .product-express-payment__native .shopify-payment-button__button {
    width: 100% !important;
    height: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    display: block !important;
  }

  .product-express-payment__native shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: 0;
    --shopify-accelerated-checkout-button-block-size: 44px;
  }

  /*
   * Mobile Figma (129:5382) draws the express payment bar 40px tall; desktop's is 44px
   * and was signed off there, so the override is viewport-scoped rather than a change to
   * the 44px base above. The 13px/16px label plus its 10px block padding is 36px, so it
   * still fits inside 40px without touching the type.
   */
  @media screen and (max-width: 749px) {
    .product-express-payment {
      height: 40px;
      min-height: 40px;
    }

    .product-express-payment__icons {
      height: 40px;
    }

    .product-express-payment__native .shopify-payment-button,
    .product-express-payment__native shopify-accelerated-checkout,
    .product-express-payment__native .shopify-payment-button__button {
      min-height: 40px !important;
    }

    .product-express-payment__native shopify-accelerated-checkout {
      --shopify-accelerated-checkout-button-block-size: 40px;
    }
  }

  .product-express-payment__native .shopify-payment-button__more-options,
  .product-express-payment more-payment-options-link,
  .product-express-payment .shopify-payment-button__more-options {
    display: none !important;
  }

  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:182) */
.accordion {
    flex: 1;
    width: 100%;
  }

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

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

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

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

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

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

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

    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .add-to-cart-button.button-base,
  .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:189) */
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:191) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:192) */
.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: flex-end;
    }
  }

  .contact-form__field {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--gap-2xs);
    min-width: 0;
  }

  .contact-form__label:not(.visually-hidden) {
    font-family: var(--font-heading--family);
    font-size: var(--font-size--xs);
    font-weight: var(--font-heading--weight);
    line-height: var(--line-height--body-tight);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  .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--underline .contact-form__input {
    padding-inline: 0;
    padding-block: var(--padding-xs);
    background-color: transparent;
    border: none;
    border-block-end: var(--style-border-width) solid var(--color-border);
    border-radius: 0;
  }

  .contact-form--underline .contact-form__input--textarea {
    border: var(--style-border-width) solid var(--color-border);
    padding-inline: var(--padding-lg);
    padding-block: var(--padding-lg);
  }

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

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

    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: stretch;
    width: 100%;
    flex-direction: column;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) .email-signup__input,
  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) .email-signup__button {
    width: 100%;
  }

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

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

  .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: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    margin-block-end: var(--border-width);
  }

  .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: 14px;
    height: 14px;
    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:filters (INDEX:196) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  /* Leading slot for content owned by the host section — the search page's category
     tabs — kept ahead of every control the toolbar renders itself. */
  .facets__leading {
    display: flex;
    order: 0;
    align-items: center;
    min-width: 0;
    height: 100%;
    margin-inline-end: auto;
  }

  .facets__drawer-trigger,
  .facets__media-view {
    display: none;
  }

  .facets__drawer-trigger-sort-suffix {
    display: none;
  }

  /* Icon sizing matches Figma for both the desktop and mobile toolbars */
  .product-grid-container--collection .column-picker--default svg {
    width: 10px;
    height: 10px;
  }

  /* Sized up from the Figma spec (11.312 x 10.107) so the dense-grid icon and its checked color change are legible */
  .product-grid-container--collection .column-picker--zoom-out svg {
    width: 18px;
    height: 16.1px;
  }

  .product-grid-container--collection
    .column-options__option-input:checked
    ~ .column-picker {
    background-color: transparent;
  }

  @media screen and (min-width: 750px) {
    .product-grid-container--collection .facets-block-wrapper--horizontal {
      grid-column: var(--full-width);
      margin: 0;
    }

    /* This element's padding-inline is merchant-controlled via the block's
       padding-inline-start/end settings, which emit inline custom properties.
       Do not try to set --padding-inline-* here — inline values always win. */
    .product-grid-container--collection .facets--horizontal {
      min-height: 40px;
    }

    /* The toolbar is full-bleed: .collection-wrapper spans the whole .section grid
       (base.css :has(.collection-wrapper--full-width)) and the block wrapper spans all
       14 of its tracks, so the form supplies its own gutter. This token matches the
       header's gutter at every viewport width, including above the page-width cap. */
    .product-grid-container--collection .facets--horizontal .facets__form {
      align-items: center;
      gap: 0;
      height: 40px;
      padding-inline: var(--util-page-margin-offset);
    }

    .product-grid-container--collection .facets:not(.facets--drawer) .facets__filters-wrapper {
      order: 4;
      margin-inline: 0;
    }

    .product-grid-container--collection .facets__overflow-list,
    .product-grid-container--collection .facets-horizontal-remove {
      display: none;
    }

    .product-grid-container--collection .facets__drawer-trigger {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      font-size: 9px;
      font-weight: var(--font-heading--weight);
      line-height: var(--line-height--body-tight);
      text-transform: uppercase;
      color: var(--color-foreground);
      cursor: pointer;
    }

    .product-grid-container--collection .facets--horizontal .products-count-wrapper {
      order: 1;
      margin-inline-end: auto;
      margin-inline-start: 0;
      height: 40px;
      font-size: 9px;
      line-height: var(--line-height--body-tight);
      text-transform: uppercase;
    }

    .product-grid-container--collection .facets__media-view {
      display: flex;
      order: 2;
      align-items: center;
      gap: var(--gap-sm);
      margin-inline-end: var(--gap-3xl);
    }

    .product-grid-container--collection .facets__media-view-button {
      padding-block: var(--padding-2xs);
      font-size: 9px;
      line-height: var(--line-height--body-tight);
      color: var(--color-foreground-subdued);
      text-transform: uppercase;
      cursor: pointer;
    }

    .product-grid-container--collection .facets__media-view-button-label {
      border-block-end: var(--style-border-width) solid transparent;
    }

    .product-grid-container--collection .facets__media-view-button[aria-pressed='true'] {
      color: var(--color-foreground);
      font-weight: var(--font-heading--weight);
    }

    .product-grid-container--collection .facets__media-view-button[aria-pressed='true'] .facets__media-view-button-label {
      border-block-end-color: currentcolor;
    }

    .product-grid-container--collection .column-options-wrapper {
      order: 3;
      height: 40px;
      margin: 0 calc(var(--gap-2xl) + var(--gap-3xs)) 0 0;
    }

    .product-grid-container--collection .column-options {
      gap: var(--gap-sm);
    }

    .product-grid-container--collection .column-picker {
      padding: 0;
      border-radius: 0;
    }

    .product-grid-container--collection .sorting-filter {
      display: flex;
      /* Pins the sort label to the page gutter regardless of label length, while
         min-width still absorbs layout shift when the selection changes. */
      justify-content: flex-end;
      align-items: center;
      order: 5;
      height: 40px;
      min-width: 8.125rem;
      margin-inline-start: var(--gap-2xs);
    }

    /* The drawer-trigger style renders .facets__drawer-trigger-group as a direct
       child of the toolbar instead of nested inside .facets__filters-wrapper, so
       it needs its own placement in the same trailing slot that wrapper used to
       occupy (order: 4, i.e. right after grid density). */
    .facets--drawer-trigger .facets__drawer-trigger-group {
      display: inline-flex;
      align-items: center;
      order: 4;
    }

    /* Unlike the horizontal style (where the sort dropdown sits alone at the
       trailing page edge and the min-width/flex-end pairing keeps it pinned
       there as the label text changes length), drawer-trigger's Figma spec
       groups "Filters" and "Sort by" tightly together as one unit, so the
       reserved min-width and right-justification would just add a gap. */
    .facets--drawer-trigger .facets__drawer-trigger-group .sorting-filter {
      min-width: 0;
      justify-content: flex-start;
    }

    .product-grid-container--collection .sorting-filter__horizontal .facets__summary {
      min-height: 40px;
    }
  }

  /* Unscoped from the desktop media query above (min-height aside) so the
     drawer-trigger style's mobile "Sort by" control — now shown next to
     "Filters" in .facets__drawer-trigger-group — renders identically to
     desktop instead of falling back to the sorting component's larger
     default type size, chevron, and missing "•" separator. Harmless for the
     horizontal style's own mobile sorting-filter, which stays hidden there. */
  .product-grid-container--collection .sorting-filter__horizontal .facets__summary {
    font-size: 9px;
    font-weight: var(--font-heading--weight);
    line-height: var(--line-height--body-tight);
    text-transform: uppercase;
  }

  .product-grid-container--collection .sorting-filter__horizontal .facets__summary::before {
    margin-inline-end: var(--gap-2xs);
    content: '•';
  }

  .product-grid-container--collection
    .facets--horizontal
    .sorting-filter__horizontal
    .facets__status {
    display: inline-flex;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: var(--font-heading--weight);
  }

  .product-grid-container--collection .sorting-filter__horizontal .icon-caret {
    display: none;
  }

  /*
    Mobile toolbar (plp/mobile, plp-7view/mobile): shows the same media-view toggle
    and grid density control as desktop. For the drawer-trigger style, "Filters"
    and "Sort by" are also shown as separate controls here (.facets__drawer-trigger-group),
    matching the desktop horizontal bar + standalone sorting dropdown pattern.
  */
  @media screen and (max-width: 749px) {
    .product-grid-container--collection .facets--horizontal {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      max-width: none;
      border: none;
      overflow: visible;
      padding-block: var(--padding-block-start) var(--padding-block-end);
    }

    .product-grid-container--collection .facets--horizontal .facets__form {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      height: auto;
      gap: var(--gap-3xs) 0;
    }

    .product-grid-container--collection .facets--horizontal .products-count-wrapper {
      display: flex;
      grid-column: 1 / -1;
      grid-row: 2;
      height: auto;
      padding-inline: var(--page-margin) var(--padding-xs);
      padding-block: var(--padding-xs);
      border-block-start: var(--style-border-width) solid var(--color-border);
      font-size: 8px;
      line-height: var(--line-height--body-tight);
      text-transform: uppercase;
    }

    .product-grid-container--collection .facets__media-view {
      display: flex;
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
      align-items: center;
      gap: var(--gap-sm);
      padding-inline-start: var(--page-margin);
    }

    .product-grid-container--collection .facets__media-view-button {
      display: inline-flex;
      align-items: center;
      min-height: var(--minimum-touch-target);
      padding-block: var(--padding-2xs);
      font-size: 9px;
      line-height: var(--line-height--body-tight);
      color: var(--color-foreground-subdued);
      text-transform: uppercase;
      cursor: pointer;
    }

    .product-grid-container--collection .facets__media-view-button-label {
      border-block-end: var(--style-border-width) solid transparent;
    }

    .product-grid-container--collection .facets__media-view-button[aria-pressed='true'] {
      color: var(--color-foreground);
      font-weight: var(--font-heading--weight);
    }

    .product-grid-container--collection .facets__media-view-button[aria-pressed='true'] .facets__media-view-button-label {
      border-block-end-color: currentcolor;
    }

    .product-grid-container--collection .facets .column-options-wrapper {
      display: flex;
      grid-column: 2;
      grid-row: 1;
      justify-self: center;
      height: auto;
      margin: 0;
    }

    .product-grid-container--collection .column-options-wrapper .column-options__option {
      min-width: var(--minimum-touch-target);
      min-height: var(--minimum-touch-target);
      align-items: center;
      justify-content: center;
    }

    .product-grid-container--collection .facets:not(.facets--drawer) .facets__filters-wrapper {
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
      margin-inline: 0;
    }

    /* Same trailing grid slot as .facets__filters-wrapper above, for the
       drawer-trigger style's .facets__drawer-trigger-group rendered outside it.
       "Filters" and "Sort by" sit side by side here, mirroring desktop's
       spacing (--gap-2xs, matching .sorting-filter's own desktop margin-inline-start
       below) rather than the wider default gap between unrelated toolbar controls.
       The page-edge spacing that used to live on the trigger button's own
       padding-inline-end (below) moves here, to the group's trailing edge,
       now that "Sort by" — not the button — is the group's last child. */
    .facets--drawer-trigger .facets__drawer-trigger-group {
      display: flex;
      align-items: center;
      gap: var(--gap-2xs);
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
      padding-inline-end: var(--padding-xs);
    }

    .facets--drawer-trigger .facets__drawer-trigger-group .facets__drawer-trigger {
      padding-inline-end: 0;
    }

    /* Unlike desktop, the mobile "Sort by" control doesn't surface the
       currently-active sort value — just the label, to keep the combined
       "Filters · Sort by" trailing group short next to the drawer trigger.
       Specificity matched (not just media-query order) against the
       always-on .facets__status display rule above, which outranks a plain
       3-class override. */
    .product-grid-container--collection .facets--drawer-trigger .facets__drawer-trigger-group .facets__status {
      display: none;
    }

    /* Without an active value shown after it (see above), "Sort by:" reads
       oddly with a trailing colon — drop it on mobile only. */
    .product-grid-container--collection .facets--drawer-trigger .facets__drawer-trigger-group .facets__label-colon {
      display: none;
    }

    .product-grid-container--collection .facets__overflow-list,
    .product-grid-container--collection .facets-horizontal-remove {
      display: none;
    }

    .product-grid-container--collection .facets__drawer-trigger {
      display: inline-flex;
      align-items: center;
      min-height: var(--minimum-touch-target);
      /* Sits closer to the page edge than the header, per the mobile design.
         Overridden to 0 above for the drawer-trigger style, whose group now
         owns this edge spacing (see .facets__drawer-trigger-group). */
      padding-inline-end: var(--padding-xs);
      font-size: 9px;
      font-weight: var(--font-heading--weight);
      line-height: var(--line-height--body-tight);
      text-transform: uppercase;
      color: var(--color-foreground);
      cursor: pointer;
    }

    .product-grid-container--collection .facets__drawer-trigger-sort-suffix {
      display: inline;
    }

    /* The drawer-trigger style's toolbar also carries .facets--horizontal (it
       shares the is_toolbar_style layout), so it must be excluded here — its
       sorting-filter is shown, grouped with .facets__drawer-trigger-group above. */
    .product-grid-container--collection .facets--horizontal:not(.facets--drawer-trigger) .sorting-filter {
      display: none;
    }

    .product-grid-container--collection .facets-toggle {
      display: none;
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

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

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

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

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

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

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

  .facets--horizontal {
    display: none;

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

  .facets--vertical {
    display: none;

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

  .facets--drawer {
    /* The dialog's UA default sets both inset-inline-start and inset-inline-end to
       0; combined with an explicit width that's an over-constrained box, which
       browsers resolve to the start (left) edge in LTR. Drop the start inset so
       only the end inset holds, docking the drawer to the right as intended. */
    inset-inline-start: auto;
    inset-inline-end: 0;
    border-radius: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

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

  /* Drawer-trigger style (plp-filter drawer/desktop Figma spec): a wider desktop
     panel, no heading text (the trigger button already announces "Filter & sort"),
     and generous inline padding matching the mock's 50px section gutters. */
  .facets--drawer-v2 {
    @media screen and (min-width: 750px) {
      --drawer-max-width: 697px;
      --drawer-width: 90vw;
      --drawer-padding: 50px;
    }

    /* Figma mobile spec ("Filter/Sort-pop-ou-drawer/mobile"): the drawer takes
       the full screen width instead of the global 95vw/500px drawer cap. */
    @media screen and (max-width: 749px) {
      --drawer-width: 100vw;
      --drawer-max-width: 100vw;
      border-left: none;
    }
  }

  .facets--drawer-v2 .facets__title-wrapper {
    justify-content: flex-end;
  }

  .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;
    overscroll-behavior-y: contain;
    position: relative;

    /* scroll-hint (assets/scrolling.js) fades the scrollable edges via an inline
       mask-image, which reads as a blurred border where the list meets the sticky
       .facets__drawer-actions footer. The footer already has its own divider
       (.facets__filters-wrapper::after / border on .facets--drawer), so drop the fade. */
    mask-image: none !important;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

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

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .sorting-filter .facets__panel {
    padding: 0;
  }
  .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-trigger style: dividers run edge-to-edge instead of stopping at the
     section's inline padding, there's no divider above the first filter, and a
     closing divider sits below the last filter (via a border on the sticky
     footer, matching the Container/border-t in the Figma spec). */
  .facets--drawer-v2 :is(.facets__item, .sorting-filter)::before {
    width: 100%;
    margin: 0;
  }

  .facets--drawer-v2 .facets__filters-wrapper .facets__item:first-child::before {
    content: none;
  }

  /* Closes the list right after the last filter's own content, instead of on
     .facets__drawer-actions - that footer is pinned to the bottom of the dialog
     via margin-top: auto, so a border there floats far below short filter lists. */
  .facets--drawer-v2 .facets__filters-wrapper::after {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    border-top: var(--style-border-width) solid var(--color-border);
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

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

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

  .facets-drawer__close.close-button {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 0;
    background: transparent;
  }

  .facets-drawer__close.close-button:focus,
  .facets-drawer__close.close-button:focus-visible {
    outline: none;
    border-radius: 0;
  }

  .facets-drawer__close.close-button:focus::after,
  .facets-drawer__close.close-button:focus-visible::after {
    content: none;
    display: none;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

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

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
    --button-text-align: center;
    font-size: 12px;
    font-weight: 500;
  }

  .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);
    --button-text-align: center;
    font-size: 12px;
    font-weight: 500;
  }

  /* Drawer-trigger style: full-width stacked CTAs ("Clear all filter" / "Show
     results") instead of the side-by-side pair used by the other drawer styles. */
  .facets--drawer-v2 .facets__drawer-actions {
    flex-direction: column;
  }

  .facets--drawer-v2 .facets__clear-all,
  .facets--drawer-v2 .facets__see-results {
    width: 100%;
    min-width: 0;
    border-radius: 0;
    text-transform: uppercase;
  }

  .facets--drawer-v2 .facets__clear-all {
    box-shadow: inset 0 0 0 1px var(--color-foreground);
    background-color: transparent;
    color: var(--color-foreground);
  }

  .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-locale-selector (INDEX:199) */
.footer-locale-selector {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
  }

  .footer-locale-selector__store {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body--family);
    font-style: var(--font-body--style);
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    color: var(--color-foreground);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: normal;
    text-transform: uppercase;
  }

  .footer-locale-selector__icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }

  .footer-locale-selector__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .footer-locale-selector__store:hover {
    text-decoration: underline;
  }

  .footer-locale-selector__region {
    position: relative;
    display: flex;
    align-items: center;
  }

  .footer-locale-selector .localization-input {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body--family);
    font-style: var(--font-body--style);
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: normal;
  }

  .footer-locale-selector .region-switcher__form {
    align-items: center;
    gap: 4px;
  }

  .footer-locale-selector .localization-input + .localization-input::before {
    content: '/';
    margin-inline-end: 4px;
  }

  .footer-locale-selector .localization-input__trigger {
    align-items: center;
    gap: 8px;
  }

  .footer-locale-selector .localization-input__flag {
    width: 14px;
    height: 14px;
    border-radius: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: none;
  }

  .footer-locale-selector .localization-input__lang-full {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .footer-locale-selector {
      position: relative;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      width: 100%;
    }

    .footer-locale-selector__store,
    .footer-locale-selector__region,
    .footer-locale-selector .region-switcher,
    .footer-locale-selector .region-switcher__form {
      width: 100%;
    }

    .footer-locale-selector__store,
    .footer-locale-selector .region-switcher__form {
      justify-content: flex-start;
      padding-block: 18px;
    }

    .footer-locale-selector__store {
      position: relative;
    }

    .footer-locale-selector .localization-input__lang-abbr {
      display: none;
    }

    .footer-locale-selector .localization-input__lang-full {
      display: inline;
    }

    .footer-locale-selector__store::after,
    .footer-locale-selector::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 100vw;
      border-bottom: 1px solid #d9dce0;
      transform: translateX(-50%);
    }
  }
/* END_BLOCK:footer-locale-selector */

/* START_BLOCK:footer-menu-columns (INDEX:200) */
.footer-menu-columns {
    display: contents;
  }

  .footer-menu-columns .menu__heading {
    margin-block-start: 0;
    padding-block-start: 0;
  }

  .footer-menu-columns .menu--title-link .menu__heading {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .footer-menu__live-chat-trigger {
    display: contents;
  }

  .footer-menu__live-chat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .footer-menu__live-chat-status {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    /* Hidden until live-chat-button.js confirms real Gorgias availability -
       no dot is more honest than a guess while the answer is unknown. */
    display: none;
  }

  /* Filled dot: agents online. Ring: offline - a shape change, not just a
     color swap, so the state doesn't depend on distinguishing green from gray. */
  live-chat-button[data-availability='online'] .footer-menu__live-chat-status {
    display: block;
    background: var(--color-success);
  }

  live-chat-button[data-availability='offline'] .footer-menu__live-chat-status {
    display: block;
    background: transparent;
    /* Scheme-relative, not a fixed hex: --color-outofstock's #C8C8C8 measures under
       2:1 against a light scheme background, well short of the 3:1 WCAG 1.4.11 floor
       for a graphic that's carrying meaning on its own. */
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  /* Mobile: accordion rows */
  @media screen and (max-width: 749px) {
    .footer-menu-columns .menu {
      width: 100%;
    }

    .footer-menu-columns .menu__details,
    .footer-menu-columns .details-content,
    .footer-menu-columns .details-content ul {
      width: 100%;
      margin-inline: 0;
      padding-inline: 0;
    }

    .footer-menu-columns .details-content {
      overflow-x: clip;
      transform: none;
      transition: none !important;
    }

    .footer-menu-columns .details-content ul,
    .footer-menu-columns .menu__item {
      transform: translateX(0) !important;
      translate: none !important;
    }

    .footer-menu-columns .menu__heading {
      padding-block: 15px;
    }

    .footer-menu-columns .menu__heading__caret {
      display: inline-flex;
      width: 11px;
      height: 6px;
      margin-inline-start: auto;
    }

    .footer-menu-columns .menu__heading__caret svg {
      width: 11px;
      height: 6px;
    }

    .footer-menu-columns .menu__heading__accordion {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

  }
/* END_BLOCK:footer-menu-columns */

/* START_BLOCK:footer-policy-list (INDEX:201) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:gift-card-amount (INDEX:202) */
.gift-card-amount {
    /* See gift-card-recipient.liquid — --color-foreground-secondary is undefined theme-wide. */
    --gift-card-muted: #767676;

    display: block;
    width: 100%;
  }

  .gift-card-amount__label {
    display: block;
    margin-block-end: var(--padding-sm);
    font-family: 'Scto Grotesk B', var(--font-heading--family), sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-foreground-heading);
  }

  .gift-card-amount__controls {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .gift-card-amount__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    /* Generous hit area: the visual glyph is small but touch targets must stay >= 44px. */
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-foreground-heading);
    cursor: pointer;
  }

  .gift-card-amount__step:disabled {
    opacity: 0.35;
    cursor: default;
  }

  /* `:focus` as well as `:focus-visible` — buttons and range inputs only match
     `:focus-visible` on keyboard focus, so a click would otherwise show nothing. */
  .gift-card-amount__step:is(:focus, :focus-visible) {
    outline: var(--focus-outline-width) solid var(--color-foreground-heading);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-amount__step .svg-wrapper svg {
    inline-size: 12px;
    block-size: 12px;
  }

  .gift-card-amount__slider {
    flex: 1 1 auto;
    inline-size: 100%;
    min-inline-size: 0;

    /* Tall transparent box around a thin track, so the draggable area is comfortable
       without changing the visual weight. */
    block-size: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  .gift-card-amount__slider::-webkit-slider-runnable-track {
    block-size: 1px;
    background-color: var(--color-foreground-heading);
  }

  .gift-card-amount__slider::-moz-range-track {
    block-size: 1px;
    background-color: var(--color-foreground-heading);
  }

  .gift-card-amount__slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 14px;
    block-size: 14px;
    margin-block-start: -6.5px;
    border: none;
    border-radius: 50%;
    background-color: var(--color-foreground-heading);
  }

  .gift-card-amount__slider::-moz-range-thumb {
    inline-size: 14px;
    block-size: 14px;
    border: none;
    border-radius: 50%;
    background-color: var(--color-foreground-heading);
  }

  .gift-card-amount__slider:is(:focus, :focus-visible) {
    outline: none;
  }

  /* Ring the thumb, not the whole track — a keyboard user needs to see where the value is. */
  .gift-card-amount__slider:is(:focus, :focus-visible)::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-foreground-heading);
  }

  .gift-card-amount__slider:is(:focus, :focus-visible)::-moz-range-thumb {
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-foreground-heading);
  }

  .gift-card-amount__notice {
    margin-block: var(--padding-xs) 0;
    font-size: var(--font-size--xs);
    color: var(--color-error, var(--color-foreground-heading));
  }

  .gift-card-amount__notice.hidden {
    display: none;
  }

  .gift-card-amount__editor-note {
    margin: 0;
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
    color: var(--gift-card-muted);
    border: 1px dashed var(--color-border);
  }
/* END_BLOCK:gift-card-amount */

/* START_BLOCK:gift-card-recipient (INDEX:203) */
.gift-card-recipient {
    --gift-card-muted: #767676;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .gift-card-recipient__field {
    display: flex;
    flex-direction: column;
  }

  .gift-card-recipient__label {
    margin-block-end: 0;
    font-family: 'Scto Grotesk B', var(--font-heading--family), sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-foreground-heading);
  }

  .gift-card-recipient__label--message {
    margin-block-end: 8px;
  }

  /* Underline field treatment, matching the Figma and .contact-form--underline. */
  .gift-card-recipient__input {
    width: 100%;
    padding-inline: 0;
    padding-block: var(--padding-xs);
    color: var(--color-foreground-heading);
    background-color: transparent;
    border: none;
    border-block-end: var(--style-border-width) solid var(--color-border);
    border-radius: 0;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-paragraph--size);
  }

  .gift-card-recipient__input::placeholder {
    color: var(--gift-card-muted);
    font-family: 'Scto Grotesk B', var(--font-body--family), sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: normal;
  }

  /* Focus thickens and darkens the underline instead of drawing an outline ring.
     `:focus` is matched as well as `:focus-visible` so the state shows on click, not just on
     keyboard focus. The inset shadow rather than a border width change means a `border`
     shorthand elsewhere (the message box) cannot cancel it. */
  .gift-card-recipient__input:is(:focus, :focus-visible) {
    outline: none;
    border-block-end-color: var(--color-foreground-heading);
    box-shadow: inset 0 -2px 0 0 var(--color-foreground-heading);
  }

  .gift-card-recipient__input[aria-invalid='true'] {
    border-block-end-color: var(--color-error, currentcolor);
  }

  .gift-card-recipient__textarea-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* The message is a boxed field, unlike the underlined single-line inputs. */
  .gift-card-recipient__textarea {
    /* Fixed rather than `rows`-derived so the box lands at the Figma height regardless of the
       resolved line-height. `resize: vertical` still lets it grow. */
    height: 110px;
    resize: vertical;
    border: var(--style-border-width) solid var(--color-foreground-heading);
    padding-inline: var(--padding-sm);
    padding-block: var(--padding-sm);
  }

  .gift-card-recipient__textarea[aria-invalid='true'] {
    border-color: var(--color-error, currentcolor);
  }

  /* Sits below the box, flush to its right edge — see the Figma. The wrapper is a column
     flex container, so `align-self` rather than `text-align` does the aligning. */
  .gift-card-recipient__count {
    align-self: flex-end;
    margin-block-start: 6px;
    font-family: 'Scto Grotesk B', var(--font-body--family), sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: normal;
    text-align: right;
    color: #838282;
    pointer-events: none;
  }

  .gift-card-recipient__date {
    position: relative;
    display: flex;
    align-items: center;
  }

  .gift-card-recipient__date-input {
    /* Firefox treats the whole control as clickable. */
    cursor: pointer;
  }

  /* `type="date"` has no placeholder, so hide the browser's own date shell and overlay our copy
     until a value is picked. */
  .gift-card-recipient__date[data-empty='true']:not(:focus-within) .gift-card-recipient__date-input {
    color: transparent;
  }

  .gift-card-recipient__date-hint {
    position: absolute;
    inset-inline-start: 0;
    color: var(--gift-card-muted);
    font-family: 'Scto Grotesk B', var(--font-body--family), sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: normal;
    pointer-events: none;
  }

  .gift-card-recipient__date:not([data-empty='true']) .gift-card-recipient__date-hint,
  .gift-card-recipient__date:focus-within .gift-card-recipient__date-hint {
    display: none;
  }

  .gift-card-recipient__date-icon {
    position: absolute;
    inset-inline-end: 0;
    display: inline-flex;
    inline-size: 16px;
    block-size: 16px;
    color: var(--color-foreground-heading);
    pointer-events: none;
  }

  .gift-card-recipient__date-icon svg {
    inline-size: 100%;
    block-size: 100%;
  }

  /* Hide the native indicator; ours sits on top and the whole field opens the picker. */
  .gift-card-recipient__date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  .gift-card-recipient__error {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-xs);
    margin-block-start: var(--padding-2xs);
    font-size: var(--font-size--xs);
    color: var(--color-error, currentcolor);
  }

  .gift-card-recipient__error.hidden {
    display: none;
  }

  .gift-card-recipient__error svg {
    inline-size: 14px;
    block-size: 14px;
    flex: 0 0 auto;
  }
/* END_BLOCK:gift-card-recipient */

/* START_BLOCK:icon (INDEX:205) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

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

/* START_BLOCK:image (INDEX:206) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    object-position: var(--image-block-position-x, 50%) var(--image-block-position-y, 50%);
    aspect-ratio: var(--ratio);
  }

  @media screen and (max-width: 749px) {
    .image-block__image {
      object-position: var(--image-block-position-x-mobile, 50%) var(--image-block-position-y-mobile, 50%);
    }
  }
/* END_BLOCK:image */

/* START_BLOCK:live-chat-button (INDEX:208) */
.live-chat-button {
    display: inline-flex;
  }

  .live-chat-button__control {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .live-chat-button__status {
    flex-shrink: 0;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    /* Hidden until live-chat-button.js confirms real Gorgias availability -
       no dot is more honest than a guess while the answer is unknown. */
    display: none;
  }

  /* Filled dot: agents online. Ring: offline - a shape change, not just a
     color swap, so the state doesn't depend on distinguishing green from gray. */
  live-chat-button[data-availability='online'] .live-chat-button__status {
    display: block;
    background-color: var(--color-success);
  }

  live-chat-button[data-availability='offline'] .live-chat-button__status {
    display: block;
    background-color: transparent;
    /* Scheme-relative, not a fixed hex: --color-outofstock's #C8C8C8 measures under
       2:1 against a light scheme background, well short of the 3:1 WCAG 1.4.11 floor
       for a graphic that's carrying meaning on its own. */
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:live-chat-button */

/* START_BLOCK:logo (INDEX:209) */
.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:210) */
.menu {
    width: 100%;
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

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

  .menu__link--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
  }

  .menu-link-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
  }

  .menu-link-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:212) */
.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-icon-list (INDEX:213) */
.payment-icon-list {
    width: 100%;
  }

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

  .payment-icon-list__item {
    display: flex;
    align-items: center;
  }

  .payment-icon-list__img {
    display: flex;
    align-items: center;
    height: var(--payment-icon-list-height);
    line-height: 0;
  }

  .payment-icon-list__img svg {
    height: 100%;
    width: auto;
    object-fit: contain;
  }
/* END_BLOCK:payment-icon-list */

/* START_BLOCK:payment-icons (INDEX:214) */
.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:215) */
.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:216) */
.tax-note:empty {
    display: none;
  }

  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:218) */
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-display-tag (INDEX:221) */
.product-display-tag {
    display: flex;
    margin-block-start: 0;
    margin-block-end: 4px;
  }

  .product-display-tag__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 20px;
    height: 20px;
    box-sizing: border-box;
    padding-block: 0;
    padding-inline: 8px;
    background-color: var(--product-display-tag-background, #e6e6e6);
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 22px;
    text-transform: uppercase;
    color: #000;
  }

  .product-display-tag--dark .product-display-tag__label {
    background-color: #000;
    color: #fff;
  }

  .product-display-tag__code {
    margin-inline-start: 3px;
  }

  .product-display-tag__title--bold,
  .product-display-tag__code--bold {
    font-weight: 700;
  }
/* END_BLOCK:product-display-tag */

/* START_BLOCK:product-feature-badges (INDEX:222) */
.product-feature-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .product-feature-badges__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 102px;
  }

  .product-feature-badges__icon {
    display: block;
    width: 102px;
    height: 102px;
  }

  .product-feature-badges__icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Slightly wider than the icon, reaching into the gap, so the RDS caption
     breaks after "&" as in the Figma drawer. */
  .product-feature-badges__caption {
    width: 110px;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
  }
/* END_BLOCK:product-feature-badges */

/* START_BLOCK:product-inventory (INDEX:223) */
.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-klarna (INDEX:224) */
.product-klarna-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    width: 100%;
  }

  .product-klarna-row:not(.product-klarna-row--has-klarna) {
    justify-content: flex-end;
  }

  .product-klarna,
  .product__payment-options {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Seel often injects here before JS nests it in shipping — hide flash of a second box */
  .product-klarna-row > .seal-banner-container:not([data-rudsak-seel-fallback]) {
    display: none !important;
  }

  .product-klarna-row > .seal-banner-container[data-rudsak-seel-fallback] {
    display: block !important;
    flex: 1 0 100%;
    order: 3;
    width: 100%;
    margin-block-start: 12px;
  }

  .product-klarna #klarna-osm-product,
  .product__payment-options #klarna-osm-product {
    display: block;
    min-height: 16px;
  }

  .product-klarna #klarna-osm-product::part(osm-container) {
    justify-content: flex-start;
    text-align: left;
  }

  .product-klarna #klarna-osm-product::part(osm-message) {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-foreground);
  }

  .product-klarna #klarna-osm-product::part(osm-cta),
  .product-klarna #klarna-osm-product::part(osm-legal) {
    font-size: 11px;
    line-height: 16px;
    color: var(--color-foreground);
  }

  .product-klarna #klarna-osm-product::part(osm-badge),
  .product-klarna #klarna-osm-product::part(osm-deal-badge) {
    display: none;
  }

  .product-klarna-row__find-in-store {
    display: inline-flex;
    flex: 0 0 auto;
    /* Baseline, not center, so the chevron sits on the label's text baseline -- see the matching
       note on .product-disclosure-row__trigger in blocks/_product-details.liquid (86akm0tuv). */
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--color-foreground);
    text-align: right;
    text-decoration: none;
    text-transform: capitalize;
    white-space: nowrap;
    cursor: pointer;
  }

  .product-klarna-row__find-in-store:hover {
    text-decoration: underline;
  }

  .product-klarna-row__find-in-store-icon,
  .product-klarna-row__find-in-store-icon > svg {
    display: block;
    flex-shrink: 0;
    width: 5px;
    height: 8px;
  }
/* END_BLOCK:product-klarna */

/* START_BLOCK:product-model-info (INDEX:226) */
.product-model-info__text {
    margin: 0;
    margin-block-start: 26px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--color-foreground);
  }
/* END_BLOCK:product-model-info */

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

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

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

/* START_BLOCK:product-shipping-information (INDEX:228) */
.product-shipping-information {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    min-height: 56px;
    box-sizing: border-box;
    padding-block: 12px;
    padding-inline: 20px;
    background-color: #f6f6f6;
    text-align: center;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif;
    color: #000;
  }

  .product-shipping-information__delivery {
    margin: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #000;
  }

  .product-shipping-information__shipping {
    margin: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-transform: none;
    color: #000;
  }

  /* Not in Figma — never shown, regardless of where Seel's JS relocates it. */
  .product-shipping-information .seal-banner-container,
  .product-shipping-information .seal-banner-container.simple {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: inherit;
    color: #000;
    text-align: center;
  }

  .product-shipping-information .seal-banner-header {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .product-shipping-information .seal-banner-icon,
  .product-shipping-information .seal-banner-list,
  .product-shipping-information .seal-banner-footer {
    display: none !important;
  }

  .product-shipping-information .seal-banner-header::before {
    content: none !important;
    display: none !important;
  }

  /* Title line: only “Worry-Free Delivery®” bold; “available with” regular */
  .product-shipping-information .seal-banner-title {
    display: inline !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: normal !important;
    color: #000 !important;
    text-align: center !important;
    text-transform: none !important;
  }

  .product-shipping-information .rudsak-seel-name {
    font-weight: 700 !important;
  }

  .product-shipping-information .seal-banner-copywirght {
    display: inline !important;
    margin-left: 0.25em !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    color: #000 !important;
    text-transform: none !important;
  }

  .product-shipping-information .seal-banner-info-link {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    margin-left: 4px !important;
    line-height: 16px;
    text-decoration: none !important;
  }

  .product-shipping-information .seal-banner-info-icon {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    vertical-align: middle;
    opacity: 0.85;
  }
/* END_BLOCK:product-shipping-information */

/* START_BLOCK:product-temperature-rating (INDEX:229) */
.product-temperature-rating {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding-block-start: 20px;
    padding-block-end: 10px;
  }

  .product-temperature-rating__heading {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    color: var(--color-foreground);
  }

  .product-temperature-rating__scale {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .product-temperature-rating__track {
    position: relative;
    height: 10px;
  }

  .product-temperature-rating__indicator {
    position: absolute;
    top: 2px;
    left: var(--temperature-indicator);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid var(--color-foreground);
    transform: translateX(-50%);
  }

  .product-temperature-rating__bar {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, #e6e6e6, var(--color-foreground));
  }

  .product-temperature-rating__tiers {
    display: flex;
  }

  .product-temperature-rating__tiers > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .product-temperature-rating__label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-foreground);
  }

  .product-temperature-rating__range {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-short-tagline);
  }
/* END_BLOCK:product-temperature-rating */

/* START_BLOCK:product-title (INDEX:230) */
.text-block .product-short-tagline.pdp-tagline {
    margin-block: 4px 4px !important;
    color: #727483;
    font-family: 'Scto Grotesk B', var(--font-body--family), sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
  }
/* END_BLOCK:product-title */

/* START_BLOCK:promo-callout (INDEX:231) */
.promo-callout {
    display: flex;
    margin-block-start: 7px;
  }

  .promo-callout__text {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding-block: 6px;
    padding-inline: 10px;
    border: 0.5px solid #b3b3b3;
    background-color: var(--promo-callout-background, transparent);
    font-family: var(--font-body--family);
    font-size: 11px;
    line-height: 14px;
    color: #000;
    white-space: nowrap;
  }

  .promo-callout__code {
    margin-left: 3px;
  }

  .promo-callout__title--bold,
  .promo-callout__code--bold {
    font-weight: 700;
  }
/* END_BLOCK:promo-callout */

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

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

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

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:235) */
.social-links-menu {
    width: 100%;
  }

  .social-links-menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .social-links-menu .menu__heading--empty {
    display: none;
  }

  .social-links-menu__item + .social-links-menu__item {
    margin-block-start: var(--spacing--size);
  }

  .social-links-menu__link {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    text-decoration: inherit;
    color: inherit;
  }

  .social-links-menu__link:hover {
    text-decoration: underline;
  }

  .social-links-menu__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .social-links-menu__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .social-links-menu__icon svg path,
  .social-links-menu__icon svg g {
    fill: currentColor !important;
  }

  .shopify-design-mode .social-links-menu__item--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: default;
  }

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

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

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

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:back-in-stock (INDEX:242) */
/* Hide AMP's default product-page button; theme owns the Notify Me CTA. */
  #BIS_trigger {
    display: none !important;
  }

  .back-in-stock {
    width: 100%;
  }

  .back-in-stock[hidden] {
    display: none;
  }

  /* Rendered at body level, so it must generate no box of its own - an unknown element
     defaults to display:inline and has taken the home page's offset-exact pager out
     before (docs/homepage-scroll-snap.md). Its only child here is the closed <dialog>,
     which is display:none, so this collapses to zero height. */
  .back-in-stock--shared {
    display: block;
  }

  .back-in-stock__dialog-root {
    display: block;
    width: 100%;
  }

  .back-in-stock__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    gap: var(--gap-sm);
    padding-inline: 20px 15px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .back-in-stock__trigger-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .back-in-stock__drawer {
    position: fixed;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: var(--color-background);
    padding: 0;
  }

  @media screen and (max-width: 767px) {
    .back-in-stock__drawer {
      margin: 0;
      inset: 0;
      max-width: none;
    }

    .back-in-stock__drawer.dialog-drawer[open] {
      --start-x: 0;
      --end-x: 0;
      --start-y: 100%;
      --end-y: 0;
    }

    .back-in-stock__drawer.dialog-drawer[open].dialog-closing {
      --start-x: 0;
      --end-x: 0;
      --start-y: 0;
      --end-y: 100%;
    }
  }

  @media screen and (min-width: 768px) {
    .back-in-stock__drawer.dialog-modal {
      width: 577px;
      max-width: 577px;
      border-radius: 0;
      border: none;
      outline: none;
      box-shadow: none;
    }
  }

  .back-in-stock__drawer:modal {
    max-height: 100dvh;
  }

  /* Mobile (4188:12604): close y=0 h=30; content x=15 y=10; gap 20. Desktop (97:3258): pt/px 30/32. */
  .back-in-stock__drawer-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 0 48px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .back-in-stock__drawer-inner::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .back-in-stock__drawer-inner > * {
    flex-shrink: 0;
  }

  .back-in-stock__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  @media screen and (min-width: 768px) {
    .back-in-stock__drawer-inner {
      padding: 30px 32px;
    }

    .back-in-stock__body {
      flex-grow: 1;
      flex-shrink: 0;
      justify-content: center;
    }

    .back-in-stock__header,
    .back-in-stock__product,
    .back-in-stock__size,
    .back-in-stock__message,
    .back-in-stock__signup {
      width: 100%;
      max-width: 492px;
    }

    .back-in-stock__similar {
      width: 100%;
      max-width: 498.53px;
    }
  }

  .back-in-stock__header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 30px auto;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .back-in-stock__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      grid-template-columns: none;
      grid-template-rows: none;
      min-height: 40px;
      height: 40px;
    }
  }

  .back-in-stock__close.close-button {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 1 / -1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    align-self: center;
    flex-shrink: 0;
    width: auto;
    height: 30px;
    min-width: 44px;
    min-height: 30px;
    margin: 0;
    padding: 0 15px;
    z-index: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    font-family: Inter, Arial, sans-serif;
    font-size: 13.745px;
    font-weight: 400;
    line-height: normal;
    color: #555;
    -webkit-font-smoothing: antialiased;
  }

  @media screen and (min-width: 768px) {
    .back-in-stock__close.close-button {
      grid-column: auto;
      grid-row: auto;
      justify-self: auto;
      height: 40px;
      min-width: 0;
      min-height: 0;
      padding: 0;
    }
  }

  .back-in-stock__close.close-button:focus,
  .back-in-stock__close.close-button:focus-visible {
    outline: none;
    border-radius: 0;
  }

  .back-in-stock__close.close-button:focus::after,
  .back-in-stock__close.close-button:focus-visible::after {
    content: none;
    display: none;
  }

  .back-in-stock__title {
    grid-column: 1 / -1;
    grid-row: 2;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 15px 0;
    border: none;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 700;
    line-height: 16px;
    text-transform: capitalize;
    color: #000;
    white-space: nowrap;
  }

  @media screen and (min-width: 768px) {
    .back-in-stock__title {
      grid-column: auto;
      grid-row: auto;
      padding: 0;
      line-height: 16px;
      font-weight: 700;
    }
  }

  .back-in-stock__product {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 15px;
    width: 100%;
    color: inherit;
    text-decoration: none;
  }

  /* `display: flex` above outranks the UA stylesheet's [hidden] rule, and the image is
     laid out by the same flex box, so both need saying explicitly. */
  .back-in-stock__product[hidden],
  .back-in-stock__product-image[hidden] {
    display: none;
  }

  .back-in-stock__product-image {
    flex: 0 0 auto;
    width: 60px;
    height: 83px;
    object-fit: cover;
  }

  .back-in-stock__product-title {
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    text-transform: capitalize;
    color: #000;
  }

  .back-in-stock__size {
    box-sizing: border-box;
    margin: 0;
    padding: 0 15px;
    width: 100%;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    text-transform: capitalize;
    color: #000;
  }

  .back-in-stock__message {
    box-sizing: border-box;
    margin: 0;
    padding: 0 15px;
    width: 100%;
    max-width: calc(338px + 30px);
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    color: #000;
  }

  @media screen and (min-width: 768px) {
    .back-in-stock__product,
    .back-in-stock__size,
    .back-in-stock__message {
      padding: 0;
    }

    /* Figma single-line copy; 395 was Size S text bounds — keep one line across sizes */
    .back-in-stock__message {
      width: 100%;
      max-width: 492px;
      font-weight: 500;
      line-height: 16px;
      white-space: nowrap;
    }
  }

  .back-in-stock__signup {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 15px;
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .back-in-stock__signup {
      padding: 0;
    }
  }

  @media screen and (max-width: 767px) {
    /* notify-mobile: field/email + button = 358; privacy = 356 */
    .back-in-stock__form,
    .back-in-stock__input,
    .back-in-stock__submit {
      max-width: 358px;
    }

    .back-in-stock__privacy {
      max-width: 356px;
    }

    .back-in-stock__message {
      max-width: calc(338px + 30px);
    }
  }

  .back-in-stock__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .back-in-stock__input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 21px;
    border: 1px solid #6b6b6b !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    color: #000;
  }

  .back-in-stock__input::placeholder {
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    color: #6b6b6b;
  }

  .back-in-stock__input:is(:focus, :hover, :focus-visible) {
    box-shadow: none !important;
    border-color: #6b6b6b !important;
    outline: none;
  }

  .back-in-stock__submit {
    --button-text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: #000;
    color: #fff;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: normal;
  }

  .back-in-stock__success,
  .back-in-stock__error {
    margin: 0;
    font-size: 13px;
    line-height: 16px;
  }

  .back-in-stock__error {
    color: var(--color-error);
  }

  .back-in-stock__privacy {
    margin: 0;
    width: 100%;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 400;
    line-height: normal;
    color: #000;
  }

  .back-in-stock__privacy a {
    color: inherit;
    text-decoration: underline;
    text-underline-position: from-font;
  }

  .back-in-stock__similar {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    padding: 0 15px;
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .back-in-stock__similar {
      padding: 0;
    }
  }

  /* Figma Frame 315 header row = 495 desktop / 359 mobile; cards row = 498.53 */
  .back-in-stock__similar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 495px;
    height: 16.5px;
  }

  @media screen and (max-width: 767px) {
    .back-in-stock__similar-header {
      max-width: 359px;
    }
  }

  .back-in-stock__similar-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    text-transform: capitalize;
    color: #000;
  }

  .back-in-stock__similar-arrows {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 16px;
    gap: 13.134px;
  }

  .back-in-stock__similar-arrow {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.137px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #000;
    cursor: pointer;
    line-height: 0;
  }

  .back-in-stock__similar-arrow:is(:hover, :focus, :focus-visible, :active) {
    outline: none;
    box-shadow: none;
    background: transparent;
  }

  .back-in-stock__similar-arrow .svg-wrapper,
  .back-in-stock__similar-arrow svg {
    display: block;
    width: 5.137px;
    height: 8px;
  }

  .back-in-stock__similar-list {
    display: flex;
    gap: 0.712px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .back-in-stock__similar-list::-webkit-scrollbar {
    display: none;
  }

  .back-in-stock__similar:has(.back-in-stock__similar-list:empty) {
    display: none;
  }

  .back-in-stock__similar-list:empty {
    display: none;
  }

  .back-in-stock__similar-card {
    --bis-img-h: 208.67px;

    flex: 0 0 150.15px;
    width: 150.15px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    position: relative;
  }

  .back-in-stock__similar-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    position: relative;
  }

  /* Never use flex-basis: 100% here — it collapses column cards. */
  .back-in-stock__similar-image {
    display: block;
    width: 150.15px;
    height: 208.67px;
    max-width: 100%;
    object-fit: cover;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* Image-cycle progress bar and next/add-to-cart buttons, same treatment as the bestsellers card-gallery/quick-add controls. */
  .back-in-stock__similar-hairline {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--bis-img-h) - 1px);
    z-index: 3;
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 16px;
    margin-top: -15px;
    padding: 0;
    cursor: grab;
    touch-action: none;
    pointer-events: auto;
  }

  .back-in-stock__similar-hairline span {
    flex: 1 1 0;
    align-self: flex-end;
    height: 1px;
    background-color: rgb(0 0 0 / 0.2);
    pointer-events: none;
  }

  .back-in-stock__similar-hairline span.is-active {
    background-color: #000;
  }

  .back-in-stock__similar-actions {
    display: block;
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: var(--bis-img-h);
    z-index: 2;
    pointer-events: none;
  }

  .back-in-stock__similar-next,
  .back-in-stock__similar-atc {
    appearance: none;
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
    line-height: 0;
  }

  /* The artwork is Figma-exact and tiny - about 2x5px for the chevron and 5x5 for the
     plus - and each button's box was sized to its own glyph, which left a hit area the
     same handful of pixels. Grow the hit area with a centred pseudo-element instead of
     the box, so the glyph keeps the size and position Figma gives it; same trick as
     `.quick-add__button::before` on the product card. 32px rather than the theme's 44px
     floor because these sit ~8px from a 157px card's right edge, and a 44px box would
     reach across the gap onto the neighbouring card. */
  .back-in-stock__similar-next::before,
  .back-in-stock__similar-atc::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    translate: -50% -50%;
  }

  .back-in-stock__similar-next:is(:hover, :focus, :focus-visible, :active),
  .back-in-stock__similar-atc:is(:hover, :focus, :focus-visible, :active) {
    outline: none;
    box-shadow: none;
    background-color: transparent;
  }

  .back-in-stock__similar-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2.31' height='4.6' viewBox='0 0 2.31 4.6' fill='none'%3E%3Cpath d='M0.4 0.4L1.91 2.3L0.4 4.2' stroke='%23000' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .back-in-stock__similar-atc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.39' height='5.39' viewBox='0 0 5.39 5.39' fill='none'%3E%3Cpath d='M0.7 2.695H4.69' stroke='%23000' stroke-width='0.9' stroke-linecap='round'/%3E%3Cpath d='M2.695 0.7V4.69' stroke='%23000' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  .back-in-stock__similar-atc:disabled {
    cursor: default;
    opacity: 0.35;
  }

  @media screen and (min-width: 768px) {
    .back-in-stock__similar-list {
      gap: 7px;
    }

    .back-in-stock__similar-card {
      --bis-img-h: 226.963px;

      flex: 0 0 157.444px;
      width: 157.444px;
    }

    /* Figma Frame 173: 163.413 × 226.963 (overhangs card by ~6px into the 7px gap) */
    .back-in-stock__similar-image {
      width: 163.413px;
      height: 226.963px;
    }

    /* Same chevron/plus treatment as mobile, scaled to the desktop image (~1.088×). */
    .back-in-stock__similar-next {
      top: 110.03px;
      right: 9.22px;
      width: 2.51px;
      height: 5.01px;
      background-size: 2.51px 5.01px;
    }

    .back-in-stock__similar-atc {
      top: 206.13px;
      right: 8.38px;
      width: 5.86px;
      height: 5.86px;
      background-size: 5.86px 5.86px;
    }
  }

  @media screen and (max-width: 767px) {
    /* notify-mobile product card/mobile: image 208.67; plus 5.39 @ 137.06/189.42; chevron 2.31×4.60 @ 139.37/101.13; info pad 9.24; swatch 12.77 */

    .back-in-stock__similar-hairline {
      left: 50%;
      right: auto;
      width: 5.5rem;
      transform: translateX(-50%);
    }

    .back-in-stock__similar-hairline span {
      align-self: center;
      border-radius: 999px;
    }

    .back-in-stock__similar-name {
      padding: 9.24px 6.7px 0 9.24px;
      font-size: 12px;
      line-height: 15px;
    }

    .back-in-stock__similar-price {
      padding: 0 6.7px 0 9.24px;
      font-size: 12px;
      line-height: 10.01px;
    }

    .back-in-stock__similar-card .color-swatch--plp {
      --swatch-size: 12.772px;
      min-height: 30px;
      padding: 0 6.7px 0 9.24px;
    }

    .back-in-stock__similar-card .color-swatch__list {
      gap: 5.64px;
    }

    .back-in-stock__similar-card .color-swatch__link .swatch,
    .back-in-stock__similar-card .color-swatch__dot {
      width: 12.772px;
      height: 12.772px;
      border-width: 1px;
    }

    .back-in-stock__similar-next {
      top: 101.13px;
      right: 8.47px;
      width: 2.31px;
      height: 4.6px;
      background-size: 2.31px 4.6px;
    }

    .back-in-stock__similar-atc {
      top: 189.42px;
      right: 7.7px;
      width: 5.39px;
      height: 5.39px;
      background-size: 5.39px 5.39px;
    }
  }

  .back-in-stock__similar-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 10.05px 6.7px 0 10.05px;
    font-family: var(--font-body--family);
    font-size: 13.052px;
    font-weight: 700;
    line-height: 16.315px;
    text-transform: capitalize;
    color: #000;
  }

  .back-in-stock__similar-price {
    box-sizing: border-box;
    margin: 0;
    padding: 0 6.7px 0 10.05px;
    font-family: var(--font-body--family);
    font-size: 13.052px;
    font-weight: 400;
    line-height: 10.887px;
    color: #080808;
  }

  .back-in-stock__similar-card .color-swatch--plp {
    --swatch-size: 13.892px;
    box-sizing: border-box;
    min-height: 32.63px;
    padding: 0 6.7px 0 10.05px;
    align-items: flex-end;
  }

  .back-in-stock__similar-card .color-swatch__list {
    gap: 6.526px;
  }

  .back-in-stock__similar-card .color-swatch__link .swatch,
  .back-in-stock__similar-card .color-swatch__dot {
    width: 13.892px;
    height: 13.892px;
    border: 1.158px solid #e6e6e6;
    border-radius: 522.859px;
    box-shadow: none;
  }

  .back-in-stock__similar-card .color-swatch__link:hover .swatch,
  .back-in-stock__similar-card .color-swatch__link:hover .color-swatch__dot,
  .back-in-stock__similar-card .color-swatch__link.is-selected .swatch,
  .back-in-stock__similar-card .color-swatch__link.is-selected .color-swatch__dot,
  .back-in-stock__similar-card .color-swatch__link.is-selected:hover .swatch,
  .back-in-stock__similar-card .color-swatch__link.is-selected:hover .color-swatch__dot {
    box-shadow: none;
  }

  product-form-component:has(.back-in-stock:not([hidden])) add-to-cart-component,
  product-form-component:has(.back-in-stock:not([hidden])) .accelerated-checkout-block {
    display: none;
  }
/* END_SNIPPET:back-in-stock */

/* START_SNIPPET:background-media (INDEX:243) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    .video-background--desktop-only,
    .background-image--desktop-only {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .video-background--mobile-only,
    .background-image--mobile-only {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:244) */
.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:245) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:breadcrumbs (INDEX:247) */
.breadcrumbs,
  .breadcrumbs a,
  .breadcrumbs li {
    text-transform: capitalize;
  }

  .breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
/* END_SNIPPET:breadcrumbs */

/* START_SNIPPET:button (INDEX:248) */
.link {
    /* No theme setting controls link-style button type; Medium with a 0.8px rule. */
    font-weight: var(--font-subheading--weight);
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-decoration-thickness: 0.8px;
    text-underline-offset: 0.25rem;

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

/* START_SNIPPET:card-gallery (INDEX:249) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  /* Hover-only image swap (no on-card carousel dragging): stack every slide on top of
     each other and crossfade with opacity instead of the slideshow's normal side-by-side
     scroller, which had no transition at all (previewImage/resetImage always select with
     animate:false - an instant cut). `data-slide-current` (assets/slideshow.js) marks
     whichever slide `select()` last chose, whether that came from this hover swap or from
     hovering a colour swatch - both fade the same way here.
     Duration/easing reuse the theme's own fade tokens (theme-styles-variables.liquid) so
     this reads as the same "fade" language as the rest of the theme, at a duration close
     to the Prada reference cited on the ticket. */
  .card-gallery[data-hover-fade] {
    aspect-ratio: var(--gallery-aspect-ratio, 1);
  }

  .card-gallery[data-hover-fade] slideshow-slides {
    display: block;
    overflow: visible;
    height: 100%;
  }

  .card-gallery[data-hover-fade] slideshow-slide {
    /* Overrides the base rule's content-visibility: hidden for non-current slides
       (assets/base.css) - both the outgoing and incoming slide must stay painted
       throughout the crossfade, not just the one `aria-hidden` currently marks. */
    content-visibility: visible;
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    transition: opacity var(--animation-speed-slow) var(--animation-timing-fade-in);
  }

  .card-gallery[data-hover-fade] slideshow-slide[data-slide-current] {
    opacity: 1;
    z-index: 1;
  }

  @media (prefers-reduced-motion) {
    .card-gallery[data-hover-fade] slideshow-slide {
      transition: none;
    }
  }

  /* Only show the image-progress bar when the gallery is actually swipeable (settings.product_card_carousel).
     slideshow-component always reflects `disabled` as the literal string "true"/"false" (see slideshow.js),
     so this must match the value, not just presence of the attribute. */
  .card-gallery slideshow-component[disabled='true'] slideshow-controls {
    display: none;
  }

  /* The image-progress indicator runs the full width of the card, flush with the
     bottom edge of the image, at every viewport - so every card surface reads the
     same as the PDP gallery's own scroll rail and the PDP recommendation carousels.

     This supersedes the earlier inset 5.5rem bar that sat beside the quick-add plus,
     which was itself Figma-driven ("a single solid bar sitting beside the quick-add
     plus button, not centered/full-width or stacked under it"). If a Figma pass asks
     for that inset bar again, this is a deliberate reversal, not a stray regression -
     flag the conflict rather than quietly restoring it. Note the geometry rules in
     base.css that give the PDP recommendation carousel this same treatment are now
     redundant with these, and are mobile-scoped where these are not. */
  .card-gallery slideshow-controls[controls-on-media]:has(.slideshow-controls__progress-bar) {
    justify-content: center;
    padding-block: 0;
    bottom: 0;
    align-items: flex-end;
  }

  .card-gallery slideshow-controls[controls-on-media] .slideshow-controls__progress-bar {
    gap: 0;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    flex: 0 0 auto;
    padding-inline: 0;
  }

  /* Each segment button is still `height: var(--minimum-touch-target)`
     (slideshow-controls.liquid), so without this the visible tick renders at that
     button's vertical center rather than at the bar's own bottom edge. */
  .card-gallery slideshow-controls[controls-on-media] .slideshow-controls__progress-segment {
    align-items: flex-end;
  }

  @media screen and (max-width: 749px) {
    .card-gallery {
      /* How far the quick-add plus's vertical center sits above the card's own
         bottom edge. This used to be the progress bar's offset as well, with the
         plus centered on the tick; the bar now runs flush with the bottom edge
         (above), so this anchors the plus alone. quick-add.liquid reads it rather
         than duplicating the number - if it changes, the plus moves with it
         instead of needing a matching hand-edit (86akjygq0 left the plus behind
         exactly this way once already). Mobile-only because the desktop plus is
         placed by quick-add.liquid's own corner-inset formula, not from here. */
      --card-quick-add-center-offset: var(--padding-sm);
    }
  }

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

  /* :not(.slideshow-controls__progress-segment) - this rule is meant for the
     arrow buttons only. The progress-bar's segment buttons share the
     .slideshow-control class but are already narrow (flex: 1 across the
     5.5rem bar); adding this inline padding to them left no content box for
     the segment's tick (width: 100%) to fill, rendering it invisible (86akjygq0). */
  [product-grid-view='zoom-out'] .card-gallery .slideshow-control:not(.slideshow-controls__progress-segment) {
    min-width: auto;
        /* The mobile edge-hugging padding (--padding-2xs) assumes the button's normal
       44px touch-target width; here min-width is auto (shrunk to the icon), so
       that padding puts the icon right at the card boundary. Give it more room. */
    padding-inline: var(--padding-sm);
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-nosto-recommendations (INDEX:253) */
.cart-drawer__nosto-recs {
    margin-block-start: 10px;
    margin-block-end: 10px;
    width: 100%;
    flex-shrink: 0;
  }

  .cart-drawer__nosto-recs[data-nosto-empty] {
    margin-block-start: 16px;
    pointer-events: none;
  }

  .cart-drawer__nosto-recs[data-nosto-empty] .cart-drawer__nosto-recs-header,
  .cart-drawer__nosto-recs[data-nosto-empty] .nosto-carousel__arrows {
    visibility: hidden;
    height: 0;
    margin: 0;
    overflow: hidden;
  }

  .cart-drawer__nosto-recs[data-nosto-empty] .nosto-carousel__scroll {
    position: relative;
    width: 100%;
    min-height: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
  }

  .cart-drawer__nosto-recs:not([data-nosto-empty]) {
    pointer-events: auto;
  }

  .cart-drawer__nosto-recs:not([data-nosto-empty]) .nosto-carousel__scroll {
    position: static;
    width: auto;
    min-height: 0;
    height: auto;
    margin: 0;
    overflow: auto;
    opacity: 1;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll:focus-visible,
  .cart-drawer__nosto-recs .nosto-carousel__arrows .slideshow-control:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-drawer__nosto-recs .nosto-carousel__scroll .swiper-wrapper {
      scroll-behavior: auto;
    }
  }

  .cart-drawer__nosto-recs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 10px;
  }

  .cart-drawer__nosto-recs-heading {
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: normal;
    color: #000;
  }

  .cart-drawer__nosto-recs .nosto-carousel__arrows {
    display: flex;
    align-items: center;
    gap: 11.59px;
    flex-shrink: 0;
  }

  .cart-drawer__nosto-recs .nosto-carousel__arrows .slideshow-control {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
  }

  .cart-drawer__nosto-recs .nosto-carousel__arrows .icon-chevron,
  .cart-drawer__nosto-recs .nosto-carousel__arrows .icon-chevron svg {
    width: 4.11px;
    height: 6.16px;
  }

  .cart-drawer__nosto-recs .nosto-carousel {
    width: 100%;
    position: relative;
  }

  .cart-drawer__nosto-recs .nosto-carousel__inner {
    position: relative;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .swiper-slide .product-tile__quick-add.hide {
    display: block !important;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .swiper-slide .product-tile__quick-add {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .cart-drawer__nosto-recs
    .nosto-carousel__scroll
    .swiper-slide
    .product-tile__quick-add
    .button--quick-add-trigger:not(.hide) {
    display: block !important;
    position: absolute !important;
    right: calc(4.76% - 13.5px) !important;
    bottom: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 0 !important;
    pointer-events: auto !important;
    padding: 0 !important;
    border: none !important;
    background-color: #000 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 5 5' fill='none'%3E%3Cpath d='M0 2.5H5M2.5 0V5' stroke='black' stroke-width='0.571429' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 5px 5px !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 5 5' fill='none'%3E%3Cpath d='M0 2.5H5M2.5 0V5' stroke='black' stroke-width='0.571429' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 5px 5px !important;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-listing {
    width: 100% !important;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-listing > .flex.space-between {
    display: none !important;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-listing__content {
    width: 100% !important;
    overflow: visible;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .swiper-wrapper {
    --nosto-card-gap: 7px;
    display: flex !important;
    gap: var(--nosto-card-gap);
    width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    transform: none !important;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .swiper-slide {
    flex: 0 0 calc((100% - (var(--nosto-card-gap) * 2)) / 3);
    width: calc((100% - (var(--nosto-card-gap) * 2)) / 3);
    max-width: calc((100% - (var(--nosto-card-gap) * 2)) / 3);
    scroll-snap-align: start;
    min-width: 0;
    height: auto;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile,
  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__image-wrapper,
  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__link--image,
  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__image,
  .cart-drawer__nosto-recs .nosto-carousel__scroll .responsive-image,
  .cart-drawer__nosto-recs .nosto-carousel__scroll .responsive-image__image,
  .cart-drawer__nosto-recs .nosto-carousel__scroll .swiper-slide {
    border: none !important;
    box-shadow: none !important;
    outline: none;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile {
    position: relative;
    width: 100%;
    background: transparent;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 150.24 / 208.67;
    width: 100%;
    max-height: none;
    background: transparent;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__image-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__link--image {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background: transparent;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__image--placeholder {
    background: #e8e8e8;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__image.responsive-image {
    aspect-ratio: auto;
    height: 100%;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__hover-media {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__image-wrapper:hover .product-tile__hover-media {
    opacity: 1;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .responsive-image {
    width: 100%;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .responsive-image__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__details {
    padding: 10px 6.7px 7px 10px;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__title,
  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__title a,
  .cart-drawer__nosto-recs .product-tile__title,
  .cart-drawer__nosto-recs .product-tile__title a {
    min-height: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 16.25px;
    letter-spacing: normal;
    text-transform: capitalize;
    font-family: var(--font-body--family, inherit);
    text-decoration: none;
    color: #000;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__title,
  .cart-drawer__nosto-recs .product-tile__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 33.5px;
    overflow: hidden;
  }

  .cart-drawer__nosto-recs .product-tile__pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    font-family: var(--font-body--family, inherit);
    color: #080808;
  }

  /*
   * Base pricing typography only. The compare-at/sale treatment (struck-through original,
   * bold sale price) is not re-stated here -- it's the shared .nosto_element rule in
   * base.css, which every Nosto placement inherits. See docs/nosto-placements.md.
   */
  .cart-drawer__nosto-recs .product-tile__pricing .price {
    font-size: 13px;
    font-weight: 400;
    color: #080808;
  }

  .cart-drawer__nosto-recs .nosto-carousel__scroll .price__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .cart-drawer__nosto-recs .product-tile__colors .nosto-colour-label,
  .cart-drawer__nosto-recs .product-tile__colors .nosto-colour-value,
  .cart-drawer__nosto-recs .product-tile__colors:not(:has(.nosto-colour-swatch)):not(:has(.nosto-colour-swatches)) {
    display: none;
  }

  .cart-drawer__nosto-recs .product-tile__colors {
    margin: 13px 0 0;
    min-height: 13.892px;
  }

  .cart-drawer__nosto-recs .product-tile__colors .nosto-colour-swatches {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6.13px;
    margin-block-start: 0;
  }

  /* Swatch containers match [class*='swatch'] too, and wrap if sized like a dot */
  .cart-drawer__nosto-recs .nosto-colour-swatch,
  .cart-drawer__nosto-recs .product-tile__colors .swatch,
  .cart-drawer__nosto-recs .product-tile__colors [class*='swatch']:not(.nosto-colour-swatches):not(.color-swatch__list) {
    display: inline-block;
    width: 13.892px;
    height: 13.892px;
    border-radius: 50%;
    background: var(--swatch, #ccc);
    border: 1.158px solid #e6e6e6;
    box-shadow: none;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .cart-drawer__nosto-recs .product-tile__swatches {
    margin-block-start: 13px;
  }

  .cart-drawer__nosto-recs .product-tile__swatches .color-swatch__list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6.13px;
  }

  .cart-drawer__nosto-recs .product-tile__swatches .nosto-colour-swatch {
    background-size: cover;
    background-position: center;
  }

  .cart-drawer__nosto-recs .product-tile__swatches .swatch.color-swatch__dot {
    width: 13.892px;
    height: 13.892px;
    min-width: 13.892px;
    min-height: 13.892px;
    border: 1.158px solid #e6e6e6;
    box-sizing: border-box;
  }

  @media screen and (max-width: 1023px) {
    .cart-drawer__nosto-recs {
      margin-block-start: 60px;
      margin-block-end: 76px;
      padding-inline: 0;
    }

    .cart-drawer__nosto-recs-heading {
      font-size: 12px;
      font-weight: 700;
      text-transform: capitalize;
    }

    .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__details {
      padding-top: 11px !important;
    }

    .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__title,
    .cart-drawer__nosto-recs .product-tile__title {
      margin-bottom: 11px !important;
      line-height: 15px;
      text-transform: none;
    }

    .cart-drawer__nosto-recs .product-tile__pricing {
      margin-top: 0 !important;
      margin-bottom: 13px !important;
    }

    .cart-drawer__nosto-recs .product-tile__colors {
      margin-top: 0 !important;
    }

    .cart-drawer__nosto-recs .nosto-carousel__scroll .swiper-wrapper {
      --nosto-card-gap: 0.5px;
      padding-inline-end: 24px;
      scroll-behavior: auto;
    }

    .cart-drawer__nosto-recs .nosto-carousel__scroll .swiper-slide {
      flex: 0 0 150px;
      width: 150px;
      max-width: 150px;
    }

    .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__image-wrapper {
      aspect-ratio: 150.24 / 208.67;
    }
  }

  @media screen and (min-width: 1024px) {
    .cart-drawer__nosto-recs {
      margin-block-start: 24px;
      margin-block-end: 40px;
    }

    .cart-drawer__nosto-recs .nosto-carousel__scroll .swiper-wrapper {
      --nosto-card-gap: 2px;
    }

    .cart-drawer__nosto-recs .nosto-carousel__scroll .product-tile__details {
      padding-top: 12px !important;
    }

    .cart-drawer__nosto-recs .product-tile__title {
      margin-bottom: 0 !important;
    }

    .cart-drawer__nosto-recs .product-tile__pricing {
      margin-top: 12px !important;
      margin-bottom: 12px !important;
    }
  }
/* END_SNIPPET:cart-nosto-recommendations */

/* START_SNIPPET:cart-products (INDEX:254) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Drawer line-item grid is defined in the shared .cart-drawer .cart-items block below */

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
  }

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

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

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }


  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

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

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }

    .cart-items .quantity-selector.quantity-selector--plain {
      width: auto;
      height: auto;
    }

    .cart-items .quantity-selector.quantity-selector--plain button {
      width: 20px;
      height: 20px;
    }

    .cart-items .quantity-selector.quantity-selector--plain input {
      max-width: none;
    }
  }

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

  /* Cart drawer line items — shared structure; layout tokens differ by viewport */
  .cart-drawer .cart-items {
    --cart-item-media-width: 83px;
    --cart-item-media-height: 104px;
    --cart-item-media-width-min: var(--cart-item-media-width);
    --cart-item-media-width-max: var(--cart-item-media-width);
    --cart-item-column-gap: 15px;
    --cart-item-row-pad: 14px;
    --cart-item-title-size: 13px;
    --cart-item-title-line-height: 17px;
    --cart-item-meta-size: 10px;
    --cart-item-price-size: 12px;
    --cart-item-qty-size: 10px;
    --cart-item-qty-line-height: 14px;
    --cart-item-qty-control: 14px;
    --cart-item-action-size: 6.93px;
    --cart-item-controls-column-gap: 12px;
    --cart-item-controls-row-gap: 8px;
  }

  .cart-drawer .cart-items__table,
  .cart-drawer .cart-items__table tbody {
    display: block;
    width: 100%;
  }

  .cart-drawer .cart-items__table-row,
  .cart-drawer .cart-items__table-row--full-width-variants {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: var(--cart-item-media-width) minmax(0, 1fr) max-content;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      'media details unit_price'
      'media variants variants'
      'media quantity quantity'
      'media error error';
    column-gap: var(--cart-item-column-gap);
    row-gap: 0;
    padding-bottom: 0;
    margin-bottom: var(--cart-item-row-pad);
    border-bottom: none;
    align-items: start;
    min-height: var(--cart-item-media-height);
  }

  .cart-drawer .cart-items__table-row:last-child {
    margin-bottom: 0;
  }

  .cart-drawer .cart-items--dividers .cart-items__table-row,
  .cart-drawer .cart-items--dividers .cart-items__table-row--full-width-variants {
    border-bottom: none;
  }

  .cart-drawer .cart-items__table-row--full-width-variants .cart-items__details,
  .cart-drawer .cart-items__table-row .cart-items__details {
    display: contents;
  }

  .cart-drawer .cart-items__product-info {
    grid-area: details;
    min-width: 0;
    color: #000;
  }

  .cart-drawer .cart-items__product-info > p {
    margin: 0;
    min-width: 0;
  }

  .cart-drawer .cart-items__variants-wrapper {
    grid-area: variants;
    min-width: 0;
  }

  .cart-drawer .cart-items__unit-price-wrapper {
    grid-area: unit_price;
    justify-self: end;
    align-self: start;
    text-align: right;
    font-size: var(--cart-item-price-size);
    line-height: 1.3;
    color: #000;
    white-space: nowrap;
  }

  .cart-drawer .cart-items__media {
    padding: 0;
    align-self: start;
    grid-row: 1 / -1;
  }

  .cart-drawer .cart-items__media-container {
    width: var(--cart-item-media-width);
    height: var(--cart-item-media-height);
    overflow: clip;
    display: block;
  }

  .cart-drawer .cart-items__media,
  .cart-drawer .cart-items__media-container,
  .cart-drawer .cart-items__media-image,
  .cart-drawer .cart-items__media-image.border-style,
  .cart-drawer .cart-items__media a,
  .cart-drawer .cart-items__media img {
    --border-width: 0px !important;
    --border-style: none !important;
    --border-color: transparent !important;
    --border-radius: 0px !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .cart-drawer .cart-items__media-image,
  .cart-drawer .cart-items__media-image.border-style {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
  }

  .cart-drawer .cart-items__title {
    display: block;
    font-size: var(--cart-item-title-size);
    font-weight: 700;
    text-transform: none;
    line-height: var(--cart-item-title-line-height);
    margin-block-start: 0;
    color: #000;
    overflow-wrap: break-word;
  }

  @media screen and (max-width: 1023px) {
    .cart-drawer .cart-items__title {
      max-width: 133px;
    }

    .cart-drawer .cart-items__variants-wrapper {
      margin-top: 0;
      line-height: 11.09px;
    }

    .cart-items__variants-wrapper .cart-items__variants .cart-items__variant dd {
      display: inline-block;
      max-width: 133px;
    }
  }

  .cart-drawer .cart-items__details {
    color: #000;
  }

  .cart-drawer .cart-items__final-sale-badge {
    display: inline-block;
    margin-block-start: 5px;
    padding: 2px 4px;
    background: #e6e6e6;
    color: #0d0d0d;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .cart-drawer .cart-items__variants {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-block-start: 12px;
    margin-block-end: 0;
  }

  .cart-drawer .cart-items__details:has(.cart-items__final-sale-badge) .cart-items__variants {
    margin-block-start: 4px;
  }

  .cart-drawer .cart-items__variant,
  .cart-drawer .cart-items__variant dt,
  .cart-drawer .cart-items__variant dd {
    display: inline;
    margin: 0;
    font-size: var(--cart-item-meta-size);
    font-weight: 500;
    line-height: 1.3;
    color: #000;
  }

  .cart-drawer .cart-items__variant {
    display: block;
  }

  .cart-drawer .cart-items__preorder {
    margin: 6px 0 0;
    padding: 6px 8px;
    background: #f6f6f6;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: #000;
    text-transform: none;
  }

  .cart-drawer .cart-items__unit-price-wrapper > div {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .cart-drawer .cart-items__unit-price-wrapper .compare-at-price {
    order: -1;
    font-size: var(--cart-item-price-size);
    font-weight: 400;
    line-height: 1.3;
    text-decoration: line-through;
    color: #0d0d0d;
  }

  .cart-drawer .cart-items__price-sale {
    font-size: var(--cart-item-price-size);
    font-weight: 700;
    line-height: 1.3;
    color: #000;
  }

  @media screen and (max-width: 1023px) {
    .cart-drawer .cart-items__unit-price-wrapper > div {
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }

    .cart-drawer .cart-items__title{
      line-height: 15px;
    }

    .cart-drawer .cart-items__variants {
      margin-block-start: 4px;
    }

    .cart-drawer .cart-items__final-sale-badge--desktop {
      display: none;
    }

    .cart-drawer .cart-items__final-sale-badge--mobile {
      padding: 3px 6px;
      font-size: var(--cart-item-meta-size);
    }

    .cart-drawer .cart-items__variant, .cart-drawer .cart-items__variant dt,
    .cart-drawer .cart-items__variant dd,
    .cart-drawer .cart-items__property, .cart-drawer .cart-items__property dt,
    .cart-drawer .cart-items__property dd {
      line-height: 11.09px;
    }

    .cart-drawer .cart-items__property,
    .cart-drawer .cart-items__property dt,
    .cart-drawer .cart-items__property dd {
      margin: 0;
      font-size: var(--cart-item-meta-size);
      font-weight: 500;
      color: #000;
    }

    .cart-drawer .cart-items__property {
      display: contents;
    }

    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain,
    .cart-drawer .cart-items cart-quantity-selector-component.quantity-selector--plain {
      font-size: 10px;
    }

    .cart-drawer .cart-items__table-row,
    .cart-drawer .cart-items__table-row--full-width-variants {
      min-height: 0;
    }

    .cart-drawer .cart-items__media {
      grid-row: 1 / span 3;
    }
  }

  .cart-drawer .cart-items__price {
    display: none;
  }

  .cart-drawer .cart-items__quantity {
    grid-area: quantity;
    width: 100%;
    margin-block-start: 6px;
    padding-bottom: 0;
    border: none;
    box-shadow: none;
    background: none;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
  }

  .cart-drawer .cart-items__quantity-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    justify-content: start;
    width: max-content;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    background: none;
  }

  .cart-drawer .cart-items__quantity-controls > .volume-pricing-info {
    display: none;
  }

  .cart-drawer .cart-items__quantity-row {
    display: contents;
  }

  /* REMOVE / ADD TO WISHLIST — own row under quantity */
  .cart-drawer .cart-items__actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    flex-basis: 100%;
    margin: 4px 0 0;
    padding: 0;
  }

  .cart-drawer .cart-items__quantity-label {
    width: auto;
    margin: 0;
    font-size: var(--cart-item-qty-size);
    font-weight: 500;
    line-height: 20px;
    color: #000;
  }

  .cart-drawer .cart-items__quantity-row .quantity-selector-wrapper {
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }

  .cart-drawer .cart-items .quantity-selector.quantity-selector--plain,
  .cart-drawer .cart-items cart-quantity-selector-component.quantity-selector--plain {
    --style-border-width-inputs: 0px;
    --color-input-border: transparent;
    --color-input-background: transparent;
    --color-input-hover-background: transparent;
    --quantity-selector-width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    max-width: none;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex: none;
  }

  .cart-drawer .cart-items .quantity-selector.quantity-selector--plain:hover,
  .cart-drawer .cart-items .quantity-selector.quantity-selector--plain:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .cart-drawer .cart-items .quantity-selector.quantity-selector--plain .button,
  .cart-drawer .cart-items .quantity-selector.quantity-selector--plain :is(.quantity-minus, .quantity-plus) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #000;
    flex-shrink: 0;
  }

  .cart-drawer .cart-items .quantity-selector.quantity-selector--plain .svg-wrapper,
  .cart-drawer .cart-items .quantity-selector.quantity-selector--plain svg {
    width: 12px;
    height: 12px;
    display: block;
  }

  @media screen and (max-width: 1023px) {
    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain .svg-wrapper,
    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain svg {
      width: 10px;
      height: 10px;
    }
  }

  .cart-drawer .cart-items .quantity-selector.quantity-selector--plain input[type='number'] {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--cart-item-qty-size);
    font-weight: 500;
    line-height: 20px;
    color: #000;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
  }

  .cart-drawer .cart-items .quantity-selector.quantity-selector--plain input[type='number']::-webkit-outer-spin-button,
  .cart-drawer .cart-items .quantity-selector.quantity-selector--plain input[type='number']::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  .cart-drawer .cart-items__remove {
    display: none;
  }

  .cart-drawer .cart-items__remove-link,
  .cart-drawer .cart-items__wishlist-link {
    display: inline;
    font-size: var(--cart-item-action-size, 7px);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    color: #000;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
    white-space: nowrap;
  }

  .cart-drawer .cart-items__wishlist-link {
    margin-left: auto;
  }

  .cart-drawer .cart-items__remove-link:focus-visible,
  .cart-drawer .cart-items__wishlist-link:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: 2px;
  }

  .cart-drawer .cart-items__wishlist-link:disabled {
    opacity: 0.5;
    cursor: wait;
  }

  @media screen and (min-width: 1024px) {
    .cart-drawer .cart-items {
      --cart-item-media-width: 120px;
      --cart-item-media-height: 150px;
      --cart-item-column-gap: 20px;
      --cart-item-title-size: 13px;
      --cart-item-title-line-height: 1.3;
      --cart-item-meta-size: 12px;
      --cart-item-price-size: 12px;
      --cart-item-qty-size: 12px;
      --cart-item-qty-line-height: 20px;
      --cart-item-qty-control: 12px;
      --cart-item-action-size: 10px;
      --cart-item-controls-column-gap: 24px;
      --cart-item-controls-row-gap: 0;
    }

    .cart-drawer .cart-items__title {
      max-width: 145px;
    }

    .cart-drawer .cart-items__product-info > p {
      min-height: 40px;
    }

    .cart-drawer .cart-items__table-row,
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-rows: auto auto minmax(0, 1fr) auto;
    }

    .cart-drawer .cart-items__quantity-controls {
      row-gap: 4px;
    }

    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain,
    .cart-drawer .cart-items cart-quantity-selector-component.quantity-selector--plain {
      font-size: 10px;
    }

    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain .svg-wrapper,
    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain svg {
      width: 10px;
      height: 10px;
    }

    .cart-drawer .cart-items__final-sale-badge {
      margin-block-start: 6px;
      padding: 3px 6px;
      background: #000;
      color: #fff;
      font-size: 11px;
      font-weight: 400;
    }

    .cart-drawer .cart-items__final-sale-badge--mobile {
      display: none;
    }

    .cart-drawer .cart-items__variants {
      gap: 1px;
      margin-block-start: 2px;
    }

    .cart-drawer .cart-items__variant {
      line-height: 20px;
    }

    .cart-drawer .cart-items__preorder {
      margin-block-start: 8px;
      padding: 8px 10px;
    }

    .cart-drawer .cart-items__unit-price-wrapper > div {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: baseline;
      gap: 8px;
    }

    .cart-drawer .cart-items__quantity {
      margin-block-start: 0px;
      padding-bottom: 0;
      align-self: stretch;
      height: auto;
    }

    .cart-drawer .cart-items__quantity-controls {
      flex: 1;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      height: auto;
    }

    .cart-drawer .cart-items__quantity-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .cart-drawer .cart-items__quantity-row .quantity-selector-wrapper {
      width: auto;
    }

    .cart-drawer .cart-items__media-image,
    .cart-drawer .cart-items__media-image.border-style {
      --border-width: 0px !important;
      border: 0 !important;
      outline: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }

    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain,
    .cart-drawer .cart-items cart-quantity-selector-component.quantity-selector--plain {
      justify-content: flex-start;
      gap: 10px;
      width: auto !important;
      max-width: none;
      height: 20px !important;
      min-height: 20px !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      flex: none;
    }

    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain .button,
    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain :is(.quantity-minus, .quantity-plus) {
      width: 20px !important;
      height: 20px !important;
      min-width: 20px !important;
      min-height: 20px !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain input[type='number'] {
      width: 20px !important;
      max-width: 20px !important;
      padding: 0 !important;
      border: 0 !important;
      background-color: transparent !important;
      box-shadow: none !important;
    }

    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain .quantity-minus {
      justify-content: flex-start;
    }

    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain .quantity-plus {
      justify-content: flex-end;
    }

    .cart-drawer .cart-items .quantity-selector.quantity-selector--plain input[type='number'] {
      height: 20px;
      line-height: 20px;
    }

    .cart-drawer .cart-items__actions {
      margin-block-start: 0px;
      flex-basis: auto;
      flex-shrink: 0;
    }

    .cart-drawer .cart-items__remove-link,
    .cart-drawer .cart-items__wishlist-link,
    .cart-drawer .cart-items__actions-divider {
      font-size: 10px;
    }
  }

  /* Drawer thumbs: force no chrome */
  .cart-drawer .cart-items__media-image {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
  }

  @media screen and (max-width: 1023px) {
    .cart-drawer .cart-items__property dt,
    .cart-drawer .cart-items__property dd {
      display: block;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:255) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }

  /*
    Host for Seel's drawer widget — see the anchor markup at the top of this snippet.
    `display: contents` keeps the slot out of `.cart-drawer__summary`'s flex column,
    which has a `gap` and explicit `order` on its real children, so an empty slot adds
    no space and Seel's widget lays out exactly where it did before. The anchor is only
    a target for Seel's `querySelector` and is never painted.
  */
  .cart-drawer .cart-drawer__app-slot {
    display: contents;
  }

  .cart-drawer .cart-drawer__app-anchor {
    display: none;
  }

  /* Cart drawer totals */
  .cart-drawer .cart-totals--drawer {
    gap: 12px;
    border-block-start: none !important;
    margin-block-start: 0 !important;
    padding-block-start: 0 !important;
    width: 100%;
    align-self: stretch;
  }

  .cart-drawer .cart-drawer__summary .cart-totals--drawer {
    border-block-start: none !important;
    padding-block-start: 0 !important;
  }

  .cart-drawer .cart-totals--drawer .cart-totals__original-container {
    display: none;
  }

  .cart-drawer .cart-totals--drawer .cart-actions {
    display: none;
  }

  .cart-drawer .cart-totals--drawer .cart-totals__container {
    row-gap: 8px;
  }

  .cart-drawer .cart-totals--drawer .cart-totals__subtotal,
  .cart-drawer .cart-totals--drawer .cart-totals__shipping,
  .cart-drawer .cart-totals--drawer .cart-totals__discount {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: #000;
  }

  .cart-drawer .cart-totals--drawer .cart-totals__discounts {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cart-drawer .cart-totals--drawer .cart-totals__discount-label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-drawer .cart-totals--drawer .cart-totals__discount-label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .cart-drawer .cart-totals--drawer .cart-totals__divider {
    width: 100%;
    height: 0;
    margin: 8px 0;
    border: 0;
    border-top: 1px solid #e5e5e5;
  }

  .cart-drawer .cart-totals--drawer .cart-totals__total {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    align-items: center;
    color: #000;
  }

  .cart-drawer .cart-totals--drawer .cart-totals__total-label,
  .cart-drawer .cart-totals--drawer .cart-totals__total-value {
    font-size: 13px;
    font-weight: 700;
    color: #000;
  }

  .cart-drawer .cart-totals--drawer .cart-totals__tax-note,
  .cart-drawer .cart-totals--drawer .cart-totals__installments {
    display: none;
  }

  /* Cart drawer checkout + or pay with */
  .cart-drawer .cart__ctas--drawer {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    gap: 8px;
    align-self: stretch;
  }

  .cart-drawer .cart__ctas--drawer .cart__checkout-button {
    --text-align: center;
    --button-text-align: center;
    width: 100%;
    max-width: none;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding-inline: 16px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: uppercase;
    text-align: center;
    place-items: center;
    justify-content: center;
  }

  .cart-drawer .cart__ctas--drawer .cart__checkout-button .button-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
  }

  .cart-drawer .cart__or-pay-with {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .cart-drawer .cart__or-pay-with-line {
    flex: 1 1 auto;
    height: 0;
    border: none;
    border-top: 1px solid #d9d9d9;
    background: none;
    min-width: 0;
  }

  .cart-drawer .cart__or-pay-with-label {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
    color: #838282;
    text-transform: lowercase;
    text-align: center;
    white-space: nowrap;
  }

  .cart-drawer .additional-checkout-buttons--drawer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    margin: 0;
  }

  .cart-drawer .cart-express-pay {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: var(--wallet-height);
    min-height: var(--wallet-height);
    --wallet-gap: 20px;
    --wallet-height: 44px;
    --wallet-tiles: 2;
  }

  /*
    Skins never take a click — each tile only opens the wallet sitting on top of it.
  */
  .cart-drawer .cart-express-pay__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(var(--wallet-tiles), 1fr);
    gap: var(--wallet-gap);
    width: 100%;
    pointer-events: none;
  }

  /*
   * Hidden until cart-express-pay.js sets data-cart-wallet-skin on a real bound
   * wallet. Without this, a tile with no wallet behind it (methods enabled but
   * unavailable on this device) would draw as a fully-styled, tappable-looking
   * button for up to WALLET_TIMEOUT_MS with nothing behind it - see the comment
   * above the markup in this file.
   */
  .cart-drawer .cart-express-pay__btn {
    display: none;
    align-items: center;
    justify-content: center;
    height: var(--wallet-height);
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #555;
    padding: 0;
  }

  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin] {
    display: flex;
  }

  .cart-drawer .cart-express-pay__btn svg {
    display: block;
    width: auto;
  }

  /* Only the mark matching the tile's actual bound wallet (set by cart-express-pay.js) shows. */
  .cart-drawer .cart-express-pay__mark {
    display: none;
  }

  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin='apple-pay'] [data-wallet-mark='apple-pay'],
  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin='google-pay'] [data-wallet-mark='google-pay'],
  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin='paypal'] [data-wallet-mark='paypal'] {
    display: block;
  }

  /*
   * Figma cart-drawer/desktop (node 121:3363) sizes each wallet mark by its own
   * proportions within the 44px-tall button, not a shared height: Apple Pay
   * renders at 42x17.436, PayPal at 53.487x14.4. Google Pay has no node in that
   * frame - height matched to Apple Pay's as a stopgap (see the comment above
   * the markup in this file).
   */
  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin='apple-pay'] svg,
  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin='google-pay'] svg {
    height: 17.436px;
  }

  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin='paypal'] svg {
    height: 14.4px;
  }

  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin='apple-pay'] svg path,
  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin='google-pay'] svg path,
  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin='paypal'] svg path {
    fill: #000;
  }

  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin='paypal'] svg path#Vector_4,
  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin='paypal'] svg path#Vector_5,
  .cart-drawer .cart-express-pay__btn[data-cart-wallet-skin='paypal'] svg path#Vector_6 {
    fill: #555555;
  }

  /*
    Wallet layer is click-through; only the buttons take pointer events so the
    gap between tiles cannot swallow a tap. Apple Pay needs a gesture on its own button.
  */
  .cart-drawer .cart-express-pay__native {
    position: relative;
    z-index: 1;
    height: var(--wallet-height);
    min-height: var(--wallet-height);
    pointer-events: none;
  }

  .cart-drawer .cart-express-pay__native .dynamic-checkout__content,
  .cart-drawer .cart-express-pay__native .shopify-payment-button,
  .cart-drawer .cart-express-pay__native .wallet-button-wrapper {
    display: block !important;
    width: 100% !important;
    height: var(--wallet-height) !important;
    min-height: var(--wallet-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Wallets are direct children of this element — this is the grid that aligns with the skins. */
  .cart-drawer .cart-express-pay__native shopify-accelerated-checkout-cart {
    display: grid !important;
    grid-template-columns: repeat(var(--wallet-tiles), 1fr) !important;
    gap: var(--wallet-gap) !important;
    width: 100% !important;
    height: var(--wallet-height) !important;
    min-height: var(--wallet-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .cart-drawer .cart-express-pay__native shopify-apple-pay-button,
  .cart-drawer .cart-express-pay__native apple-pay-button,
  .cart-drawer .cart-express-pay__native shopify-google-pay-button,
  .cart-drawer .cart-express-pay__native shopify-paypal-button {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--wallet-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: auto !important;
  }

  /* PayPal / Google Pay wrappers ignore width:100% without this. */
  .cart-drawer .cart-express-pay__native shopify-paypal-button > div,
  .cart-drawer .cart-express-pay__native shopify-google-pay-button > div,
  .cart-drawer .cart-express-pay__native .paypal-buttons {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--wallet-height) !important;
  }

  .cart-drawer .cart-express-pay__native shop-pay-wallet-button {
    display: none !important;
  }

  .cart-drawer .cart-express-pay__native .wallet-cart-grid--skeleton,
  .cart-drawer .cart-express-pay__native [class*='skeleton'] {
    display: none !important;
  }

  /*
    Recurring-purchase terms render as a bare <small> inside the fixed-height
    wallet row. Grow the row to fit them; keep skins at the wallet height.
  */
  .cart-drawer .cart-express-pay:has(.cart-express-pay__native small),
  .cart-drawer .cart-express-pay:has(.cart-express-pay__native small) .cart-express-pay__native,
  .cart-drawer .cart-express-pay:has(.cart-express-pay__native small) .dynamic-checkout__content {
    height: auto !important;
    min-height: var(--wallet-height) !important;
  }

  .cart-drawer .cart-express-pay:has(.cart-express-pay__native small) .cart-express-pay__visual {
    bottom: auto;
    height: var(--wallet-height);
  }

  .cart-drawer .cart-express-pay__native small {
    display: block;
    width: 100%;
    margin-block-start: var(--gap-md);
  }

  .cart-drawer .cart__or-pay-with--mobile-only {
    display: none;
  }

  @media screen and (min-width: 1024px) {
    .cart-drawer .cart__ctas--drawer {
      gap: 8px;
    }

    .cart-drawer .cart-express-pay__native small {
      margin-block-end: var(--gap-lg);
    }
  }

  @media screen and (max-width: 1023px) {
    .cart-drawer .cart__or-pay-with--mobile-only {
      display: flex;
    }

    .cart-drawer .cart__or-pay-with-label {
      font-size: 10px;
    }

    .cart-drawer .cart-totals--drawer .cart-totals__total,
    .cart-drawer .cart-totals--drawer .cart-totals__total-label,
    .cart-drawer .cart-totals--drawer .cart-totals__total-value {
      font-size: 12px;
    }

    .cart-drawer .additional-checkout-buttons--drawer {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 15px;
      align-items: stretch;
    }

    .cart-drawer .cart-express-pay {
      grid-column: 1 / -1;
      grid-row: 1;
      width: auto;
      --wallet-gap: 15px;
      --wallet-height: 36px;
    }

    .cart-drawer .cart-express-pay__visual,
    .cart-drawer .cart-express-pay__native shopify-accelerated-checkout-cart {
      width: 100% !important;
    }

    .cart-drawer .cart-totals__klarna--drawer {
      font-size: 10px;
    }
  }

  .cart-totals__klarna {
    width: 100%;
    margin-block-start: var(--gap-2xs);
    font-size: var(--font-size--2xs);
  }

  .cart-totals__klarna--below-checkout {
    margin-block-start: var(--gap-md);
  }

  .cart-totals__klarna .klarna-osm {
    width: 100%;
  }

  .cart-drawer .cart-totals__klarna--drawer {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    margin-block-start: 12px;
    font-size: 11px;
    line-height: 1.4;
    color: #000;
    text-align: center;
    align-self: stretch;
    order: 3;
  }

  .cart-drawer .cart-totals__klarna--drawer .klarna-osm,
  .cart-drawer .cart-totals__klarna--drawer klarna-placement {
    width: 100%;
    font-size: 11px;
    text-align: center;
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:257) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      /* only allow interactive elements to be clickable separate from .collection-card__link */
      pointer-events: auto;
    }
  }

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

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .image-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:collection-category-nav (INDEX:258) */
.collection-category-nav {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    gap: var(--gap-2xs);
    min-width: 0;
    width: 100%;
    padding-block-start: var(--padding-lg);
    /* Left edge aligns with the header; 0 on the right lets the scrolling links strip
       run to the page edge on mobile. Desktop overrides this below. */
    padding-inline: var(--page-margin) 0;
    border-block: var(--style-border-width) solid var(--color-border);
  }

  .collection-category-nav__title {
    flex: 0 0 auto;
    font-size: var(--font-size--sm);
    font-weight: var(--font-heading--weight);
    line-height: var(--line-height--body-tight);
    color: var(--color-foreground);
  }

  .collection-category-nav__links {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    height: var(--minimum-touch-target);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .collection-category-nav__links::-webkit-scrollbar {
    display: none;
  }

  .collection-category-nav__link {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 100%;
    font-size: var(--font-size--xs);
    line-height: var(--line-height--body-tight);
    color: var(--color-foreground-subdued);
    text-decoration: none;
  }

  .collection-category-nav__link--active {
    color: var(--color-foreground);
    font-weight: var(--font-heading--weight);
  }

  .collection-category-nav__link--active::after {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: var(--style-border-width);
    background: currentcolor;
    content: '';
  }

  /* A subcollection click is a full document load, so acknowledge it at once:
     :active covers the press with no JS, --pending persists for the wait.
     Both opt out of the inherited 125ms colour transition — this is feedback
     about latency, so it must not itself fade in. */
  .collection-category-nav__link:active,
  .collection-category-nav__link--pending {
    color: var(--color-foreground);
    transition: none;
  }

  .collection-category-nav__link--pending::after {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: var(--style-border-width);
    background: currentcolor;
    content: '';
    /* Pulses from a centre origin, so it reads the same in LTR and RTL.
       transform-origin takes no logical keyword, hence no inline-start here. */
    animation: collection-category-nav-pending 900ms ease-in-out infinite;
  }

  /* Stays fully opaque so the bar is visible on the very first frame. */
  @keyframes collection-category-nav-pending {
    0%,
    100% {
      transform: scaleX(0.3);
    }

    50% {
      transform: scaleX(1);
    }
  }

  /* Keep the indicator, drop the motion. */
  @media (prefers-reduced-motion: reduce) {
    .collection-category-nav__link--pending::after {
      animation: none;
      transform: none;
    }
  }

  @media screen and (min-width: 750px) {
    .collection-category-nav {
      flex-direction: row;
      align-items: center;
      gap: var(--gap-xl);
      height: 56px;
      padding-block: 0;
      /* Matches the header's gutter at every viewport width, including above the
         page-width cap where the header's gutter grows past --page-margin. */
      padding-inline: var(--util-page-margin-offset);
    }

    .collection-category-nav__title {
      font-size: var(--font-size--md);
    }

    .collection-category-nav__links {
      flex: 1 1 auto;
      gap: var(--gap-xl);
      height: 100%;
    }

    .collection-category-nav__link {
      font-size: var(--font-size--sm);
    }
  }
/* END_SNIPPET:collection-category-nav */

/* START_SNIPPET:collection-metafield-panels (INDEX:259) */
.section-content-wrapper > div:has(> .collection-seo) {
    width: 100%;
  }

  .collection-seo {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-foreground);
  }

  .collection-seo__description {
    width: min(100%, 27.6875rem);
    padding-block: calc(var(--padding-6xl) + var(--padding-sm)) var(--padding-3xl);
    padding-inline: var(--padding-lg);
    font-size: var(--font-size--sm);
    line-height: var(--line-height--body-normal);
    text-align: center;
  }

  .collection-seo__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    min-height: 150px;
  }

  .collection-metafield-panel__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-heading--weight);
    line-height: var(--line-height--body-tight);
    -webkit-tap-highlight-color: transparent;
  }

  .collection-metafield-panel__trigger svg {
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
  }

  /* Drawer shell — matches Figma "plp_seo drawer" frames (840px panel, tabbed header).
     Beat .dialog-modal mobile padding so the header rule can run edge-to-edge. */
  .collection-seo-drawer__dialog.dialog-modal {
    position: fixed;
    overflow-y: auto;
    margin: 0 0 0 auto;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    border-radius: 0;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
  }

  @media screen and (min-width: 750px) {
    .collection-seo-drawer__dialog.dialog-modal {
      width: 52.5rem;
      max-width: 95vw;
    }
  }

  /* showModal() auto-focuses a descendant; JS redirects that focus to the dialog itself
     (see collection-seo-drawer.js), so suppress the ring here rather than on a tab/trigger. */
  .collection-seo-drawer__dialog:focus,
  .collection-seo-drawer__dialog:focus-visible {
    outline: none;
  }

  /* Mobile: close button sits in its own row above the tabs (Figma "…/mobile" drawer frames) */
  .collection-seo-drawer__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
    border-bottom: 1px solid #e0e0e0;
  }

  @media screen and (min-width: 750px) {
    .collection-seo-drawer__header {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--gap-lg);
      min-height: 4.75rem;
      padding-inline: 4rem 1.875rem;
    }
  }

  .collection-seo-drawer__tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--gap-xl);
    width: 100%;
    min-width: 0;
    margin-bottom: -1px;
    padding-inline: var(--padding-xl);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .collection-seo-drawer__tabs::-webkit-scrollbar {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .collection-seo-drawer__tabs {
      flex-wrap: wrap;
      width: auto;
      gap: 1.875rem;
      padding-inline: 0;
      overflow-x: visible;
    }
  }

  .collection-seo-drawer__tab {
    flex: 0 0 auto;
    max-width: 8.5rem;
    padding: 0 0 0.625rem;
    border-bottom: 1.5px solid transparent;
    color: #c9c9c9;
    font-size: 14px;
    font-weight: var(--font-heading--weight);
    line-height: 1.2;
    text-align: start;
    white-space: normal;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  @media screen and (min-width: 750px) {
    .collection-seo-drawer__tab {
      max-width: none;
      white-space: nowrap;
    }
  }

  .collection-seo-drawer__tab.is-active {
    color: var(--color-foreground);
    border-bottom-color: var(--color-foreground);
  }

  .collection-seo-drawer__close {
    order: -1;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin-inline-end: var(--padding-lg);
    margin-block-start: var(--padding-2xs);
  }

  @media screen and (min-width: 750px) {
    .collection-seo-drawer__close {
      order: 0;
      align-self: center;
      margin-inline-end: 0;
      margin-block-start: 0;
    }
  }

  .collection-seo-drawer__close svg {
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
  }

  .collection-seo-drawer__body {
    padding: 2rem 1.5rem 3rem;
  }

  @media screen and (min-width: 750px) {
    .collection-seo-drawer__body {
      padding: 3rem 4rem 4rem;
    }
  }

  .collection-seo-drawer__panel[hidden] {
    display: none;
  }

  .collection-seo-drawer__text.rte p {
    margin: 0 0 0.75em;
    font-size: var(--font-size--sm);
    line-height: 1.55;
  }

  .collection-seo-drawer__text.rte p:last-child {
    margin-block-end: 0;
  }

  .collection-seo-drawer__panel--features .rte :is(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 0.3125rem;
    font-size: var(--font-size--sm);
    font-weight: var(--font-heading--weight);
    text-transform: capitalize;
  }

  .collection-seo-drawer__panel--features .rte :is(h1, h2, h3, h4, h5, h6) strong,
  .collection-seo-drawer__panel--features .rte :is(h1, h2, h3, h4, h5, h6) b {
    font-size: inherit;
    font-weight: inherit;
  }

  .collection-seo-drawer__panel--features .rte :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    margin-block-start: 1.875rem;
  }

  .collection-seo-drawer__panel--faq .rte :is(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 0.625rem;
    font-size: var(--font-size--sm);
    font-weight: var(--font-heading--weight);
    text-transform: capitalize;
  }

  .collection-seo-drawer__panel--faq .rte :is(h1, h2, h3, h4, h5, h6) strong,
  .collection-seo-drawer__panel--faq .rte :is(h1, h2, h3, h4, h5, h6) b {
    font-size: inherit;
    font-weight: inherit;
  }

  .collection-seo-drawer__panel--faq .rte :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    margin-block-start: 1.25rem;
  }

  @media screen and (min-width: 750px) {
    .collection-seo-drawer__panel--features .rte :is(h1, h2, h3, h4, h5, h6),
    .collection-seo-drawer__panel--faq .rte :is(h1, h2, h3, h4, h5, h6) {
      font-size: var(--font-size--md);
    }
  }

  .collection-seo__breadcrumbs {
    display: flex;
    justify-content: center;
    min-height: 90px;
    margin-block-start: var(--gap-2xl);
    padding-block: var(--padding-xl);
    padding-inline: var(--padding-lg);
    border-block: var(--style-border-width) solid var(--color-border);
  }

  .collection-seo__breadcrumbs .breadcrumbs {
    align-self: center;
    font-size: var(--font-size--sm);
    line-height: var(--line-height--body-normal);
  }
/* END_SNIPPET:collection-metafield-panels */

/* START_SNIPPET:color-swatch (INDEX:265) */
.color-swatch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
  }

  .color-swatch__legend {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-foreground);
  }

  .color-swatch__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .color-swatch__item {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    min-height: auto;
  }

  /* Stands for the colourways past the card's four-dot cap, and opens the card's own
     product page, where the whole family is listed. Figma (Kk7WOJsKPRF9PWoeBXVtGs)
     draws it at 0.85x the card's price/title type - both are 0.875rem - in the same
     foreground ink, one list gap after the last dot and centred on the dots' own
     centre line, which the list's align-items already handles. No hover decoration:
     the card's title link (blocks/product-title.liquid) does not carry one either. */
  .color-swatch__more {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1;
    color: var(--color-foreground);
    white-space: nowrap;
    text-decoration: none;
  }

  /* The label is ~12px square, so give it the same bleed the dots get - without it the
     one control a shopper is meant to tap for "show me the rest" is the smallest
     target in the card. Matches .color-swatch__link::before, including stopping short
     of the neighbouring dot. */
  .color-swatch__more::before {
    content: '';
    position: absolute;
    inset-block: -4px;
    inset-inline: -6px;
  }

  .color-swatch__link {
    position: relative;
    display: block;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    text-decoration: none;
    line-height: 0;
    overflow: visible;
    cursor: pointer;
  }

  /* The dot itself is only 12px (PLP) / 18px (PDP), so extend the hit area into the
     surrounding space without affecting layout - the list gap is 0.75rem, so -6px of
     inline bleed stops short of the neighbouring swatch. */
  .color-swatch__link::before {
    content: '';
    position: absolute;
    inset-block: -4px;
    inset-inline: -6px;
  }

  .color-swatch--plp {
    --swatch-size: 12px;
    /* Keep dots off the bottom edge; inline padding follows the block's padding setting so it aligns with title/price. */
    padding-block: 4px 8px;
    padding-inline: var(--product-swatches-padding-inline-start, 0px) var(--product-swatches-padding-inline-end, 0px);
  }

  .color-swatch--pdp {
    --swatch-size: 18px;
  }

  .color-swatch__link .swatch,
  .swatch.color-swatch__dot {
    --swatch-width: var(--swatch-size, 18px);
    --swatch-height: var(--swatch-size, 18px);
    display: block;
    width: var(--swatch-size, 18px);
    height: var(--swatch-size, 18px);
    min-width: var(--swatch-size, 18px);
    min-height: var(--swatch-size, 18px);
    border: 1px solid rgb(0 0 0 / 12%);
    border-radius: 50%;
    background-color: var(--swatch-background);
    background-image: var(--swatch-background);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .color-swatch__link:hover .swatch,
  .color-swatch__link:hover .color-swatch__dot {
    box-shadow:
      0 0 0 2px var(--color-background, #fff),
      0 0 0 3px rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
  }

  .color-swatch__link.is-selected .swatch,
  .color-swatch__link.is-selected .color-swatch__dot,
  .color-swatch__link.is-selected:hover .swatch,
  .color-swatch__link.is-selected:hover .color-swatch__dot {
    box-shadow:
      0 0 0 2px var(--color-background, #fff),
      0 0 0 3px #000;
  }
/* END_SNIPPET:color-swatch */

/* START_SNIPPET:divider (INDEX:269) */
.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:290) */
.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:291) */
.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:292) */
.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:294) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

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

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form (INDEX:302) */
.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:312) */
.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: flex;
    position: relative;
  }

  .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:313) */
.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:314) */
.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 logged-in customer control gets a filled avatar, not just a colour
   * swap: a plain white avatar would be as illegible over a light pane as
   * it is legible over a dark one. shopify-account exposes dedicated
   * signed-in-avatar custom properties for exactly this (see
   * https://shopify.dev/docs/api/storefront-web-components/components/shopify-account),
   * so no wrapper background/shape hack is needed. Scoped to the shopify-account
   * element (the anonymous Login link just follows --color-account-icon like the
   * other marks) and reset to `unset` - letting the component's own default
   * apply - by the exact same [data-sticky-state='active'] / menu-hover selectors
   * .header[transparent] already uses to mean "opaque" everywhere else, so this
   * can't drift from that latch.
   */
  .header[transparent] .account-button--text:has(shopify-account) shopify-account {
    --shopify-account-signed-in-avatar-color-background: #fff;
    --shopify-account-signed-in-avatar-color-text: #000;
  }

  .header[transparent='not-sticky'][data-sticky-state='active']
    .account-button--text:has(shopify-account)
    shopify-account,
  .header[transparent]:has(.menu-list__link:not([aria-haspopup]):hover)
    .account-button--text:has(shopify-account)
    shopify-account {
    --shopify-account-signed-in-avatar-color-background: unset;
    --shopify-account-signed-in-avatar-color-text: unset;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @media screen and (min-width: 1024px) {
      /* Optical nudge: the cart svg carries ~4px of internal trailing whitespace, so
         half of --gap-xs lands the painted glyph on the page gutter. A full --gap-xs
         over-corrected and pushed it ~4px past the gutter. */
      margin-inline-end: calc(var(--gap-xs) / -2);
    }
  }

  @media screen and (min-width: 1024px) {
    .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);
  }

  /* Needed to ensure the drawer is full height.
     `[open]` rather than `:modal`: the drawer is demoted to a non-modal show()
     while a third-party popup covers it (see assets/cart-drawer.js), and it
     still needs its full height in that state. */
  .cart-drawer__dialog[open] {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  /* Out of the top layer the drawer falls back to ordinary stacking, so it needs
     a layer of its own to stay above the header (--layer-overlay) and the menu
     drawer (--layer-menu-drawer). Third-party overlays sit far above this —
     that is the whole point of demoting. */
  .cart-drawer__dialog[open]:not(:modal) {
    z-index: var(--layer-temporary);

    /* `:modal` gets inset-block: 0 from the UA stylesheet; a non-modal dialog
       falls back to its static position, which for this section (between
       #header-group and <main>) drops the drawer by one header height. */
    inset-block: 0;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__header {
    flex-shrink: 0;
  }

  .cart-drawer__content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    overflow-y: auto;
    /* Don't hand the gesture to the page once the drawer is scrolled to either end —
       matters most on the home page, where the page behind is the scroll-snap pager. */
    overscroll-behavior-y: contain;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  /* Override global .close-button (position: fixed + circular touch target) */
  .cart-drawer .cart-drawer__close-button.close-button {
    position: relative;
    top: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 44px;
    min-height: 44px;
    margin-right: calc(var(--padding-sm) * -1);
    padding: 0;
    z-index: auto;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    font-family: Inter, Arial, sans-serif;
    font-size: 13.745px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #555;
    -webkit-font-smoothing: antialiased;
  }

  .cart-drawer .cart-drawer__close-button.close-button:focus,
  .cart-drawer .cart-drawer__close-button.close-button:focus-visible {
    outline: none;
    border-radius: 0;
  }

  .cart-drawer .cart-drawer__close-button.close-button:focus::after,
  .cart-drawer .cart-drawer__close-button.close-button:focus-visible::after {
    content: none;
    display: none;
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: var(--cart-item-row-pad);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    margin-bottom: 0;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    /* Flow with items — one scroll on .cart-drawer__content */
    position: static;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: 0;
    background-color: var(--color-background);
    mask-image: none;

    @media screen and (min-width: 1024px) {
      --cart-drawer-summary-padding: 30px 32px;
      gap: 12px;
      background-color: #fff;
    }
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: visible;
  }

  .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: 1024px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    padding-inline: var(--cart-drawer-padding);
    overflow-x: hidden;
    overflow-y: visible;
    --cart-item-row-pad: 14px;

    @media screen and (min-width: 1024px) {
      padding-inline: var(--cart-drawer-padding-desktop);
      --cart-item-row-pad: 20px;
    }
  }

  /* Kill drawer scroll-hint edge fade (incl. Nosto horizontal peek vignette) */
  .cart-drawer scroll-hint.cart-drawer__content,
  .cart-drawer scroll-hint.cart-drawer__items {
    mask-image: none !important;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: var(--cart-item-row-pad);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);

    @media screen and (min-width: 1024px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  header-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--gap-2xs);

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

  header-actions .header-actions__action {
    align-items: center;
    min-height: var(--minimum-touch-target);
  }

  @media screen and (min-width: 1024px) {
    header-actions {
      gap: var(--gap-xs);
    }

    .header-actions__heritage + .account-button {
      margin-inline-start: calc(var(--gap-xl) - var(--gap-xs));
    }

    /* Explicit space between search and cart icons */
    header-actions .header-actions__inline-search {
      margin-inline-start: 12px;
      margin-inline-end: 12px;
    }

    .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-actions__utility-link {
      display: flex;
      align-items: center;
      font-family: var(--header-nav-font-family);
      font-size: var(--header-nav-font-size);
      font-weight: var(--header-nav-font-weight);
      line-height: var(--header-nav-line-height);
      text-transform: var(--header-nav-text-transform);
      white-space: nowrap;
    }

  }

  @media screen and (min-width: 1024px) and (max-width: 1056px) {
    .header-actions__heritage + .account-button {
      margin-inline-start: calc(var(--gap-md) - var(--gap-xs));
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

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

  /* Header only: plain number inside the bag icon, no bubble background */
  .header .header-actions__cart-icon .cart-bubble {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .header .header-actions__cart-icon .cart-bubble__background {
    display: none;
  }

  .header .header-actions__cart-icon .cart-bubble__text {
    /* Follows the same transparent/opaque switch as the cart icon itself (see
       sections/header.liquid's --color-foreground-driven svg color) so the count
       stays legible whichever colour the icon around it is currently using. */
    color: var(--color-foreground);
    font-size: 8px;
    font-weight: 700;
  }

  .header .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    mask: none;
  }

  @media screen and (min-width: 1024px) {
    .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: 1024px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

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

      .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: 1024px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }

  {%- comment -%}
    Width is scoped to 1024 so 768–1023 keeps the full-bleed bottom sheet below.
  {%- endcomment -%}
  @media screen and (min-width: 1024px) {
    cart-drawer-component .cart-drawer__dialog.dialog-modal,
    .cart-drawer .cart-drawer__dialog.dialog-modal.dialog-drawer,
    .cart-drawer__dialog.dialog-modal.dialog-drawer {
      width: 577px !important;
      max-width: min(577px, 95vw) !important;
    }

    {%- comment -%}
      Figma has no pinned header — the drawer is one continuous scrolling
      frame from the title down through checkout, so the header scrolls
      away with the rest of the content instead of staying fixed.
    {%- endcomment -%}
    .cart-drawer__inner {
      overflow-y: auto;
      /* Scroll ownership moves here at this breakpoint (.cart-drawer__content goes
         overflow: visible below), so the chaining guard has to move with it. */
      overscroll-behavior-y: contain;
    }

    .cart-drawer__content {
      flex: none;
      overflow: visible;
    }

    .cart-drawer__header {
      grid-template-areas: 'title close';
      align-items: center;
    }

    .cart-drawer .cart-drawer__heading.cart-drawer__heading {
      margin-top: 0;
    }
  }

  @media screen and (min-width: 768px) {
    cart-drawer-component .cart-drawer__dialog.dialog-modal,
    .cart-drawer .cart-drawer__dialog.dialog-modal.dialog-drawer,
    .cart-drawer__dialog.dialog-modal.dialog-drawer {
      --backdrop-opacity: 0.5;
      --backdrop-color-rgb: 0 0 0;
      background-color: #fff !important;
      border-left: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }

    .cart-drawer__dialog::backdrop {
      background: rgb(0 0 0 / 0.5);
      backdrop-filter: none;
    }

    .cart-drawer__header {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        'close close'
        'title .';
      align-items: start;
      gap: 0;
      padding: 30px 32px 12px;
      border-bottom: 1px solid #e5e5e5;
      background-color: #fff;
    }

    .cart-drawer .cart-drawer__heading.cart-drawer__heading {
      grid-area: title;
      gap: 0;
      margin-top: 4px;
      font-family: var(--font-heading--family), 'Scto Grotesk B', sans-serif;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.2;
      color: #000;
      text-transform: none;
    }

    .cart-drawer__heading .cart-bubble {
      display: none;
    }

    .cart-drawer .cart-drawer__close-button.close-button {
      grid-area: close;
      justify-self: end;
      margin-right: 0;
      width: auto;
      height: auto;
      min-width: 24px;
      min-height: 24px;
      padding: 0;
      color: #555;
      font-size: 13.745px;
    }

    .cart-drawer__items {
      padding-inline: 32px;
      padding-block-start: 32px;

      @media screen and (min-width: 1024px) {
        padding-block-start: 24px;
      }
    }

    .cart-drawer__summary {
      --cart-drawer-summary-padding: 30px 32px;
      padding-top: 33px;
      background-color: #fff;
      mask-image: none;
      align-items: stretch;
    }

    .cart-drawer__content {
      background-color: #fff;
    }
  }

  /* Mobile cart drawer — full-screen bottom sheet (<1024) */
  @media screen and (max-width: 1023px) {
    /* Beat .dialog-modal @ ≥750px so tablet stays full-bleed, not left-stuck */
    .cart-drawer__dialog.dialog-modal {
      --backdrop-opacity: 0;
      --cart-drawer-padding: 15px;
      width: 100%;
      max-width: none;
      height: 100%;
      max-height: 100dvh;
      margin: 0;
      inset: 0;
      border: none;
      border-radius: 0;
      box-shadow: none;
      background-color: #fff;
    }

    .cart-drawer__dialog::backdrop {
      background: transparent;
      backdrop-filter: none;
    }

    .cart-drawer__dialog.dialog-drawer[open] {
      --start-x: 0;
      --end-x: 0;
      --start-y: 100%;
      --end-y: 0;
    }

    .cart-drawer__dialog.dialog-drawer[open].dialog-closing {
      --start-x: 0;
      --end-x: 0;
      --start-y: 0;
      --end-y: 100%;
    }

    .cart-drawer__header {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        'close close'
        'title .';
      align-items: start;
      gap: 0;
      padding: 0;
      border-bottom: 1px solid #e0e0e0;
      background-color: #fff;
    }

    .cart-drawer .cart-drawer__close-button.close-button {
      grid-area: close;
      justify-self: end;
      margin: 0;
      /* Visual glyph 13.745px; padding keeps ≥44×44 touch/focus target */
      min-width: 44px;
      min-height: 44px;
      padding: 15px 20px;
      color: #555;
      font-size: 13.745px;
    }

    .cart-drawer .cart-drawer__heading.cart-drawer__heading {
      grid-area: title;
      width: fit-content;
      max-width: 100%;
      margin: 0 0 0 15px;
      padding: 0 0 12px;
      font-family: var(--font-heading--family), 'Scto Grotesk B', sans-serif;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
      color: #000;
      text-transform: none;
      border-bottom: 2px solid #000;
    }

    .cart-drawer .cart-drawer__heading.cart-drawer__heading--empty {
      width: 100%;
      margin: 0;
      padding: 0;
      border-bottom: none;
    }

    .cart-drawer__heading .cart-bubble {
      display: none;
    }

    .cart-drawer__content {
      background-color: #fff;
    }

    .cart-drawer__items {
      padding-inline: 15px;
      padding-block-start: 18px;
      padding-block-end: 0;
    }

    .cart-drawer__items .cart-items__table-row,
    .cart-drawer__items .cart-items__table-row--full-width-variants {
      padding-bottom: 0;
      margin-bottom: var(--cart-item-row-pad);
      border-bottom: none;
    }

    .cart-drawer__items .cart-items__table-row:last-child,
    .cart-drawer__items .cart-items__table-row--full-width-variants:last-child {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: none;
    }

    .cart-drawer__summary {
      --cart-drawer-summary-padding: 15px;
      background-color: #fff;
      mask-image: none;
      gap: 12px;
    }

  }

  /*
    Love Loyalty wiring:
    - Wireframe shows ÉLITE membership bar only (not "Log in to redeem…" cart rewards).
    - App HTML includes both .ll__membership-cart and .ll__membership-pdp spans — hide PDP copy in drawer.
  */
  .cart-drawer .ll__cart-ho4ed3,
  .cart-drawer [class*='ll__cart-ho4ed3']:not([class*='membership']) {
    display: none !important;
  }

  /*
    Hide in Logged in state Cart Drawer
  */
  .cart-drawer #cart-drawer-app-slot span:has(.ll__points-available-ho4ed3) {
    display: none !important;
  }

  .cart-drawer #cart-drawer-app-slot svg:has(+ span .ll__points-available-ho4ed3) {
    display: none !important;
  }

  /*
    Love Loyalty's cart.js clones its hidden `.ll__cart` rewards prompt ("Log in to redeem your
    points for rewards." + Log in link) next to the cart totals and un-hides the clone. Class-based
    rules miss it when a cart update leaves the bare span + link (no classes) inside
    #cart-drawer-app-slot, and nothing hid it on the /cart page. Hide it by structure; the Élite
    row (`.ll__cart-membership-*`) and Seel (`.seal-widget`) are neither, so they are untouched.
  */
  .ll__cart-ho4ed3:not([class*='membership']),
  #cart-drawer-app-slot > a[href*='customer_authentication'],
  #cart-drawer-app-slot > span:not([class]):has(+ a[href*='customer_authentication']) {
    display: none !important;
  }

  .cart-drawer .ll__membership-pdp {
    display: none !important;
  }

  .cart-drawer .ll__membership-cart {
    display: inline !important;
  }

  /* Keep a single ÉLITE bar — drop orphan/duplicate mounts */
  .cart-drawer__summary > .ll__cart-membership-ho4ed3 ~ .ll__cart-membership-ho4ed3,
  .cart-drawer .cart-totals .ll__cart-membership-ho4ed3 ~ .ll__cart-membership-ho4ed3,
  .cart-drawer .ll__cart-membership-ho4ed3:not(:has(input[type='checkbox'])) {
    display: none !important;
  }

  .cart-drawer__addons {
    display: flex !important;
    flex-direction: column !important;
    /* Bottom margin only — top spacing comes from recs (flex margins don't collapse) */
    gap: 12px !important;
    row-gap: 12px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  .cart-drawer__addons:empty {
    display: none !important;
    margin: 0 !important;
  }

  .cart-drawer__addons > * {
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* ÉLITE membership bar */
  .cart-drawer .ll__cart-membership-ho4ed3 {
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 55px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    overflow: hidden !important;
    background: rgb(240 240 240 / 0.6) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif;
    color: #000;
  }

  .cart-drawer .ll__cart-membership-header {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .cart-drawer .ll__cart-membership-header input[type='checkbox'] {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: 0 0 15px !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    accent-color: #000;
    cursor: pointer;
  }

  .cart-drawer .ll__cart-membership-header input[type='checkbox']::before {
    content: none !important;
    display: none !important;
  }

  .cart-drawer .ll__cart-membership-header input[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M10 3L4.5 8.5 2 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px !important;
  }

  .cart-drawer .ll__cart-membership-header input[type='checkbox']:checked::after {
    background-color: transparent !important;
    mask-image: none !important;
  }

  .cart-drawer .ll__membership-title,
  .cart-drawer .ll__cart-membership-ho4ed3 .ll__membership-title {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    color: #000 !important;
    white-space: nowrap !important;
  }

  .cart-drawer .ll__membership-title strong {
    font-weight: 700 !important;
  }

  .cart-drawer .ll__membership-description,
  .cart-drawer .ll__cart-membership-ho4ed3 .ll__membership-description {
    display: block !important;
    margin: 2px 0 0 26px !important;
    padding: 0 !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    color: #6b6b6b !important;
    white-space: nowrap !important;
  }

  .cart-drawer .ll__cart-membership-header > div,
  .cart-drawer .ll__cart-membership-header > label,
  .cart-drawer .ll__cart-membership-header > span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .cart-drawer .ll__membership-title a,
  .cart-drawer .ll__membership-description a,
  .cart-drawer .ll__cart-membership-ho4ed3 a {
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 16.5px !important;
    color: #000 !important;
    text-decoration: underline !important;
  }

  .cart-drawer__summary {
    align-items: stretch;
  }

  .cart-drawer__summary .cart-totals {
    width: 100%;
    max-width: none;
    align-self: stretch;
    order: 1;
  }

  .cart-drawer__summary .cart__ctas--drawer {
    width: 100%;
    max-width: none;
    align-self: stretch;
    order: 2;
  }

  .cart-drawer__summary .cart-totals__klarna--drawer {
    order: 3;
  }

  /*
    Seel Worry-Free Delivery. App injects .seal-widget; chrome lives on .seal-widget-container.
  */
  .cart-drawer .seal-widget,
  .cart-drawer .seal_widget {
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif;
    color: #000;
  }

  .cart-drawer .seal-widget-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 55px !important;
    height: 55px !important;
    margin: 0 !important;
    padding: 10px 20px !important;
    background: rgb(240 240 240 / 0.6) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .cart-drawer .seal-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  .cart-drawer .seal-widget input[type='checkbox'],
  .cart-drawer .seal-widget [data-seel-wfp-input],
  .cart-drawer .seal_widget input[type='checkbox'],
  .cart-drawer .seal_widget [data-seel-wfp-input] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    flex: 0 0 15px !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
  }

  .cart-drawer .seal-widget input[type='checkbox']::before,
  .cart-drawer .seal-widget [data-seel-wfp-input]::before,
  .cart-drawer .seal_widget input[type='checkbox']::before,
  .cart-drawer .seal_widget [data-seel-wfp-input]::before {
    content: none !important;
    display: none !important;
  }

  .cart-drawer .seal-widget input[type='checkbox']:checked,
  .cart-drawer .seal-widget [data-seel-wfp-input]:checked,
  .cart-drawer .seal_widget input[type='checkbox']:checked,
  .cart-drawer .seal_widget [data-seel-wfp-input]:checked {
    background-color: #fff !important;
    border-color: #000 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M10 3L4.5 8.5 2 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px !important;
  }

  .cart-drawer .seal-header-text-line {
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
  }

  .cart-drawer .seal-title,
  .cart-drawer .seal-widget [data-seel-wfp-name] {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #000 !important;
  }

  .cart-drawer .seal-price-container {
    display: inline-flex !important;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cart-drawer .seal-price,
  .cart-drawer .seal-widget [data-seel-wfp-price] {
    margin: 0 !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    color: #000 !important;
  }

  /* Hide Seel info icon; keep text link if present */
  .cart-drawer .seal-info,
  .cart-drawer .seal-widget .seal-info,
  .cart-drawer .seal-widget [class*='info-icon'],
  .cart-drawer .seal-widget svg[class*='info'] {
    display: none !important;
  }

  .cart-drawer .seal-benefits-container-checkbox {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    gap: 4px;
    margin: 0 !important;
    padding: 2px 0 0 27px !important;
    border: none !important;
  }

  .cart-drawer .seal-collapse-content {
    display: contents !important;
  }

  .cart-drawer .seal-benefits,
  .cart-drawer .seal-benefit,
  .cart-drawer .seal-widget [data-seel-wfp-desc],
  .cart-drawer .otherDesc {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 16.5px !important;
    letter-spacing: normal !important;
    color: #6b6b6b !important;
    white-space: nowrap;
  }

  /* Narrow phones: truncate the coverage copy rather than overflow the 55px bar */
  .cart-drawer .seal-benefits,
  .cart-drawer .seal-benefit,
  .cart-drawer .seal-widget [data-seel-wfp-desc] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cart-drawer .seal-benefit + .seal-benefit {
    display: none !important; /* single coverage line */
  }

  .cart-drawer .seal-footer-powered,
  .cart-drawer .seal-widget [class*='powered'],
  .cart-drawer .seal-widget [data-seel-wfp-powered] {
    display: inline-flex !important;
    align-items: center;
    flex: none;
    gap: 2px;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif !important;
    font-size: 0 !important;
    font-weight: 500 !important;
    line-height: 16.5px !important;
    color: #6b6b6b !important;
  }

  .cart-drawer .seal-footer-powered::before {
    content: 'Powered by';
    font-size: 8px;
    font-weight: 500;
    line-height: 16.5px;
  }

  .cart-drawer .seal-footer-powered span {
    display: inline-flex;
    align-items: center;
    width: 22px;
    transform: translate(-1px, -1px);
  }

  .cart-drawer .seal-footer-powered span svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .cart-drawer .cart-seel-learn-more {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: #000;
    background: transparent;
    font: inherit;
    font-size: 9px;
    font-weight: 400;
    line-height: 16.5px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .cart-drawer .seal-widget a,
  .cart-drawer .seal_widget a,
  .cart-drawer .seal-terms-link,
  .cart-drawer .seal-terms-link a {
    font-family: var(--font-body--family), 'Scto Grotesk B', sans-serif !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 16.5px !important;
    color: #000 !important;
    text-decoration: underline !important;
  }

  .cart-drawer .seal-collapse-toggle,
  .cart-drawer .seal-warning,
  .cart-drawer .seal-cash-back {
    display: none !important;
  }

  @media screen and (max-width: 1023px) {
    .cart-drawer .seal-widget-container {
      min-height: 55px;
      padding: 10px 20px !important;
    }
  }


  .cart-drawer__addons {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    row-gap: 12px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  @media screen and (max-width: 1023px) {
    .cart-drawer__addons {
      margin: 0 0 16px !important;
    }
  }
  .cart-drawer__addons > * {
    margin: 0 !important;
    margin-block: 0 !important;
  }

  /*
    The apps re-mount themselves into the summary after every cart re-render and
    the script then adopts them into #cart-drawer-addons. Keep those transient
    mounts from painting so no duplicate bar flashes in.
  */
  .cart-drawer__summary .ll__cart-membership-ho4ed3,
  .cart-drawer__summary .seal-widget,
  .cart-drawer__summary .seal_widget {
    display: none !important;
  }

  /* ÉLITE above Seel, whichever order the apps mount in */
  .cart-drawer__addons > .ll__cart-membership-ho4ed3 {
    order: 1;
  }
  .cart-drawer__addons .seal-widget,
  .cart-drawer__addons .seal_widget {
    order: 2;
  }

  /*
    Seel repaints this widget from its own template after each quote call, so
    the approved cart wording is replaced by the app's copy until the script
    below rewrites it. While Seel's content is still arriving there is nothing
    to rewrite, so hold the rows back until the script marks the widget ready.
    `.seal-widget-container` keeps its 55px grey box throughout, so only the
    text and checkbox fade in and nothing shifts. The script always sets the
    attribute — on a timeout if formatting never completes — so this can never
    leave the row permanently blank.
  */
  .cart-drawer__addons .seal-widget:not([data-cart-seel-ready='true'])
    :is(.seal-header, .seal-benefits-container-checkbox, .seal-collapse-content, .seal-footer-powered),
  .cart-drawer__addons .seal_widget:not([data-cart-seel-ready='true'])
    :is(.seal-header, .seal-benefits-container-checkbox, .seal-collapse-content, .seal-footer-powered) {
    visibility: hidden !important;
  }

  /* Reads as "still loading" rather than a blank/broken box during the hide above. */
  .cart-drawer__addons .seal-widget-container:has(.seal-widget:not([data-cart-seel-ready='true'])),
  .cart-drawer__addons .seal-widget-container:has(.seal_widget:not([data-cart-seel-ready='true'])) {
    background-image: linear-gradient(
      -85deg,
      rgb(var(--color-foreground-rgb) / 0.06) 10%,
      rgb(var(--color-foreground-rgb) / 0.14) 50%,
      rgb(var(--color-foreground-rgb) / 0.06) 90%
    );
    background-size: 200% 100%;
    animation: text-shimmer var(--shimmer-speed, 1.25s) infinite linear;
  }

  /* Loyalty rewards / login prompt — drawer shows the ÉLITE bar only */
  .cart-drawer .ll__cart-ho4ed3 {
    display: none !important;
  }
  .cart-drawer .ll__cart-membership-ho4ed3,
  .cart-drawer .seal-widget,
  .cart-drawer .seal_widget {
    margin: 0 !important;
    margin-block: 0 !important;
  }
  .cart-drawer .seal-widget-container {
    margin: 0 !important;
    min-height: 55px !important;
    padding: 10px 20px !important;
  }
  .cart-drawer .ll__cart-membership-ho4ed3 {
    min-height: 55px !important;
    padding: 10px 20px !important;
  }
/* END_SNIPPET:header-actions */

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

  /* The padding above is the tap target. Pull the summary back by its leading half so
     the burger glyph lands on the page gutter; the tap target keeps its size and
     simply extends into the margin. */
  .menu-drawer-container > .header__icon--summary {
    margin-inline-start: calc(-1 * var(--padding-lg));
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  /* .svg-wrapper > svg (base.css) sets width AND height to --icon-size-sm (20px), but
     only width is then clamped back down by the svg's own max-width: 100% to fit this
     13.6px wrapper — height has no matching max-height, so icon-menu.svg's square
     viewBox rendered stretched to ~13.6 × 20. Clamp height to match. */
  .header__icon--summary .header-drawer-icon svg {
    height: var(--icon-size-xs);
  }

  .menu-drawer__promo-wrap {
    padding-inline: 0;
    padding-block: var(--padding-md);
  }

  .menu-drawer__promo {
    width: 100%;
  }

  /* Guard: never show more than one drawer promo image */
  .menu-drawer__promo-wrap .menu-drawer__promo ~ .menu-drawer__promo {
    display: none;
  }

  .menu-drawer__promo-link {
    position: relative;
    display: block;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
  }

  .menu-drawer__promo-media {
    display: block;
    width: 100%;
    aspect-ratio: 390 / 331;
    overflow: hidden;
  }

  .menu-drawer__promo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .menu-drawer__promo-meta {
    position: absolute;
    left: var(--padding-md);
    bottom: var(--padding-md);
    right: var(--padding-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
  }

  .menu-drawer__promo-title {
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .menu-drawer__promo-cta {
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
    padding-inline: var(--drawer-padding);
    padding-block: var(--padding-md);
  }

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

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection {
    width: 100%;
    flex: 1 0 100%;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 100%;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: 0;
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: 0;
  }

  .menu-drawer__navigation {
    /* Positioned so a category .menu-drawer__submenu (an absolute-positioned
       descendant) sizes itself against the nav region alone, not the whole
       .menu-drawer — keeps the promo card and footer links (siblings of nav,
       rendered after it) out from under the panel (17tqamemjmw). */
    position: relative;
    padding: 0;

    @media screen and (min-width: 1024px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  /* While a category drill-down panel is open, header-drawer.js measures the
     panel's real content height — and the still-in-flow, panel-covered
     top-level list's own height, whichever is taller — and writes it onto nav
     as an explicit `height` (see #syncCategoryPanelHeight), so nav grows to
     fit the panel instead of the panel scrolling on its own inside a
     fixed-size nav. That measurement only accounts for nav's own in-flow
     content (the top-level list) and the panel is `position: absolute` (out
     of flow), so nav's ordinary automatic minimum size on a shrink pass would
     otherwise still bottom out at the top-level list's height, not the
     (possibly taller) panel's — `flex: 0 0 auto` pins nav to exactly the
     JS-measured height so a tight viewport can't squeeze it back down.
     Deliberately not `min-height: 0; overflow: hidden` here (that was #296's
     mistake, undone by #299): both would drive nav's automatic minimum size
     to zero instead. When the total content is taller than the viewport, the
     whole drawer scrolls instead, per `.menu-open > .menu-drawer { overflow:
     auto }` below — the panel, promo card and footer links all stay
     reachable and uncropped, as Figma shows, rather than the panel
     scroll-trapping them out of the flow beneath it (17tqamemjmw). */
  .menu-drawer.menu-drawer--has-submenu-opened > .menu-drawer__navigation {
    flex: 0 0 auto;
  }

  /* Figma (Kk7WOJsKPRF9PWoeBXVtGs, node 9870:14582, "Women menu") reserves no
     space for the search field once a submenu is open — "Category content"
     starts immediately after the 68px header, and its own children plus every
     frame below it already account for the full 1131px drawer height with no
     gap left over. That's a genuine omission, not the field merely falling
     outside an export crop, so it's hidden here rather than left in place.
     `display: none` (not `visibility`/`opacity`) so it also drops out of flow:
     .menu-drawer__search is a sibling *before* nav, not a descendant, so
     collapsing it doesn't touch what #syncCategoryPanelHeight measures (nav's
     top-level list and the open panel, both after it in the DOM) — it only
     frees the vertical space above them, which is the point (17tqamemjmw).
     Shares the has-submenu-opened class with the region/language picker,
     which already fully overlays the search field via its own full-drawer
     .menu-drawer__submenu (per #296) — hiding it there too is a no-op
     visually and keeps one class meaning "a submenu, of either kind, is
     open" instead of splitting it by submenu type. */
  .menu-drawer.menu-drawer--has-submenu-opened .menu-drawer__search {
    display: none;
  }

  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: 1024px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 1024px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateY(-100%);
    visibility: hidden;
    opacity: 1;
    /* -1px tuck closes the sticky header seam without moving the header (avoids shake) */
    height: calc(100dvh - var(--menu-drawer-offset, var(--header-height, 0px)) + 1px);
    width: 100%;
    max-width: none;
    z-index: var(--layer-menu-drawer);
    left: 0;
    right: 0;
    top: calc(var(--menu-drawer-offset, var(--header-height, 0px)) - 1px);
    padding: 0;
    background-color: var(--color-background);
    overflow: hidden;
    display: flex;
    box-shadow: none;
    flex-direction: column;
    transition: transform var(--drawer-animation-speed) cubic-bezier(0.4, 0, 0.2, 1),
      visibility var(--drawer-animation-speed) cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 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 {
    display: none;
  }

  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) cubic-bezier(0.4, 0, 0.2, 1),
      visibility var(--drawer-animation-speed) cubic-bezier(0.4, 0, 0.2, 1),
      opacity var(--drawer-animation-speed) cubic-bezier(0.4, 0, 0.2, 1);
  }

  .menu-open > .menu-drawer {
    transform: translateY(0);
    visibility: visible;
    display: flex;
    flex-direction: column;
    overflow: auto;
    /* Don't hand the gesture to the page once the drawer is scrolled to either end —
       matters most on the home page, where the page behind is the scroll-snap pager. */
    overscroll-behavior-y: contain;
  }

  .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: 1024px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  /* Figma's category-panel back header has a hairline top+bottom, framing just
     that row (9870:14588) — scoped to the category back button specifically so
     it doesn't also add a divider to the region/language picker's back header,
     which Figma doesn't show one for. Not sticky: the panel no longer scrolls
     on its own (the whole drawer scrolls as one, see .menu-drawer__navigation
     above, 17tqamemjmw — decided in PR 301, not up for revisiting here), and
     its scroll container is now .menu-drawer itself — sticking this to top: 0
     would pin it to the very top of the drawer rather than to the top of the
     panel (the search field above nav is hidden while a submenu is open, see
     .menu-drawer__search above, but that doesn't change this: the drawer, not
     the panel, is still the scroll container). Plain in-flow row instead. */
  .menu-drawer__nav-buttons:has(.menu-drawer__back-button--category) {
    background-color: var(--color-background);
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    display: flex;
    flex-direction: column;
    gap: 20px;
    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);
  }

  /* Figma's category-panel rows (Kk7WOJsKPRF9PWoeBXVtGs, node 9870:14587,
     "Category content" -> "Category navigation") give this level more
     inline-end padding (28px) than the leading edge (20px, matched by the
     rest of the panel via --drawer-padding) — asymmetric on purpose, so the
     forward chevrons on FEATURED/KNITWEAR/etc. don't sit flush against the
     screen edge the way --drawer-padding alone would put them (17tqamemjmw).
     Scoped to the childlist specifically: the top-level list uses the same
     --drawer-padding on both sides and isn't part of this fix, and the back
     header's own chevron already matches Figma via
     .menu-drawer__back-button's padding-inline-start: var(--padding-xl)
     (20px) — neither should move.
     Prefixed with .menu-drawer__list-item--deep (the childlist's own
     ancestor) to out-specificity `.menu-drawer__list-item--deep
     .menu-drawer__menu` below, which zeros padding-inline-end on every
     nested menu list — without this prefix that later, equal-specificity
     rule silently wins and the chevrons stay flush against the edge
     regardless of what's set here. */
  .menu-drawer__list-item--deep .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
    padding-block-start: 20px;
    padding-inline-end: 28px;
  }

  .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: 1024px) {
      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: 0;
  }

  .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: 1024px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom details {
    --menu-drawer-submenu-speed: 0.12s;
  }

  .menu-drawer__menu accordion-custom details::details-content,
  .menu-drawer__menu accordion-custom details .details-content {
    transition: content-visibility var(--menu-drawer-submenu-speed) allow-discrete,
      padding-block var(--menu-drawer-submenu-speed) var(--animation-easing),
      opacity var(--menu-drawer-submenu-speed) var(--animation-easing),
      block-size var(--menu-drawer-submenu-speed) var(--animation-easing);
  }

  .menu-drawer__menu accordion-custom .details-content.menu-drawer__animated-element {
    animation-duration: var(--menu-drawer-submenu-speed);
    animation-delay: 0s;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  /* Keep accordion close animation when another menu opens (no focus-within). */
  .menu-drawer__menu accordion-custom details[data-animating-close]::details-content,
  .menu-drawer__menu accordion-custom details[data-animating-close] .details-content {
    transition: content-visibility var(--menu-drawer-submenu-speed) allow-discrete,
      padding-block var(--menu-drawer-submenu-speed) var(--animation-easing),
      opacity var(--menu-drawer-submenu-speed) var(--animation-easing),
      block-size var(--menu-drawer-submenu-speed) var(--animation-easing);
  }

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

  .menu-drawer__menu-item--mainlist {
    min-height: 0;
    padding-block: 0;
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: 500;
    font-size: 12px;
    line-height: var(--menu-top-level-font-line-height);
    text-transform: uppercase;
    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: 500;
    font-size: 12px;
    line-height: var(--menu-parent-font-line-height);
    text-transform: uppercase;
    color: var(--menu-parent-font-color);

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

  /*
   * The category panel's "View all [Category]" row is a plain nav link whose
   * href happens to match the panel's own top-level link (9870:14619 specs it
   * Bold, distinct from the Medium used by ordinary rows). Flagged by URL
   * rather than position or title text, since the menu is merchant-editable
   * and either could change or be reordered.
   */
  .menu-drawer__menu-item--view-all {
    font-weight: 700;
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: 500;
    font-size: 12px;
    line-height: var(--menu-child-font-line-height);

    /* Match the desktop mega menu's leaf-level links (.mega-menu__link in
       blocks/_header-menu.liquid): headers stay uppercase, categories are title
       case (17tqamemjmw). */
    text-transform: capitalize;
    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;
    padding-inline-start: 20px;
  }

  .menu-drawer__menu--grandchildlist {
    padding-inline-start: 40px;
    padding-block-start: 20px;
  }

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

  /* Category-panel back button echoes the top-level item it opened from, so it
     matches .menu-drawer__menu-item--mainlist's typography rather than the
     region/language picker's larger heading style. */
  .menu-drawer__back-button--category {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    /*
     * Not var(--menu-top-level-font-weight): on this store it resolves to 400
     * (settings.type_font_primary_link's own weight), not the 500 Figma specs
     * (9870:14591) and not what .menu-drawer__menu-item--mainlist actually
     * renders at — that rule hardcodes 500 too, ignoring the same variable.
     * Matching the literal this rule already echoes is what fulfills its own
     * comment's intent; the variable would under-shoot to a lighter weight.
     */
    font-weight: 500;
    font-size: 12px;
    line-height: var(--menu-top-level-font-line-height);
    text-transform: uppercase;
    color: var(--menu-top-level-font-color);
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: 0;
    padding-inline-start: var(--padding-md);
    flex-shrink: 0;
  }

  .menu-drawer__menu-item > .svg-wrapper.icon-caret svg {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  /* Closed: point right; open: point down */
  .menu-drawer details[open] > summary .svg-wrapper.icon-caret--forward svg {
    transform: rotate(0deg);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    opacity: 0;
  }

  /* Category panels (not the region/language picker, which also uses
     .menu-drawer__submenu but still covers the whole drawer, per #296)
     size to their own content instead of filling a fixed 100% of nav and
     scrolling internally — header-drawer.js mirrors this height onto nav
     itself (see .menu-drawer--has-submenu-opened > .menu-drawer__navigation
     above), so the panel, promo card and footer links all move with it
     rather than the panel scroll-trapping its content (17tqamemjmw).
     `min-height: 100%` keeps the panel's opaque background covering all of
     nav even when the panel's own content is shorter than the top-level
     list underneath it. Once nav has an explicit height this floor would
     otherwise stop the panel ever reporting a *smaller* scrollHeight after
     it shrinks (e.g. closing a nested accordion) — header-drawer.js clears
     nav's explicit height before every re-measure so this rule can't ratchet
     the panel's applied height upward only (17tqamemjmw). */
  .menu-drawer__navigation .menu-drawer__submenu {
    height: auto;
    min-height: 100%;
    overflow-y: visible;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__footer-menus {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs);
    padding-inline: var(--drawer-padding);
  }

  .menu-drawer__footer-menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--padding-2xs);
  }

  .menu-drawer__footer-menu-link {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .menu-drawer__account-row {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs);
    padding-inline: var(--drawer-padding);
    padding-block: var(--padding-md) var(--padding-xl);
    overflow: visible;
  }

  .menu-drawer__account-link {
    display: inline-flex;
    align-items: center;
    gap: var(--padding-sm);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .menu-drawer__account-link .svg-wrapper,
  .menu-drawer__account-link svg {
    width: 14px;
    height: 14px;
  }

  .menu-drawer__drawer-region-switcher {
    padding: 0;
    border: none;
    margin: 0;
    position: relative;
    overflow: visible;
  }

  .menu-drawer__drawer-region-switcher .region-switcher__form {
    align-items: center;
    gap: 0;
  }

  .menu-drawer .menu-drawer__drawer-region-switcher .localization-input {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: normal;
  }

  /* Reads as one label — "CA($)/EN" — even though each half is its own picker. */
  .menu-drawer__drawer-region-switcher .localization-input + .localization-input::before {
    content: '/';
  }

  /* Matches the icon width and gap of the account link above, so both labels
     start on the same vertical line. */
  .menu-drawer__drawer-region-switcher .localization-input__trigger {
    align-items: center;
    gap: var(--padding-sm);
  }

  .menu-drawer__drawer-region-switcher .localization-input__flag {
    width: 14px;
    height: 14px;
  }

  .menu-drawer__search {
    display: flex;
    align-items: center;
    gap: var(--padding-sm);
    margin-inline: var(--drawer-padding);
    margin-block-start: var(--padding-md);
    margin-block-end: 24px;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
    border: 1px solid var(--color-foreground);
  }

  .menu-drawer__search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: #555555;
    /* 16px avoids iOS Safari's auto-zoom on focus, which triggers below that size. */
    font-size: 16px;
    padding: 0;
    outline: none;
  }

  .menu-drawer__search-input::placeholder {
    color: #555555;
    opacity: 1;
  }

  .menu-drawer__search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
    padding: 0;
  }

  .menu-drawer__search-submit .svg-wrapper,
  .menu-drawer__search-submit svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    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: translateY(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateY(-1rem);
    }
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:321) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  footer .section:has(.jumbo-text__container) {
    z-index: 0;
  }

  footer .section:not(:has(.jumbo-text__container)) {
    z-index: 1;
  }

  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:klarna-onsite-messaging (INDEX:322) */
.cart-drawer #klarna-osm-cart::part(osm-container) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
  }

  .cart-drawer #klarna-osm-cart::part(osm-message) {
    font-family: var(--font-body--family), var(--font-paragraph--family), sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    margin-inline: 0;
    color: var(--color-foreground);
  }

  .cart-drawer #klarna-osm-cart::part(osm-cta),
  .cart-drawer #klarna-osm-cart::part(osm-legal) {
    font-family: var(--font-body--family), var(--font-paragraph--family), sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    margin-inline: 0;
    color: var(--color-foreground);
  }

  .cart-drawer #klarna-osm-cart::part(osm-cta) {
    margin-inline-start: 2px;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .cart-drawer #klarna-osm-cart::part(osm-badge),
  .cart-drawer #klarna-osm-cart::part(osm-deal-badge) {
    display: none;
  }
/* END_SNIPPET:klarna-onsite-messaging */

/* START_SNIPPET:list-filter (INDEX:325) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: default;

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

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

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

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

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: default;
  }

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

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: default;
    }

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

  /*
    Drawer-trigger style (plp-filter drawer/desktop Figma spec): filter groups render
    always-expanded with no caret, colour swatches show a checkmark + always-visible
    label, and non-swatch/non-image filters render as plain bold-when-selected text
    instead of bordered pills.
  */
  .facets--drawer-v2 .facets__summary {
    font-weight: var(--font-heading--weight);
    font-size: 14px;
    cursor: default;
  }

  .facets--drawer-v2 .icon-caret {
    display: none;
  }

  .facets--drawer-v2 .facets__bubble {
    width: auto;
    height: auto;
    aspect-ratio: unset;
    margin-inline-start: var(--gap-3xs);
    font-size: 10px;
    font-weight: var(--font-paragraph--weight);
    background: none;
  }

  .facets--drawer-v2 .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--drawer-v2 .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  /* .swatch--filter (assets/base.css) sizes itself from --max-filter-size, not
     --variant-picker-swatch-width/height, so the drawer's swatch circles need
     this override too to actually render at the Figma-specified 20px here.
     Applies at all widths - the drawer's own 20px spec, not the sitewide
     --max-filter-size default (32px mobile / 28px desktop) used by filter
     swatches elsewhere on the site. */
  .facets--drawer-v2 .swatch--filter {
    --max-filter-size: 20px;
  }

  .facets--drawer-v2 .facets__swatch-label {
    font-size: 13px;
  }

  /* Figma spec uses the font's actual Bold style for the active value (Colour and
     text-row filters alike), not the theme's default Medium (500) active weight,
     and never recolors the row - only the shared base rule's background/text-color
     swap on :has(:checked) needs undoing here (color is inherited into the label). */
  .facets--drawer-v2 .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: var(--color-foreground);
    background-color: transparent;
  }

  .facets--drawer-v2 .variant-option__button-label:has(:checked) .facets__swatch-label {
    font-weight: 700;
  }

  /* Sized from Figma node 4138:16471 ("Vector 2": a 12.0303 x 8.6304px path,
     stroked 1.5px with butt caps and a mitre join - no round caps, unlike
     assets/icon-checkmark.svg; Figma's own export of this node carries neither
     stroke-linecap nor stroke-linejoin), not the theme's square --icon-size-xs
     token - the checkmark is a wide, flat tick (~1.39:1), not square.
     `vertical-align: baseline` (this element's default, but stated explicitly
     since it sits on a .svg-wrapper span) puts the box's bottom on the text's
     baseline - the line the letters sit on; the relative offset below is what
     makes the *ink* land there. `text-bottom` was tried first but aligns to the
     bottom of the text's em box, which includes descender space below the
     baseline, and rendered the tick visibly low.

     These are the checkmark's *ink* extents, not its path's.
     filter-checkmark.liquid pads the glyph's 12.0303 x 8.6304px path box out to
     the box the stroke actually paints into, sized for the widest
     --icon-stroke-width setting (2px heavy): +0.7071px left/right/top and
     +1.4142px below (the mitred V tip). Without that padding the stroke was
     clipped on every edge, which is what made the asset look wrong. The two
     calc()s below hold the ink in its accepted position at whatever stroke
     width is in force, since the slack between box and ink shrinks as the
     stroke grows:
       ink inset from box left   = 0.7071px - 0.35355 * w
       ink inset from box bottom = 1.4142px - 0.70711 * w
     (both 0 at w = 2, where box and ink coincide.) */
  .facets--drawer-v2 .facets__swatch-check {
    flex-shrink: 0;
    width: 13.4445px;
    height: 10.7517px;
    /* --gap-3xs (2px) was a default reached for without checking Figma. The
       reference frame (node 4138:16471's parent row, in its "Black" swatch
       example) shows this checkmark placed ~10.4px right of the label's own
       glyph ink - not the label's Figma text-layer box, which carries ~1.4px
       of right-side-bearing beyond the glyph. Measured by rendering that
       frame 1:1 and reading the sub-pixel edge of the "k" ink against the
       checkmark's bounding box: 125px (checkmark) - 114.6px (text ink) =
       10.4px. Figma reports that 125px as the *path* box's left edge, so the
       gap is held here against the ink's left edge instead - 0.35355 * w
       further left - which is what the eye actually reads as the gap. */
    margin-inline-start: calc(9.6929px + 0.35355 * var(--icon-stroke-width));
    /* `vertical-align: baseline` leaves the *box's* bottom on the text
       baseline; this drops it the rest of the way, by the box's bottom slack,
       so the ink's lowest point - the mitre tip of the V - lands there instead,
       which is where the accepted alignment put it. A relative offset rather
       than a negative bottom margin: .svg-wrapper is an inline-flex box, so it
       has a baseline of its own and a margin tweak does not move it; a relative
       offset also leaves the line box's height untouched. */
    position: relative;
    inset-block-start: calc(1.41421px - 0.70711 * var(--icon-stroke-width));
    vertical-align: baseline;
  }

  /* .variant-option__button-label svg (base.css, meant for the PDP-style disabled
     strikethrough overlay) matches any svg nested in the swatch button - including
     this checkmark - and absolute-positions/stretches it to cover the whole option,
     which is what made it render oversized and overlap long swatch labels. Undo
     that here so it stays a normal small inline icon next to the label text. */
  /* `overflow: visible` belt-and-braces: the viewBox already contains all the
     ink, but Chrome clips an <svg>'s own viewport a fraction of a pixel inside
     a fractional-width box (measured: a flat 0.4375px off the right edge at
     every device pixel ratio and at 10x the size - the box width floored to
     whole CSS px), which sliced the tip off the long arm even with the padding
     in place. Turning the UA's viewport clip off removes that failure mode; it
     changes nothing geometrically, since no ink reaches the box edge below
     --icon-stroke-width: 2px. */
  .facets--drawer-v2 .facets__swatch-check.svg-wrapper > svg {
    position: static;
    width: 13.4445px;
    height: 10.7517px;
    overflow: visible;
  }

  /* CSS Grid (not flex-wrap) so pill columns share one set of tracks across all
     rows - each column's width is driven by its widest label, keeping every
     row's pills aligned vertically instead of each row sizing independently. */
  .facets--drawer-v2 .facets__inputs-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));
    column-gap: var(--gap-2xl);
    row-gap: var(--gap-sm);
  }

  .facets--drawer-v2 .facets__pill-label {
    box-shadow: none;
    width: auto;
    height: auto;
    padding-inline: 0;
    background-color: transparent;
    font-size: 13px;
  }

  .facets--drawer-v2 .facets__pill-input:checked + .facets__pill-label {
    background-color: transparent;
    color: var(--color-foreground);
    font-weight: 700;
  }

  /* .facets__pill-label must stay a flex container (not switch to normal
     inline flow, which was tried first) - a long value like "RECCO Rescue
     Tracking Technology" wraps across several lines, and an inline box wraps
     that text to a different width/line count than the flex box does,
     growing the row's height and shifting every filter group below it in
     the drawer. align-items: baseline keeps the flex layout (and its
     wrapping/sizing, confirmed pixel-identical to origin/staging for the
     wrapped RECCO pill) untouched while lining the checkmark's flex-item
     baseline up with the text's flex-item baseline. */
  .facets--drawer-v2 .facets__pill-label {
    align-items: baseline;
  }

  /* align-items: baseline on .facets__pill-label (above) already lines this
     icon's flex-item baseline up with the text's flex-item baseline - the
     font's real typographic baseline, the line the letters sit on. No extra
     offset is needed or wanted: a prior version added a translateY(3px) nudge
     here to reach the bottom of the text's line box (which includes
     descender space below the baseline, not the baseline itself), which read
     as the checkmark sitting visibly low. */
  .facets--drawer-v2 .facets__pill-check {
    flex-shrink: 0;
    width: 13.4445px;
    height: 10.7517px;
    /* Same 10.4px measured off Figma node 4138:16471's reference frame as
       .facets__swatch-check above - Figma has no separate pill mockup, and
       nothing in the source file expresses this label-to-tick spacing as an
       auto-layout gap (the checkmark there is a plain absolute-positioned
       overlay, not a member of the label's own auto-layout row), so a margin
       on the icon - matching the swatch case's mechanism - is what the design
       actually shows, not an itemSpacing value to port over as a flex `gap`.
       Kept as a margin on the checkmark itself, not `gap` on
       .facets__pill-label, so it can't add spacing before the disabled-state
       strikethrough overlay svg that label also conditionally renders. */
    margin-inline-start: calc(9.6929px + 0.35355 * var(--icon-stroke-width));
    /* Same box-to-ink correction as .facets__swatch-check above. */
    position: relative;
    inset-block-start: calc(1.41421px - 0.70711 * var(--icon-stroke-width));
    align-self: baseline;
  }

  /* The wrapper's width/height above sizes the flex box; the svg itself still
     defaults to --icon-size-sm via the global .svg-wrapper > svg rule, so size it
     directly too - keeps this checkmark the same rendered size as .facets__swatch-check. */
  .facets--drawer-v2 .facets__pill-check.svg-wrapper > svg {
    width: 13.4445px;
    height: 10.7517px;
    /* Same UA viewport-clip workaround as .facets__swatch-check above. */
    overflow: visible;
  }

  /* 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:326) */
/* 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:327) */
.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:overlay (INDEX:336) */
.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:337) */
.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: default;
    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:338) */
.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-resource-carousel (INDEX:341) */
.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:343) */
/* 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 (INDEX:345) */
.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:349) */
.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);
    }
  }

  /* Items held back by paginated-list.js's settleRows() so the grid's last row
     stays flush. `.product-grid__promo` sets `display: flex`, which would
     otherwise beat the user-agent [hidden] rule. */
  .product-grid__item[hidden] {
    display: none;
  }

  /* Promotional tiles interleaved in the product grid. */
  .product-grid:has(.product-grid__promo) {
    grid-auto-flow: dense;
  }

  .product-grid__promo {
    grid-column: span var(--promo-cols-mobile, 2);
    grid-row: span var(--promo-rows, 2);
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Extend into the row gap below, leaving only a 1px seam before the next row. */
    margin-block-end: calc(1px - var(--promo-row-gap-mobile, 0px));
  }

  @media screen and (min-width: 750px) {
    .product-grid__promo {
      grid-column: span var(--promo-cols, 2);
      margin-block-end: calc(1px - var(--promo-row-gap-desktop, 0px));
    }
  }

  .product-grid__promo-media {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .product-grid__promo-media,
  .product-grid__promo-media .product-grid__promo-link,
  .product-grid__promo-media picture,
  .product-grid__promo-media img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .product-grid__promo-media img {
    object-fit: cover;
  }

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

  .product-grid__load-more {
    display: flex;
    justify-content: center;
    min-height: 88px;
    padding-block: var(--padding-xl);
  }

  .product-grid__load-more-button {
    align-self: center;
    cursor: pointer;
    padding-block-end: var(--padding-2xs);
    border-block-end: var(--style-border-width) solid currentcolor;
    font-size: var(--font-size--xs);
    font-weight: var(--font-heading--weight);
    line-height: var(--line-height--body-tight);
    text-transform: uppercase;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:350) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 50vw minmax(0, 1fr);

        .product-information__media {
          padding-right: 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: minmax(0, 1fr) 50vw;

        .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 (skip PDP media-left) */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: minmax(0, 1fr) 50vw;
    }
  }

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

  /* PDP image stack: single column, flush left, no gaps */
  @media screen and (min-width: 750px) {
    .product-information--media-left:has(.media-gallery--extend) .product-information__media {
      padding-inline-start: 0;
    }

    .product-information--media-left .media-gallery--grid .media-gallery__grid {
      --image-gap: 1px;
      gap: 1px;
    }

    .product-information--media-left:has(.media-gallery--extend) .media-gallery--one-column .product-media-container {
      width: 100%;
      max-width: none;
    }

    .product-information--media-left .product-details {
      align-self: start;
      padding-block-start: 0;
      padding-inline-end: 0;
      justify-content: flex-start;
    }
  }

  /*
   * PDP desktop gallery geometry.
   *
   * Invariant: the gallery's right edge sits on the right edge of the "D" in the
   * RUDSAK wordmark, at every width.
   *
   * The wordmark is the centre column of the header's `1fr auto 1fr` grid, so it
   * is centred on the page: its box spans 50% +/- half its own width. Within the
   * logo SVG (viewBox "0 0 35 7") the "D" -- the third letter, not the last --
   * has its right ink edge at x = 16.933, i.e. 16.933 / 35 = 0.48381 of the
   * logo's rendered width. So, measured from the page centre:
   *
   *   D right edge = 50% - (0.5 - 0.48381) * logo width
   *                = 50% - 0.01619 * logo width
   *
   * --header-logo-width is published by blocks/_header-logo.liquid from the same
   * settings that size the logo, so the two cannot drift apart.
   *
   * The gallery is flush to the viewport edge until the image would get too
   * large, then a left margin grows while the right edge stays on the "D".
   * min()/max() make that transition continuous -- there is no breakpoint to
   * jump at.
   */
  @media screen and (min-width: 990px) {
    .product-information__grid.product-information--media-left:not(
        .product-information__grid--half,
        .product-information--media-none
      ),
    .product-information__grid.product-information--media-left:not(
        .product-information__grid--half,
        .product-information--media-none
      ):has(.media-gallery--extend) {
      /* Right edge of the "D", as an offset from the page centre. */
      --pdp-gallery-right: calc(50% - 0.01619 * var(--header-logo-width, 100px));
      /*
       * Cap the gallery so a 4:5 item stays a sensible size: 880px wide renders
       * 1100px tall, which still fits the usable height of a 2560x1440 display.
       * With a 100px logo this starts to bite at 1764px of viewport.
       */
      --pdp-gallery-max-width: 880px;
      --pdp-gallery-left: max(0px, calc(var(--pdp-gallery-right) - var(--pdp-gallery-max-width)));
      --pdp-details-width: 500px;

      grid-column: 1 / -1;
      width: 100%;
      /*
       * No inline padding: percentages in the track list must resolve against
       * the full page width for 50% to be the true page centre. Using % rather
       * than vw also keeps the alignment correct when a classic scrollbar is
       * present, since the header centres on the content box, not the viewport.
       */
      padding-inline: 0;
      column-gap: 0;
      justify-content: start;
      grid-template-columns:
        [pdp-start] var(--pdp-gallery-left)
        [gallery-start] minmax(0, calc(var(--pdp-gallery-right) - var(--pdp-gallery-left)))
        [gallery-end] clamp(
          40px,
          calc(100% - var(--page-margin) - var(--pdp-details-width) - var(--pdp-gallery-right)),
          120px
        )
        [details-start] var(--pdp-details-width)
        [details-end] minmax(var(--page-margin), 1fr);
    }

    .product-information__grid.product-information--media-left:not(
        .product-information__grid--half,
        .product-information--media-none
      )
      .product-information__media {
      grid-column: gallery-start / gallery-end;
      width: auto;
      min-width: 0;
      max-width: none;
      padding-right: 0;
    }

    .product-information__grid.product-information--media-left:not(
        .product-information__grid--half,
        .product-information--media-none
      )
      .product-details {
      grid-column: details-start / details-end;
      width: var(--pdp-details-width);
      max-width: var(--pdp-details-width);
      justify-self: start;
    }

    .product-information__grid.product-information--media-left:not(
        .product-information__grid--half,
        .product-information--media-none
      )
      .product-details
      > .group-block {
      width: 450px;
      max-width: 100%;
      margin-inline: 0;
      /* Keep padding-block-start from spacing-style */
      padding-inline: 0;
    }
  }

  /* Gift card PDP desktop: gallery 760px + buy box 500px (content 500px), gap 120px */
  @media screen and (min-width: 990px) {
    [data-template='product.gift-card']
      .product-information__grid.product-information--media-left:not(
        .product-information__grid--half,
        .product-information--media-none
      ),
    [data-template='product.gift-card']
      .product-information__grid.product-information--media-left:not(
        .product-information__grid--half,
        .product-information--media-none
      ):has(.media-gallery--extend) {
      /*
       * Gift cards keep their own (wider) cap; the track list, and with it the
       * alignment to the "D", is inherited from the rule above.
       */
      --pdp-gallery-max-width: 760px;
    }

    [data-template='product.gift-card']
      .product-information__grid.product-information--media-left:not(
        .product-information__grid--half,
        .product-information--media-none
      )
      .product-details
      > .group-block {
      width: 500px;
    }
  }

  @media screen and (max-width: 749px) {
    .product-information .product-details > .group-block {
      padding-inline: 15px;
      padding-block-start: 15px;
    }
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content (INDEX:352) */
.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;
  }

  /* PDP mobile: horizontal line pagination */
  @media screen and (max-width: 749px) {
    .product-information media-gallery slideshow-controls.media-gallery__mobile-controls:has(.slideshow-controls__dots) {
      mix-blend-mode: normal;
      --color-foreground: #000;
      --color-foreground-rgb: 0 0 0;
      width: 100%;
      justify-content: stretch;
      padding-inline: var(--padding-lg);
      padding-block-end: var(--padding-sm);
    }

    .product-information media-gallery .media-gallery__mobile-controls .slideshow-controls__dots {
      display: flex;
      width: 100%;
      gap: 4px;
      padding: 0;
      border-radius: 0;
      overflow: visible;

      li {
        flex: 1;
        display: flex;
      }

      button {
        width: 100%;
        height: var(--minimum-touch-target);
        margin: 0;
        min-width: 0;

        &::after {
          width: 100%;
          height: 2px;
          border-radius: 0;
          box-shadow: none;
          background-color: rgb(0 0 0 / 0.25);
        }

        &[aria-selected='true']::after {
          background-color: #000;
        }

        &:hover::after {
          background-color: rgb(0 0 0 / 0.4);
        }

        &[aria-selected='true']:hover::after {
          background-color: #000;
        }
      }
    }
  }

  /*
   * PDP mobile: prev/next chevrons over the gallery (Figma 4188:11115).
   *
   * Figma draws two bare chevrons -- no circle, no plate, no shadow -- 4.47 x 8.95px of 1.27px
   * stroke, inset 24px from each edge of the 390px frame and centred on the image's half-height.
   * The theme's slideshow control is reused unchanged, so only the measurements are restated here.
   *
   * The 8x12 chevron asset carries 5x10 of ink, the same 1:2 proportion Figma uses, so the box is
   * scaled by 8.95/10 to land the ink on the drawn size rather than redrawing the icon.
   */
  @media screen and (max-width: 749px) {
    .product-information media-gallery .media-gallery__mobile-arrows {
      /*
       * The control is a 44px touch target with the glyph centred in it, so the box starts half a
       * target short of where the glyph's centre belongs: 24px + half the 4.47px ink.
       */
      padding-inline: calc(26.24px - var(--minimum-touch-target) / 2);
    }

    .product-information media-gallery .media-gallery__mobile-arrows .slideshow-control {
      /*
       * Desktop reveals arrows on hover; a touch gallery has no hover, so these are always shown.
       * Centring the glyph is what lets the padding above place it -- unstyled buttons are blocks,
       * so the glyph would otherwise sit wherever text alignment left it and the previous arrow's
       * flip-x would mirror that out of symmetry.
       */
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-inline: 0;
    }

    .product-information media-gallery .media-gallery__mobile-arrows .icon-chevron,
    .product-information media-gallery .media-gallery__mobile-arrows .icon-chevron > svg {
      --icon-stroke-width: 1.27px;

      width: 7.16px;
      height: 10.74px;
    }
  }

  /* 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:353) */
.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:promo-tile (INDEX:360) */
.product-grid__promo-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-inline: 12px;
    padding-block-start: 5px;
  }

  .product-grid__promo-title {
    display: block;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    text-decoration: none;
  }

  .product-grid__promo-price {
    display: block;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
  }
/* END_SNIPPET:promo-tile */

/* START_SNIPPET:quantity-selector (INDEX:362) */
.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;
  }

  /* Borderless qty control (cart drawer) */
  .quantity-selector.quantity-selector--plain,
  cart-quantity-selector-component.quantity-selector--plain {
    --style-border-width-inputs: 0px;
    --color-input-border: transparent;
    --color-input-background: transparent;
    --color-input-hover-background: transparent;
    --quantity-selector-width: auto;

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    outline: none;
  }

  .quantity-selector.quantity-selector--plain:hover,
  .quantity-selector.quantity-selector--plain:focus-within,
  cart-quantity-selector-component.quantity-selector--plain:hover,
  cart-quantity-selector-component.quantity-selector--plain:focus-within {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .quantity-selector.quantity-selector--plain :is(.quantity-minus, .quantity-plus),
  cart-quantity-selector-component.quantity-selector--plain :is(.quantity-minus, .quantity-plus) {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .quantity-selector.quantity-selector--plain input[type='number'],
  cart-quantity-selector-component.quantity-selector--plain input[type='number'] {
    width: 2ch;
    min-width: 2ch;
    max-width: none;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    background-color: transparent;
    box-shadow: none;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal (INDEX:363) */
#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 (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);
  }

  /* No focus ring on this button at any width. The drawer is opened with
     dialog.showModal(), whose autofocus algorithm lands here because the button is
     first in DOM order (see dialog.js) — that focus is not pointer-driven, so
     :focus-visible matched and the ring painted on every open, including a plain tap. */
  .quick-add-modal__close:focus-visible {
    outline: none;
  }

  /* base.css draws a second, border-based ring on .close-button:focus-visible::after
     for iOS < 16.4; the extra .quick-add-modal ancestor outranks it. */
  .quick-add-modal .quick-add-modal__close:focus-visible::after {
    content: none;
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    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: 20px;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      gap: 10px;
      grid-column: 1 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  /* Figma's mobile quick-add drawer has no product image */
  .quick-add-modal__content .product-information__media {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Not part of the Figma quick-add drawer */
    .quick-add-modal__content .variant-option__size-guide {
      display: none;
    }

    /* Figma only shows a single "Product Details" row */
    .quick-add-modal__content [data-disclosure-tab='care'],
    .quick-add-modal__content [data-disclosure-tab='elite'] {
      display: none;
    }

    /* Not part of the Figma quick-add drawer */
    .quick-add-modal__content .product-klarna-row__find-in-store {
      display: none;
    }

    .quick-add-modal__content .variant-option__legend-row {
      font-size: 14px;
      font-weight: 700;
      color: #000;
    }

    /* Figma shows no border on size options unless selected.
     *
     * The selected ring goes on the label's own border, not on ::before. base.css gives
     * .variant-option__button-label `overflow: clip` and insets its ::before by -1px, so
     * that pseudo-element's entire 1px ring sits outside the clip region — colouring it
     * here painted a border that could never appear, leaving the selected size with no
     * visual state at all until a press lit up :hover's grey fill. The PDP escapes it by
     * overriding `overflow: visible` on `.product-details`, which mobile hoists away
     * (assets/quick-add.js), and it draws this ring on the label itself for the same
     * reason. The label's border is inside its own box, so the clip can't reach it, and
     * the 1px is already there in transparent — colouring it shifts nothing. */
    .quick-add-modal__content .variant-option__button-label,
    .quick-add-modal__content .variant-option__button-label::before {
      border-color: transparent;
    }

    .quick-add-modal__content
      .variant-option__button-label:has(:checked):not(.variant-option__button-label--has-swatch) {
      border-color: var(--color-selected-variant-border);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: 14px;
      font-weight: 700;
      text-transform: none;
      color: inherit;
      width: fit-content;
    }
  }

  /* !important: product-price sets --font-size/--font-weight/--color inline, which
     otherwise wins over any stylesheet rule that isn't targeting the same custom props. */
  .quick-add-modal__content .product-header product-price {
    @media screen and (max-width: 749px) {
      --font-size: 13px !important;
      --font-weight: 400 !important;
      --color: #080808 !important;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component,
  .quick-add-modal__content [data-color-swatch-nav],
  .quick-add-modal__content .product-disclosures,
  .quick-add-modal__content .product-klarna-row {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  /* Below 750px the elements above are hoisted out of .product-details and become direct
     children of the content grid, so the PDP's own `.product-details .add-to-cart-button`
     rule (blocks/_product-details.liquid) stops reaching the button. It loses the casing —
     the base `.add-to-cart-button` falls back to --button-text-case-primary, which is set
     to `default`, not a valid text-transform — and the whole type treatment with it,
     landing on 14px/500 against the express payment row's 13px/700. That row keeps its
     size and weight everywhere because blocks/accelerated-checkout.liquid styles
     `.product-express-payment__label` unscoped, so only this side drifts.

     Values match the PDP rule exactly, which also makes this a no-op at 750px and up,
     where .product-details survives the hoist and both rules are the same specificity. */
  .quick-add-modal__content .add-to-cart-button {
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: normal;
    text-transform: uppercase;
  }

  .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: 1 / -1;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal */

/* START_SNIPPET:quick-add (INDEX:364) */
/* 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: default;
  }

  .quick-add__inline {
    display: none;
  }

  /* Desktop-only control: below 750px the card keeps its own quick-add button, which
     opens the modal. Re-enabled in the min-width: 750px block below. */
  .quick-add__sizes-toggle {
    display: none;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  @media screen and (min-width: 750px) {
    .quick-add--inline-sizes .quick-add__button {
      display: none;
    }

    /* The hover condition is kept alongside [data-sizes-open] as a safety net: the row is
       only ever opened from a card the pointer/focus is already on, and quick-add.js
       clears the attribute on pointerleave, so the two agree — but if a reset is ever
       missed, the card still falls back to its default state instead of staying open. */
    product-card:is(:hover, :focus-within) .quick-add--inline-sizes[data-sizes-open] .quick-add__inline {
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      padding-inline: 16px 12px;
      color: var(--color-foreground);
      background: color-mix(in srgb, var(--color-background) 90%, transparent);
      backdrop-filter: blur(7.5px);
      pointer-events: all;
      /* Lets the size row query its own rendered width directly, since that
         tracks the card's width regardless of the surrounding grid/template. */
      container-type: inline-size;
    }

    .quick-add__sizes {
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      gap: 6px;
      min-width: 0;
      /* Safety net under the shrinking below: a size count no amount of
         tightening can fit (a very long run, e.g. numeric shoe sizing) slides
         within the card instead of spilling past its right edge. Normal
         counts never grow wide enough to trigger it. */
      overflow-x: auto;
      scrollbar-width: none;
    }

    .quick-add__sizes::-webkit-scrollbar {
      display: none;
    }

    .quick-add__size {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 24px;
      padding: 4px 8px;
      border: var(--style-border-width) solid transparent;
      color: currentcolor;
      background: transparent;
      font: inherit;
      font-size: 11px;
      line-height: 12px;
      text-align: center;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
    }

    /* Narrower cards (search results, or the PLP grid at narrower desktop
       widths) leave less room for the size row; tighten spacing before
       shrinking the tap targets themselves. The 300px step sits below the
       PLP's default ~331px card content width (so today's PLP at a normal
       desktop width is untouched) and above search's ~283px, so search is
       the one that adapts at the standard desktop width. */
    @container (max-width: 300px) {
      .quick-add__sizes {
        gap: 3px;
      }

      .quick-add__size {
        min-width: 24px;
        padding-inline: 5px;
      }
    }

    @container (max-width: 220px) {
      .quick-add__sizes {
        gap: 2px;
      }

      .quick-add__size {
        min-width: 20px;
        padding-inline: 3px;
        font-size: 10px;
      }
    }

    .quick-add__size:is(:hover, :focus-visible) {
      border-color: currentcolor;
    }

    /* The chip is only 24px tall, so it needs a smaller ring than the default
       set on [data-add-to-cart-trigger] in base.css. The box is untouched, so
       a chip going busy never reflows the size row or the card. */
    .quick-add__size[aria-busy='true'] {
      --atc-spinner-size: 12px;
      --atc-spinner-width: 1.5px;

      border-color: currentcolor;
    }

    .quick-add__size--notify {
      color: var(--color-foreground-subdued);
      text-decoration: line-through;
    }

    .quick-add__sizes-close {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      margin-inline-start: 4px;
      padding: 0;
      border: 0;
      color: currentcolor;
      background: transparent;
      cursor: pointer;
    }

    .quick-add__sizes-close-icon,
    .quick-add__sizes-close-icon > svg {
      width: 12px;
      height: 12px;
    }

    /* The "+" the shopper clicks to reveal the size row. Hidden while that row is open,
       so the two never share the card's bottom-right corner. */
    .quick-add--inline-sizes .quick-add__sizes-toggle {
      position: absolute;
      inset-block-end: 0;
      inset-inline-end: 0;
      display: grid;
      place-items: center;
      /* A 44px box anchored to the corner puts the glyph's centre 22px in from both
         edges, which is where Figma sits it — no offset arithmetic needed, and the
         theme's minimum touch target comes for free. */
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      padding: 0;
      border: 0;
      background: none;
      /* Black, and deliberately not the arrows' white/`mix-blend-mode: difference`
         treatment: the plus is the size row's own trigger, so it takes the row's
         foreground colour rather than inverting whatever the photo puts behind it.
         (The blend is also unusable here — black differences to the backdrop itself,
         i.e. invisible.) */
      color: var(--color-foreground);
      opacity: 0;
      pointer-events: all;
      cursor: pointer;
    }

    product-card:is(:hover, :focus-within) .quick-add--inline-sizes .quick-add__sizes-toggle {
      opacity: 1;
    }

    .quick-add--inline-sizes[data-sizes-open] .quick-add__sizes-toggle {
      display: none;
    }

    /* Masked rather than an inline asset, matching the mobile card's plus
       (blocks/_product-card-gallery.liquid): no button chrome. The glyph is shared
       via --icon-quick-add-plus in base.css. */
    .quick-add__sizes-toggle-glyph {
      width: 12px;
      height: 12px;
      background-color: currentcolor;
      mask: var(--icon-quick-add-plus) no-repeat center / contain;
      -webkit-mask: var(--icon-quick-add-plus) no-repeat center / contain;
    }

    .quick-add__sizes-toggle:active {
      scale: 0.92;
    }
  }

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

    @media screen and (max-width: 749px) {
      /* Below 750px the plus is placed from card-gallery.liquid's
         --card-quick-add-center-offset, not the corner-inset formula above (that
         formula centred the glyph inside its own touch target against the progress
         tick's old, centred position - once 86akjygq0 moved the tick to sit flush
         with the bottom of ITS touch target, the two drifted apart). Solving for
         the button's own `bottom` that puts its vertical centre on that line:
         offset = bottom + height / 2, so bottom = offset - height / 2.
         The tick itself no longer sits on that line - the bar now runs flush with
         the bottom edge of the image - so this offset positions the plus alone.
         Independent of card height, so this applies the same in the regular grid
         and the denser "7 grid" view - no separate override needed. */
      bottom: calc(var(--card-quick-add-center-offset, var(--padding-sm)) - var(--button-size-md) / 2);

      /* `overflow: hidden` above exists for the desktop text-reveal
         animation (already fully hidden on mobile via
         `is-visually-hidden-mobile`) - drop it here so the touch-target
         pseudo below isn't clipped to the visible button's own box. */
      overflow: visible;

      &::before {
        content: '';
        position: absolute;
        /* Grow the tappable area to the theme's --minimum-touch-target
           (44px) without growing the drawn plus glyph: the glyph is drawn
           at a fixed size inside this button's existing --button-size-md
           (36px) box, so expand equally on every side of THAT box rather
           than resizing it - keeps the glyph's anchor point, and the
           alignment fixed above, untouched. */
        inset: calc((var(--button-size-md) - var(--minimum-touch-target)) / 2);
      }
    }

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

  .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,
    .quick-add__sizes-toggle {
      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:region-switcher (INDEX:365) */
.region-switcher {
    display: inline-block;
  }

  .region-switcher__form {
    display: flex;
    align-items: flex-end;
    gap: 1ch;
    margin: 0;
  }

  .localization-input {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.083em;
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  .localization-input__trigger {
    display: inline-flex;
    align-items: baseline;
    gap: 1ch;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    white-space: nowrap;
    cursor: pointer;
  }

  .localization-input__trigger:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: 2px;
  }

  .localization-input__flag {
    flex: none;
    align-self: baseline;
    transform: translateY(4px);
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
  }

  /* The globe is a square glyph, so it is contained rather than cropped to a circle. */
  .localization-input__flag--globe {
    align-self: center;
    transform: none;
    border-radius: 0;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* Fixed above the trigger and constrained to the viewport. */
  .localization-input__popover {
    inset: unset;
    bottom: calc(anchor(top) + 8px);
    right: anchor(right);
    width: max-content;
    min-width: anchor-size(width);
    max-width: calc(100vw - 2rem);
    max-height: 60vh;
    position-try-fallbacks: flip-inline;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    border: 1px solid #d9dce0;
    border-radius: 4px;
    background: var(--color-background);
    box-shadow: var(--shadow-popover, 0 8px 24px rgb(0 0 0 / 12%));
  }

  .localization-input__option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--font-body--family);
    font-style: var(--font-body--style);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    text-align: start;
    color: var(--color-foreground);
    text-decoration: none;
    cursor: pointer;
  }

  .localization-input__option:is(:hover, :focus-visible) {
    background: rgb(var(--color-foreground-rgb) / 0.08);
  }

  .localization-input__option:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: -2px;
  }

  .localization-input__option[aria-current='true'] {
    font-weight: 700;
  }

  /* Reserves space on every row so labels stay aligned. */
  .localization-input__check {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    visibility: hidden;
  }

  .localization-input__check svg {
    width: 100%;
    height: auto;
  }

  .localization-input__option[aria-current='true'] .localization-input__check {
    visibility: visible;
  }

  @supports not (position-anchor: --region-switcher-fallback) {
    .localization-input__popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      right: calc(var(--anchor-right) * 1px);
      min-width: calc(var(--anchor-width) * 1px);
      transform: translate(0, calc(-100% - 8px));
    }
  }

  /* The switcher is left aligned in the stacked mobile footer. */
  @media screen and (max-width: 749px) {
    .localization-input__popover {
      right: unset;
      left: anchor(left);
      position-try-fallbacks: flip-inline;
    }

    @supports not (position-anchor: --region-switcher-fallback) {
      .localization-input__popover {
        right: unset;
        left: calc(var(--anchor-left) * 1px);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .localization-input__popover {
      transition-property: display, overlay, opacity, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.2s;
      transition-timing-function: var(--ease-out-quad);
      opacity: 0;
      translate: 0 6px;
    }

    .localization-input__popover:popover-open {
      opacity: 1;
      translate: 0 0;
    }

    @starting-style {
      .localization-input__popover:popover-open {
        opacity: 0;
        translate: 0 6px;
      }
    }
  }
/* END_SNIPPET:region-switcher */

/* START_SNIPPET:resource-card (INDEX:366) */
.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;
    }

    .price--on-sale {
      font-weight: 700;
    }

    .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:367) */
.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-modal (INDEX:373) */
.search-modal {
    /* The panel opens flush under the whole header stack. --header-group-height and
       --header-height are kept in sync on <body> by header.js, and a dialog in the top
       layer is still a body descendant, so all three inherit here.

       --header-group-height only excludes the header's own height when the header is
       transparent (position: absolute, so .header-section collapses to 0). On every other
       template the wrapper is position: sticky, stays in flow at its full height, and is
       already counted — so adding --header-height unconditionally pushed the panel a whole
       header height below the header. --transparent-header-offset-boolean is the theme's
       existing flag for exactly this (see snippets/header-actions.liquid's
       --account-offset-top). */
    --search-panel-header-offset: calc(
      var(--header-group-height, 0px) + (var(--header-height, 0px) * var(--transparent-header-offset-boolean, 0))
    );

    /* Everything in the panel other than the thumbnail row: its own padding-block
       (56 + 64), the SEARCH bar (44) and its half-gap to the query row (28), the query
       row (~48 with its rule), the gap down to the columns (56) and the column label
       with its gap (~37). Revisit if that vertical rhythm changes. */
    --search-panel-thumbnails-chrome: 333px;

    display: contents;
  }

  /* Full-bleed panel rather than a centred popover: overrides .dialog-modal's width,
     radius and shadow at every breakpoint. */
  .search-modal__content.dialog-modal {
    position: fixed;
    inset: var(--search-panel-header-offset) 0 0 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The header stays visible above the panel, so it isn't dimmed — which also means
     opting out of .dialog-modal[open]'s brightness animation on the backdrop. */
  .dialog-modal[open].search-modal__content::backdrop,
  .search-modal__content.dialog-modal::backdrop {
    background: transparent;
    backdrop-filter: none;
    animation: none;
  }

  .search-modal__content[open] {
    display: block;
  }

  .dialog-modal[open].search-modal__content {
    animation: search-panel-slide-in var(--animation-speed) var(--ease-out-quad) forwards;
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-panel-slide-out var(--animation-speed) var(--ease-out-quad) forwards;
  }

  @keyframes search-panel-slide-in {
    from {
      transform: translateY(-8px);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes search-panel-slide-out {
    from {
      transform: translateY(0);
      opacity: 1;
    }

    to {
      transform: translateY(-8px);
      opacity: 0;
    }
  }

  .search-modal .search-panel__rows {
    padding-block: var(--search-panel-row-gap) var(--padding-6xl);
  }

  /* Keep the thumbnail row inside the panel rather than letting it push the panel into
     a scroll: cap the row's width — four 3:4 tiles plus their 1px gutters — by the
     height actually left below the query row, so the tiles shrink at the designed ratio
     instead of being cropped. Below 750px the columns stack and the panel scrolls. */
  @media screen and (min-width: 750px) {
    .search-modal .search-panel__thumbnails {
      max-width: max(
        320px,
        calc(
          (100dvh - var(--search-panel-header-offset) - var(--search-panel-thumbnails-chrome)) * 3 + 3px
        )
      );
    }
  }

  /* Inside the panel the predictive-search results are the panel body, not a
     popover floating below an input. */
  .search-modal .predictive-search-dropdown {
    display: block;
    position: static;
  }

  .search-modal .predictive-search-results__inner {
    padding-block: 0;
    overflow: visible;
    container-type: inline-size;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:381) */
.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: 1023px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 1024px) {
    /* Desktop search is rendered inside header-actions for fixed utility ordering. */
    #header-component[data-menu-style='menu'] .header__column--right > .search-action {
      display: none;
    }

    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    /* Desktop search (rendered inside header-actions) always replaces this
       duplicate at 1024px+, regardless of data-menu-style. data-menu-style
       is forced to 'drawer' on touch devices (e.g. iPad Pro) even at desktop
       widths, so scoping this to [data-menu-style='menu'] left both search
       buttons visible there. */
    .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 1024px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  @media screen and (min-width: 1024px) {
    .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:382) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section--full-height-tiles-mobile {
    border-block-end: 1px solid rgb(var(--color-background-rgb));
  }

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

  @media screen and (max-width: 749px) {
    .section--full-height-tiles-mobile {
      --section-min-height: auto;
    }

    .section--full-height-tiles-mobile .section-content-wrapper {
      min-height: 0;
    }

    .section--full-height-tiles-mobile .section-content-wrapper.mobile-column > .group-block {
      min-height: var(--section-tile-min-height-mobile, 100svh);
      width: 100%;
      /*
       * 86ajpar4f: matches the same mobile-only CTA-clearance override applied to these
       * tiles once homepage-scroll-snap.js has reparented them into standalone panels
       * (see assets/base.css) — kept in sync here so a visitor with `prefers-reduced-motion`
       * or JS disabled, who never gets that reparenting, still gets the same bottom
       * clearance as the hero panels' reference (The RUDSAK World, client-corrected).
       */
      --padding-block-end: max(20px, calc(var(--spacing-scale) * 70px)) !important;
    }
  }

  @media screen and (min-width: 750px) {
    .section--full-height-tiles-mobile .image-block--height-fill .image-block__image {
      aspect-ratio: auto;
    }

    .section--columns-reverse .section-content-wrapper.layout-panel-flex--row {
      flex-direction: row-reverse;
    }

    .heritage-split.section--columns-reverse .section-content-wrapper.layout-panel-flex {
      direction: rtl;
    }

    .heritage-split.section--columns-reverse .section-content-wrapper > * {
      direction: ltr;
    }

    .heritage-split.section--columns-reverse .group-block {
      padding-inline-end: 0;
      padding-inline-start: 0;
    }
  }

  .heritage-split .section-content-wrapper.layout-panel-flex {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 2.5rem;
    height: auto;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .heritage-split .section-content-wrapper > * {
    min-width: 0;
    width: 100%;
    max-width: none;
    height: auto;
    flex: 1 1 50%;
  }

  .heritage-split .group-block {
    max-width: none;
    width: 100%;
  }

  .heritage-split .group-block-content {
    justify-items: start;
    align-content: start;
    align-items: start;
    gap: 2rem;
    height: auto;
  }

  .heritage-split .group-block-content .text-block {
    width: 100%;
    align-items: start;
  }

  .heritage-split .group-block-content .text-block > * {
    width: 100%;
    max-inline-size: none;
    --max-width: 100%;
    margin-block: 0;
  }

  .heritage-split .group-block-content .text-block.custom-typography,
  .heritage-split .group-block-content .text-block.custom-typography > * {
    font-size: 13px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-foreground-muted);
  }

  .heritage-split .group-block-content .text-block.h3,
  .heritage-split .group-block-content .text-block.h3 > *,
  .heritage-split .group-block-content .text-block.h2,
  .heritage-split .group-block-content .text-block.h2 > * {
    font-size: clamp(1.625rem, 3.5vw, 2rem);
    font-weight: var(--font-heading--weight, 700);
    line-height: 1.1875;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--color-foreground);
  }

  .heritage-split .group-block-content .text-block.h3,
  .heritage-split .group-block-content .text-block.h2 {
    margin-block-start: -0.625rem;
  }

  .heritage-split .group-block-content .text-block.rte,
  .heritage-split .group-block-content .text-block.rte p {
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-foreground-muted);
  }

  .heritage-split .group-block-content .text-block.rte p + p {
    margin-block-start: 1em;
  }

  .heritage-split .image-block {
    display: block;
    position: relative;
    width: 688px;
    max-width: 100%;
    overflow: hidden;
    --ratio: 572 / 502 !important;
  }

  .heritage-split .image-block__image,
  .heritage-split .image-block .placeholder-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 572 / 502;
    object-fit: cover;
    object-position: center;
    --ratio: 572 / 502 !important;
  }

  .heritage-split .heritage-cta {
    margin-block-start: 0;
  }

  @media screen and (min-width: 750px) {
    .heritage-split .section-content-wrapper.layout-panel-flex {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      justify-content: stretch;
      align-items: start;
      gap: clamp(1.5rem, 4vw, 4rem);
      padding-inline: 0;
    }

    .heritage-split .section-content-wrapper > * {
      max-width: none;
      width: 100%;
    }

    .heritage-split .group-block {
      max-width: 36rem;
      width: 100%;
      height: auto;
      align-self: start;
      padding-inline-end: 0;
    }

    .heritage-split .section-content-wrapper > .image-block {
      width: 688px;
      max-width: 100%;
      height: auto;
      justify-self: start;
      margin-inline-start: 0;
      margin-inline-end: auto;
    }

    .heritage-split.section--columns-reverse .section-content-wrapper > .image-block {
      justify-self: end;
      margin-inline-start: auto;
      margin-inline-end: 0;
    }
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:387) */
.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:389) */
.slideshow-control--large {
    .icon-chevron {
      --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-chevron {
    width: 0.5rem;
    height: 0.75rem;
  }

  .slideshow-control .icon-chevron > svg {
    width: 0.5rem;
    height: 0.75rem;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-controls (INDEX:391) */
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: 10px;
    }

    &:has(.slideshow-controls__progress-bar) {
      gap: var(--gap-2xl);

      @media screen and (max-width: 749px) {
        gap: var(--gap-lg);
      }
    }

    &[controls-on-media]:has(.slideshow-controls__progress-bar) {
      padding-block-start: var(--padding-2xl);
      padding-block-end: var(--padding-lg);

      /*
       * This padding is touch-target breathing room around the thin progress bar, not
       * meaningful content — but as a full-width, ~90px-tall absolutely-positioned box
       * sitting over the bottom of the slide, it was intercepting clicks/hover on any
       * slide content underneath it (e.g. CTA buttons bottom-aligned in the same area).
       * Let clicks pass through the padding; only the actual controls stay interactive.
       */
      pointer-events: none;

      :is(a, button) {
        pointer-events: auto;
      }
    }
  }

  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-controls__progress-bar),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__progress-bar {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    flex: 1 1 auto;
    max-width: 24rem;
    padding-inline: var(--padding-lg);

    @media screen and (max-width: 749px) {
      max-width: 12rem;
    }

    &:only-child {
      width: 100%;
      margin-inline: auto;
    }
  }

  .slideshow-controls__progress-segment {
    flex: 1;
    display: flex;
    align-items: center;
    width: auto;

    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    }

    &[aria-current='true']::after {
      background-color: var(--color-foreground);
    }
  }

  .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-current='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-current='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: default;
  }

  /* 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-current='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:393) */
slideshow-slides {
    align-items: var(--slideshow-align-items, normal);
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }
/* END_SNIPPET:slideshow */

/* START_SNIPPET:sorting (INDEX:394) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:404) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

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

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

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:414) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .variant-option[data-is-color-option='true'] {
    order: -1;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }

  .variant-option__status--oos {
    color: var(--color-foreground-subdued);
  }

  [data-template-product-match='true']
    .variant-option__button-label:not(.variant-option__button-label--has-swatch):has([data-option-available='false']):has(:checked) {
    border-width: var(--options-border-width);
    border-color: var(--color-variant-border);
    color: #d5d5d5;
  }

  [data-template-product-match='true']
    .variant-option__button-label:not(.variant-option__button-label--has-swatch):has([data-option-available='false'])
    .variant-option__button-label__text {
    text-decoration-color: currentColor;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:415) */
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:416) */
.video-interaction-hint {
    /*
      This is the ADA-required play/pause control for videos with native provider
      controls disabled, so it must stay visible at all times rather than reveal
      only on hover.
    */
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:417) */
.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 */