/** Shopify CDN: Minification failed

Line 5482:2 Unexpected "{"
Line 5482:3 Expected identifier but found "%"
Line 5483:4 Unexpected "640px"
Line 5488:3 Expected identifier but found "%"
Line 5600:2 Unexpected "{"
Line 5600:3 Expected identifier but found "%"
Line 5601:4 Unexpected "640px"
Line 5601:75 Unterminated string token
Line 5602:81 Unterminated string token
Line 5606:3 Expected identifier but found "%"
... and 267 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:algolia-search-bar (INDEX:4) */
#header-group .section-algolia-search-bar {
    position: sticky;
    top: calc(var(--header-section-height, var(--header-height, 0px)) - 2px);
    z-index: var(--layer-sticky);
    margin-block: 0;
  }
/* END_SECTION:algolia-search-bar */

/* START_SECTION:brand-collection-header (INDEX:6) */
.brand-collection-header {
    padding-block-start: var(--padding-block-start);
    padding-block-end: var(--padding-block-end);
  }

  /* ── 3-column flex layout ── */
  .brand-collection-header__wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    /* padding: 0 2rem; */
  }

  /* col 1 — logo */
  .brand-collection-header__logo {
    flex: 0 0 auto;
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .brand-collection-header__logo img {
    width: clamp(150px, 15vw, 190px);
    height: auto;
    object-fit: contain;
  }

  .brand-collection-header__logo-desktop {
    display: block;
  }

  .brand-collection-header__logo-mobile {
    display: none;
  }

  /* col 2 — title, description, cta */
  .brand-collection-header__info {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 50%;
  }

  .brand-collection-header__title {
    font-family: var(--font-h3--family);
    font-style: var(--font-h3--style);
    font-weight: var(--font-h2--weight);
    font-size: var(--font-h3--size);
    line-height: var(--font-h3--line-height);
    letter-spacing: var(--font-h3--letter-spacing);
    margin: 0;
  }

  .brand-collection-header__description {
    margin: 0;
  }

  .brand-collection-header__cta-wrap {
    display: block;
  }

  .brand-collection-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-block-start: 0.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: currentColor;
    text-decoration: none;
  }

  .brand-collection-header__cta:hover {
    text-decoration: none;
  }

  .brand-collection-header__cta-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    transition: transform 0.3s ease-in-out;
  }

  .brand-collection-header__cta:hover .brand-collection-header__cta-icon {
    transform: translateX(0.25rem);
  }

  /* col 3 — meta (brand name, licensed producer, location) */
  .brand-collection-header__meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 20%;
  }

  .brand-collection-header__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-block-end: 0.75rem;
    border-block-end: solid 1px #979797;
  }

  .brand-collection-header__meta-label {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
  }

  .brand-collection-header__meta-value {
    margin: 0;
  }

  /* ── mobile: stack into single column ── */
  @media (max-width: 749px) {
    .brand-collection-header__wrapper {
      flex-direction: column;
      align-items: center;
    }

    .brand-collection-header__logo-desktop {
      display: none;
    }

    .brand-collection-header__logo-mobile {
      display: block;
    }

    .brand-collection-header__meta {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1rem 2rem;
    }

    .brand-collection-header__logo{
      width: 100%;
    }

    .brand-collection-header__info {
      width: 100%;
      text-align: center;
      align-items: center;
    }

    .brand-collection-header__meta {
      width: 100%;
      text-align: center;
      justify-content: center;
      align-items: center;
    }
  }
/* END_SECTION:brand-collection-header */

/* START_SECTION:brand-disclaimer (INDEX:7) */
/*
    Reused from theme:
    - .section, .section--page-width, .section--full-width
    - .section-background and color scheme classes
    - .spacing-style with render 'spacing-style'
    - typography and color CSS custom properties
  */

  .brand-disclaimer,
  .brand-disclaimer *,
  .brand-disclaimer *::before,
  .brand-disclaimer *::after {
    box-sizing: border-box;
  }

  .brand-disclaimer__inner {
    max-inline-size: 900px;
    margin-inline: auto;
    text-align: center;
  }

  .brand-disclaimer__heading {
    margin: 0 0 16px;
    font-family: var(--font-h2--family);
    font-style: var(--font-h2--style);
    font-weight: var(--font-h2--weight);
    font-size: var(--font-h2--size);
    line-height: var(--font-h2--line-height);
    letter-spacing: var(--font-h2--letter-spacing);
    text-transform: var(--font-h2--case);
    color: var(--color-foreground);
  }

  .brand-disclaimer__description {
    margin: 0;
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-weight: var(--font-paragraph--weight);
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    text-transform: var(--font-paragraph--case);
    color: var(--color-foreground);
  }

  .brand-disclaimer__description p {
    margin: 0;
  }

  .brand-disclaimer__description p + p {
    margin-block-start: 1em;
  }

  @media (prefers-reduced-motion: reduce) {
    .brand-disclaimer *,
    .brand-disclaimer *::before,
    .brand-disclaimer *::after {
      scroll-behavior: auto;
    }
  }
/* END_SECTION:brand-disclaimer */

/* START_SECTION:brand-header (INDEX:8) */
/*
    Reused from theme:
    - .section, .section--page-width  (OCS page-width grid)
    - .section-background              (full-section background layer)
    - color-[scheme]                    (color scheme background + foreground)
    - .rte                             (rich-text typography)
    - render 'image'                   (responsive image snippet)
    - --padding-block-start / -end     (setting-driven padding vars)
  */

  .brand-header,
  .brand-header *,
  .brand-header *::before,
  .brand-header *::after {
    box-sizing: border-box;
  }

  /* Legacy brand container: full-width mobile, stepped widths from 640px. */
  .brand-header {
    display: block;
    width: 100%;
    margin-inline: auto;
    padding-block: 0 50px;
  }

  /* ── Banner (legacy #f4f4f4 logo strip) ── */
  .brand-header__banner {
    display: flex;
    justify-content: center;
    padding-block: 20px;
    background-color: var(--brand-header-banner-background, #f4f4f4);
  }

  .brand-header__banner--title {
    padding-block: 0;
  }

  .brand-header__banner-inner {
    inline-size: 100%;
    display: flex;
    justify-content: center;
  }

  .brand-header__banner--title .brand-header__banner-inner {
    max-inline-size: 764px;
    padding-inline: 15px;
  }

  .brand-header__banner--title .brand-header__logo-fallback {
    inline-size: calc(100% + 30px);
    margin-inline: -15px;
    padding-inline: 15px;
  }

  .brand-header__logo {
    display: block;
    width: 100%;
    inline-size: 100%;
    max-width: var(--brand-header-logo-max-width, 200px);
    max-inline-size: var(--brand-header-logo-max-width, 200px);
    height: auto;
    block-size: auto;
    max-height: 100px;
    max-block-size: 100px;
    object-fit: contain;
  }

  .brand-header__logo--desktop {
    display: none;
  }

  .brand-header__logo-fallback {
    margin: 0;
    padding-block: 47px;
    color: var(--color-foreground);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.22;
    text-align: center;
  }

  /* ── Content (stacked on mobile) ── */
  .brand-header__content {
    display: flex;
    flex-direction: column;
  }

  .brand-header__copy,
  .brand-header__meta {
    padding-inline: 15px;
  }

  .brand-header__copy {
    order: 2;
    padding-block-start: 22px;
  }

  .brand-header__meta {
    order: 1;
    padding-block-start: 28px;
    margin: 0;
    list-style: none;
  }

  .brand-header__meta-item {
    list-style: none;
    border-block-end: 1px solid #979797;
    padding-block-end: 20px;
    margin-block-end: 20px;
  }

  .brand-header__meta-label,
  .brand-header__meta-value,
  .brand-header__description,
  .brand-header__heading {
    margin: 0;
  }

  .brand-header__meta-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
    text-transform: none;
    margin-block-end: 5px;
  }

  .brand-header__meta-value {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
  }

  .brand-header__heading {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
    text-align: center;
    margin: 0;
  }

  .brand-header__description {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    max-inline-size: 100%;
  }

  .brand-header__description p {
    margin: 0;
  }

  /* ── Legacy desktop/tablet layout ── */
  @media (min-width: 640px) {
    .brand-header {
      width: 600px;
      padding-block-start: var(--padding-block-start);
      padding-block-end: var(--padding-block-end);
    }

    .brand-header__banner {
      padding-block: 40px;
    }

    .brand-header__logo--mobile {
      display: none;
    }

    .brand-header__logo--desktop {
      display: block;
      max-height: 115px;
      max-block-size: 115px;
    }

    .brand-header__logo-fallback {
      padding-block: 0 10px;
      font-size: 60px;
    }

    /* Old floated columns resolved to copy left (2/3), metadata right (1/3). */
    .brand-header__content {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      column-gap: 0;
      align-items: start;
    }

    .brand-header__copy {
      order: 1;
      padding-block-start: 22px;
    }

    .brand-header__meta {
      order: 2;
      padding-block-start: 28px;
    }

    .brand-header__heading {
      font-size: 32px;
      text-align: start;
    }
  }

  @media (min-width: 1024px) {
    .brand-header {
      width: 960px;
    }
  }

  @media (min-width: 1280px) {
    .brand-header {
      width: 1200px;
    }
  }

  @media (min-width: 1920px) {
    .brand-header {
      width: 1440px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .brand-header *,
    .brand-header *::before,
    .brand-header *::after {
      scroll-behavior: auto;
    }
  }
/* END_SECTION:brand-header */

/* START_SECTION:brand-page-placeholder (INDEX:9) */
.brand-page-placeholder,
  .brand-page-placeholder *,
  .brand-page-placeholder *::before,
  .brand-page-placeholder *::after {
    box-sizing: border-box;
  }

  .brand-page-placeholder {
    padding-block: 48px;
  }

  .brand-page-placeholder__box {
    padding: 32px;
    color: var(--color-foreground);
    text-align: center;
    background: var(--color-background);
    border: 1px dashed var(--color-border);
    border-radius: var(--style-border-radius-inputs, 8px);
  }

  .brand-page-placeholder__eyebrow,
  .brand-page-placeholder__text {
    margin: 0;
  }

  .brand-page-placeholder__eyebrow {
    font-family: var(--font-h3--family, var(--font-body--family));
    font-size: var(--font-size--sm, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .brand-page-placeholder__text {
    margin-block-start: 8px;
    font-family: var(--font-paragraph--family, var(--font-body--family));
    font-size: var(--font-paragraph--size, 1rem);
  }
/* END_SECTION:brand-page-placeholder */

/* START_SECTION:brands-list (INDEX:10) */
/*
    Reused from theme: .section, .section--page-width, .section-background,
    .spacing-style, .ocs-button and OCS button modifiers, color-scheme CSS vars
  */

  .brands-list *,
  .brands-list *::before,
  .brands-list *::after {
    box-sizing: border-box;
  }

  .brands-list.spacing-style {
    padding-block: 0;
    margin-block: 60px;
  }

  .brands-list--spacing-brand-page.spacing-style {
    margin-block: 0 60px;
  }

  /* ── Heading ──────────────────────────────────────────────────────────── */

  .brands-list__heading {
    display: block;
    margin: 0 0 20px;
    padding: 0;
    color: var(--color-foreground, #000);
    font-family: var(--font-h2--family, var(--font-body--family, sans-serif));
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
    text-align: center;
  }

  /* ── Grid ─────────────────────────────────────────────────────────────── */

  .brands-list__grid {
    display: grid;
    grid-template-columns: repeat(var(--brands-list-columns-mobile, 2), minmax(0, 1fr));
    width: min(100%, 925px);
    margin: 0 auto 15px;
    padding: 0;
    overflow: hidden;
    list-style: none;
    background: transparent;
  }

  /* ── Item ─────────────────────────────────────────────────────────────── */

  .brands-list__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 30px 40px;
    border-block-end: 1px solid var(--brands-list-divider, #8c8c8c);
    list-style: none;
    background-color: var(--color-background, #fff);
  }

  .brands-list--dividers .brands-list__item::before {
    position: absolute;
    inset-block: 15px;
    inset-inline-start: 0;
    border-inline-start: 1px solid var(--brands-list-divider, #8c8c8c);
    content: '';
  }

  .brands-list--dividers.brands-list--mobile-columns-2 .brands-list__item:nth-child(2n + 1)::before,
  .brands-list--dividers.brands-list--mobile-columns-2 .brands-list__item:nth-last-child(-n + 2) {
    border: 0;
  }

  /* ── Link / span wrapper ──────────────────────────────────────────────── */

  .brands-list__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    color: inherit;
    text-decoration: none;
  }

  .brands-list__link:focus-visible {
    outline: 2px solid var(--color-primary, var(--color-foreground, #000));
    outline-offset: -2px;
  }

  /* ── Logo ─────────────────────────────────────────────────────────────── */

  .brands-list__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .brands-list__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
  }

  .brands-list__logo--placeholder {
    width: 80px;
    height: 80px;
    background-color: #f2f2f2;
  }

  /* ── Button ───────────────────────────────────────────────────────────── */

  .brands-list__button-wrap {
    display: flex;
    justify-content: center;
    margin: 0;
    margin-block-start: 30px;
    padding: 0;
  }

  /* Width guard only — OCS button system owns CTA visuals and interaction */
  .brands-list__button.ocs-button {
    min-width: 157px;
  }

  /* ── Desktop ≥ 750px ──────────────────────────────────────────────────── */

  @media screen and (min-width: 640px) {
    .brands-list.spacing-style {
      margin-block: 70px;
    }

    .brands-list--spacing-brand-page.spacing-style {
      margin-block: 0 100px;
    }

    .brands-list__heading {
      margin-block-end: 20px;
      font-size: 32px;
    }

    .brands-list__grid {
      grid-template-columns: repeat(var(--brands-list-columns-desktop, 4), minmax(0, 1fr));
    }

    /* Restore every divider first: the mobile odd-item reset remains in the
       cascade, so desktop must explicitly reinstate dividers for columns 2–4. */
    .brands-list--dividers.brands-list--desktop-columns-4 .brands-list__item:nth-child(n)::before {
      border-inline-start: 1px solid var(--brands-list-divider, #8c8c8c);
    }

    .brands-list--dividers.brands-list--desktop-columns-4 .brands-list__item:nth-child(4n + 1)::before {
      border-inline-start: 0;
    }

    .brands-list--dividers.brands-list--desktop-columns-4 .brands-list__item:nth-last-child(-n + 4) {
      border-block-end: 0;
    }

    .brands-list__button.ocs-button {
      min-width: 176px;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .brands-list--grayscale .brands-list__logo {
      filter: grayscale(1);
    }

    .brands-list--hover-reveal .brands-list__link:hover .brands-list__logo,
    .brands-list--hover-reveal .brands-list__link:focus-visible .brands-list__logo {
      filter: grayscale(0);
    }
  }

  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .brands-list--hover-reveal .brands-list__logo {
      transition: filter 300ms ease-in-out, transform 300ms ease-in-out;
    }

    .brands-list--hover-reveal .brands-list__link:hover .brands-list__logo,
    .brands-list--hover-reveal .brands-list__link:focus-visible .brands-list__logo {
      transform: scale(1.01);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .brands-list--hover-reveal .brands-list__logo {
      transition: none;
    }
  }
/* END_SECTION:brands-list */

/* START_SECTION:breadcrumbs (INDEX:11) */
.breadcrumbs {
    padding-block-start: 16px;
    padding-block-end: 16px;
  }

  @media screen and (max-width: 749px) {
    .breadcrumbs {
      --page-margin: 15px;
    }

    .breadcrumbs--hide-mobile {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .breadcrumbs {
      padding-block-start: 24px;
      padding-block-end: 24px;
    }
  }

  [data-template*="product"] .breadcrumbs {
    padding-block-end: 6px;
  }

  .breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
  }

  @media screen and (max-width: 749px) {
    .breadcrumbs__list {
      font-size: 12px;
    }

   
  }

  .breadcrumbs__item {
    display: flex;
    align-items: center;
  }

  .breadcrumbs__item:not(:last-child)::after {
    content: '/';
    margin-inline: 0.5rem;
    opacity: 0.4;
  }

  

  .breadcrumbs__link {
    color: currentColor;
    text-decoration: none;
  }

  .breadcrumbs__link:hover {
    text-decoration: underline;
  }

  .breadcrumbs__current {
    opacity: 0.6;
  }
/* END_SECTION:breadcrumbs */

/* START_SECTION:collection-links (INDEX:15) */
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 (min-width: 749px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

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

      @media (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 (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:cta-banner (INDEX:17) */
/*
    Reused from theme:
    - var(--font-h2--family)
    - var(--font-paragraph--family)
    - .section, .section--page-width, .section--full-width
    - .ocs-button and OCS button modifiers
    - spacing-style snippet for --padding-block-start / --padding-block-end
    All other layout and spacing is section-scoped BEM.
  */

  .cta-banner,
  .cta-banner *,
  .cta-banner *::before,
  .cta-banner *::after {
    box-sizing: border-box;
  }

  .cta-banner {
    --cta-banner-overlay-color: transparent;
    --cta-banner-heading-color: #ffffff;
    --cta-banner-text: #ffffff;
    --cta-banner-content-max-width: 600px;
    --cta-banner-content-align: center;
    inline-size: 100%;
    padding-block-start: var(--padding-block-start, 64px);
    padding-block-end: var(--padding-block-end, 64px);
  }

  .cta-banner__inner {
    position: relative;
    inline-size: 100%;
    min-block-size: var(--cta-banner-min-height, 237px);
    overflow: hidden;
    isolation: isolate;
    background-color: var(--cta-banner-background-color, transparent);
  }

  .cta-banner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
  }

  .cta-banner__picture,
  .cta-banner__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }

  .cta-banner__image-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .cta-banner__image-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
    box-shadow: inset 0 0 0 6px #000000;
  }

  .cta-banner--image-only .cta-banner__inner {
    background-color: var(--cta-banner-background-color, transparent);
  }

  .cta-banner--image-auto .cta-banner__inner {
    min-block-size: 0;
  }

  .cta-banner--image-auto .cta-banner__media {
    position: relative;
    inset: auto;
    block-size: auto;
  }

  .cta-banner--image-auto .cta-banner__picture,
  .cta-banner--image-auto .cta-banner__image {
    block-size: auto;
    object-fit: contain;
  }

  .cta-banner--image-auto .cta-banner__content {
    position: absolute;
    inset: 0;
    min-block-size: 0;
  }

  .cta-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--cta-banner-overlay-color, #064bbbcc);
    pointer-events: none;
  }

  .cta-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: var(--cta-banner-content-inline-align, center);
    justify-content: var(--cta-banner-content-align, center);
    min-block-size: var(--cta-banner-min-height, 237px);
    padding: 27px 20px 22px;
  }

  .cta-banner__heading {
    max-inline-size: var(--cta-banner-content-max-width, 600px);
    margin: 0 0 24px;
    color: var(--cta-banner-heading-color, #ffffff);
    font-family: var(--font-h2--family, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    /* ocs.ca's `.section--cta-banner h3` declares no letter-spacing. */
    letter-spacing: normal;
    text-align: var(--cta-banner-text-align, center);
  }

  .cta-banner__body {
    max-inline-size: var(--cta-banner-body-max-width, var(--cta-banner-content-max-width, 600px));
    margin: 0 0 22px;
    color: var(--cta-banner-text, #ffffff);
    font-family: var(--font-paragraph--family, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.39;
    letter-spacing: 0;
    text-align: var(--cta-banner-text-align, center);
  }

  .cta-banner__body p {
    margin: 0;
  }

  .cta-banner__body p + p {
    margin-block-start: var(--cta-banner-paragraph-spacing, 0);
  }

  /* Opt-in: OCS landing copy renders inline links in green. */
  .cta-banner--links-green .cta-banner__body a {
    color: var(--ocs-button-green, #2e7631);
  }

  .cta-banner .ocs-button--solid-white {
    --ocs-button-background-color: var(--ocs-button-white);
    --ocs-button-border-color: var(--ocs-button-white);
    --ocs-button-text-color: var(--ocs-button-black);
    --ocs-button-hover-background-color: var(--ocs-button-black);
    --ocs-button-hover-border-color: var(--ocs-button-black);
    --ocs-button-hover-text-color: var(--ocs-button-white);
    --ocs-button-focus-color: var(--ocs-button-white);
  }

  @media (min-width: 750px) {
    .cta-banner__inner {
      min-block-size: var(--cta-banner-min-height, 293px);
    }

    .cta-banner__content {
      min-block-size: var(--cta-banner-min-height, 293px);
    }

    .cta-banner__heading {
      margin-block-end: 24px;
      font-size: 32px;
      line-height: 1;
      /* Tracking stays `normal` here too — see the base rule. */
    }

    .cta-banner__body {
      font-size: 17.2px;
      line-height: 1.34;
    }

  }

  /* OCS editorial grid: stepped container, content scale, and 2:1 desktop crop. */
  .cta-banner--content-ocs-grid .cta-banner__inner {
    inline-size: 100%;
    max-inline-size: calc(100vw - 30px);
    margin-inline: auto;
  }

  .cta-banner--content-ocs-grid.cta-banner--image-auto .cta-banner__inner {
    min-block-size: 0;
  }

  .cta-banner--content-ocs-grid.cta-banner--image-auto .cta-banner__media {
    position: absolute;
    inset: 0;
    block-size: 100%;
  }

  .cta-banner--content-ocs-grid.cta-banner--image-auto .cta-banner__image {
    block-size: 100%;
    object-fit: cover;
  }

  .cta-banner--content-ocs-grid.cta-banner--image-auto .cta-banner__content {
    position: relative;
    inset: auto;
    min-block-size: 0;
  }

  .cta-banner--content-ocs-grid .cta-banner__content {
    padding: 55px 30px;
  }

  .cta-banner--content-ocs-grid .cta-banner__heading,
  .cta-banner--content-ocs-grid .cta-banner__body,
  .cta-banner--content-ocs-grid .cta-banner__button {
    max-inline-size: calc(var(--cta-banner-content-max-width, 450px) - 30px);
  }

  .cta-banner--content-ocs-grid .cta-banner__heading {
    margin-block-end: 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
  }

  .cta-banner--content-ocs-grid .cta-banner__body {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
  }

  .cta-banner--content-ocs-grid .cta-banner__button {
    margin-block-start: 20px;
  }

  @media (min-width: 640px) {
    .cta-banner--content-ocs-grid .cta-banner__inner {
      max-inline-size: 570px;
      aspect-ratio: 2 / 1;
      min-block-size: 0;
    }

    .cta-banner--content-ocs-grid .cta-banner__media {
      position: absolute;
      inset: 0;
      block-size: 100%;
    }

    .cta-banner--content-ocs-grid .cta-banner__image {
      block-size: 100%;
      object-fit: cover;
    }

    .cta-banner--content-ocs-grid .cta-banner__content,
    .cta-banner--content-ocs-grid.cta-banner--image-auto .cta-banner__content {
      position: absolute;
      inset: 0;
      min-block-size: 0;
      padding: 20px 40px;
    }

    .cta-banner--content-ocs-grid .cta-banner__heading,
    .cta-banner--content-ocs-grid .cta-banner__body,
    .cta-banner--content-ocs-grid .cta-banner__button {
      max-inline-size: calc(var(--cta-banner-content-max-width, 450px) - 80px);
    }

    .cta-banner--content-ocs-grid .cta-banner__heading {
      margin-block-end: 20px;
      font-size: 32px;
      line-height: 1.22;
    }
  }

  @media (min-width: 1024px) {
    .cta-banner--content-ocs-grid .cta-banner__inner {
      max-inline-size: 930px;
    }
  }

  @media (min-width: 1280px) {
    .cta-banner--content-ocs-grid .cta-banner__inner {
      max-inline-size: 1170px;
    }
  }

  @media (min-width: 1920px) {
    .cta-banner--content-ocs-grid .cta-banner__inner {
      max-inline-size: 1410px;
    }
  }

  /* Brand pages align this banner to the Brand Overview container. */
  .cta-banner--content-brand-overview .cta-banner__inner {
    max-inline-size: calc(100vw - 30px);
  }

  @media (min-width: 640px) {
    .cta-banner--content-brand-overview .cta-banner__inner {
      max-inline-size: 600px;
    }
  }

  @media (min-width: 1024px) {
    .cta-banner--content-brand-overview .cta-banner__inner {
      max-inline-size: 960px;
    }
  }

  @media (min-width: 1280px) {
    .cta-banner--content-brand-overview .cta-banner__inner {
      max-inline-size: 1200px;
    }
  }

  @media (min-width: 1920px) {
    .cta-banner--content-brand-overview .cta-banner__inner {
      max-inline-size: 1440px;
    }
  }

  /* OCS home banner: content-derived 217/270px heights and typography. */
  .cta-banner--typography-ocs-home-banner.spacing-style {
    padding-block: 16px;
    margin-block-end: 100px;
  }

  .cta-banner--typography-ocs-home-banner.cta-banner--image-auto .cta-banner__inner {
    grid-column: 1 / -1;
    inline-size: 100%;
    max-inline-size: 1200px;
    min-block-size: 217px;
    margin-inline: auto;
  }

  .cta-banner--typography-ocs-home-banner.cta-banner--image-auto .cta-banner__media {
    position: absolute;
    inset: 0;
    block-size: 100%;
  }

  .cta-banner--typography-ocs-home-banner.cta-banner--image-auto .cta-banner__picture,
  .cta-banner--typography-ocs-home-banner.cta-banner--image-auto .cta-banner__image {
    block-size: 100%;
    object-fit: cover;
  }

  .cta-banner--typography-ocs-home-banner.cta-banner--image-auto .cta-banner__content {
    position: relative;
    inset: auto;
    min-block-size: 217px;
    padding: 28px 20px 17px;
  }

  .cta-banner--typography-ocs-home-banner .cta-banner__heading {
    margin-block-end: 30px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: 0;
  }

  .cta-banner--typography-ocs-home-banner .cta-banner__body {
    max-inline-size: 240px;
    margin-block-end: 20px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
  }

  /* Media footer banner: tall artwork with a bottom-aligned CTA. */
  .cta-banner--typography-media-footer-banner.spacing-style {
    padding-block: 0;
    margin-block-end: 100px;
  }

  .cta-banner--typography-media-footer-banner.cta-banner--image-auto .cta-banner__inner {
    grid-column: 1 / -1;
    inline-size: 100%;
    max-inline-size: 1200px;
    min-block-size: 367px;
    margin-inline: auto;
  }

  .cta-banner--typography-media-footer-banner.cta-banner--image-auto .cta-banner__media {
    position: absolute;
    inset: 0;
    block-size: 100%;
  }

  .cta-banner--typography-media-footer-banner.cta-banner--image-auto .cta-banner__picture,
  .cta-banner--typography-media-footer-banner.cta-banner--image-auto .cta-banner__image {
    block-size: 100%;
    object-fit: cover;
  }

  .cta-banner--typography-media-footer-banner.cta-banner--image-auto .cta-banner__content {
    position: relative;
    inset: auto;
    justify-content: flex-end;
    min-block-size: 367px;
    padding: 0 20px 17px;
  }

  .cta-banner--typography-media-footer-banner .cta-banner__button.ocs-button {
    inline-size: min(100%, 270px);
    min-block-size: 42px;
    block-size: 42px;
    font-size: 14px;
  }

  @media (min-width: 750px) {
    .cta-banner--typography-media-footer-banner.cta-banner--image-auto .cta-banner__inner,
    .cta-banner--typography-media-footer-banner.cta-banner--image-auto .cta-banner__content {
      min-block-size: 414px;
    }

    .cta-banner--typography-media-footer-banner.cta-banner--image-auto .cta-banner__content {
      padding-block-end: 28px;
    }

    .cta-banner--typography-media-footer-banner .cta-banner__button.ocs-button {
      inline-size: min(100%, 303px);
      min-block-size: 44px;
      block-size: 44px;
      font-size: 16px;
    }
  }

  @media (min-width: 1920px) {
    .cta-banner--typography-media-footer-banner.cta-banner--image-auto .cta-banner__inner,
    .cta-banner--typography-ocs-home-banner.section--full-width.cta-banner--image-auto .cta-banner__inner,
    .cta-banner--typography-responsibility-callout.section--full-width .cta-banner__inner {
      max-inline-size: 1440px;
    }
  }

  /* Full-width editorial banner: natural-height copy over edge-to-edge artwork. */
  .cta-banner--typography-full-width-content-banner.spacing-style {
    padding-block: 0;
    margin-block-end: 60px;
  }

  .cta-banner--typography-full-width-content-banner .cta-banner__inner,
  .cta-banner--typography-full-width-content-banner.cta-banner--image-auto .cta-banner__inner {
    min-block-size: 0;
  }

  .cta-banner--typography-full-width-content-banner.cta-banner--image-auto .cta-banner__media {
    position: absolute;
    inset: 0;
    block-size: 100%;
  }

  .cta-banner--typography-full-width-content-banner.cta-banner--image-auto .cta-banner__picture,
  .cta-banner--typography-full-width-content-banner.cta-banner--image-auto .cta-banner__image {
    block-size: 100%;
    object-fit: cover;
  }

  .cta-banner--typography-full-width-content-banner .cta-banner__content,
  .cta-banner--typography-full-width-content-banner.cta-banner--image-auto .cta-banner__content {
    position: relative;
    inset: auto;
    min-block-size: 0;
    padding: 40px 15px;
  }

  .cta-banner--typography-full-width-content-banner .cta-banner__heading {
    margin-block-end: 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
  }

  .cta-banner--typography-full-width-content-banner .cta-banner__body {
    margin-block-end: 20px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
  }

  @media (min-width: 640px) {
    .cta-banner--typography-full-width-content-banner.spacing-style {
      margin-block-end: 100px;
    }

    .cta-banner--typography-full-width-content-banner .cta-banner__content,
    .cta-banner--typography-full-width-content-banner.cta-banner--image-auto .cta-banner__content {
      padding-block: 60px;
    }

    .cta-banner--typography-full-width-content-banner .cta-banner__heading {
      font-size: 32px;
    }

    .cta-banner--typography-full-width-content-banner .cta-banner__body {
      font-size: 18px;
    }
  }

  /* Social responsibility callout: compact green statement banner. */
  .cta-banner--typography-responsibility-callout.spacing-style {
    padding-block: 16px;
    margin-block-end: 100px;
  }

  .cta-banner--typography-responsibility-callout .cta-banner__inner,
  .cta-banner--typography-responsibility-callout .cta-banner__content {
    min-block-size: 0;
  }

  .cta-banner--typography-responsibility-callout .cta-banner__inner {
    max-inline-size: 1200px;
    margin-inline: auto;
  }

  .cta-banner--typography-responsibility-callout .cta-banner__content {
    padding: 28px 20px 17px;
  }

  .cta-banner--typography-responsibility-callout .cta-banner__heading {
    margin-block-end: 30px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: 0;
  }

  .cta-banner--typography-responsibility-callout .cta-banner__body {
    max-inline-size: 240px;
    margin-block-end: 20px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
  }

  /* Brand discover banner: natural-height, centered 700px content. */
  .cta-banner--typography-brand-discover.spacing-style {
    padding-block: 0;
    margin-block: 60px;
  }

  .cta-banner--typography-brand-discover .cta-banner__inner {
    max-inline-size: 700px;
    min-block-size: 0;
    margin-inline: auto;
    overflow: visible;
  }

  .cta-banner--typography-brand-discover .cta-banner__content {
    min-block-size: 0;
    padding: 0 15px;
  }

  .cta-banner--typography-brand-discover .cta-banner__heading {
    margin-block-end: 20px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
  }

  .cta-banner--typography-brand-discover .cta-banner__body {
    margin-block-end: 20px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
  }

  .cta-banner--typography-brand-discover .cta-banner__content > .cta-banner__body:first-child {
    margin-block-start: 20px;
  }

  .cta-banner--typography-brand-discover .cta-banner__button {
    position: relative;
    inline-size: min(100%, 320px);
  }

  /* Editorial image banner: responsive 2:1 artwork with content-driven mobile height. */
  .cta-banner--typography-editorial-image-banner.spacing-style {
    padding-block: 0;
    margin-block: 50px var(--cta-banner-spacing-after-mobile, 50px);
  }

  .cta-banner--content-ocs-grid.cta-banner--typography-editorial-image-banner.cta-banner--image-auto .cta-banner__inner {
    inline-size: 100%;
    max-inline-size: 1170px;
    min-block-size: 0;
    margin-inline: auto;
  }

  .cta-banner--typography-editorial-image-banner.cta-banner--image-auto .cta-banner__media {
    position: absolute;
    inset: 0;
    block-size: 100%;
  }

  .cta-banner--typography-editorial-image-banner.cta-banner--image-auto .cta-banner__picture,
  .cta-banner--typography-editorial-image-banner.cta-banner--image-auto .cta-banner__image {
    block-size: 100%;
    object-fit: cover;
  }

  .cta-banner--typography-editorial-image-banner.cta-banner--image-auto .cta-banner__content {
    position: relative;
    inset: auto;
    min-block-size: 0;
    inline-size: 100%;
    padding: 30px;
  }

  .cta-banner--typography-editorial-image-banner .cta-banner__heading {
    margin-block-end: 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
  }

  .cta-banner--typography-editorial-image-banner .cta-banner__body {
    max-inline-size: 370px;
    margin-block-end: 20px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
  }

  .cta-banner--typography-editorial-image-banner .cta-banner__button.ocs-button {
    min-block-size: 42px;
    block-size: 42px;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 20px;
  }

  /* Was 32px here and 40px on desktop — the furthest under spec of any CTA on the
     site. Height now comes from the shared ladder; the heavy 3px border is still
     this button's own. */
  .cta-banner__button--external-link {
    --ocs-button-border-width: 3px;
    --ocs-button-hover-background-color: transparent;
    --ocs-button-hover-border-color: #000;
    --ocs-button-hover-text-color: #000;

    min-block-size: var(--ocs-cta-height);
    block-size: auto;
    padding: 2px;
    font-size: var(--ocs-cta-font-size);
    font-weight: 500;
  }

  .cta-banner__button-text {
    display: inline-block;
    margin-inline-end: 10px;
    vertical-align: middle;
  }

  .cta-banner__button-icon {
    position: absolute;
    z-index: 1;
    inset-block-start: 50%;
    inset-inline-end: 10px;
    inline-size: 18px;
    block-size: 18px;
    color: currentColor;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .cta-banner__button-icon svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  @media (max-width: 639px) {
    .cta-banner--typography-responsibility-callout .cta-banner__inner {
      inline-size: calc(100% + 32px);
      margin-inline: -16px;
    }

    .cta-banner--typography-responsibility-callout.section--full-width .cta-banner__inner {
      inline-size: 100%;
      margin-inline: auto;
    }

    .cta-banner--typography-brand-discover .cta-banner__button {
      min-block-size: 32px;
      block-size: 32px;
      padding-block: 2px;
    }
  }

  @media (min-width: 640px) {
    .cta-banner--typography-ocs-home-banner.spacing-style {
      margin-block-end: 160px;
    }

    .cta-banner--typography-responsibility-callout .cta-banner__content {
      padding: 62px 20px 28px;
    }

    .cta-banner--typography-responsibility-callout .cta-banner__heading {
      font-size: 32px;
    }

    .cta-banner--typography-responsibility-callout .cta-banner__body {
      max-inline-size: 350px;
      font-size: 18px;
    }

    .cta-banner--typography-brand-discover.spacing-style {
      margin-block: 70px;
    }

    .cta-banner--typography-brand-discover .cta-banner__heading {
      font-size: 32px;
    }

    /* Height and font size are on the shared ladder, which steps at this same
       breakpoint — only the lighter border and roomier padding are this
       button's own at desktop. */
    .cta-banner__button--external-link {
      --ocs-button-border-width: 2px;

      padding: 7px;
    }

    .cta-banner__button-icon {
      inline-size: 25px;
      block-size: 25px;
    }

    .cta-banner--typography-editorial-image-banner.spacing-style {
      margin-block: 80px var(--cta-banner-spacing-after-desktop, 80px);
    }

    .cta-banner--typography-editorial-image-banner.cta-banner--image-auto .cta-banner__inner {
      aspect-ratio: 2 / 1;
    }

    .cta-banner--typography-editorial-image-banner.cta-banner--image-auto .cta-banner__content {
      position: absolute;
      inset: 50% auto auto 50%;
      inline-size: min(100%, var(--cta-banner-content-max-width, 450px));
      min-block-size: 0;
      padding: 20px 40px;
      transform: translate(-50%, -50%);
    }

    .cta-banner--typography-editorial-image-banner .cta-banner__heading {
      margin-block-end: 20px;
      font-size: 32px;
    }

    .cta-banner--typography-editorial-image-banner .cta-banner__button.ocs-button {
      min-block-size: 44px;
      block-size: 44px;
      font-size: 16px;
    }
  }

  /* Keep editorial banners content-driven throughout the phone/tablet layout.
     The desktop 2:1/absolute layout starts at 640px above; without this reset,
     narrower responsive previews inherit that shorter fixed box and clip the
     bottom of longer copy and its CTA. The fixed 2:1 composition begins at the
     theme's desktop breakpoint instead. */
  @media (max-width: 1023px) {
    .cta-banner--typography-editorial-image-banner.spacing-style {
      margin-block: 50px var(--cta-banner-spacing-after-mobile, 50px);
    }

    .cta-banner--typography-editorial-image-banner.cta-banner--image-auto .cta-banner__inner {
      aspect-ratio: auto;
    }

    .cta-banner--typography-editorial-image-banner.cta-banner--image-auto .cta-banner__content {
      position: relative;
      inset: auto;
      inline-size: 100%;
      min-block-size: 0;
      padding: 30px;
      transform: none;
    }

    .cta-banner--typography-editorial-image-banner .cta-banner__heading {
      margin-block-end: 10px;
      font-size: 18px;
    }

    .cta-banner--typography-editorial-image-banner .cta-banner__button.ocs-button {
      min-block-size: 42px;
      block-size: 42px;
      font-size: 14px;
    }
  }

  .cta-banner--content-ocs-grid.cta-banner--typography-editorial-image-banner.section--full-width.cta-banner--image-auto .cta-banner__inner {
    max-inline-size: calc(100vw - 30px);
  }

  @media (min-width: 640px) {
    .cta-banner--content-ocs-grid.cta-banner--typography-editorial-image-banner.section--full-width.cta-banner--image-auto .cta-banner__inner {
      max-inline-size: 570px;
    }
  }

  @media (min-width: 1024px) {
    .cta-banner--content-ocs-grid.cta-banner--typography-editorial-image-banner.section--full-width.cta-banner--image-auto .cta-banner__inner {
      max-inline-size: 930px;
    }
  }

  @media (min-width: 1280px) {
    .cta-banner--content-ocs-grid.cta-banner--typography-editorial-image-banner.section--full-width.cta-banner--image-auto .cta-banner__inner {
      max-inline-size: 1170px;
    }
  }

  @media (min-width: 1920px) {
    .cta-banner--content-ocs-grid.cta-banner--typography-editorial-image-banner.section--full-width.cta-banner--image-auto .cta-banner__inner {
      max-inline-size: 1410px;
    }
  }

  @media (min-width: 750px) {
    .cta-banner--typography-ocs-home-banner.cta-banner--image-auto .cta-banner__inner,
    .cta-banner--typography-ocs-home-banner.cta-banner--image-auto .cta-banner__content {
      min-block-size: 270px;
    }

    .cta-banner--typography-ocs-home-banner.cta-banner--image-auto .cta-banner__content {
      padding: 62px 20px 28px;
    }

    .cta-banner--typography-ocs-home-banner .cta-banner__heading {
      font-size: 32px;
    }

    .cta-banner--typography-ocs-home-banner .cta-banner__body {
      max-inline-size: var(--cta-banner-body-max-width, 350px);
      font-size: 18px;
    }
  }
/* END_SECTION:cta-banner */

/* START_SECTION:explore-products (INDEX:20) */
.explore-products,
  .explore-products *,
  .explore-products *::before,
  .explore-products *::after {
    box-sizing: border-box;
  }

  .explore-products {
    --explore-products-columns: 3;
  }

  /* Header */
  .explore-products__header {
    text-align: center;
  }

  .explore-products__heading {
    font-family: var(--font-h2--family, var(--font-body--family));
    font-size: 24px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: var(--font-h2--letter-spacing, 0);
    text-transform: var(--font-h2--case, none);
    color: var(--color-foreground);
    margin: 0;
  }

  .explore-products__subheading {
    font-family: var(--font-paragraph--family, var(--font-body--family));
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    color: #3f3f3f;
    opacity: 1;
    margin: 0;
    margin-block-start: 22px;
  }

  /* Card grid */
  .explore-products__list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-block-start: 44px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .explore-products__item {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .explore-products__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    height: 100%;
    justify-content: space-between;
  }

  /* Image */
  .explore-products__image-wrap {
    aspect-ratio: 1 / 1;
    display: block;
    overflow: hidden;
    width: 100%;
  }

  .explore-products__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .explore-products__image--placeholder {
    background-color: #f2f2f2;
    width: 100%;
    height: 100%;
  }

  /*
    Only reachable when the card has no button — with one, the image link is
    aria-hidden and out of the tab order, so this never gets the chance to draw.
  */
  a.explore-products__image-wrap:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  /* Card title */
  .explore-products__title {
    font-family: var(--font-heading--family, var(--font-body--family));
    font-size: 20px;
    font-weight: 500;
    line-height: 1.22;
    color: var(--color-foreground);
    text-align: center;
    margin: 0;
    margin-block-start: 15px;
  }

  /* Width and placement are card-specific; outline button geometry is global. */
  .explore-products__button.ocs-button {
    width: 100%;
    margin-block-start: 20px;
  }

  /* Compact category-link grid used by landing-page search-by-type sections. */
  .explore-products--layout-landing-grid .explore-products__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 20px;
  }

  .explore-products--layout-landing-grid .explore-products__button.ocs-button {
    min-block-size: 42px;
    height: auto;
    padding: 10px 8px;
    font-size: 12px;
    line-height: 20px;
  }

  .explore-products--layout-buttons-only .explore-products__image-wrap,
  .explore-products--layout-buttons-only .explore-products__title {
    display: none;
  }

  .explore-products--layout-buttons-only .explore-products__list {
    margin-block-start: 30px;
    gap: 40px 100px;
  }

  .explore-products--layout-buttons-only .explore-products__item {
    padding-inline: 0;
  }

  .explore-products--layout-buttons-only .explore-products__button.ocs-button {
    min-block-size: 42px;
    block-size: 42px;
    margin-block-start: 0;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 20px;
  }

  /* “Search by Type” grid from the original site: 1100px container, 300px buttons, 100px gutters, 40px row gap. */
  @media screen and (min-width: 1024px) {
    .explore-products--layout-buttons-only .explore-products__list,
    .explore-products--layout-buttons-only.explore-products--content-ocs-grid .explore-products__list {
      max-inline-size: 1100px;
      margin-inline: auto;
      row-gap: 40px;
    }

    .explore-products--layout-buttons-only .explore-products__button.ocs-button {
      min-block-size: 44px;
      block-size: 44px;
    }
  }

  /* Legacy homepage layout: three columns from tablet, with the original 15px/50px card gutters. */
  @media screen and (min-width: 640px) {
    .explore-products--layout-landing-grid .explore-products__list {
      grid-template-columns: repeat(var(--explore-products-columns), minmax(0, 1fr));
      column-gap: 0;
    }

    .explore-products__heading {
      font-size: 32px;
    }

    .explore-products__subheading {
      font-size: 18px;
    }


    .explore-products__title {
      margin-block-start: 20px;
    }

    .explore-products__list {
      grid-template-columns: repeat(var(--explore-products-columns), 1fr);
      column-gap: 0;
      row-gap: 20px;
    }

    .explore-products__item {
      padding-inline: 15px;
    }
  }

  @media screen and (min-width: 1024px) {
    .explore-products__list {
      margin-block-start: 45px;
    }

    .explore-products__item {
      padding-inline: 50px;
    }

    .explore-products__title {
      font-size: 26px;
    }
  }

  /* OCS container widths used by landing-page explore grids. */
  .explore-products--content-ocs-grid .explore-products__header,
  .explore-products--content-ocs-grid .explore-products__list {
    inline-size: 100%;
    max-inline-size: calc(100vw - 30px);
    margin-inline: auto;
  }

  @media screen and (min-width: 640px) {
    .explore-products--content-ocs-grid .explore-products__header,
    .explore-products--content-ocs-grid .explore-products__list {
      max-inline-size: 570px;
    }
  }

  @media screen and (min-width: 1024px) {
    .explore-products--content-ocs-grid .explore-products__header,
    .explore-products--content-ocs-grid .explore-products__list {
      max-inline-size: 930px;
    }
  }

  @media screen and (min-width: 1280px) {
    .explore-products--content-ocs-grid .explore-products__header,
    .explore-products--content-ocs-grid .explore-products__list {
      max-inline-size: 1170px;
    }
  }

  @media screen and (min-width: 1920px) {
    .explore-products--content-ocs-grid .explore-products__header,
    .explore-products--content-ocs-grid .explore-products__list {
      max-inline-size: 1410px;
    }
  }

  /*
    OCS card grids bleed 15px past the container on each side, so each
    300px card lands on the original grid (1200px across at desktop).
    Buttons-only grids keep their own 1100px container.
  */
  .explore-products--content-ocs-grid:not(.explore-products--layout-buttons-only) .explore-products__button.ocs-button {
    min-block-size: 42px;
    block-size: 42px;
    padding: 10px 20px;
  }

  @media screen and (min-width: 640px) {
    .explore-products--content-ocs-grid:not(.explore-products--layout-buttons-only) .explore-products__list {
      max-inline-size: 600px;
    }

    .explore-products--content-ocs-grid:not(.explore-products--layout-buttons-only) .explore-products__button.ocs-button {
      min-block-size: 44px;
      block-size: 44px;
    }
  }

  @media screen and (min-width: 1024px) {
    .explore-products--content-ocs-grid:not(.explore-products--layout-buttons-only) .explore-products__list {
      max-inline-size: 960px;
    }
  }

  @media screen and (min-width: 1280px) {
    .explore-products--content-ocs-grid:not(.explore-products--layout-buttons-only) .explore-products__list {
      max-inline-size: 1200px;
    }
  }

  @media screen and (min-width: 1920px) {
    .explore-products--content-ocs-grid:not(.explore-products--layout-buttons-only) .explore-products__list {
      max-inline-size: 1440px;
    }
  }

  /* Retail store hub Store Profiles: scoped homepage-explore layout */
  [id$="__store_profiles"] .explore-products {
    --store-profiles-container-width: 100%;
    --full-page-grid-central-column-width: min(var(--store-profiles-container-width), 100%);
    --full-page-grid-margin: minmax(0, 1fr);
    --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width) var(--full-page-grid-margin);

    text-align: center;
    margin-block-end: 116px;
  }

  [id$="__store_profiles"] .explore-products__header {
    padding-inline: 15px;
  }

  [id$="__store_profiles"] .explore-products__heading {
    font-weight: 600;
    line-height: 1.22;
    margin-block-end: 20px;
  }

  [id$="__store_profiles"] .explore-products__subheading {
    font-weight: 400;
    text-shadow: 0.15px 0 0 currentColor;
    line-height: 1.3;
    color: #3f3f3f;
    opacity: 1;
    margin-block-start: 0;
    margin-block-end: 20px;
  }

  [id$="__store_profiles"] .explore-products__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 20px;
    margin-block-start: 20px;
  }

  [id$="__store_profiles"] .explore-products__list::after {
    content: none;
  }

  [id$="__store_profiles"] .explore-products__item {
    display: flex;
    float: none;
    width: auto;
    min-width: 0;
    margin-block-end: 0;
    padding-inline: 15px;
  }

  [id$="__store_profiles"] .explore-products__card {
    height: 100%;
  }

  [id$="__store_profiles"] .explore-products__image {
    object-position: center center;
  }

  [id$="__store_profiles"] .explore-products__title {
    font-size: 16px;
    line-height: 1.22;
    margin-block-start: 0;
    margin-block-end: 20px;
    padding-block-start: 10px;
  }

  /* Height and font size come from the shared CTA ladder. This block used to set
     42px/14px here and 44px/16px in the two blocks below, which was a third
     ladder for one button. */
  [id$="__store_profiles"] .explore-products__button.ocs-button {
    display: block;
    height: auto;
    min-height: var(--ocs-cta-height);
    padding: 10px 20px;
    font-size: var(--ocs-cta-font-size);
    line-height: 20px;
    letter-spacing: 0.3px;
    text-align: center;
    margin-block-start: auto;
  }

  @media screen and (min-width: 640px) {
    [id$="__store_profiles"] .explore-products {
      --store-profiles-container-width: 600px;
    }

    [id$="__store_profiles"] .explore-products__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 1024px) {
    [id$="__store_profiles"] .explore-products {
      --store-profiles-container-width: 960px;
    }
  }

  @media screen and (min-width: 1025px) {
    [id$="__store_profiles"] .explore-products__list {
      margin-block-start: 45px;
    }

    [id$="__store_profiles"] .explore-products__item {
      padding-inline: 50px;
    }

    [id$="__store_profiles"] .explore-products__title {
      font-size: 24px;
      line-height: 1.22;
      margin-block-start: 0;
      min-height: 107.8px;
      padding-block-start: 20px;
    }
  }

  @media screen and (min-width: 1280px) {
    [id$="__store_profiles"] .explore-products {
      --store-profiles-container-width: 1200px;
    }
  }

  @media screen and (min-width: 1920px) {
    [id$="__store_profiles"] .explore-products {
      --store-profiles-container-width: 1440px;
    }
  }
/* END_SECTION:explore-products */

/* START_SECTION:faq-topics (INDEX:21) */
.faq-topics {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl, 32px);
    box-sizing: border-box;
    width: 100%;
    margin-inline: auto;
    padding-inline: 15px;
    margin-top: 30px;
  }

  /* Search */
  .faq-topics__search {
    display: block;
  }

  .faq-topics__search-form {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #979797;
    padding: 0 12px;
    background: rgb(var(--color-background-rgb, 255 255 255));
    width: 100%;
    margin: auto;
  }

  .faq-topics__search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: #3f3f3f;
  }

  .faq-topics__search-input {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    background: transparent;
    padding: 12px 10px;
    font-size: 15px;
    color: #3f3f3f;
    min-width: 0;
    letter-spacing: -.3px;
    height: 42px;
  }

  /* Hide the native search "clear" control; we render our own. */
  .faq-topics__search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  /* Matched letters in a search result title (Algolia <strong> highlight). */
  .faq-topics__result-title strong {
    font-weight: 700;
  }

  .faq-topics__no-results {
    margin: 0;
    padding-top: 8px;
    text-align: center;
    color: #3f3f3f;
  }

  .faq-topics__selector {
    display: block;
  }

  .faq-topics__nav {
    list-style: none;
    margin-top: 20px;
    padding: 0;
    display: block;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .faq-topics__nav-item {
    position: static;
  }

  .faq-topics__nav-toggle {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border: 0;
    background: transparent;
    text-transform: uppercase;
    cursor: pointer;
  }

  .faq-topics__nav-toggle .icon-caret {
    transition: transform 0.3s ease;
    transform: rotate(270deg);
    width: 8px;
    height: 8px;
  }

  .faq-topics__selector.is-open .faq-topics__nav-toggle .icon-caret {
    transform: rotate(90deg);
  }

  .faq-topics__overlay-menu {
    list-style: none;
    margin: 0;
    padding-block: 12px 0px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    background: transparent;
    padding-left: 0px;
  }

  .faq-topics__selector.is-open .faq-topics__overlay-menu {
    display: block;
    animation: faq-topics-fade-in-up 0.2s both;
  }
  

  .faq-topics__selector.is-open .faq-topics__overlay-menu::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: -10000px;
    right: -10000px;
    width: 100vw;
    height: 10000px;
    margin: 0 auto;
    z-index: -1;
    background: rgb(var(--color-background-rgb, 255 255 255) / 0.9);
    box-shadow: 1px 2px 2px rgb(0 0 0 / 0.05);
  }

  .faq-topics__overlay-menu > li {
    display: block;
    font-weight: 600;
    text-transform: none;
  }

  .faq-topics__overlay-link {
    display: inline-block;
    padding: 8px;
    text-decoration: none;
    cursor: pointer;
    color: #3f3f3f;
    font-size: 13px;
  }

  .faq-topics__overlay-link:hover,
  .faq-topics__overlay-link:focus-visible {
    text-decoration: none;
  }

  @keyframes faq-topics-fade-in-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .faq-topics__featured-list,
  .faq-topics__category-list {
    display: flex;
    flex-direction: column;
  }

  .faq-topics__category {
    scroll-margin-top: var(--header-height, 80px);
  }

  .faq-topics__featured-heading,
  .faq-topics__category-heading {
    text-align: center;
    margin-block-end: var(--margin-md, 16px);
  }

  .faq-topics__item .details {
    position: relative;
    border-bottom: solid 1px #979797;
    padding: 0 10px;  
  }

  .faq-topics .details__header {
    min-height: var(--minimum-touch-target);
    font-size: 15px;
    position: relative;
    margin: 0;
    text-transform: none;
    padding: 10px 30px 10px 0;
    font-weight: 400;
    color: #3f3f3f;
    /* Production question text inherits the body line-height (1.3), not 1.22. */
    line-height: 1.3;
  }

  .faq-topics__item .details[open] .details__header {
    font-weight: 600;
  }

  summary .faq-topics__toggle-icon {
    width: 14px;
    height: 14px;
    position: absolute;
    right: 0px;
  }

  .faq-topics__item .details-content p {
      margin-bottom: 20px;
      font-size: 15px;
      line-height: 1.3;
  }

  .faq-topics__item .details-content p:empty,
  .faq-topics__item .details-content p:has(> br:only-child) {
    display: none;
  }


  .faq-topics__pagination {
    display: flex;
    justify-content: center;
    margin-block-start: var(--margin-md, 16px);
    padding-top: 20px;
  }

  .faq-topics__pagination:empty {
    display: none;
  }

  .faq-topics__pagination[hidden] {
    display: none;
  }

  .faq-topics__placeholder {
    margin: 0;
    padding: 40px 20px;
    text-align: center;
    border: 1px dashed rgb(var(--color-foreground-rgb, 26 26 26) / 0.3);
    border-radius: 8px;
  }

  .faq-topics__featured-heading, .faq-topics__category-heading {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    color: #000;
    margin-bottom: 20px;
  }

  .faq-topics__featured, .faq-topics__category {
    padding-top: 30px;
    padding-bottom: 30px;
  }

    @media screen and (min-width: 640px) {
    .faq-topics {
      width: 576px;
      margin-top: 0px;
    }
    .faq-topics .details__header {
      font-size: 18px;
    }
    /* Answer body follows the production body scale: 18px from 640px up. */
    .faq-topics__item .details-content p {
      font-size: 18px;
    }
  }

    @media screen and (min-width: 750px) {
    .faq-topics__search-input {
      letter-spacing: 0px;
    }
    .faq-topics__nav-toggle .icon-caret {
      width: 10px;
      height: 10px;
    }
    .faq-topics__search-form { 
      width: 75%;
    }
    summary .faq-topics__toggle-icon {
      width: 16px;
      height: 16px;
    }
  }

  @media screen and (min-width: 1024px) {
    .faq-topics {
      width: 764px;
    }
    .faq-topics__pagination {
      padding-top: 40px;
    }
    /* Nav toggle + overlay links step up to 16px at 1024px (production breakpoint). */
    .faq-topics__nav-toggle {
      font-size: 16px;
    }
    .faq-topics__overlay-link {
      font-size: 16px;
    }
    .faq-topics__featured-heading, .faq-topics__category-heading {
      font-size: 24px;
    }
  }
/* END_SECTION:faq-topics */

/* START_SECTION:featured-articles (INDEX:22) */
/*
    Reused from theme:
    - .section, .section--page-width, .section--full-width
    - .section-background
    - color-[color_scheme] (background + foreground driven by theme color system)
    - .spacing-style (padding-block-start/end with responsive scaling snippet)
    - var(--color-foreground), var(--color-background)
    - var(--font-h2--family), var(--font-h2--weight), var(--font-h2--size), etc.
    - var(--font-paragraph--family), var(--font-paragraph--size), var(--opacity-60)
  */

  .featured-articles,
  .featured-articles *,
  .featured-articles *::before,
  .featured-articles *::after {
    box-sizing: border-box;
  }

  /* ── Section defaults ─────────────────────────────────────────── */

  .featured-articles {
    --featured-articles-frame-color: #2d6a30;
    --featured-articles-columns: 3;
    --featured-articles-gap: 40px;
  }

  .featured-articles.spacing-style {
    padding-block: 0;
    margin-block: 60px;
  }

  .featured-articles--spacing-brand-page.spacing-style {
    margin-block: 60px 0;
  }

  @media (max-width: 639px) {
    .featured-articles--spacing-landing_editorial.featured-articles--content-ocs-grid .featured-articles__intro {
      font-size: 15px;
    }

    .featured-articles--spacing-landing_editorial.featured-articles--content-ocs-grid .featured-articles__header--has-intro + .featured-articles__list {
      margin-block-start: 30px;
    }

    .featured-articles--spacing-landing_editorial.featured-articles--content-ocs-grid .featured-articles__item {
      padding-block-end: 0;
    }

    .featured-articles--spacing-landing_editorial.featured-articles--content-ocs-grid .featured-articles__list {
      padding-block-end: 40px;
    }

    .featured-articles--spacing-landing_editorial.featured-articles--content-ocs-grid .featured-articles__title {
      margin-block-end: 0;
    }
  }

  /* ── Header ───────────────────────────────────────────────────── */

  .featured-articles__header {
    inline-size: min(100%, 933px);
    margin-inline: auto;
    text-align: center;
  }

  .featured-articles__heading {
    font-family: var(--font-h2--family, var(--font-body--family));
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: var(--font-h2--letter-spacing, 0);
    text-transform: var(--font-h2--case, none);
    color: var(--color-foreground);
    margin: 0;
    margin-block-end: 20px;
  }

  .featured-articles__header--has-heading-line-two .featured-articles__heading {
    margin-block-end: 0;
  }

  .featured-articles__heading-line-two {
    margin: 0 0 20px;
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family, var(--font-body--family));
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
  }

  .featured-articles__intro {
    font-family: var(--font-paragraph--family, var(--font-body--family));
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    color: #3f3f3f;
    opacity: 1;
    margin: 0;
  }

  .featured-articles__intro p {
    margin: 0;
  }

  /* ── Card grid ────────────────────────────────────────────────── */

  .featured-articles__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--featured-articles-gap, 40px);
    list-style: none;
    margin: 0;
    margin-block-start: 30px;
    padding: 0;
  }

  .featured-articles__item {
    list-style: none;
  }

  .featured-articles__article {
    margin: 0;
    text-align: center;
  }

  /* ── Image frame ──────────────────────────────────────────────── */

  .featured-articles__image-frame {
    background: var(--featured-articles-card-background, var(--featured-articles-frame-color));
    border-radius: 0;
    display: block;
    inline-size: 100%;
    overflow: hidden;
    padding: 14px;
  }

  .featured-articles__image-frame picture {
    display: block;
  }

  .featured-articles__image {
    aspect-ratio: 727 / 546;
    border-radius: 14px;
    display: block;
    height: auto;
    inline-size: 100%;
    object-fit: cover;
  }

  .featured-articles__image--placeholder {
    background-color: #f2f2f2;
  }

  /* Use this when the artwork already includes its own border/frame. */
  .featured-articles--image-frame-embedded .featured-articles__image-frame {
    background: var(--featured-articles-card-background, transparent);
    overflow: visible;
    padding: 0;
  }

  .featured-articles--image-frame-embedded .featured-articles__image {
    border-radius: 0;
  }

  /* ── Card text ────────────────────────────────────────────────── */

  .featured-articles__title {
    font-family: var(--font-paragraph--family, var(--font-body--family));
    font-size: 15px;
    font-weight: 600;
    line-height: 1.22;
    color: var(--color-foreground);
    margin: 0;
    margin-block-start: 21px;
  }

  /*
    The whole card is the link; the treatment below stays on the title alone, so
    this carries none of it.
  */
  .featured-articles__card-link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .featured-articles__link {
    color: var(--color-foreground);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 1px;
  }

  .featured-articles__title--underline .featured-articles__title-text {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 1px;
  }

  .featured-articles__merged-excerpt {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
  }

  /*
    :focus-visible cannot fire on a span, so the focused element is the card link
    and the title is dimmed from there. Hover is unchanged: it still tracks the
    title text, not the image.
  */
  .featured-articles__link:hover,
  .featured-articles__card-link:focus-visible .featured-articles__link {
    opacity: 0.75;
  }

  .featured-articles__card-link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
    border-radius: 2px;
  }

  .featured-articles__excerpt {
    font-family: var(--font-paragraph--family, var(--font-body--family));
    font-size: 15px;
    font-weight: 400;
    line-height: 1.22;
    color: #3f3f3f;
    margin: 0;
    margin-block-start: 0;
  }

  .featured-articles__excerpt p {
    margin: 0;
  }

  .featured-articles__excerpt p + p {
    margin-block-start: 0.75em;
  }

  /* ── Breakpoint: tablet + desktop ────────────────────────────── */

  @media (min-width: 640px) {
    .featured-articles.spacing-style {
      margin-block: 70px;
    }

    .featured-articles--spacing-brand-page.spacing-style {
      margin-block: 70px 20px;
    }

    .featured-articles__heading {
      font-size: 32px;
    }

    .featured-articles__intro {
      font-size: 18px;
    }

    .featured-articles__list {
      grid-template-columns: repeat(var(--featured-articles-columns, 3), 1fr);
      inline-size: min(100%, 1169px);
      margin-block-start: 40px;
      margin-inline: auto;
    }

    .featured-articles__title,
    .featured-articles__excerpt {
      font-size: 18px;
    }
  }

  /* ── Legacy OCS brand articles ────────────────────────────────── */

  .featured-articles--content-ocs-grid .featured-articles__header {
    inline-size: min(100%, calc(100vw - 30px));
    max-inline-size: none;
  }

  .featured-articles--content-ocs-grid .featured-articles__heading {
    margin-block-end: 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
  }

  .featured-articles--content-ocs-grid .featured-articles__intro {
    font-size: 18px;
    line-height: 1.3;
    opacity: 1;
  }

  .featured-articles--content-ocs-grid .featured-articles__list {
    max-inline-size: calc(100vw - 40px);
    margin-block-start: 0;
    margin-inline: auto;
    gap: var(--featured-articles-gap, 40px);
  }

  .featured-articles--content-ocs-grid .featured-articles__header--has-intro + .featured-articles__list {
    margin-block-start: 40px;
  }

  .featured-articles--content-ocs-grid .featured-articles__item {
    padding-block-end: 20px;
  }

  .featured-articles--content-ocs-grid .featured-articles__title {
    margin-block-start: 20px;
    margin-block-end: 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.22;
  }

  .featured-articles--content-ocs-grid .featured-articles__link {
    text-decoration: none;
  }

  .featured-articles--content-ocs-grid .featured-articles__title--underline .featured-articles__title-text {
    text-decoration: underline;
  }

  .featured-articles--content-ocs-grid .featured-articles__link:hover,
  .featured-articles--content-ocs-grid .featured-articles__card-link:focus-visible .featured-articles__link {
    opacity: 1;
  }

  @media (min-width: 640px) {
    .featured-articles--content-ocs-grid .featured-articles__header,
    .featured-articles--content-ocs-grid .featured-articles__list {
      max-inline-size: 570px;
    }

    .featured-articles--content-ocs-grid .featured-articles__heading {
      font-size: 32px;
    }

    .featured-articles--content-ocs-grid .featured-articles__list {
      grid-template-columns: repeat(var(--featured-articles-columns, 3), minmax(0, 1fr));
    }

    .featured-articles--content-ocs-grid .featured-articles__title {
      font-size: 18px;
    }
  }

  @media (min-width: 1024px) {
    .featured-articles--content-ocs-grid .featured-articles__header,
    .featured-articles--content-ocs-grid .featured-articles__list {
      max-inline-size: 930px;
    }
  }

  @media (min-width: 1280px) {
    .featured-articles--content-ocs-grid .featured-articles__header,
    .featured-articles--content-ocs-grid .featured-articles__list {
      max-inline-size: 1170px;
    }
  }

  @media (min-width: 1920px) {
    .featured-articles--content-ocs-grid .featured-articles__header,
    .featured-articles--content-ocs-grid .featured-articles__list {
      max-inline-size: 1410px;
    }

    .featured-articles--content-ocs-grid.section--full-width .featured-articles__list {
      inline-size: min(100%, 1410px);
    }
  }

  /* ── Brand overview width ───────────────────────────────────── */

  .featured-articles--content-brand-overview .featured-articles__header,
  .featured-articles--content-brand-overview .featured-articles__list {
    inline-size: calc(100vw - 30px);
    max-inline-size: none;
    margin-inline: auto;
  }

  @media (min-width: 640px) {
    .featured-articles--content-brand-overview .featured-articles__header,
    .featured-articles--content-brand-overview .featured-articles__list {
      max-inline-size: 600px;
    }
  }

  @media (min-width: 1024px) {
    .featured-articles--content-brand-overview .featured-articles__header,
    .featured-articles--content-brand-overview .featured-articles__list {
      max-inline-size: 960px;
    }
  }

  @media (min-width: 1280px) {
    .featured-articles--content-brand-overview .featured-articles__header,
    .featured-articles--content-brand-overview .featured-articles__list {
      max-inline-size: 1200px;
    }
  }

  @media (min-width: 1920px) {
    .featured-articles--content-brand-overview .featured-articles__header,
    .featured-articles--content-brand-overview .featured-articles__list {
      max-inline-size: 1440px;
    }
  }

  /* ── OCS landing-page article grid (narrow 995px container) ─── */

  @media (min-width: 1280px) {
    .featured-articles--content-landing-narrow .featured-articles__header,
    .featured-articles--content-landing-narrow .featured-articles__list {
      max-inline-size: 995px;
    }
  }

  @media (min-width: 1920px) {
    .featured-articles--content-landing-narrow .featured-articles__header,
    .featured-articles--content-landing-narrow .featured-articles__list {
      max-inline-size: 995px;
    }
  }

  /* ── Motion ───────────────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    .featured-articles,
    .featured-articles *,
    .featured-articles *::before,
    .featured-articles *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
/* END_SECTION:featured-articles */

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

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

  /* Here I should maybe set the width to auto when the ratio is set to adapt */
  .featured-product-section .product-media-container.constrain-height {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);

    @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;
    }
  }
/* END_SECTION:featured-product */

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

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

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

  .utilities > * {
    text-align: center;

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

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

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

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

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

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

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

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

/* START_SECTION:footer (INDEX:27) */
.footer-section-menu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    width: 100%;
    margin-block-end: var(--footer-gap, 20px);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-section-menu {
      grid-template-columns: repeat(2, 1fr);
    }
  }

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

  @media screen and (max-width: 749px) {
    .footer-section-menu {
      text-align: center;
    }
  }

  .footer-section-menu__heading {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  .footer-section-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--footer-menu-item-gap, 12px);
  }

  .footer-section-menu__item {
    line-height: 1.4;
  }

  /* Design system fixes the footer link colour at #3F3F3F. The scheme's muted
     foreground resolved to 60% black, and hover darkened to full black; the
     underline alone now carries the hover state. */
  .footer-section-menu__link {
    font-size: 0.875rem;
    color: #3f3f3f;
    text-decoration: none;
  }

  .footer-section-menu__link:hover {
    color: #3f3f3f;
    text-decoration: underline;
  }

  .footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
  }

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

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

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

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

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

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

/* START_SECTION:glossary-terms (INDEX:28) */
/*
   * Ported from the old theme's compiled css_theme.css (.glossary-of-terms__*,
   * .accordion-item*). Every property is pinned explicitly rather than inherited from
   * theme vars: Horizon concatenates all section stylesheets into one sheet with no
   * guaranteed order between equal-specificity rules.
   *
   * Production breakpoints: 640px (body scale) and 1024px (headings / nav).
   */

  /* Opt out of Horizon's `.section` grid, the way faq-topics.liquid does.
     `.section` is a three-column grid whose centre column is
     `min(--page-width - --page-margin * 2, 100% - --page-margin * 2)`, and both of those
     variables are only defined by the `page-width-*` classes, which this section doesn't
     carry. Undefined makes the track list invalid, so children fall into an implicit
     auto-sized column that shrinks to its content instead of filling the container —
     the page ends up narrower than production. Flex removes the grid from the equation:
     the width and padding below then give exactly .container-narrow's box, 546px at 640
     and 734px at 1024.

     Doubled class because `.section` sets `display` and `width` at the same (0,1,0) and
     nothing guarantees the order of two equal-specificity rules in the compiled sheet. */
  .glossary-terms.glossary-terms {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    margin-inline: auto;
    padding-inline: 15px;
  }

  /* The page heading lives in a separate `section` block group in the JSON template, so
     it can't be styled from inside that section. A text block's font_size setting is a
     single value and can't express the 26px -> 55px ramp, hence this global hook. */
  /* The class is doubled deliberately. The heading is a text block with type_preset "h1",
     which puts an "h1" class on the block wrapper, and base.css styles it through
     `.text-block.h1 > *` — specificity (0,2,0), which outranks a plain `.glossary-header h1`
     at (0,1,1). Doubling to (0,2,1) wins without reaching into Horizon's internals.
     Every property below is one that rule sets; leaving any out hands it back to the
     theme's own h1 preset (currently 700 weight and a clamp() up to 56px). */
  .glossary-header.glossary-header h1,
  .glossary-header.glossary-header .h1 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
    text-align: center;
  }

  /* The intro sits under an "rte" preset, which Horizon gives no size rule of its own, so it
     falls through to `body` — 18px at every width, line-height 1.6. Production's intro
     inherits the legacy body instead: 15px -> 18px at 640, line-height 1.3. */
  .glossary-header p {
    font-size: 15px;
    line-height: 1.3;
    color: #3f3f3f;
  }

  .glossary-header {
    padding-top: 20px;
    text-align: center;
  }

  /* ---------- Search / filter / sort nav ---------- */

  .glossary-terms__nav {
    list-style: none;
    display: block;
    text-align: center;
    position: relative;
    z-index: 1;
    margin: 50px 0 20px;
    padding: 0;
  }

  /* The search field floats; contain it so the term list doesn't ride up beside it.
     A clearfix rather than overflow:hidden, which would clip the overlay menus. */
  .glossary-terms__nav::after {
    content: "";
    display: table;
    clear: both;
  }

  /* Inline-block rather than flex so the nav matches production's layout, where the
     search field floats and the two icon buttons sit beside it. */
  .glossary-terms__nav > li {
    display: inline-block;
    position: relative;
    vertical-align: top;
  }

  .glossary-terms__search-wrapper {
    text-align: justify;
    float: left;
    width: calc(100% - 150px);
  }

  .glossary-terms__search {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 44px;
    border: solid 1px #979797;
    background: rgb(var(--color-background-rgb, 255 255 255));
    box-sizing: border-box;
  }

  /* content-box because the padding here is a gutter beside the glyph, not part of it.
     Under the global border-box these 20px of padding would exceed the width and collapse
     the content box to zero, pinning the icon against the container's left border.
     Production's glyph is an icon font inheriting the body size, hence 15px -> 18px. */
  .glossary-terms__search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 15px;
    height: 15px;
    padding-left: 15px;
    padding-right: 5px;
    color: #979797;
  }

  .glossary-terms__search-icon > svg,
  .glossary-terms__nav-icon > svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .glossary-terms__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    margin: 0;
    padding: 0 0 0 10px;
    height: 100%;
    /* Production's glossary input takes the 16px from its input[type=text] base rule and
       only overrides line-height. The 15px/-0.3px pairing belongs to the FAQ, brands and
       stores search forms, which the glossary form is not part of. */
    font-family: var(--font-body--family);
    font-size: 16px;
    line-height: 43px;
    color: #3f3f3f;
  }

  /* We never render a clear button; hide the native one so the field matches production. */
  .glossary-terms__search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  .glossary-terms__filter,
  .glossary-terms__sort {
    width: 60px;
  }

  .glossary-terms__nav-toggle {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: #3f3f3f;
    cursor: pointer;
  }

  .glossary-terms__nav-icon {
    display: block;
    width: 17px;
    height: 17px;
    padding: 10px 15px;
    box-sizing: content-box;
  }

  .glossary-terms__overlay-menu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    background: transparent;
    margin: 0;
    padding: 12px 0 30px;
  }

  .glossary-terms__nav-item.is-open {
    position: static;
  }

  .glossary-terms__nav-item.is-open .glossary-terms__overlay-menu {
    display: block;
    animation: glossary-terms-fade-in-up 0.2s both;
    transform: none;
  }

  .glossary-terms__nav-item.is-open .glossary-terms__overlay-menu::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: -10000px;
    right: -10000px;
    width: 100vw;
    height: 10000px;
    margin: 0 auto;
    z-index: -1;
    display: block;
    background: rgb(var(--color-background-rgb, 255 255 255) / 0.9);
    box-shadow: 1px 2px 2px rgb(0 0 0 / 0.05);
  }

  .glossary-terms__overlay-label {
    display: block;
    font-size: 16px;
    padding-top: 27px;
    padding-bottom: 27px;
    text-transform: uppercase;
    color: #4a4a4a;
  }

  .glossary-terms__overlay-menu > li {
    display: block;
    font-weight: 600;
    text-transform: none;
    transition: all 0.3s;
  }

  .glossary-terms__overlay-menu > li input {
    display: none;
  }

  .glossary-terms__overlay-menu > li label {
    display: block;
    padding: 12px;
    cursor: pointer;
  }

  .glossary-terms__overlay-menu > li label span {
    display: inline-block;
    border-bottom: 1px solid transparent;
    font-weight: 600;
    color: #4a4a4a;
  }

  .glossary-terms__overlay-menu > li:hover label span {
    border-bottom: 1px solid #000;
    color: #000;
  }

  .glossary-terms__overlay-menu > li input:checked + label,
  .glossary-terms__overlay-menu > li input:checked + label span {
    font-weight: 700;
    text-decoration: underline;
    color: #000;
  }

  @keyframes glossary-terms-fade-in-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* ---------- Applied filter chips ---------- */

  .glossary-terms__applied-filters {
    margin-bottom: 30px;
  }

  .glossary-terms__applied-filters[hidden] {
    display: none;
  }

  .glossary-terms__chip {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-weight: 600;
    color: #000;
    font-size: 15px;
    padding: 0 32px 0 0;
    cursor: pointer;
  }

  .glossary-terms__chip-remove {
    margin-left: 10px;
    font-size: 9px;
    height: 100%;
    line-height: 9px;
    display: inline-block;
  }

  /* ---------- Term rows ---------- */

  .glossary-terms__list {
    display: flex;
    flex-direction: column;
  }

  .glossary-terms__item .details {
    position: relative;
    border-bottom: solid 1px #979797;
    padding: 0 10px;
  }

  .glossary-terms .details__header {
    min-height: var(--minimum-touch-target);
    position: relative;
    margin: 0;
    padding: 10px 30px 10px 0;
    text-transform: none;
    font-size: 15px;
    font-weight: 400;
    /* 1.22, not the 1.3 body line-height: production's term title is an <h4>, and the
       heading rule's line-height wins because .accordion-item__title only overrides
       weight and colour. */
    line-height: 1.22;
    color: #3f3f3f;
  }

  .glossary-terms__item .details[open] .details__header {
    font-weight: 600;
  }

  /* Algolia wraps query matches in <em>; production renders those bold, not italic. */
  .glossary-terms .details__header em {
    font-style: normal;
    font-weight: 700;
  }

  summary .glossary-terms__toggle-icon {
    width: 14px;
    height: 14px;
    position: absolute;
    right: 0;
  }

  .glossary-terms__item .details-content {
    font-size: 15px;
    line-height: 1.3;
    color: #3f3f3f;
  }

  .glossary-terms__item .details-content p {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.3;
  }

  .glossary-terms__item .details-content em {
    font-style: normal;
    font-weight: 600;
  }

  .glossary-terms__item .details-content p:empty,
  .glossary-terms__item .details-content p:has(> br:only-child) {
    display: none;
  }

  /* ---------- Empty state + pagination ---------- */

  .glossary-terms__empty {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    color: #979797;
  }

  .glossary-terms__empty[hidden] {
    display: none;
  }

  .glossary-terms__pagination {
    display: block;
    text-align: center;
    padding-top: 50px;
  }

  .glossary-terms__pagination:empty {
    display: none;
  }

  .glossary-terms__pagination .js-load-more {
    padding-left: 15%;
    padding-right: 15%;
  }

  .glossary-terms__placeholder {
    margin: 0;
    padding: 40px 20px;
    text-align: center;
    border: 1px dashed rgb(var(--color-foreground-rgb, 26 26 26) / 0.3);
    border-radius: 8px;
  }

  @media screen and (min-width: 640px) {
    .glossary-terms.glossary-terms {
      width: 576px;
    }

    .glossary-header p {
      font-size: 18px;
    }

    .glossary-terms__search-icon {
      width: 18px;
      height: 18px;
    }

    .glossary-terms__nav-icon {
      width: 20px;
      height: 20px;
    }

    .glossary-terms .details__header {
      font-size: 18px;
    }

    .glossary-terms__item .details-content,
    .glossary-terms__item .details-content p {
      font-size: 18px;
    }

    .glossary-terms__empty {
      padding-top: 50px;
      padding-bottom: 50px;
    }
  }

  @media screen and (min-width: 750px) {
    summary .glossary-terms__toggle-icon {
      width: 16px;
      height: 16px;
    }
  }

  @media screen and (min-width: 1024px) {
    .glossary-terms.glossary-terms {
      width: 764px;
    }

    .glossary-header.glossary-header h1,
    .glossary-header.glossary-header .h1 {
      font-size: 55px;
    }

    .glossary-terms__list .glossary-terms__item:first-child .details {
      border-top: solid 1px #979797;
    }

    .glossary-terms .details__header {
      padding: 16px 30px 16px 0;
    }

    .glossary-terms__item .details-content p {
      margin-bottom: 40px;
    }

    .glossary-terms__empty {
      padding-top: 60px;
      padding-bottom: 60px;
    }

    .glossary-terms__pagination .js-load-more {
      padding-left: 7%;
      padding-right: 7%;
    }
  }
/* END_SECTION:glossary-terms */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:header-toolbar (INDEX:30) */
.header-toolbar {
    padding-block-start: var(--padding-block-start, 2px);
    padding-block-end: var(--padding-block-end, 2px);
  }

  .header-toolbar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: var(--font-size--xs);
    gap: 2rem;
    position: relative;
  }

  /* Global banner: centered overlay so the locator/language stay at the edges */
  .header-toolbar__banners {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .header-toolbar__banners > * {
    pointer-events: auto;
  }

  @media screen and (min-width: 750px) {
    .header-toolbar__inner {
      width: 100%;
      max-width: 1200px;
      margin-inline: auto;
    }
  }

  /* Store locator link */
  .header-toolbar__locator-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #3f3f3f;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;

    &:hover,
    &:focus-visible {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  .header-toolbar__locator-icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
  }

  .header-toolbar__locator-icon svg {
    width: 100%;
    height: 100%;
  }

  @media screen and (max-width: 1023px) {
    /* Below the header's breakpoint the locator link and language toggle are
       the drawer's, not the toolbar's, so all that is left here is the banner.
       Let it flow (not absolute) so it defines the bar's height. Without a
       banner the section hides outright — see the {% style %} block above. */
    .header-toolbar-section--has-banner .header-toolbar__locator-link,
    .header-toolbar-section--has-banner .header-toolbar__localization {
      display: none;
    }

    .header-toolbar-section--has-banner .header-toolbar__banners {
      position: static;
      flex: 1 1 auto;
    }
  }

  /* Language toggle */
  .header-toolbar__details {
    /* Reset browser <details> positioning context */
    position: relative;
  }

  .header-toolbar__lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #3f3f3f;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0 6px 0 0;
    list-style: none; /* hides the <summary> disclosure marker in some browsers */

    /* Suppress WebKit disclosure triangle on <summary> */
    &::-webkit-details-marker {
      display: none;
    }
  }

  .header-toolbar__lang-caret {
    flex: 0 0 6px;
    inline-size: 6px;
    block-size: 6px;
    border-block-end: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    pointer-events: none;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  /* Native <details> sets [open] on the toggle itself — flip the same
     border-corner shape 180deg so it points up instead of redrawing it. */
  .header-toolbar__details[open] .header-toolbar__lang-caret {
    transform: translateY(2px) rotate(225deg);
  }

  .header-toolbar__lang-panel {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + 0.25rem);
    z-index: 10;
    min-width: 7rem;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-base, 4px);
    box-shadow: 0 4px 12px rgb(var(--color-foreground-rgb) / 0.08);
    padding: 0.25rem 0;
  }

  /* Language option list */
  .header-toolbar__lang-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* 12px Calibre, matching the toggle above and ocs.ca's language-toggle__link.
   * font-family has to be said out loud: a <button> does not inherit the page
   * font the way the <summary> toggle does, so this was rendering in Arial.
   * Production weights the current language 500 and the rest 400, which is the
   * only thing distinguishing them once the sizes agree.
   */
  .header-toolbar__lang-option {
    display: block;
    width: 100%;
    padding: 0.4rem 0.75rem;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    text-align: start;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-foreground);
    white-space: nowrap;
    text-transform: uppercase;

    &:hover,
    &:focus-visible {
      background-color: rgb(var(--color-foreground-rgb) / 0.06);
      outline: none;
    }
  }

  .header-toolbar__lang-option--current {
    font-weight: 500;
  }
/* END_SECTION:header-toolbar */

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

  .header {
    display: block;
  }

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

    /* used to apply transparency to .header__row, will only ever be transparent or unset */
    --header-bg-color: transparent;

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

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

    /* transparent color scheme on .header should never apply its background color */
    background-color: transparent;
    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    /* Only show opaque background when hovering over menu items with children (mega menu)
       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[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --header-bg-color: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;

      .header__row {
        /* Faster transition for "in" animation */
        transition: color var(--animation-values-fast), border-color var(--animation-values-fast),
          background-color var(--animation-values-fast);
      }
    }

    .header__row {
      /* Slower transition for "out" animation */
      transition: color var(--animation-values-slow), border-color var(--animation-values-slow),
        background-color var(--animation-values-slow);
    }
  }

  :is(.header[transparent]:not([data-sticky-state='active']), .header[transparent='always'][data-sticky-state='active'])
    .header__row:not(
      :has(
          .mega-menu__list:hover,
          .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating]),
          .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])
        )
    ) {
    /* while transparent, header-row ignores its color-scheme settings, pull from the header-component */
    --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--inherit-color-scheme-on-menu-open:has(.mega-menu__list:hover) .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])
    )
    .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])
    )
    .header__row {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-background: inherit;
    --color-background-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
  }

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

  #header-group:has(.menu-list__link[aria-expanded='true']) .header-section {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  @media screen and (max-width: 1023px) {
    #header-group:has(#Details-menu-drawer-container[open]) .header-section {
      z-index: calc(var(--layer-menu-drawer) + 1);
    }
  }

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

  @media screen and (max-width: 749px) {
    #header-group > :is(.header-toolbar-section, .header-section, .section-algolia-search-bar) {
      translate: 0 0;
      transition: translate 200ms ease;
    }

    #header-group:has(#header-component[data-mobile-scroll-visibility='hidden'])
      > :is(.header-toolbar-section, .header-section, .section-algolia-search-bar) {
      translate: 0 calc(-1 * var(--mobile-header-chrome-height, var(--header-group-height)));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #header-group > :is(.header-toolbar-section, .header-section, .section-algolia-search-bar) {
      transition: none;
    }
  }

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

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

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

  .header__row {
    position: relative;

    /* will default to bg from its color scheme unless --header-bg-color is transparent */
    background-color: var(--header-bg-color, var(--color-background));
  }

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

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

  @media screen and (min-width: 1024px) {
    .header__column--right:has(header-menu) {
      min-width: 0;
    }

    .header__column--right:has(header-menu) header-menu {
      flex: 1 1 auto;
      min-width: 0;
    }

    .header__column--right:has(header-menu) :is(.header-menu__inner, .menu-list, .overflow-menu) {
      min-width: 0;
    }

    .header__column--right:has(header-menu) .overflow-menu::part(list) {
      min-width: 0;
    }

    .header__column--right:has(header-menu) header-actions {
      flex: 0 0 auto;
      min-width: max-content;
    }
  }

  .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) {
      --header-template-columns: minmax(0, auto) minmax(0, 1fr) auto var(--header-mobile-bookend);

      grid-template-areas: 'logo spacer actions drawer';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: var(--padding-md) var(--padding-3xs);

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

      .search-action {
        grid-area: spacer;
        justify-self: end;
      }

      header-actions {
        grid-area: actions;
        justify-self: end;
      }

      .header__drawer {
        grid-area: drawer;
        justify-self: end;
      }
    }
  }

  @media screen and (min-width: 1024px) {
    .header__columns {
      width: 100%;
      max-width: 1280px;
      margin-inline: auto;
    }
  }

  /* 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(.dropdown-localization__button:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .dropdown-localization__button: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,
  .dropdown-localization__button,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Extend hover area through padding to prevent flickering on actual menu items */
  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__link[aria-haspopup],
  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__link,
  .menu-list__list-item:where(:not([slot='overflow'])) > button.menu-list__link {
    margin-block: calc(-2 * var(--header-padding));
    padding-block: calc(2 * var(--header-padding));
    margin-inline: calc(-1 * var(--gap-xl) / 2);
    padding-inline: calc(var(--gap-xl) / 2);
  }

  /* Set header paddings based on height setting */
  .header {
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    contain: layout style;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  /* Force visibility when open/animating to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active] {
    content-visibility: visible;
  }

  /* Production (ocs.ca) closes the nav row off with a line before the search
   * bar: div.menu-bar carries `border-bottom: 1px #EAEAEA`. We have the rule
   * for it already, a few hundred lines up, but its width comes from the
   * `--border-bottom-width` the row is given inline, and the header's outer
   * border setting is 0 — so the line is declared and never drawn.
   *
   * Setting the width here rather than changing that setting keeps the setting
   * meaning what it says (the border around the whole header) and leaves the
   * bottom row, which shares the rule, alone. The colour is the design
   * system's #EAEAEA; --color-border is 6% black and reads too light.
   *
   * Desktop only: on mobile the row below the logo is the search bar with its
   * own line, and a second one here would double it up.
   */
  @media screen and (min-width: 1024px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom: 1px solid #eaeaea;
    }
  }

  /* On mobile the logo row was inset 12.8px on the left and 2px on the right,
   * so it lined up with nothing — least of all the search bar under it, which
   * sits at 8px. Production insets both to 8: on ocs.ca at 390px the logo
   * starts at 8 and .search-bar__wrapper spans 8-382.
   */
  @media screen and (max-width: 1023px) {
    .header__row--top .header__columns {
      padding-inline: 8px;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:32) */
.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--height-ocs-home {
    --hero-height-ocs-home: calc(354px + var(--hero-height-offset));
  }

  @media screen and (min-width: 640px) {
    .hero--height-ocs-home {
      --hero-height-ocs-home: calc(524px + var(--hero-height-offset));
    }
  }

  /* Mirrors the legacy homepage hero's typography while retaining the theme's block editor. */
  .hero--height-ocs-home .hero__content-wrapper {
    --gap: 20px;
    inline-size: 60%;
    max-inline-size: 60%;
  }

  .hero--height-ocs-home .text-block {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .hero--height-ocs-home .text-block.h2 > * {
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
  }

  .hero--height-ocs-home .text-block.h3 > * {
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
  }

  /* Height comes from the shared CTA ladder now — this used to pin 40px at every
     width, which held the hero CTA 4px under spec on desktop. */
  .hero--height-ocs-home .ocs-button {
    inline-size: 100%;
  }

  @media screen and (min-width: 640px) {
    .hero--height-ocs-home .hero__content-wrapper {
      inline-size: 100%;
      max-inline-size: 100%;
    }

    .hero--height-ocs-home .ocs-button {
      inline-size: calc(50% - 20px);
    }

    .hero--height-ocs-home .text-block.h2 > * {
      font-size: var(--ocs-home-hero-heading-size, 45px);
    }

    .hero--height-ocs-home .text-block.h3 > * {
      font-size: var(--ocs-home-hero-subheading-size, 32px);
    }
  }

  @media screen and (min-width: 1024px) {
    .hero--height-ocs-home .hero__content-wrapper {
      inline-size: 55%;
      max-inline-size: 55%;
    }
  }

  @media screen and (min-width: 1280px) {
    .hero--height-ocs-home .hero__content-wrapper {
      inline-size: calc(55% + 30px);
      max-inline-size: calc(55% + 30px);
      padding-inline: 90px;
    }
  }

  .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-wrapper {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__image,
  .hero--auto .hero__video {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    :is(.hero__image, .hero__video) {
      width: 100%;
      aspect-ratio: auto;
    }

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

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

  /* Mobile/Desktop media visibility */

  .hero__image--mobile,
  .hero__video--mobile,
  .hero__video-wrapper--mobile {
    display: none;
  }

  .hero__image--desktop,
  .hero__video--desktop,
  .hero__video-wrapper--desktop {
    display: block;
  }

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

    .hero__image--mobile,
    .hero__video--mobile,
    .hero__video-wrapper--mobile {
      display: block;
    }

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

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

  .hero__video-wrapper--desktop {
    position: relative;
  }

  .hero__video-poster--desktop {
    position: absolute;
  }

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

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

    :is(a, button, input, textarea, select) {
      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:image-text-tiles (INDEX:33) */
/*
    Reference: brand__about section on the original OCS site.
    Reused from theme: .section, .section--page-width, .spacing-style, .section-background
    Tokens: --color-foreground, --font-h2--family, --font-h3--family,
    --font-paragraph--family, --font-body--family
  */

  .image-text-tiles *,
  .image-text-tiles *::before,
  .image-text-tiles *::after {
    box-sizing: border-box;
  }

  .image-text-tiles.spacing-style {
    padding-block: var(--image-text-tiles-mobile-padding-start, 50px)
      var(--image-text-tiles-mobile-padding-end, 50px);
  }

  .image-text-tiles__section-heading {
    margin: 0 0 20px;
    color: var(--color-foreground, #000);
    font-family: var(--font-h2--family, var(--font-body--family, sans-serif));
    font-size: 26px;
    font-weight: 600;
    line-height: 1.22;
    text-align: center;
  }

  .image-text-tiles__list {
    display: flex;
    flex-direction: column;
    inline-size: min(100%, 1200px);
    margin: 0 auto;
    padding: 0 15px;
    list-style: none;
    overflow-wrap: break-word;
  }

  /*
    Opt-in OCS landing container: the list bleeds 15px past the page container
    on each side so tiles land on the original OCS grid.
  */
  .image-text-tiles--content-ocs-grid .image-text-tiles__list {
    inline-size: calc(100% + 30px);
    max-inline-size: 1440px;
    margin: 0 -15px;
  }

  .image-text-tiles__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-inline-size: 0;
    margin-block-start: var(--image-text-tiles-mobile-row-gap, 15px);
    list-style: none;
  }

  .image-text-tiles__media {
    flex: none;
    inline-size: 100%;
    aspect-ratio: 400 / 400;
    overflow: hidden;
  }

  .image-text-tiles__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .image-text-tiles__image--placeholder {
    background-color: #f2f2f2;
  }

  .image-text-tiles--image-natural .image-text-tiles__media {
    aspect-ratio: auto;
  }

  .image-text-tiles--image-natural .image-text-tiles__image {
    block-size: auto;
    object-fit: contain;
  }

  .image-text-tiles--image-natural .image-text-tiles__image--placeholder {
    aspect-ratio: 1 / 1;
  }

  .image-text-tiles__content {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-block-start: 15px;
  }

  .image-text-tiles__item--no-image {
    justify-content: center;
  }

  .image-text-tiles__item--no-image .image-text-tiles__content,
  .image-text-tiles__item--no-image .image-text-tiles__text {
    text-align: left;
  }

  .image-text-tiles__item--text-center .image-text-tiles__content,
  .image-text-tiles__item--text-center .image-text-tiles__text {
    text-align: center;
  }

  .image-text-tiles__item--text-right .image-text-tiles__content,
  .image-text-tiles__item--text-right .image-text-tiles__text {
    text-align: right;
  }

  .image-text-tiles__heading {
    margin: 3px 0 10px;
    color: var(--color-foreground, #000);
    font-family: var(--font-h3--family, var(--font-body--family, sans-serif));
    font-size: 20px;
    font-weight: 600;
    line-height: 1.22;
  }

  /* OCS landing tiles need to win over the theme's base h3 metrics. */
  .image-text-tiles--content-ocs-grid .image-text-tiles__content > .image-text-tiles__heading {
    margin: 3px 0 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.22;
  }

  .image-text-tiles__text {
    margin: 0;
    color: var(--color-foreground, #3f3f3f);
    font-family: var(--font-paragraph--family, var(--font-body--family, sans-serif));
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
  }

  .image-text-tiles__text p {
    margin: 0 0 20px;
  }

  .image-text-tiles--square-list-markers .image-text-tiles__text ul {
    margin: 0 0 20px;
    padding: 0;
    font-size: 15px;
    list-style: none;
  }

  .image-text-tiles--square-list-markers .image-text-tiles__text li {
    position: relative;
    padding-inline-start: 20px;
    list-style: none;
  }

  .image-text-tiles--square-list-markers .image-text-tiles__text li::before {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-start: 0;
    inline-size: 10px;
    block-size: 10px;
    background-color: var(--ocs-button-green, #2e7631);
    content: '';
  }

  /* Opt-in: OCS landing pages render body links in green. */
  .image-text-tiles--links-green .image-text-tiles__text a {
    color: var(--ocs-button-green, #2e7631);
  }

  .image-text-tiles__item:last-child .image-text-tiles__text p:last-child {
    margin-block-end: 0;
  }

  @media (min-width: 640px) {
    .image-text-tiles.spacing-style {
      padding-block: var(--image-text-tiles-padding-start, 80px)
        var(--image-text-tiles-padding-end, 80px);
    }

    .image-text-tiles__section-heading {
      font-size: 32px;
    }

    .image-text-tiles__item {
      flex-direction: row;
      align-items: center;
      margin-block-start: var(--image-text-tiles-row-gap, 30px);
    }

    .image-text-tiles__item--image-right .image-text-tiles__media {
      order: 2;
    }

    .image-text-tiles__item--image-right .image-text-tiles__content {
      order: 1;
    }

    .image-text-tiles__media {
      flex: 0 0 min(35%, var(--image-text-tiles-image-size, 420px));
    }

    .image-text-tiles--content-ocs-grid .image-text-tiles__list {
      max-inline-size: 600px;
      margin-inline: auto;
    }

    .image-text-tiles__content {
      flex: 1 1 65%;
      margin-block-start: 0;
      padding-inline: 60px;
    }

    .image-text-tiles__item--no-image .image-text-tiles__content {
      flex: 0 1 65%;
    }

    .image-text-tiles__heading {
      margin-block-start: 0;
      font-size: 24px;
    }

    .image-text-tiles--content-ocs-grid .image-text-tiles__content > .image-text-tiles__heading {
      margin-block-start: 0;
      font-size: 24px;
    }

    .image-text-tiles--square-list-markers .image-text-tiles__text ul {
      font-size: 18px;
    }
  }

  @media (min-width: 1024px) {
    .image-text-tiles--content-ocs-grid .image-text-tiles__list {
      max-inline-size: 960px;
    }
  }

  @media (min-width: 1280px) {
    .image-text-tiles--content-ocs-grid .image-text-tiles__list {
      max-inline-size: 1200px;
    }
  }

  @media (min-width: 1920px) {
    .image-text-tiles--content-ocs-grid .image-text-tiles__list {
      max-inline-size: 1440px;
    }
  }

  /* Brand pages align this section to the Brand Overview container. */
  .image-text-tiles--content-brand-overview .image-text-tiles__list {
    inline-size: calc(100vw - 30px);
    max-inline-size: none;
    margin-inline: auto;
    padding-inline: 0;
  }

  @media (min-width: 640px) {
    .image-text-tiles--content-brand-overview .image-text-tiles__list {
      max-inline-size: 600px;
    }
  }

  @media (min-width: 1024px) {
    .image-text-tiles--content-brand-overview .image-text-tiles__list {
      max-inline-size: 960px;
    }
  }

  @media (min-width: 1280px) {
    .image-text-tiles--content-brand-overview .image-text-tiles__list {
      max-inline-size: 1200px;
    }
  }

  @media (min-width: 1920px) {
    .image-text-tiles--content-brand-overview .image-text-tiles__list {
      max-inline-size: 1440px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .image-text-tiles *,
    .image-text-tiles *::before,
    .image-text-tiles *::after {
      scroll-behavior: auto;
    }
  }
/* END_SECTION:image-text-tiles */

/* START_SECTION:landing-articles-accordion (INDEX:34) */
.landing-articles-accordion,
  .landing-articles-accordion *,
  .landing-articles-accordion *::before,
  .landing-articles-accordion *::after {
    box-sizing: border-box;
  }

  .landing-articles-accordion {
    color: var(--color-foreground);
    padding-block: var(--padding-block-start, 40px) var(--padding-block-end, 80px);
  }

  .landing-articles-accordion__inner {
    width: min(calc(100% - 30px), 1170px);
    margin-inline: auto;
    text-align: center;
  }

  .landing-articles-accordion__heading,
  .landing-articles-accordion__extra-heading {
    margin: 0;
    font-family: var(--font-h2--family, var(--font-body--family));
    font-size: 26px;
    font-weight: 600;
    line-height: 1.22;
  }

  .landing-articles-accordion__caption,
  .landing-articles-accordion__bottom {
    max-width: 700px;
    margin: 20px auto 0;
    font-family: var(--font-paragraph--family, var(--font-body--family));
    font-size: 15px;
    line-height: 1.3;
  }

  .landing-articles-accordion__caption p,
  .landing-articles-accordion__bottom p {
    margin: 0 0 20px;
  }

  .landing-articles-accordion__button.ocs-button {
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-block-start: 20px;
  }

  .landing-articles-accordion__list {
    margin-block-start: 40px;
    border-block-start: 1px solid #979797;
    text-align: start;
  }

  .landing-articles-accordion__item {
    border-block-end: 1px solid #979797;
  }

  .landing-articles-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    gap: 20px;
    padding: 12px 10px;
    cursor: pointer;
    list-style: none;
  }

  .landing-articles-accordion__summary::-webkit-details-marker {
    display: none;
  }

  .landing-articles-accordion__article-title {
    font-size: 15px;
    line-height: 1.3;
  }

  .landing-articles-accordion__icon {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
  }

  .landing-articles-accordion__icon::before,
  .landing-articles-accordion__icon::after {
    position: absolute;
    inset: 50% auto auto 0;
    width: 14px;
    height: 1px;
    background: currentColor;
    content: '';
  }

  .landing-articles-accordion__icon::after {
    transform: rotate(90deg);
    transition: transform 160ms ease;
  }

  .landing-articles-accordion__item[open] .landing-articles-accordion__icon::after {
    transform: rotate(0deg);
  }

  .landing-articles-accordion__content {
    padding: 0 10px 24px;
    font-size: 15px;
    line-height: 1.3;
  }

  .landing-articles-accordion__content img {
    max-width: 100%;
    height: auto;
  }

  .landing-articles-accordion__extra-heading {
    margin-block-start: 40px;
    font-size: 20px;
  }

  @media (min-width: 640px) {
    .landing-articles-accordion__heading {
      font-size: 32px;
    }

    .landing-articles-accordion__caption,
    .landing-articles-accordion__bottom,
    .landing-articles-accordion__article-title,
    .landing-articles-accordion__content {
      font-size: 18px;
    }

    .landing-articles-accordion__summary {
      min-height: 62px;
      padding-block: 16px;
    }

    .landing-articles-accordion__extra-heading {
      font-size: 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .landing-articles-accordion__icon::after {
      transition: none;
    }
  }
/* END_SECTION:landing-articles-accordion */

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

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

  [role='tabpanel'] {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  [role='tabpanel']:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  [role='tabpanel']:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

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

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

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

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

  /* When panel is active, hide poster so video is visible */
  [role='tabpanel']: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;
  }

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

    [role='tabpanel']: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;
    }

    [role='tabpanel'] {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index) + 10);
    }

    [role='tabpanel']: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;
    }

    [role='tabpanel']:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    [role='tabpanel']: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) */
    [role='tabpanel']: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);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:36) */
.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: 750px) {
      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-accordion (INDEX:38) */
.blog-accordion {
    --page-content-width: var(--normal-content-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    color: #3f3f3f;
    padding-block: 30px;
  }

  @media screen and (min-width: 1024px) {
    .blog-accordion {
      padding-block: 45px;
    }
  }

  .blog-accordion__heading {
    margin: 0 0 30px;
    color: #000;
    font-size: 18px;
    line-height: 1.22;
    font-weight: 600;
    text-align: center;
  }

  @media screen and (min-width: 1025px) {
    .blog-accordion__heading {
      font-size: 24px;
    }
  }

  .blog-accordion__list {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .blog-accordion__item {
    padding: 0 10px;
    border-block-end: 1px solid #979797;
  }

  .blog-accordion__summary {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 10px;
    height: 41px;
    min-height: 41px;
    padding-block: 10px;
    cursor: pointer;
  }

  @media screen and (min-width: 1025px) {
    .blog-accordion__summary {
      height: 61px;
      min-height: 61px;
      padding-block: 16px;
    }
  }

  .blog-accordion__article-title {
    flex: 1;
    max-width: 90%;
    margin: 0;
    overflow: hidden;
    color: #3f3f3f;
    font-size: 15px;
    line-height: 1.22;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  {% comment %}
    640px, not 641. Same 15px -> 18px copy ladder as the article body and the
    blog listing, and production steps it at exactly 640 — bisected on
    /blogs/cannabis-made-clear/responsible-use-methods-of-consumption, 15px at
    639 and 18px at 640. A 641 here leaves a one-pixel window at exactly 640
    where this is still a size behind everything around it.
  {% endcomment %}
  @media screen and (min-width: 640px) {
    .blog-accordion__article-title {
      font-size: 18px;
    }
  }

  .blog-accordion__item[open] .blog-accordion__article-title {
    font-weight: 600;
  }

  .blog-accordion .icon-plus {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-inline-start: 0;
    color: #3f3f3f;
  }

  .blog-accordion__content {
    max-width: var(--normal-content-width);
    color: #3f3f3f;
    font-size: 15px;
    line-height: 1.3;
    padding-block-end: 24px;
  }

  @media screen and (min-width: 640px) {
    .blog-accordion__content {
      font-size: 18px;
    }
  }

  .blog-accordion__content img {
    max-width: 100%;
    height: auto;
  }

  .blog-accordion__content :is(h1, h2, h3, h4, h5, h6) {
    margin-block: 20px 10px;
    line-height: 1.22;
  }

  .blog-accordion__content :first-child:is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  .blog-accordion__content :is(h1, h2, h3, h4, h5, h6):has(img) {
    margin-block: 0 20px;
  }

  .blog-accordion__content :is(h1, h2, h3, h4, h5, h6):empty {
    display: none;
  }

  .blog-accordion__content p {
    margin-block: 0 20px;
  }

  .blog-accordion__content :is(ul, ol) {
    margin-block: 0 20px;
    margin-inline-start: 0;
    padding-inline-start: 0;
    list-style: none;
  }

  .blog-accordion__content li {
    list-style: none;
  }

  .blog-accordion__content li::marker {
    content: '';
  }

  .blog-accordion__content :is(b, strong) {
    font-weight: 600;
  }

  .blog-accordion__pagination {
    display: flex;
    justify-content: center;
    padding-block-start: var(--padding-xl);
  }
/* END_SECTION:main-blog-accordion */

/* START_SECTION:main-blog-post (INDEX:39) */
.blog-post-header {
    width: 100%;
    max-width: var(--normal-content-width);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }

  .blog-post-header :is(.blog-post__blog-title, .blog-post__blog-title *, .blog-post__title-block, .blog-post__title-block *, .blog-post__excerpt, .blog-post__excerpt *) {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }

  .blog-post__blog-title {
    margin: 0 0 10px;
    text-align: center;
    font-size: 14px;
    line-height: 1.22;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
  }

  {% comment %}
    640px throughout this file's type, not the 641 it used to say. Bisected
    against ocs.ca's article header, which reads 14/18/15px for blog title, title
    and excerpt at 639 and 16/32/18px at 640 — so 641 left a one-pixel window at
    exactly 640 where every line here was still at its phone size and production
    had already stepped.
  {% endcomment %}
  @media screen and (min-width: 640px) {
    .blog-post__blog-title {
      margin-bottom: 20px;
      font-size: 16px;
    }
  }

  .blog-post__blog-title a {
    color: currentColor;
    text-decoration: none;
  }

  .blog-post__blog-title a:hover {
    text-decoration: underline;
  }

  .blog-post__title-block .text-block,
  .blog-post__excerpt .text-block {
    align-items: center;
  }

  .blog-post__excerpt .text-block {
    --padding-block-start: 0px;
    --padding-block-end: 0px;
    --font-paragraph--size: 15px;
    --font-paragraph--line-height: 1.3;
    padding-block-start: 0;
    padding-block-end: 0;
    color: #3f3f3f;
    font-weight: 400;
    line-height: 1.3;
    overflow-wrap: normal;
    text-wrap: wrap;
  }

  .blog-post__excerpt {
    margin-bottom: 20px;
  }

  .blog-post__title-block .text-block > *,
  .blog-post__title-block .text-block > :last-child,
  .blog-post__title-block h1 {
    margin: 0 0 10px;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
  }

  .blog-post__excerpt .text-block > *,
  .blog-post__excerpt .text-block > :last-child,
  .blog-post__excerpt p {
    width: 100%;
    max-inline-size: 100%;
    margin: 0;
    color: #3f3f3f;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    overflow-wrap: normal;
    text-align: center;
    text-wrap: wrap;
  }

  .blog-post__excerpt .text-block :is(p, p *) {
    font-size: 15px;
    line-height: 1.3;
  }

  @media screen and (min-width: 640px) {
    .blog-post__excerpt .text-block {
      --font-paragraph--size: 18px;
    }

    .blog-post__title-block .text-block > *,
    .blog-post__title-block .text-block > :last-child,
    .blog-post__title-block h1 {
      margin-bottom: 20px;
      font-size: 32px;
    }

    {% comment %}
      `> :last-child` has to be listed here, not just in the phone rule above.
      `:last-child` is a pseudo-class, so it scores in the class column:
      `.blog-post__excerpt .text-block > :last-child` is (0,3,0), while the most
      specific selector this block had was `:is(p, p *)` at (0,2,1). An excerpt is
      a single `<p>`, so it is always the last child — which meant the phone rule
      out-ranked every desktop rule and the excerpt sat at 15px at every width
      while the wrapper around it correctly stepped to 18px.

      The title block above never had the bug because its desktop rule already
      listed `> :last-child`. Kept as a mirror of that rather than by deleting the
      phone rule's `> :last-child`, which is load-bearing for `margin: 0` — it is
      what beats `.text-block > *:last-child` in snippets/text.liquid.
    {% endcomment %}
    .blog-post__excerpt .text-block > *,
    .blog-post__excerpt .text-block > :last-child,
    .blog-post__excerpt p {
      font-size: 18px;
    }

    .blog-post__excerpt .text-block :is(p, p *) {
      font-size: 18px;
    }
  }

  .blog-post-boilerplate {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
    padding: var(--padding-xl);
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    border-radius: var(--style-border-radius-sm);
  }

  .blog-post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap-lg);
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 60px auto 0;
    color: #3f3f3f;
  }

  .blog-post-navigation__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    flex: 0 1 38%;
    max-width: 38%;
    color: currentColor;
    text-decoration: none;
  }

  .blog-post-navigation__link--next {
    align-items: flex-end;
    text-align: right;
    /* Keep "next" on the right even when there is no "previous" link */
    margin-left: auto;
  }

  .blog-post-navigation__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
  }

  @media screen and (min-width: 640px) {
    .blog-post-navigation__label {
      font-size: 14px;
    }
  }

  .blog-post-navigation__icon,
  .blog-post-navigation__icon svg {
    width: 12px;
    height: 12px;
  }

  .blog-post-navigation__icon {
    transition: transform 0.1s linear;
  }

  .blog-post-navigation__icon--previous {
    transform: rotate(180deg);
  }

  .blog-post-navigation__link--previous:hover .blog-post-navigation__icon--previous,
  .blog-post-navigation__link--previous:focus-visible .blog-post-navigation__icon--previous {
    transform: translateX(-3px) rotate(180deg);
  }

  .blog-post-navigation__link--next:hover .blog-post-navigation__icon--next,
  .blog-post-navigation__link--next:focus-visible .blog-post-navigation__icon--next {
    transform: translateX(3px);
  }

  .blog-post-navigation__title {
    color: var(--color-foreground);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-wrap: pretty;
    margin-bottom: 20px;
  }

  @media screen and (min-width: 640px) {
    .blog-post-navigation__title {
      font-size: 16px;
    }
  }

  .blog-post-navigation__link:hover .blog-post-navigation__title {
    text-decoration: underline;
  }

  @media screen and (max-width: 749px) {
    .blog-post-navigation__link--next {
      align-items: flex-end;
      text-align: right;
    }
  }

  .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:40) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: 700px;
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
  }

  .blog-posts__header {
    text-align: center;
    margin-block: 20px;
  }

  @media screen and (min-width: 641px) {
    .blog-posts__header {
      margin-block: 40px;
    }
  }

  /* Typography matched to production (ocs.ca): Calibre, headings 600/1.22/#000 */
  .blog-posts__title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.22;
    color: #000;
  }

  @media screen and (min-width: 640px) {
    .blog-posts__title {
      font-size: 55px;
    }
  }

  .blog-posts__description {
    margin-block-start: 20px;
  }

  .blog-posts__description > :last-child {
    margin-block-end: 0;
  }

  /**
   * Production styles this element through two classes at once —
   * `<div class="blog__banner-image post__img">` — so the spec is the union of
   * both rules, resolved for specificity:
   *
   *   .blog__banner-image      margin: 0 auto 20px
   *   .post .post__img         display: block; width: 100%;
   *                            margin-inline: auto; padding-bottom: 20px
   *   @media (min-width: 640px)
   *     .post .post__img       padding-bottom: 40px
   *   .blog__banner-image img  display: block
   *   img                      max-width: 100%; height: auto
   *
   * Production also carries `@media (max-width: 639px) .blog__banner-image {
   * margin-inline: -15px }`, which never applies: at (0,1,0) it loses to
   * `.post .post__img { margin-inline: auto }` at (0,2,0), and a media query
   * adds no specificity. So production's banner is not full-bleed on mobile.
   * Ours was, because our element carries a single class and nothing outscored
   * the negative margin. That rule is gone rather than ported.
   */
  .blog-posts__banner-image {
    display: block;
    width: 100%;
    margin: 0 auto 20px;
    padding-block-end: 20px;
  }

  .blog-posts__banner-image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  @media screen and (min-width: 640px) {
    .blog-posts__banner-image {
      padding-block-end: 40px;
    }
  }

  .blog-posts__list {
    display: grid;
    grid-template-columns: 1fr;
    margin-block: 20px;
  }

  @media screen and (min-width: 641px) {
    .blog-posts__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-block: 60px;
    }
  }

  .blog-posts__article {
    border-top: 1px solid #979797;
    padding: 40px 0;
    position: relative;
  }

  .blog-posts__article:last-child {
    border-bottom: 1px solid #979797;
  }

  /**
   * In the 2-column layout, when the last row is incomplete (odd number of
   * non-featured articles) the last article sits alone in the left column and
   * closes its column with its own border-bottom. The article in the right
   * column of the previous row then has nothing beneath it, so close it too.
   * Scoped to >=641px only — in the single-column layout this would double the
   * separator between the last two articles.
   */
  @media screen and (min-width: 641px) {
    .blog-posts__article:nth-last-child(2):not(.blog-posts__article--featured) {
      border-bottom: 1px solid #979797;
    }
  }

  .blog-posts__article--featured {
    border: 0;
    grid-column: 1 / -1;
    max-width: 490px;
    margin: 0 auto;
    padding-top: 20px;
    text-align: center;
  }

  .blog-posts__article:not(.blog-posts__article--featured) {
    padding-inline: 15px;
  }

  .blog-posts__article-title-link {
    color: inherit;
    text-decoration: none;
  }

  .blog-posts__article-title-link:hover {
    color: var(--color-primary-hover);
  }

  .blog-posts__article-title {
    font-weight: 600;
    line-height: 1.22;
    color: #000;
  }

  .blog-posts__article-title-link .blog-posts__article-title {
    margin: 0 0 14px;
  }

  /* Regular (row) article titles: 15px -> 18px */
  .blog-posts__article-title--row {
    font-size: 15px;
  }

  /* Featured article title: 18px -> 24px */
  .blog-posts__article--featured .blog-posts__article-title {
    font-size: 18px;
  }

  @media screen and (min-width: 640px) {
    .blog-posts__article-title--row {
      font-size: 18px;
    }

    .blog-posts__article--featured .blog-posts__article-title {
      font-size: 24px;
    }
  }

  /* Excerpt / body copy: 15px -> 18px, line-height 1.3 */
  .blog-posts__article-excerpt {
    color: #3f3f3f;
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.3;
  }

  @media screen and (min-width: 640px) {
    .blog-posts__article-excerpt {
      font-size: 18px;
    }
  }

  .blog-posts__article-image-link {
    display: block;
    aspect-ratio: 245 / 160;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
  }

  .blog-posts__article-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .blog-posts__article-image--placeholder {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .blog-posts__article-main {
    margin-block-start: 24px;
  }

  @media screen and (min-width: 641px) {
    .blog-posts__article-main {
      margin-block-start: 40px;
    }
  }

  .blog-posts__read-more {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }

  @media screen and (min-width: 640px) {
    .blog-posts__read-more {
      font-size: 14px;
    }
  }

  .blog-posts__read-more-icon {
    --icon-stroke-width: 1.7px;
    width: 14px;
    height: 14px;
    transition: transform 0.1s linear;
  }

  .blog-posts__read-more:hover,
  .blog-posts__read-more:active,
  .blog-posts__read-more:visited {
    color: inherit;
  }

  .blog-posts__read-more:hover .blog-posts__read-more-icon,
  .blog-posts__read-more:active .blog-posts__read-more-icon,
  .blog-posts__read-more:focus .blog-posts__read-more-icon {
    transform: translateX(3px);
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:41) */
/*
   * When the OCS cart page component is present, hide the stock Horizon
   * checkout button from _cart-summary so only the OCS-gated one shows.
   */
  ocs-cart-page-component .cart__checkout-button,
  ocs-cart-page-component [name="checkout"],
  ocs-cart-page-component .shopify-payment-button {
    display: none !important;
  }

  /* header-actions.liquid scopes .cart-items-component to sidebar width for the drawer.
     Override here so the cart page's wrapper fills full page width instead. */
  ocs-cart-page-component .cart-items-component {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .cart-page {
    --cart-font-size--2xs: var(--font-size--2xs);
    --cart-font-size--xs: var(--font-size--xs);
    --cart-font-size--sm: var(--font-size--sm);
    --cart-font-size--md: var(--font-size--md);
    --cart-font-size--lg: var(--font-size--lg);
    --cart-font-size--xl: var(--font-size--xl);
    --cart-font-size--2xl: var(--font-size--2xl);
  }

  .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--empty .cart-title {
    text-align: center;
  }

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

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

  @media screen and (min-width: 750px) {
    .cart-page:not(.cart-page--empty) {
      display: flex;
      align-items: flex-start;
      gap: var(--padding-5xl);
    }

    .cart-page__main {
      flex: 1 1 0;
      min-width: 0;
    }

    .cart-page__summary {
      flex: 0 0 var(--sidebar-width, 25rem);
      width: var(--sidebar-width, 25rem);
      padding-top: 0;
      position: sticky;
      top: 0;
    }

    body:has(> #header-group .header[sticky]) .cart-page__summary {
      top: var(--header-height, 0);
    }
  }
/* END_SECTION:main-cart */

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

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

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  /* Make product media go edge-to-edge by using negative margins */
  :is(.collection-wrapper--full-width) .card-gallery,
  :is(.collection-wrapper--full-width-on-mobile) .card-gallery {
    @media screen and (max-width: 749px) {
      margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
      margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:main-customer-account (INDEX:44) */
.customer-account--orders {
    --page-margin: 15px;
    --page-content-width: 1200px;
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
  }

  .customer-account__orders-header {
    margin-block-end: var(--gap-md);
  }

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

  .customer-account__orders {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Top padding used to stack with the nav's own 40px margin-block-end
     (customer-account-nav.liquid) for a 60px gap above this message; zeroed
     here so the nav's margin is the only contributor, matching the defect's
     40px tab-to-content spec. Bottom padding is unrelated and untouched. */
  .customer-account__no-orders {
    padding: 0 0 var(--padding-xl);
    color: #3f3f3f;
    font-size: 15px;
    text-align: center;
  }

  .customer-account__pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xl);
  }
/* END_SECTION:main-customer-account */

/* START_SECTION:main-customer-activate-account (INDEX:45) */
.customer-account__rules-spacer {
    margin-block-start: var(--gap-lg);
    margin-block-end: var(--gap-lg);
  }

  .customer-account__subhead {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    font-size: var(--font-size--sm);
  }

  .customer-account__form-actions--activate {
    flex-direction: column;
    gap: var(--gap-sm);
  }

  /*
   * Decline button — activate-account page
   * ─────────────────────────────────────────────────────────────────────────
   * Outlined green with the same reverse circle-expand hover animation used by
   * the Cancel button in address forms and the logout button.
   *
   * Height parity with the primary Activate button (both render at 54px):
   *   - font-size/line-height match: 14px / 20px (same as primary)
   *   - padding-block: var(--button-padding-block) = 16px per side = 32px total
   *     (the old var(--padding-xs) = 8px per side = 16px total was the 16px deficit)
   *   - border: 1px solid #2e7631 matches primary's border (both contribute 2px outer)
   *   - box-shadow: none prevents any inherited inset border
   */
  .customer-account__submit--decline {
    width: 100%;
    background: transparent;
    color: #2e7631;
    /* Match the primary button's border exactly (1px solid, not inset shadow)
       so both buttons contribute identical 2px to outer height under border-box.
       box-shadow: none prevents an inset border from rendering a double outline. */
    border: 1px solid #2e7631;
    box-shadow: none;
    border-radius: 3px;
    /* Use the same padding tokens as the primary button so both render at the
       same block height. The primary inherits padding-block: var(--button-padding-block)
       (= 16px) and padding-inline: var(--button-padding-inline) (= 24px) from
       base.css. The old var(--padding-xs) = 8px per side was 8px short per side
       — a 16px deficit that caused the height mismatch. */
    padding-block: var(--button-padding-block);
    padding-inline: var(--button-padding-inline);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase;
    text-decoration: none;
    --button-border-width: 0;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }

  .customer-account__decline-text {
    position: relative;
    z-index: 1;
    transition: color 0.2s ease-in-out;
  }

  /* Animation host: fills the button, clips the expanding circle */
  .customer-account__decline-animation {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
  }

  /* Green circle that scales from 0→1 on hover */
  .customer-account__decline-animation::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 0;
    padding-bottom: 110%;
    border-radius: 50%;
    background: #2e7631;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
  }

  /* Green fill that fades in once the circle has fully expanded */
  .customer-account__decline-animation::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #2e7631;
    opacity: 0;
    transition: opacity 0.3s;
  }

  /* Hover: text turns white */
  .customer-account__submit--decline:hover .customer-account__decline-text {
    color: #fff;
  }

  /* Hover: circle expands */
  .customer-account__submit--decline:hover .customer-account__decline-animation::before {
    transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
  }

  /* Hover: green fill fades in after circle completes (0.3s delay) */
  .customer-account__submit--decline:hover .customer-account__decline-animation::after {
    opacity: 1;
    transition-duration: 0.01s;
    transition-delay: 0.3s;
  }

  /* Focus ring comes from the shared account rule in
     customer-account-shared-styles.liquid, which covers every `.ocs-button`
     under `.customer-account` at (0,3,0). A rule at (0,2,0) here could never
     apply. */
/* END_SECTION:main-customer-activate-account */

/* START_SECTION:main-customer-addresses (INDEX:46) */
/* -----------------------------------------------------------------------
     Addresses page layout
  ----------------------------------------------------------------------- */
  .customer-address {
    --page-margin: 15px;
    --page-content-width: 1200px;
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
  }

  .customer-address__grid {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    margin-block-end: var(--padding-xl);
  }

  .customer-address__empty {
    padding: var(--padding-xl) 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    font-size: var(--font-size--sm);
    text-align: center;
  }

  /* -----------------------------------------------------------------------
     Empty state: exactly 20px from the tabs to the message, and 20px from
     the message to the add-address button. Several contributors have to be
     pinned — the grid, the nav's own margin, the <p>'s UA margin and its
     padding, and the button row's padding. The nav margin lands on 20px by
     collapsing against the <p>'s zeroed top margin; the button row uses
     padding, which does not collapse, so its 20px stands on its own.
  ----------------------------------------------------------------------- */

  /* The grid has nothing to show here, and a display:none box generates no
     margins — so its margin-block-end cannot push the message off the tabs. */
  .customer-address--empty .customer-address__grid {
    display: none;
  }

  .customer-address--empty .customer-account__nav {
    margin-block-end: 20px;
  }

  .customer-address--empty .customer-address__empty {
    margin: 0;
    padding: 0;
  }

  .customer-address--empty .customer-address__actions {
    padding-block-start: 20px;
  }

  .customer-address__actions {
    display: flex;
    justify-content: center;
    padding-block-start: var(--padding-md);
  }

  .customer-address__actions .ocs-button {
    width: min(290px, 100%);
  }

  /* Three classes so this clears the .ocs-button.gtm-add-new-address-main rule in
     customer-account-shared-styles, which pins font-size: 14px and would
     otherwise tie on specificity and be decided by bundle order. */
  .customer-address__actions .ocs-button.gtm-add-new-address-main {
    --ocs-button-height: var(--customer-account-cta-height);
    height: auto;
    min-height: var(--customer-account-cta-height);
    font-size: var(--customer-account-cta-font-size);
  }

  @media screen and (max-width: 640px) {
    .customer-address__actions,
    .customer-address__actions .ocs-button {
      width: 100%;
    }
  }

  .customer-address__dialog {
    display: contents;
  }

  .customer-address__dialog-inner {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(560px, calc(100vw - 2 * var(--padding-xl)));
    max-height: calc(100dvh - 2 * var(--padding-xl));
    overflow-y: auto;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background-rgb));
    padding: var(--padding-2xl);
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
  }

  .customer-address__dialog-close {
    position: absolute;
    top: var(--padding-lg);
    right: var(--padding-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    color: var(--color-foreground);
    padding: 0;
    border-radius: 2px;
  }

  .customer-address__dialog-close::before,
  .customer-address__dialog-close::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 1px;
    background: currentcolor;
  }

  .customer-address__dialog-close::before {
    transform: rotate(45deg);
  }

  .customer-address__dialog-close::after {
    transform: rotate(-45deg);
  }

  .customer-address__dialog-close:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .customer-address__dialog-title {
    margin: 0 0 var(--padding-xl);
    padding-right: var(--padding-2xl);
  }

  .customer-address__dialog-inner--full-screen {
    box-sizing: border-box;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .customer-address__dialog-inner--full-screen::backdrop {
    background: rgb(var(--color-background-rgb));
  }

  .customer-address__dialog--form .customer-address__form {
    width: 100%;
    max-width: 360px;
    gap: 24px;
    margin-inline: auto;
  }

  .customer-address__dialog--form .customer-text-field__input {
    height: 40px;
    margin: 0;
    padding: 15px 10px 0;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background-color: #ffffff;
    color: #000;
    font-family: Calibre, sans-serif;
    font-size: 15px;
    line-height: 1.2;
  }

  .customer-address__dialog--form .customer-text-field__input--select {
    padding-inline-start: 10px;
    padding-inline-end: calc(10px + 1.5rem);
    color: #000;
    font-size: 15px;
    background-position: right 10px center;
  }

  .customer-address__dialog--form .customer-text-field__input:focus-visible {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: 0;
    border-color: #dcdcdc;
  }

  .customer-address__dialog--form .customer-text-field__input--invalid {
    border: 1px solid #d91222;
  }

  .customer-address__dialog--form .customer-text-field__label {
    inset-inline-start: 10px;
    color: #979797;
    font-size: 15px;
    transition: all 0.05s linear;
  }

  .customer-address__dialog--form .customer-text-field__input:not(:placeholder-shown) ~ .customer-text-field__label,
  .customer-address__dialog--form .customer-text-field__input:focus ~ .customer-text-field__label,
  .customer-address__dialog--form
    .customer-text-field__input--select:has(option:checked:not([value='']))
    ~ .customer-text-field__label,
  .customer-address__dialog--form .customer-text-field__input--select:focus ~ .customer-text-field__label {
    top: 12px;
    transform: translateY(-50%);
    color: #4a4a4a;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .customer-address__dialog--form .customer-text-field__required {
    color: #d91222;
  }

  .customer-address__dialog--form .customer-address__dialog-title--form {
    padding-inline: var(--padding-2xl);
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
  }

  @media screen and (min-width: 1025px) {
    .customer-address__dialog--form .customer-address__dialog-title--form {
      margin-block-start: 24px;
      font-size: 32px;
    }
  }

  .customer-address__delete-dialog {
    display: contents;
  }

  .customer-address__delete-dialog-inner {
    position: fixed;
    inset: 0;
    width: min(420px, calc(100vw - 2 * var(--padding-xl)));
    margin: auto;
    padding: var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background-rgb));
    color: var(--color-foreground);
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.16);
  }

  .customer-address__delete-dialog-inner::backdrop {
    background: rgb(0 0 0 / 0.35);
  }

  .customer-address__delete-dialog-close {
    position: absolute;
    top: var(--padding-md);
    right: var(--padding-md);
    padding: 0.25em;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--color-foreground);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
  }

  .customer-address__delete-dialog-close:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .customer-address__delete-dialog-title {
    margin: 0 0 var(--padding-md);
    padding-right: var(--padding-2xl);
    font-size: var(--font-size--lg);
    line-height: 1.25;
  }

  .customer-address__delete-dialog-message {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
    font-size: var(--font-size--sm);
    line-height: var(--line-height-body);
  }

  .customer-address__delete-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gap-sm);
    margin-block-start: var(--padding-xl);
  }

  .customer-address__delete-dialog-actions .ocs-button {
    /* Equal flex basis so Cancel and Delete are always the same width
       regardless of label length (e.g. FR "Annuler" vs "Supprimer"),
       overriding the base .ocs-button width: fit-content. */
    flex: 1 1 0;
    /* Both buttons on the account CTA ladder, so the primary (Delete) and the
       outline (Cancel) stay the same height as each other and as every other CTA.
       This pair used to be pinned at 40px/12px — the height matched on phones but
       stayed 4px short on desktop, and the type never reached the 14/16 the rest
       of the site's CTAs use. */
    --ocs-button-height: var(--customer-account-cta-height);
    padding: var(--padding-xs) var(--padding-md);
    font-size: var(--customer-account-cta-font-size);
    line-height: 16px;
  }

  @media (max-width: 640px) {

    .customer-address__delete-dialog-actions .ocs-button {
      width: 100%;
    }
  }
/* END_SECTION:main-customer-addresses */

/* START_SECTION:main-customer-login (INDEX:47) */
.customer-account {
    max-width: 480px;
    margin-inline: auto;
    /* padding: var(--padding-xl); */
    /* box-sizing: content-box; */
  }

  .customer-account--login-section {
    max-width: 640px;
  }

  .customer-account--login {
    width: 100%;
    max-width: 390px;
    padding: 0;
  }

  .customer-account__panel {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg, 1.5rem);
  }

  /* Ensure the native hidden attribute wins over display:flex set above.
     Without this, the browser UA stylesheet's [hidden]{display:none} loses
     to the class selector above (higher specificity), causing both panels
     to render simultaneously before JS hydrates. */
  .customer-account__panel[hidden] {
    display: none;
  }

  .customer-account__form-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  /* A bare `.customer-account__title { margin: 0 0 var(--gap-xs) }` used to sit
     here and never applied: this section renders customer-account-shared-styles,
     whose title rule is more specific and sets production's `margin: 40px 0`.
     Removed rather than left as a decoy — it reads like the login title's spacing
     lives here, and it is also the one title rule that did not out-rank the h2
     utility, which the guards now require. */
  .customer-account--login .customer-account__title {
    text-align: center;
    white-space: normal;
  }

  .customer-account__fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .customer-account__field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .customer-account__field-wrapper {
    position: relative;
  }

  .customer-account__label {
    /* visually-hidden class handles screen-reader only display */
  }

  .customer-account__input {
    width: 100%;
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    font-size: inherit;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    appearance: none;
  }

  .customer-account__input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .customer-account__input--invalid {
    border-color: var(--color-error);
  }

  .customer-account__sign-in-error {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #d91222;
    font-size: 15px;
    line-height: 1.35;
  }

  .customer-account__sign-in-error ul {
    margin-block: 0;
    padding-inline-start: 0;
    list-style-type: none;
  }

  .customer-account__banner {
    font-size: 15px;
    line-height: 1.35;
  }

  /* Matches production ocs.ca `.forgot-password__notification-banner`
     (cdn/shop/t/1084/assets/css_theme.css). Kept byte-identical to the rule in
     snippets/customer-account-shared-styles.liquid — both compile into the same
     bundled stylesheet, so they must not diverge. See that file for the full
     rationale on the pinned typography. */
  .customer-account__banner--success {
    padding: 10px;
    border: 1px solid #2e7631;
    border-radius: 5px;
    background-color: #f8fff9;
    color: #2e7631;
    font-family: 'Calibre', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
  }

  @media screen and (min-width: 640px) {
    .customer-account__banner--success {
      font-size: 18px;
    }
  }

  /* The success confirmation is the first child of the recover panel, so it
     otherwise sits flush against the top. Add a little breathing room above it. */
  .customer-account__panel--recover .customer-account__banner--success {
    margin-block-start: var(--gap-lg);
  }

  .customer-account__banner--error {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #d91222;
  }

  .customer-account__recover-copy {
    margin: 0;
    color: #3f3f3f;
    font-size: 18px;
    line-height: 1.2;
  }

  .customer-account__form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .customer-account--login .gtm-forgot-password-cta {
    align-self: flex-end;
    font-weight: 400;
    text-align: end;
  }

  .customer-account--login .gtm-create-account-cta .customer-account__text-link,
  .customer-account--login .gtm-go-back-login-cta {
    font-weight: 400;
  }

  .customer-account__submit {
    width: 100%;
  }

  .customer-account__form-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    text-align: center;
  }

  /* .customer-account__text-button and .customer-account__link visual rules
     have been consolidated into .customer-account__text-link — see
     snippets/customer-account-shared-styles.liquid. The class names are
     preserved on the elements for GTM/JS targeting; they carry no standalone
     styles here any longer. */

  .customer-account__verify {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .customer-account__verify p {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    font-size: var(--font-size--sm);
  }
/* END_SECTION:main-customer-login */

/* START_SECTION:main-customer-order (INDEX:48) */
.customer-order__header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding-block-end: var(--padding-xl);
    border-bottom: var(--style-border-width-inputs) solid var(--color-border);
    margin-block-end: var(--padding-xl);
  }

  /* `<h1 class="customer-order__title h2">`, so base.css's `.h2.h2` (0,2,0) decided
     this title's size — a flat 40px before, the 26/55 production ladder now. The
     section modifier plus a doubled element class puts this at (0,3,0) so neither
     the size nor the margin depends on which stylesheet block compiled last.

     40px is held rather than matched: ocs.ca has no order-detail page to compare
     against (that portal is ontario-projects, and the order-history parity sprint
     recorded no title spec), so this is simply what UAT signed off. Its siblings in
     My Account are on the 24 -> 32 ladder, which is the obvious candidate if the
     merchant wants these unified — a follow-up decision, not a parity fix. */
  .customer-order .customer-order__title.customer-order__title {
    margin: 0;
    font-size: 40px;
  }

  .customer-order__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    align-items: center;
    font-size: var(--font-size--sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .customer-order__status-link {
    align-self: flex-start;
    margin-block-start: var(--gap-xs);
    padding: var(--padding-xs) var(--padding-md);
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
  }

  /* Cancelled banner */
  .customer-order__cancelled-banner {
    padding: var(--padding-md) var(--padding-lg);
    border: 1px solid #c44;
    background: rgb(196 68 68 / 0.06);
    border-radius: var(--style-border-radius-inputs);
    color: #c44;
    margin-block-end: var(--gap-lg);
    font-size: var(--font-size--sm);
  }

  /* Addresses */
  .customer-order__addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .customer-order__address-heading {
    margin: 0 0 var(--gap-xs);
  }

  .customer-order__address-body {
    font-style: normal;
    font-size: var(--font-size--sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
    line-height: 1.6;
  }

  /* Whole-order reorder form */
  .customer-order__reorder-form--order {
    margin-block-end: var(--padding-xl);
  }

  .customer-order__reorder-form.customer-order__reorder-form--order .ocs-button--primary {
    padding: var(--padding-xs) var(--padding-md);
    font-size: 12px;
    line-height: 16px;
    border: none;
    box-shadow: inset 0 0 0 1px #2e7631;
  }

  /* Line items table */
  .customer-order__items-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .customer-order__table {
    width: 100%;
    /* separate + border-spacing: 0 lets border-radius on the table render correctly */
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size--sm);
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    /* clip cell backgrounds so they don't escape the rounded corners */
    overflow: hidden;
  }

  /* thead border now lives on th cells (thead element border ignored under separate) */
  .customer-order__th {
    padding: var(--padding-md) var(--padding-lg);
    text-align: left;
    font-size: var(--font-size--xs);
    font-weight: var(--font-weight-medium, 500);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: var(--style-border-width-inputs) solid var(--color-border);
  }

  .customer-order__td {
    padding: var(--padding-md) var(--padding-lg);
    vertical-align: top;
    border-bottom: var(--style-border-width-inputs) solid var(--color-border);
  }

  /* Remove the bottom border on the last tbody row so it doesn't double up
     against the tfoot's top border */
  .customer-order__tbody tr:last-child .customer-order__td {
    border-bottom: 0;
  }

  .customer-order__row--unavailable {
    opacity: 0.6;
  }

  /* Merged image + name cell */
  .customer-order__item-cell {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
  }

  .customer-order__item-info {
    flex: 1;
    min-width: 0;
  }

  .customer-order__item-image {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-border);
  }

  .customer-order__item-image--placeholder {
    display: block;
    width: 64px;
    height: 64px;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-border);
  }

  /* Name column */
  .customer-order__item-title-link {
    display: block;
    color: var(--color-foreground);
    font-weight: var(--font-weight-medium, 500);
    text-underline-offset: 0.2em;
  }

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

  .customer-order__item-title-link:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
    border-radius: 2px;
  }

  .customer-order__item-variant,
  .customer-order__item-vendor,
  .customer-order__item-property {
    display: block;
    font-size: var(--font-size--xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    margin-block-start: 0.2em;
  }

  .customer-order__item-unavailable-note {
    display: block;
    font-size: var(--font-size--xs);
    color: var(--color-error, #dc2626);
    margin-block-start: var(--gap-xs);
  }

  /* Totals footer — tfoot element border is ignored under border-collapse:separate,
     so the separator lives on the first tfoot row's cells instead */
  .customer-order__tfoot tr:first-child td {
    border-top: var(--style-border-width-inputs) solid var(--color-border);
  }

  .customer-order__totals-label,
  .customer-order__totals-value {
    padding: var(--padding-sm) var(--padding-lg);
    font-size: var(--font-size--sm);
  }

  .customer-order__totals-label {
    text-align: right;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .customer-order__totals-label--total,
  .customer-order__totals-value--total {
    font-weight: var(--font-weight-bold, 600);
    font-size: var(--font-size--base);
    color: var(--color-foreground);
    border-top: var(--style-border-width-inputs) solid var(--color-border);
    padding-block-start: var(--padding-md);
  }

  /* Per-item reorder button */
  .customer-order__reorder-btn {
    white-space: nowrap;
    font-size: var(--font-size--xs);
    padding: var(--padding-sm) var(--padding-md);
  }

  /* Responsive */
  @media screen and (max-width: 768px) {
    .customer-order__addresses {
      grid-template-columns: 1fr;
      gap: var(--gap-lg);
    }

    .customer-order__th--reorder,
    .customer-order__td--reorder {
      display: none;
    }
  }
/* END_SECTION:main-customer-order */

/* START_SECTION:main-customer-register (INDEX:49) */
/* -----------------------------------------------------------------------
     Align the register layout with production (ocs.ca/account/register):
     centred title that scales up on larger screens, a solid (non-faded)
     sub-heading, and roomier 24px spacing between fields. Scoped to the
     register modifier so login / reset / activate are unaffected.
  ----------------------------------------------------------------------- */
  /* Match the production register title exactly (ocs.ca/account/register):
     Calibre 24px -> 32px, weight 600, line-height 1.22, #000, centred.
     Compound modifier plus a doubled element class (0,4,0) so every property wins
     over the .h2.h2 utility (base.css, uses --font-h2-* vars — weight 700, wrong
     colour/line-height) and over the shared title rule, regardless of the order
     Horizon compiles the stylesheet blocks in.

     This was (0,3,0), which was enough while the shared rule was (0,2,0). The
     shared rule has since been doubled itself — it had to be, to clear the same
     .h2.h2 — so (0,3,0) here became an exact tie with it and went back to
     depending on bundle order. One more class restores the intent the comment
     above already claimed. */
  .customer-account--auth-form.customer-account--register .customer-account__title.customer-account__title {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: normal;
    color: #000;
  }

  /* 1024px, not 750px. The comment above says this matches ocs.ca's 24 -> 32 step
     and the sizes were right, but production steps the account form titles at its
     1024 breakpoint — so between 750 and 1024 we were a size ahead of it. */
  @media (min-width: 1024px) {
    .customer-account--auth-form.customer-account--register .customer-account__title.customer-account__title {
      font-size: 32px;
    }
  }

  /* Sub-heading matches production .information--wrapper: solid #3f3f3f,
     body type (15 -> 18px, weight 400, line-height 1.3). */
  .customer-account--auth-form.customer-account--register .customer-account__subhead {
    color: #3f3f3f;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
  }

  @media (min-width: 750px) {
    .customer-account--auth-form.customer-account--register .customer-account__subhead {
      font-size: 18px;
    }
  }

  .customer-account--auth-form.customer-account--register .customer-account__fields {
    gap: 24px;
  }

  /* Space above "Create account" matches production's button margin (24px).
     Cancel the inherited form-content gap first, then add the full 24px. */
  .customer-account--register .customer-account__form-actions {
    margin-block-start: calc(24px - var(--gap-md));
  }

  .customer-account__form-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  /* -----------------------------------------------------------------------
     Vertical rhythm at the top of the register form, matched to production
     (ocs.ca css_theme.css). Production has no vertical padding anywhere in
     the register wrapper chain — every gap is a margin:
        .customer-account__register--form h2    { margin: 40px 0 }
        .customer-account__register .errors li  { margin: 10px 0 }
     so the title sits 40px below the header line, and when an error renders
     it takes that top slot at 10px with the title 40px under it. The section
     top padding is 0 to match, and these margins do the spacing.
  ----------------------------------------------------------------------- */

  /* base.css sets heading margin-block-start from a clamp and only zeroes it
     via :first-child — which the title stops being the moment an error renders
     above it. Pin production's 40px so the position does not depend on that. */
  .customer-account--register .customer-account__title {
    margin-block-start: 40px;
    /* The form-content flex gap supplies the remainder, for 40px total from
       the title to “By creating an account…”, not 40px plus the gap. */
    margin-block-end: calc(40px - var(--gap-md));
  }

  /* Only matches when an error actually renders, since the title is otherwise
     form-content's first child. */
  .customer-account--register .customer-account__form-content > .customer-account__errors:first-child {
    margin-block-start: 10px;
  }

  /* Flex items do not collapse margins and the container gap adds to them, so
     the title's 40px is trimmed by that gap to keep error -> title at 40px. */
  .customer-account--register .customer-account__errors + .customer-account__title {
    margin-block-start: calc(40px - var(--gap-md));
  }

  .customer-account__fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  /* Groups a field with the error message that belongs to it, so the message
     sits tight against its own input instead of inheriting the 24px gap that
     separates one field from the next. Hidden error containers are display:none
     and so contribute no gap, leaving the group flush with the stack. */
  .customer-account__field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .customer-account__verify {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .customer-account__verify p {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    font-size: var(--font-size--sm);
  }

  .customer-account__subhead {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    font-size: var(--font-size--sm);
  }

  .customer-account__marketing-label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    cursor: pointer;
  }

  .customer-account__marketing-checkbox-wrap {
    flex-shrink: 0;
    /* Match the text's font-size so the em-based nudge tracks the copy, then
       drop the checkbox by the first line's half-leading (line-height 1.3 ->
       0.15em) so its top sits level with the top of the text glyphs. */
    font-size: var(--font-size--sm);
    line-height: 1.3;
    padding-block-start: 0.15em;
  }

  .customer-account__checkbox {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    display: inline-grid;
    place-content: center;
    margin: 0;
  }

  .customer-account__checkbox::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    opacity: 0;
    transition: opacity 0.1s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 12L13 5' stroke='%232e7631' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .customer-account__checkbox:checked {
    border-color: #2e7631;
  }

  .customer-account__checkbox:checked::before {
    opacity: 1;
  }

  .customer-account__checkbox:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .customer-account__marketing-text {
    font-size: var(--font-size--sm);
    line-height: 1.3;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .customer-account__register-footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-block-start: var(--gap-xs);
  }

  /* Font matches production's .customer-account__privacy--wrapper, which
     inherits the body: 13px -> 15px, line-height 1.3, solid #3f3f3f. */
  .customer-account__terms-privacy,
  .customer-account__have-account {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    color: #3f3f3f;
  }

  .customer-account__have-account {
    text-align: center;
  }

  @media (min-width: 750px) {
    .customer-account__terms-privacy,
    .customer-account__have-account {
      font-size: 15px;
    }
  }

  /* Inline anchors from translation strings — cannot carry .customer-account__text-link
     directly, so we match the shared style manually. Production uses the OCS
     green (#2e7631), underlined. */
  .customer-account__terms-privacy a,
  .customer-account__have-account a {
    color: #2e7631;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color 0.15s ease, opacity 0.15s ease;
  }

  .customer-account__terms-privacy a:hover,
  .customer-account__have-account a:hover {
    color: var(--color-primary-hover);
    opacity: 0.85;
  }

  .customer-account__terms-privacy a:focus-visible,
  .customer-account__have-account a:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
    border-radius: 3px;
  }
/* END_SECTION:main-customer-register */

/* START_SECTION:main-customer-reset-password (INDEX:50) */
/* Reset-password title: centred with tighter spacing beneath it.
     Scoped with the compound modifier, and the element class doubled, so it wins
     over the shared `.customer-account--auth-form .customer-account__title` rule
     without affecting login/register/activate. The doubling is what keeps that
     true now the shared rule is doubled too — and the 16px margin in particular
     needs it, since base.css now gives every h2 a 20px bottom margin. */
  .customer-account--auth-form.customer-account--reset-password .customer-account__title.customer-account__title {
    text-align: center;
    margin-block-end: 16px;
  }

  .customer-account__rules-spacer {
    margin-block-start: var(--gap-lg);
    margin-block-end: var(--gap-lg);
  }

  .customer-account__form-actions--reset {
    margin-block-start: var(--gap-lg);
  }
/* END_SECTION:main-customer-reset-password */

/* START_SECTION:marquee (INDEX:52) */
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:53) */
.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:mini-tiles (INDEX:54) */
.mini-tiles *,
  .mini-tiles *::before,
  .mini-tiles *::after {
    box-sizing: border-box;
  }

  /*
    Reused from theme:
    - color-<scheme> class on wrapper (bg + text via theme color scheme)
    - var(--color-foreground)
    - var(--font-body--family)
  */

  .mini-tiles {
    --mini-tiles-heading-size: 32px;
    --mini-tiles-image-size: 80px;
    --mini-tiles-desktop-image-size: 100px;
    --mini-tiles-radius: 10px;
    --mini-tiles-columns-mobile: 3;
    /* Temporary old-theme font-rendering comparison. */
    -webkit-font-smoothing: auto;
    margin: 60px auto;
    padding-inline: 16px;
    overflow: visible;
  }

  .mini-tiles__inner {
    width: 100%;
    margin: 0 auto;
  }

  .mini-tiles__heading {
    margin: 0;
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: clamp(24px, 2.22vw, var(--mini-tiles-heading-size));
    font-weight: 600;
    line-height: 1.22;
    /* No letter-spacing: ocs.ca sets none on `.mini-tiles h3`, or on any heading
       anywhere — its only heading tracking is positive (h5 gets +1px). The -1.25px
       that was here was the most visible instance of negative tracking we had
       applied to a ported section. `normal` rather than 0 to match production,
       which simply never declares it. */
    letter-spacing: normal;
    text-align: center;
  }

  .mini-tiles__list {
    display: grid;
    grid-template-columns: repeat(var(--mini-tiles-columns-mobile), var(--mini-tiles-image-size));
    column-gap: clamp(10px, 5.21vw, 47px);
    row-gap: 16px;
    justify-content: center;
    align-items: start;
    padding: 0;
    margin: 30px 0 0;
    list-style: none;
  }

  .mini-tiles__item {
    list-style: none;
    text-align: center;
  }

  .mini-tiles__link {
    display: block;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .mini-tiles__media {
    display: block;
    width: var(--mini-tiles-image-size);
    height: var(--mini-tiles-image-size);
    aspect-ratio: 1 / 1;
    /* .mini-tiles__item is text-align: center, but that only centers inline
       content — this is a fixed-width block, so it needs its own centering.
       At >=1280px the item's flex-basis (120px) is wider than the image
       (--mini-tiles-desktop-image-size, default 100px), so without this the
       image sits flush-left in its column while the focus outline on
       .mini-tiles__link (which matches the full column width) stays centered
       — the two visibly disagree when tabbing through the tiles. */
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--mini-tiles-radius);
    background-color: #f2f2f2;
    box-shadow: 0 15px 28px rgba(0, 0, 0, 0.08);
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  .mini-tiles__link:hover .mini-tiles__media {
    transform: translateY(-4px);
    box-shadow: 0 24px 38px rgba(0, 0, 0, 0.16);
  }

  /* Keyboard focus gets the same highlighted shadow as hover, but not the
     lift — the outline below already marks focus, and shifting the image up
     while it's also getting an outline read as jittery when tabbing through
     the row. */
  .mini-tiles__link:focus-visible .mini-tiles__media {
    box-shadow: 0 24px 38px rgba(0, 0, 0, 0.16);
  }

  .mini-tiles__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
    border-radius: calc(var(--mini-tiles-radius) + 6px);
  }

  .mini-tiles__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mini-tiles__image--placeholder {
    background-color: #f2f2f2;
  }

  .mini-tiles__label {
    display: block;
    margin-block-start: 6px;
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: 0;
    text-align: center;
  }

  @media (min-width: 640px) {
    .mini-tiles {
      margin: 70px auto;
      padding-inline: 24px;
    }

    .mini-tiles__heading {
      font-size: var(--mini-tiles-heading-size);
      /* Inherits `normal` from the base rule now; production has no desktop
         tracking step for this heading either. */
    }

    .mini-tiles__list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: clamp(20px, 1.797vw, 47px);
      margin-block-start: 30px;
    }

    .mini-tiles__item {
      flex: 0 0 var(--mini-tiles-image-size);
    }
  }

  @media (min-width: 1280px) {
    .mini-tiles__list {
      gap: 0;
    }

    .mini-tiles__item {
      flex-basis: 120px;
    }

    .mini-tiles__media {
      width: var(--mini-tiles-desktop-image-size);
      height: var(--mini-tiles-desktop-image-size);
    }

    .mini-tiles__label {
      font-size: 20px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mini-tiles *,
    .mini-tiles *::before,
    .mini-tiles *::after {
      transition-duration: 0.01ms !important;
    }

    .mini-tiles__link:hover .mini-tiles__media {
      transform: none;
    }
  }
/* END_SECTION:mini-tiles */

/* START_SECTION:mosaic (INDEX:55) */
/*
    Reused from theme:
    - .section, .section--page-width, .section-background, .spacing-style
    - .ocs-button and OCS button modifiers
    - .color-[scheme] (theme color scheme class)
  */

  .mosaic *,
  .mosaic *::before,
  .mosaic *::after {
    box-sizing: border-box;
  }

  /* ── Grid ─────────────────────────────────────────────────────────────── */

  .mosaic__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mosaic-gap, 18px);
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* ── Item ─────────────────────────────────────────────────────────────── */

  .mosaic__item {
    position: relative;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    list-style: none;
  }

  .mosaic__item--large {
    grid-column: span 2;
  }

  /* ── Scrim (::before) ─────────────────────────────────────────────────── */

  .mosaic__item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--mosaic-overlay-bg, #ffffff00);
    pointer-events: none;
  }

  /* ── Media (image) ────────────────────────────────────────────────────── */

  .mosaic__media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .mosaic__media--placeholder {
    background-color: #f2f2f2;
  }

  /* Mobile / desktop image visibility */
  .mosaic__media--mobile {
    display: block;
  }

  .mosaic__media--desktop {
    display: none;
  }

  /* ── Media link (small image-only tiles) ─────────────────────────────── */

  .mosaic__media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
  }

  .mosaic__media-link:focus-visible {
    outline: 3px solid var(--color-foreground, #000);
    outline-offset: -4px;
  }

  /* ── Content overlay ──────────────────────────────────────────────────── */

  .mosaic__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: var(--mosaic-content-align, center);
    justify-content: center;
    padding: 12px 8px;
    color: var(--mosaic-text-color, #000000);
    text-align: var(--mosaic-text-align, center);
  }

  /* ── Typography ───────────────────────────────────────────────────────── */

  .mosaic__heading {
    margin: 0 0 8px;
    color: currentColor;
    font-family: var(--font-h2--family, var(--font-body--family, sans-serif));
    font-size: clamp(20px, 4.5vw, 29px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .mosaic__copy {
    width: 100%;
    max-width: 320px;
    margin: 0 0 16px;
    color: currentColor;
    font-family: var(--font-paragraph--family, var(--font-body--family, sans-serif));
    font-size: clamp(14px, 2.5vw, 16px);
    font-weight: 400;
    line-height: 1.45;
  }

  .mosaic__copy p {
    margin: 0;
  }

  /* ── Button (theme classes provide visual style) ──────────────────────── */

  .mosaic__button {
    flex-shrink: 0;
  }

  /* ── Desktop ≥ 750px ──────────────────────────────────────────────────── */

  @media screen and (min-width: 750px) {
    .mosaic__grid {
      grid-template-columns: repeat(var(--mosaic-columns, 4), minmax(0, 1fr));
      grid-auto-flow: dense;
    }

    .mosaic__item--large {
      grid-column: span 2;
      grid-row: span 2;
    }

    .mosaic__overlay {
      padding: 20px 18px;
    }

    .mosaic__heading {
      margin-block-end: 18px;
    }

    .mosaic__copy {
      margin-block-end: 20px;
    }

    /* Swap to desktop image at tablet+ */
    .mosaic__media--desktop {
      display: block;
    }

    .mosaic__media--mobile {
      display: none;
    }
  }

  /* ── Large desktop ≥ 1200px ───────────────────────────────────────────── */

  @media screen and (min-width: 1200px) {
    .mosaic__overlay {
      padding: 34px 28px;
    }

    .mosaic__heading {
      margin-block-end: 24px;
    }

    .mosaic__copy {
      margin-block-end: 24px;
      max-width: 360px;
    }
  }

  /* ── Reduced motion ───────────────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    .mosaic *,
    .mosaic *::before,
    .mosaic *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }
/* END_SECTION:mosaic */

/* START_SECTION:newsletter-banner (INDEX:56) */
/*
    Reused from theme:
    - .ocs-button and OCS button modifiers
    - var(--font-h2--family)
    - var(--font-paragraph--family)
    All other layout and spacing is section-scoped BEM.
  */

  .newsletter-banner,
  .newsletter-banner *,
  .newsletter-banner *::before,
  .newsletter-banner *::after {
    box-sizing: border-box;
  }

  .newsletter-banner {
    --newsletter-banner-overlay-color: #e6dc7100;
    --newsletter-banner-text: #000000;
    --newsletter-banner-muted: #272727;
    --newsletter-banner-card: #ffffff;
    --newsletter-banner-content-align: center;
    --newsletter-banner-required: #d11313;
    position: relative;
    display: grid;
    inline-size: 100%;
    min-block-size: var(--newsletter-banner-min-height, calc(100vw * 682 / 455));
    margin-block-start: 19px;
    margin-block-end: 20px;
    overflow: hidden;
    background: var(--newsletter-banner-overlay-color);
  }

  .newsletter-banner__media {
    position: absolute;
    z-index: 0;
    inset: 0;
    grid-area: 1 / 1;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
    background: var(--newsletter-banner-overlay-color);
  }

  .newsletter-banner__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--newsletter-banner-overlay-color, #e6dc7100);
    pointer-events: none;
  }

  .newsletter-banner__picture,
  .newsletter-banner__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .newsletter-banner__image--placeholder {
    background: #f2f2f2;
  }

  .newsletter-banner__content {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: var(--newsletter-banner-content-align, center);
    align-items: var(--newsletter-banner-content-align, center);
    inline-size: 100%;
    min-block-size: var(--newsletter-banner-min-height, calc(100vw * 682 / 455));
    padding-block-start: 125px;
    /*
      Without this the form card's bottom edge lands exactly on the section's,
      so the artwork stops dead at the card instead of framing it — and the box
      ends up too short for the image, which `object-fit: cover` then crops.
      64px is production's own value: .email-marketing-section-wrapper is
      `padding: 64px 15px` under its 639px breakpoint. Every breakpoint from
      750px up sets its own padding-block, so this only reaches mobile.
    */
    padding-block-end: 64px;
    padding-inline: 17px;
  }

  .newsletter-banner__copy {
    inline-size: 100%;
    padding: 0;
    color: var(--newsletter-banner-text);
  }

  .newsletter-banner__heading {
    margin: 0 0 21px;
    color: var(--newsletter-banner-text);
    font-family: var(--font-h2--family, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
  }

  .newsletter-banner__body {
    margin: 0;
    color: var(--newsletter-banner-muted);
    font-family: var(--font-paragraph--family, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.43;
    letter-spacing: 0;
  }

  .newsletter-banner__body p {
    margin: 0;
  }

  .newsletter-banner__form-card {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    min-block-size: calc(100vw * 368 / 455);
    padding: 15px 24px;
    border-radius: 10px;
    background: var(--newsletter-banner-card);
    box-shadow: 1px 1px 12px rgb(0 0 0 / 12%);
    color: #242424;
  }

  .newsletter-banner__form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .newsletter-banner__required-note {
    margin: 0 0 7px;
    color: #2f2f2f;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-align: end;
  }

  .newsletter-banner__required-star {
    color: var(--newsletter-banner-required);
  }

  .newsletter-banner__field {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }

  .newsletter-banner__label {
    display: block;
    margin: 0 0 6px;
    color: #2f2f2f;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
  }

  .newsletter-banner__input {
    display: block;
    inline-size: 100%;
    min-block-size: 41px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #006d3c;
    border-radius: 4px;
    background: #ffffff;
    color: #000000;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    outline: none;
    appearance: none;
  }

  .newsletter-banner__consent {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    align-items: start;
    margin-block-end: 18px;
    cursor: pointer;
  }

  .newsletter-banner__checkbox {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .newsletter-banner__checkbox-visual {
    position: relative;
    display: block;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 0;
    background: #e5e5e5;
    pointer-events: none;
  }

  .newsletter-banner__checkbox:checked + .newsletter-banner__checkbox-visual {
    background: #006d3c;
    border-color: #006d3c;
  }

  .newsletter-banner__checkbox:checked + .newsletter-banner__checkbox-visual::after {
    content: "";
    position: absolute;
    inset-block-start: 45%;
    inset-inline-start: 50%;
    inline-size: 0.38rem;
    block-size: 0.68rem;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg);
  }

  .newsletter-banner__input:focus-visible,
  .newsletter-banner__checkbox:focus-visible + .newsletter-banner__checkbox-visual {
    outline: 2px solid #006d3c;
    outline-offset: 2px;
  }

  .newsletter-banner__input[aria-invalid="true"] {
    border-color: var(--newsletter-banner-required);
  }

  .newsletter-banner__consent-text {
    display: flex;
    gap: 6px;
    margin: 0;
    color: #333333;
    font-family: var(--font-paragraph--family, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
  }

  .newsletter-banner__consent-text p {
    margin: 0;
  }

  .newsletter-banner__submit.ocs-button {
    inline-size: 100%;
    width: 100%;
    margin: 0;
  }

  /*
    base.css:1730 sets `pointer-events: none` on [aria-disabled='true'], which
    is right for a button that does nothing but wrong here: pressing this one
    is how the user finds out what is still missing. The dimming and the
    not-allowed cursor from that same rule are kept.
  */
  .newsletter-banner__submit.ocs-button[aria-disabled='true'] {
    pointer-events: auto;
  }

  .newsletter-banner__terms-title {
    display: inline-block;
    margin: 28px 0 13px;
    color: #2b2b2b;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
  }

  .newsletter-banner__terms-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  .newsletter-banner__disclaimer {
    color: #333333;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
  }

  .newsletter-banner__disclaimer p {
    margin: 0;
  }

  .newsletter-banner__message {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.4;
  }

  /*
    Stated rather than left to the UA sheet: several rules in here set `display`
    on message-adjacent elements, and a validation error that fails to hide is
    worse than one that fails to show.
  */
  .newsletter-banner__message[hidden] {
    display: none;
  }

  /*
    The consent label carries an 18px bottom margin for the gap to the button.
    With an error between them that gap belongs under the error, not above it,
    or the message floats midway and reads as though it belongs to the button.
  */
  .newsletter-banner__consent:has(+ .newsletter-banner__message--consent:not([hidden])) {
    margin-block-end: 8px;
  }

  .newsletter-banner__success {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #333333;
    text-align: center;
  }

  .newsletter-banner__success-content {
    display: grid;
    justify-items: center;
    min-inline-size: 0;
  }

  .newsletter-banner__success-icon {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border: 2px solid #006d3c;
    border-radius: 50%;
    color: #006d3c;
  }

  .newsletter-banner__success-icon::before {
    content: "";
    inline-size: 7px;
    block-size: 12px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
  }

  .newsletter-banner__success-title {
    margin: 0;
    color: #333333;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
  }

  .newsletter-banner__success-text {
    margin: 8px 0 0;
    color: #333333;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
  }

  .newsletter-banner__message--error {
    color: #d11313;
    font-size: 15px;
  }

  @media (min-width: 750px) {
    .newsletter-banner {
      min-block-size: var(--newsletter-banner-min-height, calc(100vw * 428 / 1909));
      margin-block-start: 52px;
      margin-block-end: 47px;
    }

    .newsletter-banner__image {
      object-position: center center;
    }

    .newsletter-banner__copy {
      inline-size: 100%;
      max-inline-size: none;
    }

    .newsletter-banner__heading {
      margin-block-end: 20px;
      font-size: 32px;
      line-height: 1.22;
      letter-spacing: 0;
    }

    .newsletter-banner__body {
      font-size: 18px;
      line-height: 1.3;
    }

    .newsletter-banner__form-card {
      inline-size: 100%;
      max-inline-size: none;
      min-block-size: calc(100vw * 348 / 1909);
      padding: 15px 24px;
    }

    .newsletter-banner__required-note {
      margin-block-end: 8px;
    }

    .newsletter-banner__field {
      margin-block-end: 15px;
    }

    .newsletter-banner__label {
      margin-block-end: 6px;
    }

    .newsletter-banner__input {
      min-block-size: 41px;
      border-color: #d7d7d7;
      border-radius: 4px;
      line-height: 1.2;
    }

    .newsletter-banner__consent {
      grid-template-columns: auto minmax(0, 1fr);
      /* column-gap: 17px; */
      margin-block-end: 16px;
    }

    .newsletter-banner__checkbox,
    .newsletter-banner__checkbox-visual {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }

    .newsletter-banner__consent-text {
      font-size: 15px;
      line-height: 1.3;
    }

    .newsletter-banner__terms-title {
      margin-block-start: 28px;
      margin-block-end: 13px;
    }
  }

  @media (min-width: 750px) and (max-width: 1199px) {
    .newsletter-banner {
      min-block-size: var(--newsletter-banner-min-height, calc(100vw * 428 / 1909));
    }

    .newsletter-banner__content {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      row-gap: 30px;
      align-content: var(--newsletter-banner-content-align, center);
      align-items: var(--newsletter-banner-content-align, center);
      block-size: auto;
      min-block-size: var(--newsletter-banner-min-height, calc(100vw * 428 / 1909));
      padding-block: 64px;
      padding-inline: clamp(32px, 5vw, 64px);
    }

    .newsletter-banner__copy {
      inline-size: 100%;
      max-inline-size: none;
    }

    .newsletter-banner__form-card {
      justify-self: stretch;
      inline-size: 100%;
      max-inline-size: none;
      block-size: auto;
      min-block-size: 0;
    }
  }

  @media (min-width: 1200px) and (max-width: 1829px) {
    .newsletter-banner {
      min-block-size: var(--newsletter-banner-min-height, calc(100vw * 428 / 1909));
    }

    .newsletter-banner__content {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
      column-gap: clamp(40px, 4vw, 78px);
      align-content: var(--newsletter-banner-content-align, center);
      align-items: var(--newsletter-banner-content-align, center);
      inline-size: calc(100% - clamp(64px, 5vw, 96px));
      block-size: auto;
      min-block-size: var(--newsletter-banner-min-height, calc(100vw * 428 / 1909));
      margin-inline: auto;
      padding-block: 40px;
    }

    .newsletter-banner__copy {
      inline-size: 100%;
      max-inline-size: none;
    }

    .newsletter-banner__form-card {
      justify-self: end;
      inline-size: 100%;
      max-inline-size: none;
      block-size: auto;
      min-block-size: calc(100vw * 348 / 1909);
    }
  }

  /* Legacy homepage desktop split: 60% copy / 40% form inside a 1440px frame. */
  @media (min-width: 1024px) {
    .newsletter-banner__content {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      column-gap: 0;
      align-content: var(--newsletter-banner-content-align, center);
      align-items: var(--newsletter-banner-content-align, center);
      inline-size: min(100%, 1440px);
      min-block-size: var(--newsletter-banner-min-height, calc(100vw * 428 / 1909));
      margin-inline: auto;
      padding: 40px 80px;
    }

    .newsletter-banner__copy {
      padding: 0 70px;
    }

    .newsletter-banner__form-card {
      justify-self: stretch;
      min-block-size: 0;
    }
  }

  @media (min-width: 1830px) {
    .newsletter-banner__content {
      grid-template-columns: minmax(0, 51.24%) minmax(0, 42.31%);
      column-gap: 6.45%;
      align-content: var(--newsletter-banner-content-align, center);
      align-items: var(--newsletter-banner-content-align, center);
      inline-size: 63.38vw;
      min-block-size: var(--newsletter-banner-min-height, calc(100vw * 428 / 1909));
      margin-inline-start: 19.95vw;
      margin-inline-end: auto;
      padding-block-start: 40px;
      padding-inline: 0;
    }

    .newsletter-banner__copy {
      margin-block-start: 0;
    }

    .newsletter-banner__form-card {
      justify-self: stretch;
      inline-size: 100%;
      max-inline-size: none;
      block-size: auto;
      min-block-size: calc(100vw * 348 / 1909);
    }
  }

  @media (min-width: 1830px) {
    .newsletter-banner__content {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      column-gap: 0;
      inline-size: min(100%, 1440px);
      margin-inline: auto;
      padding: 40px 80px;
    }

    .newsletter-banner__copy {
      padding: 0 70px;
    }

    .newsletter-banner__form-card {
      min-block-size: 0;
    }
  }
/* END_SECTION:newsletter-banner */

/* START_SECTION:notice-banner (INDEX:57) */
.notice-banner {
    display: block;
    position: relative;
    text-align: start;
  }

  @media screen and (min-width: 1024px) {
    .notice-banner {
      text-align: center;
    }
  }

  #header-group .section-notice-banner {
    position: sticky;
    top: calc(var(--header-section-height, var(--header-height, 0px)) + var(--algolia-search-bar-height, 0px) - 2px);
    z-index: calc(var(--layer-sticky) - 1);
    margin-block: 0;
  }

  .notice-banner--dismissed {
    display: none;
  }

  .notice-banner__link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }

  .notice-banner__content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1280px;
    margin-inline: auto;
    line-height: 1.3;
    padding: 10px 60px 10px 15px;
  }

  .notice-banner__content--has-icon {
    gap: 20px;
  }


  .notice-banner__close {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 6px;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    pointer-events: auto;
  }

  .notice-banner__close::before,
  .notice-banner__close::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 1px;
    height: 25px;
    background-color: currentColor;
  }

  .notice-banner__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .notice-banner__close::after {
    transform: translate(-50%, -50%) rotate(135deg);
  }

  .notice-banner__message {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body--family);
    font-size: 15px;
    line-height: 1.4;
    color: inherit;
  }

  .notice-banner__text > * {
    display: inline;
    margin: 0;
    word-break: break-word;
  }

  .notice-banner__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }

  .notice-banner__icon::before {
    font-family: 'Icons';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
  }

  .notice-banner__icon--warning::before {
    content: "\E028";
  }

  .notice-banner__icon--blowhorn::before {
    content: "\E005";
  }

  .notice-banner__cta {
    margin-inline-start: 6px;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  a.notice-banner__cta:hover,
  a.notice-banner__cta:focus-visible {
    text-decoration: unerline;
  }

  html.age-gate-restricted-experience .notice-banner--agegate-restricted {
    display: none;
  }
/* END_SECTION:notice-banner */

/* START_SECTION:ocs-article-product-carousels (INDEX:58) */
.ocs-article-product-carousels,
  .ocs-article-product-carousels *,
  .ocs-article-product-carousels *::before,
  .ocs-article-product-carousels *::after {
    box-sizing: border-box;
  }

  ocs-suggested-accessories.ocs-article-product-carousels {
    display: block;
  }

  .ocs-article-product-carousels .ocs-suggested-accessories__inner {
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
  }

  .ocs-article-product-carousels__carousel-group {
    min-width: 0;
  }

  .ocs-article-product-carousels__carousel-group + .ocs-article-product-carousels__carousel-group {
    margin-block-start: var(--ocs-article-product-carousels-gap);
  }

  .ocs-article-product-carousels .ocs-home-collection-blocks__header {
    margin-block-end: 30px;
  }

  .ocs-article-product-carousels .ocs-home-collection-blocks__title {
    margin: 0;
    color: var(--color-foreground, #1a1a1a);
    font-family: var(--font-h2--family, var(--font-body--family));
    font-size: 26px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
    text-transform: none;
  }

  .ocs-article-product-carousels .ocs-home-collection-blocks__subtitle {
    margin: 10px 0 0;
    color: #3f3f3f;
    font-family: var(--font-paragraph--family, var(--font-body--family));
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
  }

  .ocs-article-product-carousels .ocs-suggested-accessories__panel {
    display: none;
    opacity: 0;
  }

  .ocs-article-product-carousels .ocs-suggested-accessories__panel--active {
    display: block;
    opacity: 1;
  }

  .ocs-article-product-carousels .ocs-suggested-accessories__carousel slideshow-slides {
    max-width: 80%;
    margin: 0 auto;
    justify-content: safe center;
  }

  .ocs-article-product-carousels .ocs-suggested-accessories__carousel slideshow-arrows {
    padding-block: 8px;
    margin-block: -8px;
  }

  .ocs-article-product-carousels .ocs-suggested-accessories__carousel slideshow-arrows .slideshow-control {
    opacity: 1;
    color: #000;
    background: #fff;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
    animation: none;
  }

  .ocs-article-product-carousels .ocs-suggested-accessories__carousel .slideshow-control .icon-caret {
    rotate: 180deg;
  }

  .ocs-article-product-carousels .ocs-suggested-accessories__carousel .resource-list__item {
    height: 100%;
    padding: 8px;
  }

  .ocs-article-product-carousels .ocs-suggested-accessories__carousel slideshow-controls:has(.slideshow-controls__dots) {
    mix-blend-mode: normal;
  }

  .ocs-article-product-carousels .ocs-suggested-accessories__carousel .slideshow-controls__dots {
    --size: 13px;
  }

  .ocs-article-product-carousels .ocs-suggested-accessories__carousel .slideshow-controls__dots button::after {
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #a5a5a5;
  }

  .ocs-article-product-carousels .ocs-suggested-accessories__carousel .slideshow-controls__dots button[aria-selected='true']::after {
    background-color: #f4f4f4;
    box-shadow: inset 0 0 0 1px #a5a5a5;
  }

  .ocs-article-product-carousels__footer {
    margin-block-start: 20px;
    text-align: center;
  }

  .ocs-article-product-carousels__diagnostics {
    padding-block: 16px;
  }

  .ocs-article-product-carousels__diagnostic-list {
    margin: 0;
    padding-inline-start: 20px;
  }

  .ocs-article-product-carousels__diagnostic-list li {
    list-style: disc;
  }

  @media screen and (min-width: 640px) {
    .ocs-article-product-carousels .ocs-home-collection-blocks__subtitle {
      font-size: 18px;
    }
  }

  @media screen and (min-width: 1024px) {
    .ocs-article-product-carousels .ocs-home-collection-blocks__title {
      font-size: 32px;
    }
  }

  @media screen and (max-width: 999px) {
    .ocs-article-product-carousels .ocs-suggested-accessories__carousel {
      --column-count: 2 !important;
      --peek-next-slide-size: 0px !important;
    }
  }

  @media screen and (max-width: 749px) {
    .ocs-article-product-carousels .ocs-suggested-accessories__carousel {
      --column-count: var(--ocs-home-collection-blocks-columns-mobile) !important;
    }

    .ocs-article-product-carousels .ocs-suggested-accessories__carousel .resource-list__slide {
      --slide-width: 100% !important;
      --mobile-card-size: 100% !important;
    }

    .ocs-article-product-carousels.ocs-home-collection-blocks--mobile-2 .ocs-suggested-accessories__carousel .resource-list__slide {
      --slide-width: calc((100% - var(--ocs-home-collection-blocks-columns-gap)) / 2) !important;
      --mobile-card-size: calc((100% - var(--ocs-home-collection-blocks-columns-gap)) / 2) !important;
    }

    .ocs-article-product-carousels .ocs-suggested-accessories__carousel .resource-list__carousel slideshow-arrows {
      padding-inline: 0;
    }

    .ocs-article-product-carousels .ocs-home-collection-blocks__carousel--hide-arrow-container-mobile slideshow-arrows .slideshow-control {
      background: transparent;
      box-shadow: none;
    }

    .ocs-article-product-carousels .ocs-suggested-accessories__carousel slideshow-slides {
      max-width: 75%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ocs-article-product-carousels *,
    .ocs-article-product-carousels *::before,
    .ocs-article-product-carousels *::after {
      transition-duration: 0.01ms;
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
    }
  }
/* END_SECTION:ocs-article-product-carousels */

/* START_SECTION:ocs-category-disclaimer (INDEX:60) */
.ocs-category-disclaimer {
    padding-block: 0;
  }

  .ocs-category-disclaimer__inner {
    padding-block: 24px;
    /* border-top: 1px solid #E0E0E0; */
  }

  .ocs-category-disclaimer__label {
    font-weight: 400;
  }

  .ocs-category-disclaimer__text,
  .ocs-category-disclaimer__extra {
    max-width: 1080px;
    margin-inline: auto;
    font-family: inherit;
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0;
    color: #3F3F3F;
    margin: 0 auto;
  }

  .ocs-category-disclaimer__text p,
  .ocs-category-disclaimer__extra p {
    margin: 0;
  }

  .ocs-category-disclaimer__extra {
    margin-top: 8px;
  }

  @media screen and (max-width: 749px) {
    .ocs-category-disclaimer__text,
    .ocs-category-disclaimer__extra {
      font-size: 13px;
      line-height: 16px;
    }
  }
/* END_SECTION:ocs-category-disclaimer */

/* START_SECTION:ocs-feedback-tab (INDEX:61) */
.ocs-feedback-tab {
    /* Fixed to left edge, vertically centred */
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200; /* above sticky header by default; lowered below the mobile drawer while open */

    /* Writing-mode on the button (not the child span) so Safari correctly
       calculates the button's height from the rotated text content */
    writing-mode: vertical-rl;

    /* Brand styling */
    background-color: #2e7631;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;

    /* Shape */
    padding: 16px 8px;
    border: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;

    /* Smooth interaction */
    transition: background-color 0.2s ease;

    /* Reset any inherited text decoration */
    text-decoration: none;
  }

  .ocs-feedback-tab:hover,
  .ocs-feedback-tab:focus-visible {
    background-color: #235c28;
    outline: none;
  }

  .ocs-feedback-tab:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
  }

  .ocs-feedback-tab__label {
    display: block;
    transform: rotate(180deg);
  }

  @media screen and (max-width: 749px) {
    .ocs-feedback-tab {
      padding: 8px 4px;
      font-size: 12px;
    }

    body:has(.header__drawer--mobile .menu-drawer-container[open]) .ocs-feedback-tab {
      z-index: var(--layer-flat);
    }
  }
/* END_SECTION:ocs-feedback-tab */

/* START_SECTION:ocs-hero-banner (INDEX:62) */
.ocs-hero-banner,
  .ocs-hero-banner *,
  .ocs-hero-banner *::before,
  .ocs-hero-banner *::after {
    box-sizing: border-box;
  }

  /*
    Reused from theme:
    - color-<scheme> class for colour-scheme foreground/background tokens
    - .section / .section--full-width grid and .section-background sibling pattern
    - .ocs-button + modifiers from assets/base.css
    - --page-width / --page-margin for content bounds
    - --font-body--family and heading token fallbacks
  */

  .ocs-hero-banner {
    position: relative;
    min-height: var(--ocs-hero-banner-mobile-height, 354px);
    margin-bottom: var(--ocs-hero-banner-margin-bottom-mobile, 60px);
    overflow: hidden;
    isolation: isolate;
    background-color: var(--ocs-hero-banner-background-color, var(--color-background));
    color: var(--color-foreground);
  }

  .ocs-hero-banner__media,
  .ocs-hero-banner__picture {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
  }

  .ocs-hero-banner__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--ocs-hero-banner-mobile-object-position, center center);
  }

  .ocs-hero-banner__image--placeholder {
    background-color: #f2f2f2;
  }

  .ocs-hero-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: var(--ocs-hero-banner-mobile-content-align, flex-start);
    justify-content: center;
    gap: 20px;
    width: min(100%, var(--page-width, 1440px));
    min-height: inherit;
    margin-inline: auto;
    padding-block: 36px;
    padding-inline: var(--page-margin, 16px);
  }

  .ocs-hero-banner__copy,
  .ocs-hero-banner__actions {
    width: 100%;
  }

  .ocs-hero-banner__copy {
    text-align: var(--ocs-hero-banner-mobile-text-align, left);
  }

  .ocs-hero-banner__heading,
  .ocs-hero-banner__subheading {
    margin: 0;
    font-family: var(--font-body--family);
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance;
  }

  .ocs-hero-banner__heading {
    color: var(--ocs-hero-banner-heading-color, var(--color-foreground));
    font-size: var(--ocs-hero-banner-heading-size-mobile, 26px);
    font-weight: var(--ocs-hero-banner-heading-weight, 700);
  }

  .ocs-hero-banner__subheading {
    margin-block-start: 8px;
    color: var(--ocs-hero-banner-subheading-color, var(--color-foreground));
    font-size: var(--ocs-hero-banner-subheading-size-mobile, 22px);
    font-weight: var(--ocs-hero-banner-subheading-weight, 400);
  }

  .ocs-hero-banner__actions {
    display: block;
    text-align: var(--ocs-hero-banner-mobile-text-align, left);
  }

  .ocs-hero-banner__button.ocs-button {
    display: block;
    width: auto;
    /* Was pinned to 40px at every width, holding the hero CTA under spec on
       desktop. The ladder supplies 40/44. */
    min-height: var(--ocs-cta-height);
    height: auto;
    margin: 0;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }

  .ocs-hero-banner__button.ocs-button:last-child {
    margin-block-start: 10px;
  }

  @media (max-width: 639px) {
    .ocs-hero-banner__copy,
    .ocs-hero-banner__actions {
      max-width: 200px;
    }

    .ocs-hero-banner--configurable-content-width .ocs-hero-banner__copy,
    .ocs-hero-banner--configurable-content-width .ocs-hero-banner__actions {
      max-width: var(--ocs-hero-banner-mobile-content-max-width, 200px);
    }

    .ocs-hero-banner--responsive-copy-width .ocs-hero-banner__copy {
      max-width: var(--ocs-hero-banner-mobile-content-max-width, 200px);
    }
  }

  @media (min-width: 640px) {
    .ocs-hero-banner {
      min-height: var(--ocs-hero-banner-tablet-height, 409px);
      margin-bottom: var(--ocs-hero-banner-margin-bottom-desktop, 100px);
    }

    .ocs-hero-banner__image {
      object-position: var(--ocs-hero-banner-desktop-object-position, center center);
    }

    .ocs-hero-banner__inner {
      align-items: var(--ocs-hero-banner-desktop-content-align, flex-start);
      gap: 24px;
      padding-block: 60px;
    }

    .ocs-hero-banner__copy {
      text-align: var(--ocs-hero-banner-desktop-text-align, left);
    }

    .ocs-hero-banner__heading {
      font-size: var(--ocs-hero-banner-heading-size-desktop, 45px);
    }

    .ocs-hero-banner__subheading {
      margin-block-start: 0;
      font-size: var(--ocs-hero-banner-subheading-size-desktop, 35px);
    }

    .ocs-hero-banner__actions {
      text-align: var(--ocs-hero-banner-desktop-text-align, left);
    }

    .ocs-hero-banner__actions .ocs-hero-banner__button.ocs-button {
      display: inline-block;
      width: calc(50% - 20px);
      margin-inline-end: 20px;
      font-size: 16px;
      font-weight: 700;
      vertical-align: top;
    }

    .ocs-hero-banner__actions .ocs-hero-banner__button.ocs-button:last-child {
      margin-block-start: 0;
      margin-inline-end: 0;
    }
  }

  @media (max-width: 1023px) {
    .ocs-hero-banner__inner {
      max-width: 620px;
    }
  }

  /*
    Fixed breakpoint heights are the shared default (homepage, retail hub).
    Sections that opt into configurable heights use the range settings instead.
  */
  @media (min-width: 640px) {
    .ocs-hero-banner:not(.ocs-hero-banner--configurable-heights) {
      min-height: var(--ocs-hero-banner-desktop-height, 479px);
    }
  }

  @media (max-width: 1023px) {
    .ocs-hero-banner:not(.ocs-hero-banner--configurable-heights) {
      min-height: 409px;
    }
  }

  @media (max-width: 639px) {
    .ocs-hero-banner:not(.ocs-hero-banner--configurable-heights) {
      min-height: 344px;
    }
  }

  @media (min-width: 1024px) {
    .ocs-hero-banner {
      min-height: var(--ocs-hero-banner-desktop-height, 479px);
    }

    .ocs-hero-banner__copy,
    .ocs-hero-banner__actions {
      max-width: 480px;
    }

    .ocs-hero-banner--configurable-content-width .ocs-hero-banner__copy,
    .ocs-hero-banner--configurable-content-width .ocs-hero-banner__actions {
      max-width: var(--ocs-hero-banner-desktop-content-max-width, 480px);
    }
  }

  @media (min-width: 1280px) {
    .ocs-hero-banner__inner {
      padding-inline: 180px;
    }
  }

  @media (min-width: 1440px) {
    .ocs-hero-banner__inner {
      padding-inline: 124px;
    }

    /* Original left-aligned landing hero: copy sits 90px inside the page container. */
    .ocs-hero-banner__inner {
      padding-inline-start: calc(124px + var(--ocs-hero-banner-desktop-content-inset, 0px));
    }
  }

  @media (min-width: 1920px) {
    .ocs-hero-banner--responsive-copy-width .ocs-hero-banner__copy {
      max-width: var(--ocs-hero-banner-desktop-content-max-width, 480px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ocs-hero-banner *,
    .ocs-hero-banner *::before,
    .ocs-hero-banner *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
/* END_SECTION:ocs-hero-banner */

/* START_SECTION:ocs-home-collection-blocks (INDEX:63) */
/*
    Reused from PDP product-card stack:
    - assets/ocs-product-card.css and assets/ocs-product-card.js
    - assets/ocs-suggested-accessories.js for tabs and carousel patching
    - snippets/ocs-product-card, resource-list-carousel, slideshow-controls
    - .section, .section--page-width, .spacing-style, color scheme wrappers
  */

  .ocs-home-collection-blocks,
  .ocs-home-collection-blocks *,
  .ocs-home-collection-blocks *::before,
  .ocs-home-collection-blocks *::after {
    box-sizing: border-box;
  }

  ocs-suggested-accessories.ocs-home-collection-blocks {
    display: block;
  }

  .ocs-home-collection-blocks {
    --ocs-home-collection-blocks-columns-desktop: 4;
    --ocs-home-collection-blocks-columns-mobile: 1;
    --ocs-home-collection-blocks-columns-gap: 16px;
    gap: var(--gap, 28px) 0;
  }

  .ocs-home-collection-blocks--margin-spacing.spacing-style {
    padding-block: 0;
    margin-block: var(--padding-block-start) var(--padding-block-end);
  }

  .ocs-home-collection-blocks__inner {
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
  }

  .ocs-home-collection-blocks__header {
    margin-bottom: 30px;
  }

  .ocs-home-collection-blocks__header--has-description {
    margin-bottom: 30px;
  }

  .ocs-home-collection-blocks .ocs-home-collection-blocks__title {
    margin: 0;
    color: var(--color-foreground, #1a1a1a);
    font-family: var(--font-h2--family, var(--font-body--family));
    font-size: 26px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
    text-transform: none;
  }

  .ocs-home-collection-blocks--typography-landing-editorial .ocs-home-collection-blocks__title {
    font-size: 18px;
  }

  .ocs-home-collection-blocks__subtitle {
    margin: 10px 0 0;
    color: #3f3f3f;
    font-family: var(--font-paragraph--family, var(--font-body--family));
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
  }

  .ocs-home-collection-blocks__cta-wrapper,
  .ocs-home-collection-blocks__view-all-wrapper {
    margin-block-start: 20px;
  }

  @media screen and (min-width: 640px) {
    .ocs-home-collection-blocks__subtitle,
    .ocs-home-collection-blocks--typography-landing-editorial .ocs-home-collection-blocks__description {
      font-size: 18px;
    }

    .ocs-home-collection-blocks--typography-landing-editorial .ocs-home-collection-blocks__title {
      font-size: 32px;
    }
  }

  @media screen and (min-width: 1024px) {
    .ocs-home-collection-blocks .ocs-home-collection-blocks__title {
      font-size: 32px;
    }
  }

  .ocs-home-collection-blocks__description {
    max-width: 425px;
    margin: 20px auto 0;
    color: var(--color-foreground, #3f3f3f);
    font-family: var(--font-body--family);
    font-size: 15px;
    line-height: 1.3;
  }

  .ocs-home-collection-blocks__description p {
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .ocs-home-collection-blocks__description {
      font-size: 18px;
    }
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__tabs li {
    list-style: none;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__tab {
    padding: 12px 20px;
    color: #3f3f3f;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__tab:hover,
  .ocs-home-collection-blocks .ocs-suggested-accessories__tab:focus-visible {
    color: #1a1a1a;
    border-color: #1a1a1a;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__tab--active {
    color: #fff;
    background: #1a1a1a;
    border-color: #1a1a1a;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__tab--active:hover,
  .ocs-home-collection-blocks .ocs-suggested-accessories__tab--active:focus-visible {
    color: #fff;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__panel {
    display: none;
    opacity: 0;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__panel--active {
    display: block;
    animation: ocsHomeCollectionBlocksFadeIn 0.35s ease forwards;
  }

  @keyframes ocsHomeCollectionBlocksFadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__carousel slideshow-slides {
    max-width: 80%;
    margin: 0 auto;
    justify-content: safe center;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__carousel slideshow-arrows {
    padding-block: 8px;
    margin-block: -8px;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__carousel slideshow-arrows .slideshow-control {
    opacity: 1;
    color: #000;
    background: #fff;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
    animation: none;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__carousel .slideshow-control .icon-caret {
    rotate: 180deg;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__carousel .resource-list__item {
    height: 100%;
    padding: 8px;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__carousel slideshow-controls:has(.slideshow-controls__dots) {
    mix-blend-mode: normal;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__carousel .slideshow-controls__dots {
    --size: 13px;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__carousel .slideshow-controls__dots button::after {
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #a5a5a5;
  }

  .ocs-home-collection-blocks .ocs-suggested-accessories__carousel .slideshow-controls__dots button[aria-selected='true']::after {
    background-color: #f4f4f4;
    box-shadow: inset 0 0 0 1px #a5a5a5;
  }

  .ocs-home-collection-blocks__placeholder {
    padding: 40px 20px;
    color: var(--color-foreground, #3f3f3f);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    background: rgb(var(--color-foreground-rgb, 26 26 26) / 0.03);
    border: 1px dashed rgb(var(--color-foreground-rgb, 26 26 26) / 0.3);
    border-radius: 8px;
  }

  .ocs-home-collection-blocks__placeholder p {
    margin: 0;
  }

  @media screen and (max-width: 999px) {
    .ocs-home-collection-blocks .ocs-suggested-accessories__carousel {
      /* Mirrors the PDP carousel tablet behavior; this overrides inline --column-count. */
      --column-count: 2 !important;
      --peek-next-slide-size: 0px !important;
    }
  }

  @media screen and (max-width: 749px) {
    .ocs-home-collection-blocks .ocs-suggested-accessories__carousel {
      /* JS reads --column-count to patch arrows/dots, so it must match the mobile slide width override below. */
      --column-count: var(--ocs-home-collection-blocks-columns-mobile) !important;
    }

    .ocs-home-collection-blocks .ocs-suggested-accessories__carousel .resource-list__slide {
      --slide-width: 100% !important;
      --mobile-card-size: 100% !important;
    }

    .ocs-home-collection-blocks--mobile-2 .ocs-suggested-accessories__carousel .resource-list__slide {
      --slide-width: calc((100% - var(--ocs-home-collection-blocks-columns-gap)) / 2) !important;
      --mobile-card-size: calc((100% - var(--ocs-home-collection-blocks-columns-gap)) / 2) !important;
    }

    .ocs-home-collection-blocks .ocs-suggested-accessories__carousel .resource-list__carousel slideshow-arrows {
      padding-inline: 0;
    }

    /* On mobile the arrow icon still renders, but without the white container
       or drop shadow. Gated by the "Hide icon container on mobile" setting,
       which adds the --hide-arrow-container-mobile modifier. Deliberately
       namespaced to this section rather than reusing the upsell's modifier:
       both wrappers share the .ocs-suggested-accessories__carousel class, and
       section stylesheets are bundled globally, so the upsell's rule would
       otherwise pick this carousel up too. Same specificity (0,3,1) as the
       base rule above, so it wins on source order — keep it after. */
    .ocs-home-collection-blocks .ocs-home-collection-blocks__carousel--hide-arrow-container-mobile slideshow-arrows .slideshow-control {
      background: transparent;
      box-shadow: none;
    }

    .ocs-home-collection-blocks .ocs-suggested-accessories__carousel slideshow-slides {
      max-width: 75%;
    }

    .ocs-home-collection-blocks .ocs-suggested-accessories__tabs {
      justify-content: safe center;
      flex-wrap: nowrap;
      padding-inline: 16px;
      margin-bottom: 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .ocs-home-collection-blocks .ocs-suggested-accessories__tabs::-webkit-scrollbar {
      display: none;
    }

    .ocs-home-collection-blocks .ocs-suggested-accessories__view-all {
      margin-bottom: 12px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ocs-home-collection-blocks *,
    .ocs-home-collection-blocks *::before,
    .ocs-home-collection-blocks *::after {
      transition-duration: 0.01ms;
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
    }

    .ocs-home-collection-blocks .ocs-suggested-accessories__panel--active {
      animation: none;
      opacity: 1;
    }
  }
/* END_SECTION:ocs-home-collection-blocks */

/* START_SECTION:ocs-payment-methods (INDEX:64) */
/*
    Reused from theme:
    - --font-body--family
  */
  .ocs-payment-methods,
  .ocs-payment-methods *,
  .ocs-payment-methods *::before,
  .ocs-payment-methods *::after {
    box-sizing: border-box;
  }

  .ocs-payment-methods {
    margin-block: 20px;
    border-top: 1px solid #979797;
    padding-block-start: 40px;
    color: #3f3f3f;
    font-family: var(--font-body--family);
    text-align: center;
  }

  .ocs-payment-methods__inner {
    width: 100%;
    margin-inline: auto;
    padding-inline: 15px;
  }

  /* The tag is an h4 for the document outline; the type is deliberately unchanged.
     base.css styles headings off bare tag selectors — `h4 { font-family:
     var(--font-h4--family); font-size: var(--font-h4--size); … }` at base.css:967
     — so swapping the tag would otherwise have re-scaled this heading.

     Every property that rule sets is therefore declared here, where the single
     class scores (0,1,0) against the tag selector's (0,0,1) and wins outright.
     Eight of the nine already had a local value; font-style is the one that used
     to come from the h2 rule, so it still points at the h2 variable — that is
     what makes this a tag-only change rather than a restyle. The h2 margin at
     base.css:932 has no h4 counterpart, but `margin` below already overrode it. */
  .ocs-payment-methods__title {
    margin: 0 0 20px;
    color: #000;
    font-family: var(--font-heading--family, var(--font-body--family));
    font-size: 14px;
    font-style: var(--font-h2--style, normal);
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.22;
    text-transform: uppercase;
  }

  .ocs-payment-methods__logos {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .ocs-payment-methods__logo {
    display: inline-block;
    width: 20%;
    max-width: 130px;
    padding: 0 12px 20px;
    list-style: none;
    vertical-align: middle;
  }

  .ocs-payment-methods__logo-image {
    display: inline-block;
    width: 52px;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }

  .ocs-payment-methods__content {
    color: inherit;
    font-size: 14px;
    letter-spacing: 0.4px;
    line-height: 17px;
  }

  .ocs-payment-methods__content p {
    margin: 0;
  }

  .ocs-payment-methods__content a {
    color: inherit;
    text-decoration: underline;
  }

  @media screen and (min-width: 640px) {
    .ocs-payment-methods {
      margin-block: 40px;
    }

    .ocs-payment-methods__inner {
      width: 600px;
    }

    .ocs-payment-methods__title {
      font-size: 16px;
    }

    .ocs-payment-methods__logos {
      display: block;
      text-align: center;
    }

    .ocs-payment-methods__logo {
      width: auto;
      max-width: 20%;
      padding: 0 15px 15px;
    }

    .ocs-payment-methods__logo-image {
      width: 70px;
    }
  }

  @media screen and (min-width: 1024px) {
    .ocs-payment-methods__inner {
      width: 960px;
    }

    .ocs-payment-methods__logo {
      width: auto;
      max-width: 10%;
      padding-block-end: 0;
    }
  }

  @media screen and (min-width: 1280px) {
    .ocs-payment-methods__inner {
      width: 1200px;
    }
  }

  @media screen and (min-width: 1920px) {
    .ocs-payment-methods__inner {
      width: 1440px;
    }
  }
/* END_SECTION:ocs-payment-methods */

/* START_SECTION:ocs-product-accordions (INDEX:65) */
.ocs-product-accordions {
    padding-block: 0;
  }

  .ocs-product-accordions__inner {
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
  }

  /* Accordion base */
  .ocs-accordion {
    border-bottom: 1px solid #E0E0E0;
  }

  .ocs-product-accordions__inner > :first-child .ocs-accordion {
    border-top: 1px solid #E0E0E0;
  }

  /* Header / Summary */
  .ocs-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .ocs-accordion__header::-webkit-details-marker,
  .ocs-accordion__header::marker {
    display: none;
    content: '';
  }

  .ocs-product-accordions .ocs-accordion__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: #1A1A1A;
  }

  @media screen and (max-width: 749px) {
    /* padding-block rather than the shorthand, so the 0 inline padding set on
       the base rule above still stands. Equal specificity to that rule, so this
       has to stay after it in source order — it is in the same {% stylesheet %}
       block, where source order is preserved. */
    .ocs-accordion__header {
      padding-block: 16px;
    }

    .ocs-product-accordions .ocs-accordion__title {
      font-size: 16px;
      font-weight: 600;
      line-height: 100%;
      letter-spacing: 0%;
      vertical-align: middle;
    }
  }

  /* Plus/Minus toggle */
  .ocs-accordion__icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .ocs-accordion__icon svg {
    display: none;
  }

  .ocs-accordion__icon::before,
  .ocs-accordion__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #1A1A1A;
    border-radius: 1px;
    transition: transform 0.3s ease;
  }

  /* Horizontal bar (always visible) */
  .ocs-accordion__icon::before {
    width: 18px;
    height: 1px;
    transform: translate(-50%, -50%);
  }

  /* Vertical bar (becomes minus when open) */
  .ocs-accordion__icon::after {
    width: 1px;
    height: 18px;
    transform: translate(-50%, -50%);
  }

  .ocs-accordion[open] > .ocs-accordion__header .ocs-accordion__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Content */
  .ocs-accordion__content {
    overflow: hidden;
  }

  /* Open specification tooltips can be taller than the first table row. Once
     details has revealed the panel, allow their border and caret to extend past
     the content box instead of clipping against its top edge. */
  .ocs-accordion[open] > .ocs-accordion__content {
    overflow: visible;
  }

  .ocs-accordion__body {
    padding-bottom: 20px;
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    letter-spacing: 0%;
    color: #3F3F3F;
  }

  @media screen and (max-width: 749px) {
    .ocs-accordion__body {
      font-size: 15px;
      line-height: 20px;
    }
  }

  .ocs-accordion__body p {
    margin: 0 0 12px;
  }

  .ocs-accordion__body p:last-child {
    margin-bottom: 0;
  }
/* END_SECTION:ocs-product-accordions */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* OCS button migration: sticky ATC
     1. Guarantee sticky height wins over .ocs-button { height: 50px } (spec 0,2,0 > 0,1,0).
     2. Restore position:absolute for the checkmark overlay: .ocs-button > * forces
        position:relative at 0,1,0; .sticky-add-to-cart__button .add-to-cart__added
        at 0,2,0 wins unconditionally, independent of snippet render order. */
  .sticky-add-to-cart__button.ocs-button {
    height: var(--height-buy-buttons);
  }

  .sticky-add-to-cart__button .add-to-cart__added {
    position: absolute;
    z-index: 2;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:ocs-product-information */

/* START_SECTION:ocs-profit-banner (INDEX:67) */
/*
    Reused from theme:
    - --font-body--family
  */
  .ocs-profit-banner,
  .ocs-profit-banner *,
  .ocs-profit-banner *::before,
  .ocs-profit-banner *::after {
    box-sizing: border-box;
  }

  .ocs-profit-banner {
    margin-block: 20px;
    border-top: 1px solid #979797;
    color: #3f3f3f;
    font-family: var(--font-body--family);
  }

  .ocs-profit-banner__inner {
    width: 100%;
    margin-inline: auto;
    padding-inline: 15px;
  }

  .ocs-profit-banner__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-start: 20px;
    text-align: center;
  }

  .ocs-profit-banner__info {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 450px;
    margin-inline: auto;
    text-align: center;
  }

  .ocs-profit-banner__logo {
    display: inline-block;
    width: fit-content;
    max-width: 200px;
    margin: 0 auto;
    color: inherit;
  }

  .ocs-profit-banner__logo-image {
    display: block;
    width: 100%;
    height: auto;
  }

  /* The tag is an h4 for the document outline; the type is deliberately still
     h2's. base.css styles headings off bare tag selectors — `h4 { font-family:
     var(--font-h4--family); font-size: var(--font-h4--size); … }` at base.css:967
     — so swapping the tag would otherwise have re-scaled the banner.

     Every property that rule sets is therefore declared here, where the single
     class scores (0,1,0) against the tag selector's (0,0,1) and wins outright.
     The two that used to come from the h2 rule, and so had no local value to
     keep, still point at the h2 variables: that is what makes this a tag-only
     change rather than a restyle. */
  .ocs-profit-banner__title {
    margin: 20px 0 0;
    color: #3f3f3f;
    font-family: var(--font-heading--family, var(--font-body--family));
    font-size: 15px;
    font-style: var(--font-h2--style, normal);
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.22;
    text-transform: var(--font-h2--case, none);
  }

  @media screen and (min-width: 640px) {
    .ocs-profit-banner {
      margin-block: 40px;
    }

    .ocs-profit-banner__inner {
      width: 600px;
    }

    .ocs-profit-banner__panel {
      margin-block-start: 40px;
    }

    .ocs-profit-banner__title {
      font-size: 18px;
    }
  }

  @media screen and (min-width: 1024px) {
    .ocs-profit-banner__inner {
      width: 960px;
    }

    .ocs-profit-banner__logo {
      max-width: 300px;
    }
  }

  @media screen and (min-width: 1280px) {
    .ocs-profit-banner__inner {
      width: 1200px;
    }
  }

  @media screen and (min-width: 1920px) {
    .ocs-profit-banner__inner {
      width: 1440px;
    }
  }
/* END_SECTION:ocs-profit-banner */

/* START_SECTION:ocs-recently-viewed (INDEX:68) */
ocs-recently-viewed {
    display: block;
  }

  .ocs-recently-viewed {
    gap: var(--gap, 28px) 0;
  }

  .ocs-recently-viewed__inner {
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
  }

  /* Header */
  .ocs-recently-viewed__header {
    margin-bottom: 24px;
  }

  .ocs-recently-viewed__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: #1A1A1A;
    margin: 0;
  }

  /* Carousel card wrappers */
  /* slideshow-container must NOT have overflow: visible — that breaks the
     IntersectionObserver (root: scroller) by making all slides appear visible,
     which causes visibleSlides.length === totalSlides and disables next arrow. */
  .ocs-recently-viewed__carousel slideshow-slides {
    max-width: 80%;
    margin: 0 auto;
    justify-content: safe center;
  }

  /* Arrow box-shadows bleed outside the card column area — give the wrapper
     a small padding + negative margin so shadows are never clipped. */
  .ocs-recently-viewed__carousel slideshow-arrows {
    padding-block: 8px;
    margin-block: -8px;
  }

  .ocs-recently-viewed__carousel slideshow-arrows .slideshow-control {
    opacity: 1;
    animation: none !important;
    background: #fff;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .ocs-recently-viewed__carousel .slideshow-control .icon-caret {
    rotate: 180deg;
  }

  .ocs-recently-viewed__carousel .resource-list__item {
    height: 100%;
    padding: 8px;
  }

  /* Dots */
  .ocs-recently-viewed__carousel slideshow-controls:has(.slideshow-controls__dots) {
    mix-blend-mode: normal;
  }

  .ocs-recently-viewed__carousel .slideshow-controls__dots {
    --size: 13px;
  }

  .ocs-recently-viewed__carousel .slideshow-controls__dots button::after {
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #A5A5A5;
  }

  .ocs-recently-viewed__carousel .slideshow-controls__dots button[aria-selected='true']::after {
    background-color: #F4F4F4;
    box-shadow: inset 0 0 0 1px #A5A5A5;
  }

  /* Responsive - Tablet */
  @media screen and (max-width: 999px) {
    .ocs-recently-viewed__carousel {
      --column-count: 2 !important;
      --peek-next-slide-size: 0px !important;
    }
  }

  /* Editor placeholder */
  .ocs-recently-viewed__placeholder {
    text-align: center;
    padding: 40px 20px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    color: #999;
    font-size: 14px;
  }

  /* Responsive - Mobile */
  @media screen and (max-width: 749px) {
    .ocs-recently-viewed__title {
      font-size: clamp(24px, 16px + 2.133vw, 32px);
    }

    .ocs-recently-viewed__carousel {
      --column-count: 1 !important;
    }

    .ocs-recently-viewed__carousel .resource-list__slide {
      --slide-width: 100% !important;
      --mobile-card-size: 100% !important;
    }

    .ocs-recently-viewed__carousel .resource-list__carousel slideshow-arrows {
      padding-inline: 0;
    }

    /* On mobile the arrow icon still renders, but without the white container
       or drop shadow. Gated by the "Hide icon container on mobile" setting,
       which adds the --hide-arrow-container-mobile modifier. Same specificity
       (0,2,1) as the base arrow rule above, so it wins on source order only —
       keep it after. */
    .ocs-recently-viewed__carousel--hide-arrow-container-mobile slideshow-arrows .slideshow-control {
      background: transparent;
      box-shadow: none;
    }

    .ocs-recently-viewed__carousel slideshow-slides {
      max-width: 75%;
    }
  }
/* END_SECTION:ocs-recently-viewed */

/* START_SECTION:ocs-store-order-links (INDEX:70) */
/*
    Reused from theme:
    - .ocs-button and .ocs-button--outline-green
    - --page-width, --page-margin, --color-foreground
    - heading and body font tokens
  */

  .ocs-store-order-links,
  .ocs-store-order-links *,
  .ocs-store-order-links *::before,
  .ocs-store-order-links *::after {
    box-sizing: border-box;
  }

  .ocs-store-order-links {
    --ocs-store-order-links-divider: #979797;
    position: relative;
    z-index: 0;
    margin-block: 35px;
    padding-block: 0;
    /* Clip the extra-wide curve ovals horizontally (no page scrollbar) while
       letting them bulge past the top/bottom edges to form the dome. */
    overflow-x: clip;
    overflow-y: visible;
    color: var(--color-foreground);
  }

  .ocs-store-order-links--full-width-cards {
    margin-block: 60px;
    overflow: hidden;
  }

  .ocs-store-order-links--grey {
    background-color: #eaeaea;
  }

  .ocs-store-order-links--curved-top {
    margin-block-start: 80px;
  }

  .ocs-store-order-links--curved-top::before,
  .ocs-store-order-links--curved-bottom::after {
    position: absolute;
    z-index: -1;
    inset-inline: -20%;
    display: block;
    block-size: 125px;
    background: inherit;
    border-radius: 50%;
    content: '';
  }

  .ocs-store-order-links--curved-top::before {
    inset-block-start: -37px;
  }

  .ocs-store-order-links--curved-bottom {
    margin-block-end: 120px;
  }

  .ocs-store-order-links--curved-bottom::after {
    inset-block-end: -37px;
  }

  .ocs-store-order-links--large-curves {
    padding-block: 20px 0;
  }

  .ocs-store-order-links__inner {
    display: grid;
    width: min(100%, 1200px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 16px);
  }

  .ocs-store-order-links--full-width-cards .ocs-store-order-links__inner {
    padding-inline: 0;
  }

  .ocs-store-order-links__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    padding: 20px 40px;
    text-align: center;
  }

  .ocs-store-order-links__card:first-of-type {
    margin-bottom: 25px;
  }

  .ocs-store-order-links--full-width-cards .ocs-store-order-links__card:first-of-type {
    margin-bottom: 0;
  }

  .ocs-store-order-links__title,
  .ocs-store-order-links__caption {
    width: 100%;
    margin: 0;
    color: inherit;
  }

  .ocs-store-order-links__title {
    font-family: var(--font-heading--family, var(--font-body--family));
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
  }

  .ocs-store-order-links__caption {
    margin-block-start: 10px;
    font-family: var(--font-body--family);
    color: #3f3f3f;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
  }

  .ocs-store-order-links__button.ocs-button {
    width: min(100%, 350px);
    margin-block-start: 20px;
  }

  .ocs-store-order-links__divider {
    height: 1px;
    margin-block: 0 15px;
    margin-inline: 14px;
    background-color: var(--ocs-store-order-links-divider);
  }

  @media (min-width: 640px) {
    .ocs-store-order-links {
      margin-block: 70px;
    }

    .ocs-store-order-links--curved-top {
      margin-block-start: 140px;
    }

    .ocs-store-order-links--curved-top::before,
    .ocs-store-order-links--curved-bottom::after {
      inset-inline: -5%;
    }

    .ocs-store-order-links--curved-bottom {
      margin-block-end: 140px;
    }

    .ocs-store-order-links--large-curves {
      padding-block: 100px 80px;
    }

    .ocs-store-order-links__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      padding-inline: var(--page-margin, 24px);
    }

    .ocs-store-order-links__title {
      font-size: 32px;
    }

    .ocs-store-order-links__caption {
      font-size: 18px;
    }

    .ocs-store-order-links__card {
      min-width: 0;
      min-height: 100%;
      padding-block: 40px;
    }

    .ocs-store-order-links__card:first-child {
      border-inline-end: 1px solid var(--ocs-store-order-links-divider);
    }

    .ocs-store-order-links__caption {
      flex: 1 1 auto;
      margin-block-end: 40px;
    }

    .ocs-store-order-links__button.ocs-button {
      width: 100%;
      max-width: 350px;
      margin-block-start: 0;
    }

    .ocs-store-order-links__divider {
      display: none;
    }
  }

  @media (min-width: 1920px) {
    .ocs-store-order-links--full-width-cards .ocs-store-order-links__inner {
      width: min(100%, 1440px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ocs-store-order-links *,
    .ocs-store-order-links *::before,
    .ocs-store-order-links *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }

  @media screen and (min-width: 750px) {
    .ocs-store-order-links__card {
      gap: var(--ocs-store-order-links-card-gap, 0px);
    }

    .ocs-store-order-links__card:first-of-type {
      margin-bottom: 0px;
    }
  }
/* END_SECTION:ocs-store-order-links */

/* START_SECTION:ocs-suggested-accessories (INDEX:71) */
ocs-suggested-accessories {
    display: block;
  }

  .ocs-suggested-accessories {
    gap: var(--gap, 28px) 0;
  }

  .ocs-suggested-accessories__inner {
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
  }

  /* Header */
  .ocs-suggested-accessories__header {
    margin-bottom: 24px;
  }

  .ocs-suggested-accessories__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: #1A1A1A;
    margin: 0;
  }

  .ocs-suggested-accessories__description {
    font-size: 16px;
    color: #3F3F3F;
    margin: 8px 0 0;
  }

  /* Tabs */
  .ocs-suggested-accessories__tabs {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ocs-suggested-accessories__tab {
    padding: 12px 20px;
    background: transparent;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    color: #3F3F3F;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    text-transform: uppercase;
  }

  .ocs-suggested-accessories__tab:hover {
    border-color: #1A1A1A;
    color: #1A1A1A;
  }

  .ocs-suggested-accessories__tab--active {
    background: #1A1A1A;
    border-color: #1A1A1A;
    color: #fff;
  }

  .ocs-suggested-accessories__tab--active:hover {
    color: #fff;
  }

  /* Tab panels — hide inactive, show active with fade */
  .ocs-suggested-accessories__panel {
    display: none;
    opacity: 0;
  }

  .ocs-suggested-accessories__panel--active {
    display: block;
    animation: ocsTabFadeIn 0.35s ease forwards;
  }

  @keyframes ocsTabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Carousel card wrappers */
  /* slideshow-container must NOT have overflow: visible — that breaks the
     IntersectionObserver (root: scroller) by making all slides appear visible,
     which causes visibleSlides.length === totalSlides and disables next arrow. */
  .ocs-suggested-accessories__carousel slideshow-slides {
    max-width: 80%;
    margin: 0 auto;
  }

  /* Arrow box-shadows bleed outside the card column area — give the wrapper
     a small padding + negative margin so shadows are never clipped. */
  .ocs-suggested-accessories__carousel slideshow-arrows {
    padding-block: 8px;
    margin-block: -8px;
  }

  .ocs-suggested-accessories__carousel slideshow-arrows .slideshow-control {
    opacity: 1;
    animation: none !important;
    background: #fff;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .ocs-suggested-accessories__carousel .slideshow-control .icon-caret {
    rotate: 180deg;
  }

  .ocs-suggested-accessories__carousel .resource-list__item {
    height: 100%;
    padding: 8px;
  }

  /* View All spacing (applies to both the text-link and button variants) */
  .ocs-suggested-accessories__view-all-wrapper {
    margin-top: 24px;
  }

  /* View All link — text-link variant only. When rendered as an OCS button
     (.ocs-button), skip this chrome so the button component owns its own
     sizing/color, matching the home-page "View All" button. */
  .ocs-suggested-accessories__view-all:not(.ocs-button) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #2E7631;
    text-decoration: none;
  }

  .ocs-suggested-accessories__view-all:not(.ocs-button):hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .ocs-suggested-accessories__view-all-chevron {
    width: 12px;
    height: 12px;
    display: inline-flex;
    transition: transform 0.3s ease;
  }

  .ocs-suggested-accessories__view-all:not(.ocs-button):hover .ocs-suggested-accessories__view-all-chevron {
    transform: translateX(4px);
  }

  /* Dots */
  .ocs-suggested-accessories__carousel slideshow-controls:has(.slideshow-controls__dots) {
    mix-blend-mode: normal;
  }

  .ocs-suggested-accessories__carousel .slideshow-controls__dots {
    --size: 13px;
  }

  .ocs-suggested-accessories__carousel .slideshow-controls__dots button::after {
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #A5A5A5;
  }

  .ocs-suggested-accessories__carousel .slideshow-controls__dots button[aria-selected='true']::after {
    background-color: #F4F4F4;
    box-shadow: inset 0 0 0 1px #A5A5A5;
  }

  /* Responsive - Tablet */
  @media screen and (max-width: 999px) {
    .ocs-suggested-accessories__carousel {
      --column-count: 2 !important;
      --peek-next-slide-size: 0px !important;
    }
  }

  /* Responsive - Mobile */
  @media screen and (max-width: 749px) {
    .ocs-suggested-accessories__title {
      font-size: clamp(24px, 16px + 2.133vw, 32px);
    }

    .ocs-suggested-accessories__carousel {
      --column-count: 1 !important;
    }

    .ocs-suggested-accessories__carousel .resource-list__slide {
      --slide-width: 100% !important;
      --mobile-card-size: 100% !important;
    }

    .ocs-suggested-accessories__carousel .resource-list__carousel slideshow-arrows {
      padding-inline: 0;
    }

    /* On mobile the arrow icon still renders, but without the white container
       or drop shadow. Gated by the "Hide icon container on mobile" setting,
       which adds the --hide-arrow-container-mobile modifier. */
    .ocs-suggested-accessories__carousel--hide-arrow-container-mobile slideshow-arrows .slideshow-control {
      background: transparent;
      box-shadow: none;
    }

    .ocs-suggested-accessories__carousel slideshow-slides {
      max-width: 75%;
    }

    .ocs-suggested-accessories__tabs {
      justify-content: safe center;
      margin-bottom: 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      flex-wrap: nowrap;
    }

    .ocs-suggested-accessories__tabs::-webkit-scrollbar {
      display: none;
    }

    .ocs-suggested-accessories__view-all {
      margin-bottom: 12px;
    }
  }
/* END_SECTION:ocs-suggested-accessories */

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

  .password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }


  .password-maintenance-background img {
    object-position: top;
  }

  .password-enter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

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

    a {
      display: flex;
    }

    svg {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

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

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

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

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

  .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_SECTION:password */

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

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

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }

  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .header[transparent] :is(.predictive-search):not(:focus-within) {
    background-color: transparent;
  }

  .header[transparent] .predictive-search-form__header-inner {
    border-color: var(--color-foreground);
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

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

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

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

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-hotspots (INDEX:77) */
/* 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) {
    product-hotspot-component.hotspot--hidden-touch {
      display: none;
    }
  }

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

  /* Hotspot button - positioned element with clickable area */
  product-hotspot-component {
    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);
  }

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

  product-hotspot-component .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,
    product-hotspot-component: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 */
  product-hotspot-component .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%;
    }
  }

  product-hotspot-component .hotspot-dialog:is(:focus, :focus-visible),
  product-hotspot-component .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;
  }

  product-hotspot-component .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 */
  product-hotspot-component .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;
    }
  }

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

  @starting-style {
    product-hotspot-component .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 */
  product-hotspot-component .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:78) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* OCS button migration — sticky ATC
     1. Guarantee sticky height wins over .ocs-button { height: 50px } (spec 0,2,0 > 0,1,0).
     2. Restore position:absolute for the checkmark overlay — .ocs-button > * forces
        position:relative at 0,1,0; .sticky-add-to-cart__button .add-to-cart__added
        at 0,2,0 wins unconditionally, independent of snippet render order. */
  .sticky-add-to-cart__button.ocs-button {
    height: var(--height-buy-buttons);
  }

  .sticky-add-to-cart__button .add-to-cart__added {
    position: absolute;
    z-index: 2;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:product-recommendations (INDEX:80) */
.product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:promo-squares (INDEX:81) */
/*
    Reused from theme:
    - .spacing-style (padding-block via CSS vars from spacing-style snippet)
    - color-{scheme} tokens (--color-background, --color-foreground)
    - spacing-style snippet
  */

  .promo-squares,
  .promo-squares *,
  .promo-squares *::before,
  .promo-squares *::after {
    box-sizing: border-box;
  }

  .promo-squares {
    width: 100%;
    padding-inline: 15px;
    background-color: var(--color-background);
  }

  .promo-squares.spacing-style {
    padding-block: 0;
    margin-block: 60px;
  }

  .promo-squares__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
  }

  .promo-squares__grid {
    --promo-squares-gap: 15px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--promo-squares-gap);
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .promo-squares__item {
    min-width: 0;
    list-style: none;
  }

  .promo-squares__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 22px);
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: clamp(18px, 4vw, 42px) clamp(8px, 2vw, 24px);
    overflow: hidden;
    color: var(--promo-tile-fg);
    text-align: center;
    text-decoration: none;
    background: var(--promo-tile-bg);
    border-radius: var(--promo-squares-radius, 18px);
  }

  .promo-squares__tile:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
    border-radius: 2px;
  }

  .promo-squares__media,
  .promo-squares__media picture {
    display: contents;
  }

  .promo-squares__icon {
    display: block;
    width: min(57%, 190px);
    max-height: 58%;
    object-fit: contain;
  }

  .promo-squares__label {
    display: block;
    max-width: 100%;
    margin: 0;
    color: currentColor;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
    text-align: center;
    text-transform: uppercase;
  }

  .promo-squares__label--underline {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 1px;
  }

  /* Full-tile artwork already contains its own color, iconography, copy, and corners. */
  .promo-squares--layout-full-bleed-image .promo-squares__tile--has-media {
    position: relative;
    display: block;
    padding: 0;
    overflow: visible;
    background: transparent;
    border-radius: 0;
  }

  .promo-squares--layout-full-bleed-image .promo-squares__tile--has-media .promo-squares__media {
    display: block;
    width: 100%;
    height: 100%;
  }

  .promo-squares--layout-full-bleed-image .promo-squares__tile--has-media .promo-squares__icon {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  .promo-squares--layout-full-bleed-image .promo-squares__tile--has-media .promo-squares__label {
    position: absolute;
    z-index: 1;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 16px;
  }

  .promo-squares--layout-image-text-below {
    --promo-squares-media-height: 66%;
  }

  .promo-squares--layout-image-text-below .promo-squares__tile--has-media {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
  }

  .promo-squares--layout-image-text-below .promo-squares__tile--has-media .promo-squares__media {
    display: block;
    flex: 0 0 var(--promo-squares-media-height);
    width: 100%;
    height: var(--promo-squares-media-height);
    block-size: var(--promo-squares-media-height);
    min-block-size: 0;
    max-block-size: var(--promo-squares-media-height);
    overflow: hidden;
  }

  .promo-squares--layout-image-text-below .promo-squares__tile--has-media .promo-squares__icon {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  .promo-squares--layout-image-text-below .promo-squares__tile--has-media .promo-squares__label {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: clamp(12px, 2vw, 20px) clamp(10px, 2vw, 24px);
  }

  @media (min-width: 750px) {
    .promo-squares--layout-image-text-below {
      --promo-squares-media-height: 70%;
    }
  }

  @media (min-width: 640px) {
    .promo-squares.spacing-style {
      margin-block: 70px;
    }

    .promo-squares__grid {
      --promo-squares-gap: 30px;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* Legacy OCS brand-page container: visible tile span matches the old stepped .container grid. */
  .promo-squares--content-legacy {
    padding-inline: 15px;
  }

  .promo-squares--content-legacy .promo-squares__inner {
    max-width: 100%;
  }

  .promo-squares--content-legacy .promo-squares__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 15px;
    row-gap: 20px;
  }

  .promo-squares--content-legacy.promo-squares--layout-image-text-below .promo-squares__tile--has-media {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    border-radius: 0;
  }

  .promo-squares--content-legacy.promo-squares--layout-image-text-below .promo-squares__tile--has-media .promo-squares__media {
    flex: none;
    width: 100%;
    height: auto;
    block-size: auto;
    max-block-size: none;
    aspect-ratio: 1 / 1;
    background: var(--promo-tile-bg);
    border-radius: var(--promo-squares-radius, 0);
  }

  .promo-squares--content-legacy.promo-squares--layout-image-text-below .promo-squares__tile--has-media .promo-squares__label {
    display: block;
    flex: none;
    padding: 0;
    margin-block-start: 15px;
    color: var(--color-foreground, #000);
    line-height: 1.22;
    letter-spacing: 0;
    text-transform: none;
  }

  @media (min-width: 640px) {
    .promo-squares--content-legacy .promo-squares__inner {
      max-width: 570px;
    }

    .promo-squares--content-legacy .promo-squares__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 30px;
    }
  }

  @media (min-width: 1024px) {
    .promo-squares--content-legacy .promo-squares__inner {
      max-width: 930px;
    }
  }

  @media (min-width: 1280px) {
    .promo-squares--content-legacy .promo-squares__inner {
      max-width: 1170px;
    }
  }

  @media (min-width: 1920px) {
    .promo-squares--content-legacy .promo-squares__inner {
      max-width: 1410px;
    }
  }

  /* OCS stepped landing-page container. */
  .promo-squares--content-ocs-grid {
    padding-inline: 15px;
  }

  .promo-squares--content-ocs-grid .promo-squares__inner {
    max-width: 100%;
  }

  .promo-squares--content-ocs-grid .promo-squares__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 15px;
    row-gap: 20px;
  }

  .promo-squares--content-ocs-grid.promo-squares--layout-image-text-below .promo-squares__tile--has-media {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    border-radius: 0;
  }

  .promo-squares--content-ocs-grid.promo-squares--layout-image-text-below .promo-squares__tile--has-media .promo-squares__media {
    flex: none;
    width: 100%;
    height: auto;
    block-size: auto;
    max-block-size: none;
    aspect-ratio: 1 / 1;
    background: var(--promo-tile-bg);
    border-radius: var(--promo-squares-radius, 0);
  }

  .promo-squares--content-ocs-grid.promo-squares--layout-image-text-below .promo-squares__tile--has-media .promo-squares__label {
    display: block;
    flex: none;
    padding: 0;
    margin-block-start: 15px;
    color: var(--color-foreground, #000);
    line-height: 1.22;
    letter-spacing: 0;
    text-transform: none;
  }

  @media (min-width: 640px) {
    .promo-squares--content-ocs-grid .promo-squares__inner {
      max-width: 570px;
    }

    .promo-squares--content-ocs-grid .promo-squares__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 30px;
    }
  }

  @media (min-width: 1024px) {
    .promo-squares--content-ocs-grid .promo-squares__inner {
      max-width: 930px;
    }
  }

  @media (min-width: 1280px) {
    .promo-squares--content-ocs-grid .promo-squares__inner {
      max-width: 1170px;
    }
  }

  @media (min-width: 1920px) {
    .promo-squares--content-ocs-grid .promo-squares__inner {
      max-width: 1410px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .promo-squares,
    .promo-squares *,
    .promo-squares *::before,
    .promo-squares *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
/* END_SECTION:promo-squares */

/* START_SECTION:quick-order-list (INDEX:82) */
.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:recall-banner (INDEX:83) */
.recall-banner {
    position: relative; 
    max-width: 1200px;
    margin-inline: auto;
  }

  .recall-banner__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 435px;
    max-width: 100%;
    padding: 10px 20px;
    background-color: var(--color-background);
    z-index: 1;
    line-height: normal;
  }

  .recall-banner__message {
    display: inline-block;
    font-family: var(--font-body--family);
    font-size: 15px;
    vertical-align: middle;
    color: inherit;
  }

  .recall-banner__text > * {
    display: inline;
    margin: 0;
    word-break: break-word;
  }

  .recall-banner__content--has-icon .recall-banner__message {
    width: calc(100% - 30px);
    padding-inline-start: 10px;
  }

  .recall-banner__icon {
    display: inline-block;
    vertical-align: middle;
  }

  .recall-banner__icon::before {
    font-family: 'Icons';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    font-size: 18px;
  }

  .recall-banner__icon--warning::before {
    content: "\E028";
  }

  .recall-banner__icon--blowhorn::before {
    content: "\E005";
  }

  .recall-banner__cta {
    display: inline-block;
    margin-inline-start: 7px;
    color: inherit;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .recall-banner__cta::after {
    font-family: 'Icons';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none;
    content: "\e00c";
    font-size: 10px;
    margin-inline-start: 7px;
    display: inline-block;
    transition: transform 0.1s linear;
    transform: translateX(0);
  }

  .recall-banner__cta:hover::after,
  .recall-banner__cta:focus::after,
  .recall-banner__cta:active::after {
    transform: translateX(3px);
  }

  .recall-banner__cta:hover,
  .recall-banner__cta:visited {
    color: inherit;
  }

  html.age-gate-restricted-experience .recall-banner--agegate-restricted {
    display: none;
  }

  @media (max-width: 768px) {
    .recall-banner__icon::before {
      font-size: 15px;
    }
    .recall-banner__cta {
      font-size: 13px;
    }
  }
/* END_SECTION:recall-banner */

/* START_SECTION:retail-store-intro (INDEX:85) */
.retail-store-intro,
  .retail-store-intro *,
  .retail-store-intro *::before,
  .retail-store-intro *::after {
    box-sizing: border-box;
  }

  .retail-store-intro {
    margin-block-start: 60px;
  }

  @media screen and (max-width: 749px) {
    .retail-store-intro {
      --page-margin: 15px;
    }
  }

  .retail-store-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .retail-store-intro__tile {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    color: var(--retail-store-intro-text, #000000);
    background-color: var(--retail-store-intro-background, #ffffff);
  }

  .retail-store-intro__media,
  .retail-store-intro__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .retail-store-intro__media {
    display: block;
    z-index: 0;
  }

  .retail-store-intro__image {
    display: block;
    object-fit: cover;
  }

  .retail-store-intro__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 15px;
    text-align: center;
  }

  .retail-store-intro__title {
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
    color: inherit;
    font-family: var(--font-h2--family, var(--font-body--family, sans-serif));
    font-style: var(--font-h2--style, normal);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
    text-transform: var(--font-h2--case, none);
    overflow-wrap: anywhere;
  }

  .retail-store-intro__description {
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: inherit;
    font-family: var(--font-paragraph--family, var(--font-body--family, sans-serif));
    font-style: var(--font-paragraph--style, normal);
    font-size: 18px;
    font-weight: 400.2499;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: var(--font-paragraph--case, none);
    overflow-wrap: anywhere;
  }

  .retail-store-intro__description p {
    margin: 0;
  }

  .retail-store-intro__description p + p {
    margin-block-start: 0.75em;
  }

  .retail-store-intro__description a {
    color: inherit;
  }

  .retail-store-intro__cta {
    max-width: 100%;
    margin-block-start: 20px;
    white-space: normal;
  }

  @media screen and (min-width: 750px) {
    .retail-store-intro__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
      max-width: 1170px;
      justify-self: center;
      padding: 0;
    }

    .retail-store-intro__content {
      width: 340px;
      max-width: calc(100% - 112px);
      padding: 0;
    }

    .retail-store-intro__title {
      font-size: 24px;
    }

    .retail-store-intro__description {
      font-size: 14px;
      line-height: 1.4;
    }
  }

  @media screen and (min-width: 1100px) {
    .retail-store-intro__content {
      width: 340px;
      max-width: calc(100% - 112px);
      padding: 0;
    }

    .retail-store-intro__title {
      width: 100%;
      max-width: 320px;
      margin-bottom: 20px;
      font-size: 32px;
      font-weight: 600;
      line-height: 1.22;
    }

    .retail-store-intro__description {
      width: 100%;
      max-width: 320px;
      margin-block-start: 0;
      font-size: 18px;
      line-height: 1.3;
    }

    .retail-store-intro__cta {
      margin-block-start: 24px;
    }
  }

  /* Page-level retail hub button parity with the live store profiles and CTA sections. */
  [id$="__store_profiles"] .ocs-button {
    background-color: transparent;
    border-color: #2e7631;
    color: #2e7631;
    transition: color 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
  }

  [id$="__store_profiles"] .ocs-button:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
    background-color: #3a913f;
    border-color: #3a913f;
    color: #fff;
  }

  [id$="__store_profiles"] .ocs-button:focus-visible {
    outline-color: #2e7631;
  }

  [id$="__store_profiles"] .ocs-button::before,
  [id$="__store_profiles"] .ocs-button::after {
    content: none;
  }

  @media (prefers-reduced-motion: reduce) {
    [id$="__store_profiles"] .ocs-button {
      transition: none;
    }
  }
/* END_SECTION:retail-store-intro */

/* START_SECTION:section (INDEX:89) */
/* Paired callout geometry, opt-in so generic sections remain unchanged. */
  .section--layout-paired-callouts .section-content-wrapper {
    grid-column: 1 / -1;
    gap: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    margin-inline: auto;
    padding-block-start: 0;
  }

  .section--layout-paired-callouts .section-content-wrapper > .group-block {
    padding: 20px 40px;
  }

  .section--layout-paired-callouts .group-block-content {
    height: 100%;
    gap: 0;
  }

  .section--layout-paired-callouts .text-block.h3 > * {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
  }

  .section--layout-paired-callouts .text-block.paragraph > * {
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
  }

  .section--layout-paired-callouts .group-block-content > .ocs-button {
    width: 100%;
    max-width: 350px;
    margin: 0 auto 20px;
  }

  .section--layout-paired-callouts .divider {
    align-self: stretch;
    margin: 0 14px 15px;
  }

  .section--layout-paired-callouts .divider__line {
    flex-basis: 100%;
    min-height: 0;
    border-color: #979797;
    border-right: 0;
  }

  @media (min-width: 640px) {
    .section--layout-paired-callouts .section-content-wrapper {
      max-inline-size: 600px;
    }

    .section--layout-paired-callouts .section-content-wrapper > .group-block {
      flex: 1 1 50%;
    }

    .section--layout-paired-callouts .section-content-wrapper > .group-block:first-child {
      border-inline-end: 1px solid #979797;
    }

    .section--layout-paired-callouts .divider {
      display: none;
    }

    .section--layout-paired-callouts .text-block.h3 > * {
      font-size: 32px;
    }

    .section--layout-paired-callouts .text-block.paragraph {
      flex-grow: 1;
    }

    .section--layout-paired-callouts .text-block.paragraph > * {
      margin-block-end: 40px;
      font-size: 18px;
    }
  }

  @media (min-width: 1024px) {
    .section--layout-paired-callouts .section-content-wrapper {
      max-inline-size: 960px;
    }
  }

  @media (min-width: 1280px) {
    .section--layout-paired-callouts .section-content-wrapper {
      max-inline-size: 1200px;
    }
  }

  @media (min-width: 1920px) {
    .section--layout-paired-callouts .section-content-wrapper {
      max-inline-size: 1440px;
    }
  }
/* END_SECTION:section */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:square-tiles (INDEX:91) */
/*
    Reused from theme: .section, .section--page-width, .spacing-style,
    .section-background, .ocs-button, .ocs-button--solid-black
  */

  .square-tiles *,
  .square-tiles *::before,
  .square-tiles *::after {
    box-sizing: border-box;
  }

  /* ── Grid ─────────────────────────────────────────────────────────────── */

  .square-tiles__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .square-tiles__item {
    min-width: 0;
    list-style: none;
  }

  /* ── Tile (stacking context for abs image + card overlay) ─────────────── */

  .square-tiles__tile {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    color: var(--square-tiles-text-color, var(--color-foreground, #000));
    text-decoration: none;
  }

  .square-tiles__tile:focus-visible {
    outline: 3px solid var(--color-foreground, #000);
    outline-offset: 4px;
  }

  /* ── Images ───────────────────────────────────────────────────────────── */

  .square-tiles__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .square-tiles__image--placeholder {
    background-color: #f2f2f2;
  }

  .square-tiles__item--no-image .square-tiles__tile {
    background-color: var(--square-tiles-card-color, var(--color-background, #fff));
  }

  .square-tiles__item--no-image .square-tiles__card {
    width: 100%;
    min-height: 100%;
    background-color: transparent;
    border-radius: 0;
  }

  /* Mobile/desktop image visibility toggling */
  .square-tiles__image--mobile {
    display: block;
  }

  .square-tiles__image--desktop {
    display: none;
  }

  /* ── Overlay card ─────────────────────────────────────────────────────── */

  .square-tiles__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    text-align: center;
    overflow: visible;
    background-color: var(--square-tiles-card-color, #dbef54db);
    border-radius: var(--square-tiles-card-radius, 20px);
    color: var(--square-tiles-text-color, var(--color-foreground, #000));
    /* Card/text colors are section-level CSS vars; individual block colors override the full color, including alpha. */
  }

  /* ── Typography ───────────────────────────────────────────────────────── */

  .square-tiles__eyebrow,
  .square-tiles__heading {
    max-width: 390px;
  }

  .square-tiles__body {
    max-width: 350px;
  }

  .square-tiles__eyebrow {
    display: block;
    flex: 0 1 100%;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    color: var(--square-tiles-text-color, var(--color-foreground, #000));
    font-family: var(--font-paragraph--family, var(--font-body--family, sans-serif));
    font-size: 20px;
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -0.2px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  @media screen and (max-width: 749px) {
    /* Keep the localized eyebrow visibly inside the coloured overlay card.
       The additional inset is intentional: the card itself can be narrower
       than the square tile, while a percentage-only flex width can resolve
       against the wider tile during layout. */
    .square-tiles__eyebrow {
      flex-basis: auto;
      align-self: center;
      width: calc(100% - 30px);
      max-width: calc(100% - 30px);
    }
  }

  .square-tiles__heading {
    margin: 2px 0 0;
    color: var(--square-tiles-text-color, var(--color-foreground, #000));
    font-family: var(--font-h2--family, var(--font-body--family, sans-serif));
    font-size: 20px;
    font-weight: 700;
    line-height: 1.22;
    /* The semantic level is merchant-controlled, while the visual treatment
       remains shared across H2, H3, and H4 tile headings. */
    letter-spacing: normal;
    overflow-wrap: anywhere;
  }

  .square-tiles__body {
    margin: 10px 0 0;
    color: var(--square-tiles-text-color, var(--color-foreground, #000));
    font-family: var(--font-paragraph--family, var(--font-body--family, sans-serif));
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.05px;
    overflow-wrap: anywhere;
  }

  .square-tiles__body p {
    margin: 0;
  }

  .square-tiles__body p + p {
    margin-block-start: 0.75em;
  }

  .square-tiles__body a,
  .square-tiles__card svg {
    color: inherit;
  }

  .square-tiles__card svg {
    fill: currentColor;
    stroke: currentColor;
  }

  /* ── Button (visual only — tile <a> is the interactive element) ───────── */

  .square-tiles__button--white {
    --ocs-button-background-color: #fff;
    --ocs-button-border-color: #fff;
    --ocs-button-text-color: #000;
    --ocs-button-hover-background-color: #000;
    --ocs-button-hover-border-color: #fff;
    --ocs-button-hover-text-color: #fff;
    --ocs-button-focus-color: #fff;
  }

  .square-tiles__button.ocs-button {
    min-height: var(--ocs-cta-height);
    height: auto;
    margin-block-start: 10px;
    max-width: 100%;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    white-space: normal;
    text-align: center;
    pointer-events: none;
  }

  /* Parent hover/focus bridge: tile <a> owns interaction, child span reuses OCS button animation. */
  .square-tiles__tile:hover .square-tiles__button,
  .square-tiles__tile:focus-visible .square-tiles__button {
    border-color: var(--ocs-button-hover-border-color);
    color: var(--ocs-button-hover-text-color);
  }

  .square-tiles__tile:hover .square-tiles__button::before,
  .square-tiles__tile:focus-visible .square-tiles__button::before {
    transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
  }

  .square-tiles__tile:hover .square-tiles__button::after,
  .square-tiles__tile:focus-visible .square-tiles__button::after {
    opacity: 1;
    transition-delay: 0.3s;
    transition-duration: 0.01s;
  }

  /* Legacy homepage layout: two square columns from 640px. */
  @media screen and (min-width: 640px) {
    .square-tiles__list {
      grid-template-columns: repeat(var(--square-tiles-columns, 2), minmax(0, 1fr));
    }

    .square-tiles__card {
      max-width: 350px;
    }

    .square-tiles__button.ocs-button {
      margin-block-start: 20px;
      font-size: 16px;
      font-weight: 700;
    }

    /* Swap to desktop artwork with the legacy tablet breakpoint. */
    .square-tiles__image--desktop {
      display: block;
    }

    .square-tiles__image--mobile {
      display: none;
    }
  }

  @media screen and (min-width: 1024px) {
    .square-tiles__eyebrow,
    .square-tiles__heading {
      font-size: 32px;
    }

    .square-tiles__body {
      font-size: 18px;
    }
  }

  /* ── Full-bleed image layout ──────────────────────────────────────────── */

  .square-tiles--layout-full-bleed-image .square-tiles__card {
    background-color: transparent;
    border-radius: 0;
  }

  /* ── Legacy OCS brand-page container ─────────────────────────────────── */

  .square-tiles--content-legacy .square-tiles__list {
    max-width: calc(100vw - 30px);
    margin-inline: auto;
  }

  @media screen and (min-width: 640px) {
    .square-tiles--content-legacy .square-tiles__list {
      grid-template-columns: repeat(var(--square-tiles-columns, 2), minmax(0, 1fr));
      max-width: 570px;
    }

    .square-tiles--content-legacy .square-tiles__tile {
      aspect-ratio: 1 / 1;
      min-height: 0;
    }

    .square-tiles--content-legacy .square-tiles__image--desktop {
      display: block;
    }

    .square-tiles--content-legacy .square-tiles__image--mobile {
      display: none;
    }
  }

  @media screen and (min-width: 1024px) {
    .square-tiles--content-legacy .square-tiles__list {
      max-width: 930px;
    }
  }

  @media screen and (min-width: 1280px) {
    .square-tiles--content-legacy .square-tiles__list {
      max-width: 1170px;
    }
  }

  @media screen and (min-width: 1920px) {
    .square-tiles--content-legacy .square-tiles__list {
      max-width: 1410px;
    }
  }

  /* ── OCS stepped landing-page container ──────────────────────────────── */

  .square-tiles--content-ocs-grid .square-tiles__list {
    max-width: calc(100vw - 30px);
    margin-inline: auto;
  }

  @media screen and (min-width: 640px) {
    .square-tiles--content-ocs-grid .square-tiles__list {
      grid-template-columns: repeat(var(--square-tiles-columns, 2), minmax(0, 1fr));
      max-width: 570px;
    }

    .square-tiles--content-ocs-grid .square-tiles__tile {
      aspect-ratio: 1 / 1;
      min-height: 0;
    }

    .square-tiles--content-ocs-grid .square-tiles__image--desktop {
      display: block;
    }

    .square-tiles--content-ocs-grid .square-tiles__image--mobile {
      display: none;
    }
  }

  @media screen and (min-width: 1024px) {
    .square-tiles--content-ocs-grid .square-tiles__list {
      max-width: 930px;
    }
  }

  @media screen and (min-width: 1280px) {
    .square-tiles--content-ocs-grid .square-tiles__list {
      max-width: 1170px;
    }
  }

  @media screen and (min-width: 1920px) {
    .square-tiles--content-ocs-grid .square-tiles__list {
      max-width: 1410px;
    }
  }

  /* ── Paired landing-page callouts ─────────────────────────────────────── */

  .square-tiles--content-paired-callouts .square-tiles__list {
    width: calc(100% + 2px);
    max-width: calc(100vw - 30px);
    margin-inline: -1px;
  }

  @media screen and (min-width: 640px) {
    .square-tiles--content-paired-callouts .square-tiles__list {
      width: 100%;
      max-width: 995px;
      margin-inline: auto;
    }
  }

  /* ── Reduced motion ───────────────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    .square-tiles *,
    .square-tiles *::before,
    .square-tiles *::after {
      transition-duration: 0.01ms !important;
    }
  }
/* END_SECTION:square-tiles */

/* START_SECTION:value-props (INDEX:94) */
.value-props,
  .value-props *,
  .value-props *::before,
  .value-props *::after {
    box-sizing: border-box;
  }

  /*
    Reused from theme:
    - .section--page-width
    - .section-background
    - .spacing-style / render 'spacing-style'
    - .color-[color_scheme]
    - --font-h2--family / --font-h2--weight / --font-h2--line-height / --font-h2--letter-spacing
    - --font-paragraph--family / --font-paragraph--size / --font-paragraph--weight
    - --color-foreground
    - --color-background
  */

  .value-props {
    --value-props-circle-background: #f4f4f4;
    --value-props-circle-size: 120px;
    --value-props-heading-size: 28px;
    --value-props-heading-line-height: 1.1;
    --value-props-copy-size: 16px;
    --value-props-copy-line-height: 23px;
    --value-props-copy-width: 410px;
    --value-props-copy-gap: 12px;
    --value-props-media-gap: 24px;
    --value-props-list-gap: 24px;
    --value-props-inner-shift: 0px;
    min-height: 395px;
    overflow: hidden;
  }

  .value-props__inner {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
    transform: translateX(var(--value-props-inner-shift));
  }

  /* Heading */
  .value-props__heading {
    margin: 0;
    padding: 0;
    font-family: var(--font-h2--family, var(--font-body--family));
    font-size: var(--value-props-heading-size);
    font-weight: var(--font-h2--weight, 700);
    line-height: var(--value-props-heading-line-height);
    /* ocs.ca has no value-props section to copy, but it sets negative tracking on
       no heading anywhere — the seven negative values in its stylesheet are all on
       body copy and search inputs. Following the site-wide rule rather than
       inventing a heading exception. */
    letter-spacing: normal;
    text-transform: var(--font-h2--case, none);
    color: var(--color-foreground);
    text-align: center;
  }

  /* Body copy (richtext) */
  .value-props__copy {
    max-width: var(--value-props-copy-width);
    margin: var(--value-props-copy-gap) auto 0;
    padding: 0;
    font-family: var(--font-paragraph--family, var(--font-body--family));
    font-size: var(--value-props-copy-size);
    font-weight: 400;
    line-height: var(--value-props-copy-line-height);
    letter-spacing: 0;
    color: var(--color-foreground);
    text-align: center;
  }

  .value-props__copy p {
    margin: 0;
  }

  /* Circle list */
  .value-props__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--value-props-list-gap);
    width: 100%;
    padding: 0;
    margin: var(--value-props-media-gap) 0 0;
    list-style: none;
  }

  .value-props__item {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
  }

  .value-props__item-title {
    inline-size: var(--value-props-circle-size);
    margin: 0;
    color: var(--color-foreground);
    font-family: var(--font-h3--family, var(--font-body--family));
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
  }

  .value-props--social-pillars {
    min-height: 0;
  }

  .value-props--social-pillars .value-props__list {
    margin-block-start: 46px;
    gap: 20px;
  }

  /* Circle wrapper — both <a> and <span> variants */
  .value-props__media {
    display: block;
    width: var(--value-props-circle-size);
    height: var(--value-props-circle-size);
    overflow: hidden;
    border-radius: 50%;
    background: var(--value-props-circle-background);
    color: inherit;
    text-decoration: none;
  }

  .value-props__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .value-props__image--placeholder {
    background-color: #f2f2f2;
    width: 100%;
    height: 100%;
  }

  /* Desktop */
  @media screen and (min-width: 750px) {
    .value-props {
      --value-props-heading-size: 28.5px;
      --value-props-circle-size: 150px;
      --value-props-list-gap: 104px;
      --value-props-copy-gap: 14px;
      --value-props-media-gap: 20px;
      --value-props-inner-shift: -15.5px;
    }

    .value-props__list {
      flex-direction: row;
      flex-wrap: wrap;
    }

    .value-props__item-title {
      font-size: 24px;
    }

    .value-props--social-pillars {
      --value-props-inner-shift: 0px;
    }

    .value-props--social-pillars .value-props__list {
      gap: 104px;
    }
  }

  @media screen and (min-width: 1200px) {
    .value-props__inner {
      max-width: 760px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .value-props,
    .value-props * {
      scroll-behavior: auto;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
/* END_SECTION:value-props */

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

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

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

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

  .blog-post-item:first-child .blog-post-card {
    flex-direction: row;

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

  .blog-post-item:first-child .blog-post-card__image-container {
    width: 70%;

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

  .blog-post-item:first-child:has(.blog-post-card__image-container) .blog-post-card__content {
    padding-inline-start: var(--columns-gap);
    width: 30%;

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

  .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:98) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: #3f3f3f;
    font-size: 15px;
    line-height: 1.3;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }

  .blog-post-content * {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }

  {% comment %}
    640px, not the 641 this used to say. Bisected against production, which reads
    15px at 639 and 18px at 640, so a 641 here left a one-pixel window at exactly
    640 where our body was still 15px and ocs.ca had already stepped. It is also
    the line the rest of the theme's type now steps on.
  {% endcomment %}
  @media screen and (min-width: 640px) {
    .blog-post-content {
      font-size: 18px;
    }
  }

  {% comment %}
    Inline `font-size` in the article body is honoured on purpose — do not add an
    !important sweep here to "make the body uniform".

    Article bodies are merchant-authored HTML, much of it pasted out of Word, and
    some of it carries its own inline sizes. On
    /blogs/cannabis-made-clear/responsible-use-methods-of-consumption that is the
    "Last updated … | Published on …" line at an inline 14px, which is meant to
    stay 14px on both mobile and desktop, and the four section `<h2>`s at an
    inline 24px. Production honours all of them and so do we; an inline
    declaration beats any selector, which is the mechanism that keeps that byline
    at 14px while the copy around it steps 15 -> 18px.

    The one casualty is a stray `<span style="font-size: 0.875rem">` around a full
    stop mid-sentence, which renders a hair small on ocs.ca too. That is a content
    defect in the article, not a theme one, and is fixed in the rich-text editor.
  {% endcomment %}
  .blog-post-content :is(p, li) {
    line-height: inherit;
  }

  {% comment %}
    Article body links are undecorated on ocs.ca — measured on
    /blogs/shop-by-brands/shop-all-brands, where all 469 of them are plain
    rgb(63, 63, 63) text. Ours underlined them: base.css:1021 sets
    `text-decoration-color: currentcolor` inside `.rte :is(p, ul, ol, table)`,
    and the UA's `text-decoration-line: underline` was left to supply the line.
    Setting the line rather than the colour is what makes this stick regardless
    of which of the two rules wins.
  {% endcomment %}
  .blog-post-content a {
    color: inherit;
    text-decoration-line: none;
  }

  {% comment %}
    Nor is there any hover treatment on production: hovered with a real pointer,
    a brand link keeps the same colour and the same absence of underline. The
    same base.css rule recolours ours to --color-primary-hover, and its nested
    `&:hover` is worth (0,3,2). Matching that number would leave the winner down
    to stylesheet order, so this borrows one more element from the markup above:
    both classes are on the same div, and rte-formatter is always its child.
    That makes (0,3,3), which outranks it outright without reaching for
    !important.
  {% endcomment %}
  .blog-post-content.rte rte-formatter :is(p, ul, ol, table) a:hover {
    color: inherit;
  }

  .blog-post-content p {
    margin-block: 0 20px;
  }

  /*
    Some merchant-authored articles use native details/summary disclosures inside
    article.content. Production leaves those elements on the browser's native
    disclosure presentation: a closed/open triangle, no added padding, inherited
    text colour, and no hover recolouring.

    Horizon's global summary rule replaces that presentation with a flex row,
    removes the marker, adds block padding, and applies a green hover colour. Its
    theme accordion blocks add their own SVG, but raw article HTML does not. Keep
    this restoration under .blog-post-content so every purpose-built Horizon
    accordion retains its normal component styling and animation.
  */
  .blog-post-content details {
    margin: 0;
    padding: 0;
  }

  .blog-post-content details > summary {
    display: list-item;
    align-items: initial;
    margin: 0;
    padding-block: 0;
    color: inherit;
    cursor: auto;
    list-style-position: inside;
    list-style-type: disclosure-closed;
  }

  .blog-post-content details > summary::-webkit-details-marker {
    display: inline;
  }

  .blog-post-content details[open] > summary {
    list-style-type: disclosure-open;
  }

  .blog-post-content details > summary:hover {
    color: inherit;
  }

  .blog-post-content :is(h1, h2, h3, h4, h5, h6) {
    margin-block: 20px 10px;
    line-height: 1.22;
  }

  .blog-post-content :first-child:is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  .blog-post-content h2 {
    font-weight: 600;
  }

  {% comment %}
    h1 and h3 pinned for the same reason h4–h6 already were. Measured on ocs.ca,
    an article body's heading ladder is 28/26/18/15/14/13 at 390 and 60/55/32/18/
    16/15 at 1440. h2, h4, h5 and h6 already land there; h1 and h3 did not.

    Both are the fluid_size_cutoff trap that h2 hit. The generator in
    snippets/theme-styles-variables.liquid only emits a clamp() when the
    configured size is at least 48, so type_size_h3 = 32 becomes a flat 2rem —
    32px at every width, which is right on desktop and 14px too big on a phone.
    type_size_h1 = 56 does clear the cutoff, but its clamp reads 44px at 390 and
    56px at 1440 against production's 28 and 60, so it is wrong at both ends.
    Neither can be corrected from the theme editor: no value a merchant can type
    produces the ladder, which is why these are literals here.

    h2 is deliberately left to inherit. The global h2 preset was pinned to
    production's 26/55 in PR 6747 and measures identically inside an article body,
    so a local pin here would only be a second place to keep in sync.
  {% endcomment %}
  .blog-post-content h1 {
    font-size: 28px;
    font-weight: 600;
  }

  .blog-post-content h3 {
    font-size: 18px;
    font-weight: 600;
  }

  .blog-post-content h4 {
    font-size: 15px;
    font-weight: 600;
  }

  .blog-post-content h5 {
    font-size: 14px;
    font-weight: 500;
  }

  .blog-post-content h6 {
    color: #000;
    font-size: 13px;
    font-weight: 500;
    margin-block-end: 20px;
  }

  @media screen and (min-width: 640px) {
    .blog-post-content h1 {
      font-size: 60px;
    }

    .blog-post-content h3 {
      font-size: 32px;
    }

    .blog-post-content h4 {
      font-size: 18px;
    }

    .blog-post-content h5 {
      font-size: 16px;
    }

    .blog-post-content h6 {
      font-size: 15px;
    }
  }

  .blog-post-content :is(ul, ol) {
    list-style: none;
    margin-inline-start: 0;
    padding-inline-start: 0;
  }

  .blog-post-content :is(ul, ol) li {
    position: relative;
    padding-left: 20px;
  }

  .blog-post-content :is(ul, ol) li::before {
    position: absolute;
    left: 0;
  }

  .blog-post-content ul li::before {
    content: '';
    top: 0.45em;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #3a913f;
  }

  .blog-post-content ol {
    counter-reset: item;
  }

  .blog-post-content ol li {
    counter-increment: item;
  }

  .blog-post-content ol li::before {
    content: counter(item);
    top: 0;
    font-weight: 600;
  }

  .blog-post-content table th,
  .blog-post-content table td {
    padding: 10px;
    vertical-align: baseline;
  }

  .blog-post-content table th {
    font-weight: 400;
    text-align: center;
    text-transform: none;
  }

  .blog-post-content table td:first-child {
    padding-left: 0;
  }

  {% comment %}
    Jump links — the A-Z index at the top of Shop All Brands — sit further apart
    on ocs.ca than a single space, because the article there separates them with
    `&nbsp;&nbsp; ` and ours has had the entities stripped down to one space.

    Measured, the separator is 0.636em on production at both 390 and 1440 and
    0.213em on ours: one space either way, so production is running three. Half
    the shortfall on each side reproduces it to a hundredth of an em, and does
    it in em so the 15px/18px breakpoint needs no second rule.

    Worth having beyond the pixels: at 390 this is what makes the row wrap to
    two lines as production does instead of cramming 27 targets into one, and
    the padding widens the tap target while it is at it.
  {% endcomment %}
  .blog-post-content p a[href^='#'] {
    padding-inline: 0.212em;
  }

  {% comment %}
    And where those links land. Both sites scroll the letter flush to the top of
    the viewport, but ocs.ca has nothing over it — its header measures 0 high
    and off screen once you are down the page — while ours stays pinned, so the
    heading you asked for arrived hidden underneath it and you landed on a row
    of brand names instead.

    Two things are pinned, not one. The header stops at 59/69, but the Algolia
    search bar sticks underneath it and runs to 109 at 390 and 119 at 1440 —
    sampling straight down the middle of the viewport, article content does not
    start until y=110 and y=120. sections/faq-topics.liquid offsets by
    --header-height alone, which is why this does not simply copy it: that would
    still land the heading behind the search bar.

    The expression is the one sections/notice-banner.liquid already uses to sit
    below both, and it comes out at exactly the measured 109 and 119. No extra
    gap on top of that: production lands the heading flush, so this lands it
    flush against the search bar.
  {% endcomment %}
  .blog-post-content [id] {
    scroll-margin-top: calc(
      var(--header-section-height, var(--header-height, 60px)) + var(--algolia-search-bar-height, 0px) - 2px
    );
  }

  {% comment %}
    With base.css no longer forcing the width (see the opt-out there), the table
    is as wide as the article says it is, which on Shop All Brands is 5% past
    the content box. Production lets that overhang escape — its table's parent
    is the plain content div — so the scroll wrapper has to stand aside too, or
    it catches the overhang in a scrollbar production doesn't have.

    What stops it running off the page is the section, not the wrapper: ocs.ca
    clips at the viewport, so the overhang shows in full on a desktop that has
    room for it and is trimmed on a phone that does not. Clipping any closer in
    would cut it at the content box on desktop as well. Measured against
    production at 320/390/430/600/768/1440, the two now agree on how much of the
    last column is trimmed to within a pixel, and neither scrolls sideways.

    `clip` rather than `hidden`: it trims without making a scroll container, so
    nothing on the vertical axis changes.
  {% endcomment %}
  .blog-post-content .rte-table-wrapper {
    overflow-x: visible;
  }

  .shopify-section:has(.blog-post-content) {
    overflow-x: clip;
  }

  {% comment %}
    Production draws no rules between table rows. base.css:2894 gives every row
    with a td a 1px bottom border, which on Shop All Brands meant 250 of them
    down a page that has none on ocs.ca. Two classes beats that rule's (0,1,2).
  {% endcomment %}
  .blog-post-content.rte tr {
    border-bottom: 0;
  }

  {% comment %}
    Below the type breakpoint production drops the cells' horizontal padding
    entirely — measured 10px 0 10px 0 on every cell at 390, against
    10px 10px 10px 0 on the first and 10px 10px 10px 10px on the rest at 1440.
    Narrow columns need the width more than the gutter.

    638px, not the 639/640 used elsewhere in this file: bisected against
    production, which still had 10px at 639 and 0 at 638. The type switch and
    this one are genuinely a pixel apart there.
  {% endcomment %}
  @media screen and (max-width: 638px) {
    .blog-post-content table :is(th, td) {
      padding-inline: 0;
    }
  }

  .blog-post-content table :is(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 10px;
  }

  .blog-post-content table h4 {
    letter-spacing: 0.2px;
  }

  .blog-post-content table h4 + p {
    letter-spacing: 0.2px;
  }

  .blog-post-content table h5 {
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .blog-post-content img {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .blog-post-content :is(b, strong) {
    font-weight: 600;
  }

  {% comment %}
    Production's separator is a flat 1px #979797 band with its whole 20px of
    space below it. The UA default we were showing instead is a 2px inset
    bevel with 9px either side.
  {% endcomment %}
  .blog-post-content hr {
    height: 1px;
    border: 0;
    margin-block: 0 20px;
    background: #979797;
  }

  @media screen and (min-width: 1025px) {
    .blog-post-content table h4 {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    .blog-post-content table h4 + p {
      letter-spacing: normal;
    }
  }

  @media screen and (max-width: 639px) {
    .blog-post-content table h4 {
      font-size: 14px;
    }
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:99) */
.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:100) */
.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:101) */
.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:102) */
.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:103) */
.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:104) */
.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 (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:105) */
.cart-page__ocs-items .ocs-cart-item__inner {
    grid-template-columns: 100px 1fr;
  }

  .cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

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

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:106) */
.cart__summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart__summary-item.tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart__discount-label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart__discount-label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .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[sticky]) .cart__summary-inner {
    top: var(--header-height, 0);
  }

  .cart__summary-container {
    @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-container:not(.cart__container--extend),
  .cart__summary-container:not(.cart__container--extend) .cart__summary-inner {
    height: auto;
  }

  .cart__container--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__container--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart__container--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:107) */
.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] {
    aspect-ratio: 1;
    min-width: 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-size: clamp(var(--cart-font-size--2xs), 0.7lh, var(--cart-font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:110) */
.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:112) */
.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));

    @media (hover: hover) {
      opacity: var(--disabled-opacity);
    }

    [layout='spotlight'] & {
      opacity: var(--disabled-opacity);
    }

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

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

    @media (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:116) */
.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 (max-width: 768px) {
    .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:117) */
.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 (INDEX:122) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }

  .featured-product-content-bottom:not(:has(product-swatches)) {
    display: none;
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:123) */
.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:_global-banner (INDEX:124) */
.global-banner {
    max-width: 725px;
    margin-inline: auto;
    overflow: hidden;
  }

  .global-banner__text {
    margin: 0;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #3f3f3f;
  }

  @media screen and (max-width: 999px) {
    .global-banner__text {
      max-height: 23px;
      overflow: hidden;
    }
  }

  .global-banner__cta {
    /*margin-inline-start: 7px;*/
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.2em;
    font-size: 13px;
  }

  @media (min-width: 768px) {
    .global-banner__cta:after {
      font-family: Icons;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      text-decoration: none;
      text-transform: none;
      content: "\e00c";
      font-size: 10px;
      margin-left: 7px;
      transition: transform .1s linear; 
      transform: translate(0);
      display: inline-block;
    }
  }
  

  .global-banner__cta:hover:after, .global-banner__cta:focus:after, .global-banner__cta:active:after {
    transform: translate(3px);
  }

  .global-banner__cta:hover,
  .global-banner__cta:focus-visible {
    text-decoration: none;
  }

  html.age-gate-restricted-experience .global-banner--agegate-restricted {
    display: none;
  }
/* END_BLOCK:_global-banner */

/* START_BLOCK:_header-logo (INDEX:125) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

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

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

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

    /* The header's own breakpoint, not the theme's 750: these track whether the
       header is in drawer mode, and it condenses at 1024. See the
       header-scoped visibility utilities in assets/base.css. */
    @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);

    /* Both variables now resolve to the same size, so this switch changes
       nothing — kept, at the header's breakpoint rather than the theme's 750,
       so the pair cannot silently disagree with the drawer if they ever diverge
       again. */
    @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);
  }
/* END_BLOCK:_header-logo */

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

  header-menu {
    width: 100%;
  }

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

    display: flex;
  }

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

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

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

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    transition: color var(--animation-speed) var(--animation-easing);
    text-decoration: none;
    display: flex;
    min-height: var(--minimum-touch-target);
    align-items: center;

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

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

  /*
    Match the legacy OCS desktop navigation scale:
    12px at 1024px, 14px at 1280px, and 16px at 1440px.
    The selector intentionally overrides the theme-editor desktop-size variable only
    for the top-level header navigation; submenu typography remains configurable.
  */
  @media screen and (min-width: 1024px) {
    .header-menu .menu-list__link {
      font-size: 12px;
    }
  }

  @media screen and (min-width: 1280px) {
    .header-menu .menu-list__link {
      font-size: 14px;
    }
  }

  @media screen and (min-width: 1440px) {
    .header-menu .menu-list__link {
      font-size: 16px;
    }
  }

  /*
    Focus outline: redirect from the full 44px touch-target box to the text span only.
    This keeps the touch-target unchanged while the visible focus ring stays compact.
  */
  .menu-list__link-title {
    display: inline-block;
  }

  .menu-list__link:focus-visible {
    outline: none;
  }

  .menu-list__link:focus-visible .menu-list__link-title {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  /*
    Escape closes a latched panel and hands focus back to the trigger, because
    the panel focus came from is `visibility: hidden` once closed and focus
    would otherwise fall to <body>. Escape is a key press, so the browser marks
    that restore as keyboard-driven and draws the ring even for someone who
    opened the panel with the mouse and never touched the keyboard otherwise.

    header-menu.js sets this attribute only for that case, and drops it as soon
    as focus leaves the trigger — so tabbing on from here, shift-tabbing back to
    it, or opening the panel with Space all keep the ring. `focus-visible`
    stays in the selector so this can never hide a ring that was not going to
    be drawn anyway.
  */
  .menu-list__link[data-focus-quiet]:focus-visible .menu-list__link-title {
    outline: none;
  }

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

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

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

    gap: 0 var(--menu-horizontal-gap);
  }

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

  /* the submenu background element to animate */
  .overflow-menu::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px + var(--border-bottom-width));
    left: 0;
    width: 100%;
    height: var(--submenu-height);
    background-color: var(--color-background);
    box-shadow: var(--shadow-popover);
    clip-path: inset(0.5px 0 -100px 0); /* stylelint-disable-line */
    opacity: var(--submenu-opacity, 1);
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic),
      opacity var(--animation-speed-slow) var(--ease-out-cubic) var(--animation-speed-fast);
    z-index: var(--layer-header-menu);
  }

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

    background-color: transparent;
  }

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

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

    visibility: hidden;
    background-color: var(--color-background);
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width));
    z-index: calc(var(--layer-header-menu) + 1);
    padding-inline: var(--padding-inline);
    clip-path: rect(0 100% var(--submenu-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* 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),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .menu-list__list-item:has([data-animating]) > .menu-list__submenu {
    --submenu-content-opacity: 0;

    visibility: visible;

    &::before {
      height: 0;
    }
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    grid-column: 2;
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
  }

  .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) {
    --submenu-content-opacity: 0;

    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
  }

  /* Make overflow menu scrollable when content exceeds viewport */
  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .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 {
      --submenu-content-opacity: 0;

      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      opacity: var(--submenu-content-opacity);
      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 {
        padding-block-start: 0;
        grid-column: unset;
      }
    }

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

  .header-menu[data-overflow-expanded='true'] .menu-list__list-item:where([slot='overflow']) .menu-list__link {
    --submenu-content-opacity: 1;
  }

  .menu-list__list-item:where([slot='overflow']):has([data-animating]) > .menu-list__link {
    --submenu-content-opacity: 0;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
  }

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

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

  .mega-menu__link.mega-menu__link--parent {
    margin-block-start: var(--padding-2xs);
    font-weight: 600;
    font-size: 16px;
  }

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

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

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

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

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

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

  .mega-menu__grid {
    display: flex;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;
    max-height: inherit;
  }

  .mega-menu__grid:has(> .mega-menu__panel-cta-content) {
    flex-wrap: wrap;
  }

  .mega-menu__panel-content {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    min-width: 0;
    width: 100%;
  }

  .mega-menu__panel-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
    width: 100%;
    margin-block-start: var(--gap-lg);
    text-align: center;
  }

  .mega-menu__grid > .mega-menu__panel-cta-content {
    flex: 0 0 100%;
    margin-block-start: 0;
  }

  .mega-menu__panel-content:empty,
  .mega-menu__panel-cta-content:empty {
    display: none;
  }

  /*
    Featured panels reserve their configured share of the flex row while leaving the
    native menu list's column flow, gaps, wrap setting, and column sizing untouched.
    With flex-shrink enabled, the row gap is distributed proportionally: one tile
    receives 20% and two tiles receive 50% of the usable panel width.
  */
  .mega-menu__grid[data-featured-layout] .mega-menu__list {
    flex: 0 1 var(--ocs-mega-panel-menu-width, 100%);
    min-width: 0;
    width: var(--ocs-mega-panel-menu-width, 100%);
    max-width: var(--ocs-mega-panel-menu-width, 100%);
    margin-inline: 0;
  }

  .mega-menu__list.mega-menu__list--wrap {
    flex-flow: wrap;
  }

  .mega-menu__grid:not([data-featured-layout]):not([data-column-layout]) {
    max-height: var(--submenu-max-height, var(--non-mega-panel-max-height, 490px));
  }

  /* Rigid column layout (2/3/4-column): restore the height clamp the negation above excludes. */
  .mega-menu__grid:not([data-featured-layout])[data-column-layout]:not([data-column-layout='auto']) {
    max-height: var(--submenu-max-height, var(--non-mega-panel-max-height, 490px));
  }

  .mega-menu__grid[data-featured-layout] .mega-menu__panel-content:not(:empty) {
    flex: 0 1 var(--ocs-mega-panel-featured-width, 100%);
    min-width: 0;
    width: var(--ocs-mega-panel-featured-width, 100%);
    max-width: var(--ocs-mega-panel-featured-width, 100%);
  }

  .mega-menu__reoccurring-link-item {
    break-inside: avoid;
  }

  .mega-menu__link.mega-menu__reoccurring-link {
    align-items: baseline;
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: inherit;

    &:hover {
      color: inherit;
    }
  }

  .mega-menu__reoccurring-link--underlined .mega-menu__link-title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .mega-menu__reoccurring-link-arrow {
    display: inline-block;
    margin-inline-start: 7px;
    transform: translateX(0);
    transition: transform 0.1s linear;
  }

  .mega-menu__reoccurring-link:where(:hover, :focus-visible, :active) .mega-menu__reoccurring-link-arrow {
    transform: translateX(3px);
  }

  @media screen and (max-width: 1023px) {
    .mega-menu__link,
    .mega-menu__link.mega-menu__link--parent,
    .mega-menu__link.mega-menu__reoccurring-link {
      font-size: 18px;
    }
  }

  {%- comment -%}
    A placeholder menu entry renders without an href (see snippets/menu-link-target.liquid).
    Dropping pointer events takes every hover rule off it at once rather than
    unwinding them one by one.

    Not on a placeholder that discloses something. `role="button"` marks the one
    entry the snippet keeps operable — a top-level parent that opens a mega
    panel — and an operable control cannot be transparent to the pointer. It also
    fills its <li>, and the <li> is what carries `on:pointerenter="/activate"` and
    the `:hover` the accent border below keys on, so taking the anchor out of
    hit-testing took the panel and the underline with it: the pointer registered
    as leaving the <li> the moment it crossed onto the link text. All that was
    left was a flicker while crossing the <li>'s 5px of side padding.

    The missing href is what makes a placeholder unclickable and unfocusable, and
    the UA only gives `cursor: pointer` to an anchor that has one, so nothing here
    is load-bearing for the disclosing case anyway.
  {%- endcomment -%}
  a.menu-list__link:not([href]):not([role='button']),
  a.mega-menu__link:not([href]):not([role='button']) {
    pointer-events: none;
  }

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

  .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-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); */
    /* align-content: start; */
    overflow: hidden auto;
    max-height: calc(var(--submenu-max-height) - 80px);
    /* max-height: inherit; */
    margin: 0 auto;
    width: 100%;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    /*
      Focus outline fix: overflow: hidden auto clips outlines of links at the left/right edges.
      padding-inline creates room inside the scrollport so those outlines are not cut off.
      Content area narrows by ~2×(outline-offset + outline-width) ≈ 9 px total — imperceptible.
    */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));
    padding-inline: var(--focus-outline-size);
    display: flex;
    overflow: auto hidden;
    flex-flow: column wrap;
    margin: 0 auto;
    width: 100%;
    align-content: initial;
  }

  /*
    Collection-image mode: fixed column count (merchant-configured, no per-panel column
    layout control) instead of the auto-fill grid above — makes the tile grid line up and
    the `--wide-collection-image` span-2 rule meaningful.
  */
  .mega-menu__list[data-menu-mode='collection_images'] {
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
  }

  @media screen and (min-width: 990px) {
    .mega-menu__list[data-menu-mode='collection_images'] {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  /*
    Rigid column layout (2/3/4-column): merchant-selected "Column layout" renders exactly N
    equal columns via a modifier class (mega-menu__list--2-column etc.) that
    ocs-header-mega-panels.js toggles from the block setting. `auto` is untouched and keeps
    the base flex column-wrap behavior above.
  */
  .mega-menu__list[data-column-layout]:not([data-column-layout='auto']) {
    overflow: hidden auto;
  }

  .mega-menu__list--2-column > .mega-menu__column {
    flex: 0 0 calc((100% - var(--menu-horizontal-gap)) / 2);
    width: calc((100% - var(--menu-horizontal-gap)) / 2);
    min-width: 0;

  }

  .mega-menu__list--3-column > .mega-menu__column {
    flex: 0 0 calc((100% - 2 * var(--menu-horizontal-gap)) / 3);
    width: calc((100% - 2 * var(--menu-horizontal-gap)) / 3);
    min-width: 0;
  }

  .mega-menu__list--4-column > .mega-menu__column {
    flex: 0 0 calc((100% - 3 * var(--menu-horizontal-gap)) / 4);
    width: calc((100% - 3 * var(--menu-horizontal-gap)) / 4);
    min-width: 0;
  }

  .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__more-list-item .mega-menu__link {
    color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
  }

  .mega-menu__more-list-item:where(:hover, .active) .mega-menu__link {
    color: var(--menu-top-level-font-color);
  }

  .mega-menu__more-list-item[aria-hidden='true'] {
    display: none;
  }

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

  /*
    Legacy OCS desktop dropdown geometry:
    - full-width white panel with a 1px divider and soft lower shadow;
    - 50px outer gutters and a 1300px content frame;
    - 20px vertical panel padding and 490px maximum content height.
    The 1300px frame intentionally differs from the 1280px header/tool-bar frame,
    matching the old theme's menu-bar and tier-two container relationship.
  */
  @media screen and (min-width: 1024px) {
    .header-menu {
      --ocs-header-nav-accent: #2e7631;
    }

    .header-menu .menu-list {
      --menu-horizontal-gap: 30px;
    }

    /* Legacy top navigation used 5px item padding per side at this width. */
    .header-menu .overflow-menu::part(list) {
      gap: 0 10px;
    }

    /* On the text span, not the link. `.menu-list__link` is a 44px flex box with
       the label centred in it (--minimum-touch-target), so a border on it draws
       at the bottom of the touch target — about 13px clear of the glyphs, reading
       as a rule under the whole header row rather than an underline.

       Measured on ocs.ca at 1440, hovered: li.menu__tier-one is 69px tall, and
       a.menu__item--link inside it is a 19px box with `margin: 25px 0` carrying
       `border-bottom: 3px solid rgb(46, 118, 49)`. Its border box ends at y=68
       against a glyph bottom of y=66 — the accent sits on the text, two pixels
       under the descenders, and comes nowhere near the bottom of the item.

       The span is text-height and already serves this exact purpose for the
       focus ring above, for the same reason. Reserving the 3px transparent on it
       rather than on the link keeps hover from shifting the label. */
    .header-menu .menu-list__list-item > .menu-list__link .menu-list__link-title {
      /* The span inherits a 26.74px line-height, which makes its box 29.7px tall
         around 16px glyphs and drops the rule 7.7px below them — measured, and
         visibly looser than production's 2. `1` makes the box the glyph box:
         19.0px tall with the rule 2.0px under the text, which is production's
         19px anchor and 2px gap to the pixel. Only the span's own box moves; the
         link is still a 44px touch target with the label centred in it. */
      line-height: 1;
      border-block-end: 3px solid transparent;
    }

    /* Production draws this on `:hover` and on `.has-tier-two-open`, its
       panel-open class, so the accent survives once the panel is showing even
       where there is no hover to read — a tap on a touch-capable desktop, or a
       panel opened from the keyboard with Space. `aria-expanded` is the same
       state under a different name: header-menu.js sets it on the link it
       activates. `:focus-within` alone would miss the tap. */
    .header-menu .menu-list__list-item:where(:hover, :focus-within) > .menu-list__link .menu-list__link-title,
    .header-menu .menu-list__list-item > .menu-list__link[aria-expanded='true'] .menu-list__link-title,
    .header-menu .menu-list__link--active .menu-list__link-title {
      border-block-end-color: var(--ocs-header-nav-accent);
    }

    /*
      Escape hands focus back to the trigger, which keeps the `:focus-within`
      branch above matching — so the accent stayed lit on an item whose panel
      had just been dismissed, and stayed lit under the pointer that opened it.
      Same marker as the focus ring, set by header-menu.js only for a panel
      opened with the mouse and dropped as soon as focus leaves the trigger.

      Two exclusions carry the whole rule. `aria-expanded` means re-hovering the
      item reopens the panel and relights the accent even though the attribute
      is still on the element, so nothing has to clear it on the way back in.
      `--active` is the current-page state and belongs to the page, not to this
      interaction. Transparent rather than `none`, so the 3px stays reserved and
      the label does not shift.
    */
    .header-menu
      .menu-list__link[data-focus-quiet]:not([aria-expanded='true']):not(.menu-list__link--active)
      .menu-list__link-title {
      border-block-end-color: transparent;
    }

    .header-menu .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu {
      box-sizing: border-box;
      max-height: calc(100vh - 115px);
      padding: 20px 50px;
      border-block: 1px solid rgb(var(--color-foreground-rgb) / 0.4);
      box-shadow: 0 12px 12px 0 rgb(var(--color-foreground-rgb) / 0.12);
      overflow: auto;
    }

    .header-menu .menu-list__submenu-inner {
      width: 100%;
      max-width: none;
      margin-inline: auto;
      padding: 0;
    }

    .header-menu .mega-menu.section {
      width: 100%;
      max-width: 1300px;
      margin-inline: auto;
    }

    .header-menu .mega-menu.section--full-width-margin > * {
      padding-inline: 0;
    }

    /*
      Keep native flex sizing/wrapping and paint dividers in the column gaps.
      Using list backgrounds avoids attaching borders to menu items and avoids
      the unnecessary left-edge rail created by the earlier ::before approach.
    */
    .header-menu .mega-menu__grid[data-featured-layout] .mega-menu__list {
      --ocs-divider-quarter-gap: 7.5px;
      --ocs-divider-third-gap: 5px;
      background-repeat: no-repeat;
      background-origin: content-box;
      background-clip: content-box;
    }

    .header-menu .mega-menu__grid[data-featured-layout] .mega-menu__list--2-column {
      background-image: linear-gradient(#d8d8d8, #d8d8d8);
      background-position: 50% 0;
      background-size: 1px 100%;
    }

    .header-menu .mega-menu__grid[data-featured-layout] .mega-menu__list--3-column {
      background-image: linear-gradient(#d8d8d8, #d8d8d8), linear-gradient(#d8d8d8, #d8d8d8);
      background-position:
        calc(33.333% - var(--ocs-divider-third-gap)) 0,
        calc(66.667% + var(--ocs-divider-third-gap)) 0;
      background-size: 1px 100%, 1px 100%;
    }

    .header-menu .mega-menu__grid[data-featured-layout] .mega-menu__list--4-column {
      background-image:
        linear-gradient(#d8d8d8, #d8d8d8),
        linear-gradient(#d8d8d8, #d8d8d8),
        linear-gradient(#d8d8d8, #d8d8d8);
      background-position:
        calc(25% - var(--ocs-divider-quarter-gap)) 0,
        50% 0,
        calc(75% + var(--ocs-divider-quarter-gap)) 0;
      background-size: 1px 100%, 1px 100%, 1px 100%;
    }

    .header-menu .mega-menu__grid[data-featured-layout] .mega-menu__panel-content:not(:empty) {
      border-inline-start: 1px solid #d8d8d8;
      background: none;
    }

    /* Cannabis Made Clear has taller featured-card copy than Learn. The shared
       2-column flex basis otherwise stretches each menu group to half that card
       height, leaving an oversized blank band between row one and row two.
       Let these four groups use their content height while retaining Learn's
       measured 127px minimum and the shared 20px row gap. */
    .header-menu
      .mega-menu__grid[data-menu-handle='cannabis-made-clear']
      .mega-menu__list--2-column
      > .mega-menu__column {
      flex-basis: auto;
      min-height: 127px;
    }

    .header-menu .mega-menu__column > div > .mega-menu__link--parent {
      margin: 0 0 6px;
      padding: 0;
      font-size: 16px;
      font-weight: 600;
      line-height: 20px;
    }

    .header-menu .mega-menu__column > div > ul .mega-menu__link {
      display: block;
      width: 100%;
      margin-block-end: 6px;
      padding: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      text-align: start;
    }

    .header-menu .mega-menu__column > div > ul .mega-menu__link:not(.mega-menu__reoccurring-link):hover {
      color: var(--menu-child-font-color);
      text-decoration: underline;
    }
  }

  @media screen and (min-width: 1200px) {
    /* Legacy top navigation increased to 9px item padding per side. */
    .header-menu .overflow-menu::part(list) {
      gap: 0 18px;
    }
  }

  @media screen and (min-width: 1280px) {
    .header-menu .menu-list {
      --menu-horizontal-gap: 60px;
    }

    .header-menu .mega-menu__grid[data-featured-layout] .mega-menu__list {
      --ocs-divider-quarter-gap: 15px;
      --ocs-divider-third-gap: 10px;
    }
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:129) */
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:133) */
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:137) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

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

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

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

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

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

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

/* START_BLOCK:_search-input (INDEX:145) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

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

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component button.search__icon svg {
    width: 24px;
    height: 24px;
  }

  search-page-input-component button.search__icon {
    width: 32px;
    height: 32px;
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);
    border: none;
    pointer-events: auto;

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:146) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:147) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

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

  .social-icons__icon {
    display: none;
  }

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

    .social-icons__icon {
      display: block;
    }

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

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

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

/* START_BLOCK:accelerated-checkout (INDEX:148) */
.accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

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

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

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

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

/* START_BLOCK:accordion (INDEX:149) */
.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:brand-video-copy (INDEX:151) */
/* Legacy OCS .container widths, shared by the copy and its sibling video block. */
  .section-content-wrapper:has(> .brand-video-copy) {
    inline-size: 100%;
    max-inline-size: calc(100vw - 30px);
    margin-inline: auto;
  }

  .brand-video-copy {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-inline: auto;
    color: var(--color-foreground);
    text-align: center;
    overflow-wrap: break-word;
  }

  .brand-video-copy--empty {
    display: none;
  }

  .brand-video-copy__heading,
  .brand-video-copy__description {
    width: 100%;
    max-width: 433px;
    margin-inline: auto;
  }

  .brand-video-copy__heading {
    margin-block: 0;
    color: var(--color-foreground, #000000);
    font-family: var(--font-h2--family, var(--font-body--family));
    font-size: 26px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0;
    text-transform: none;
  }

  .brand-video-copy__description {
    margin-block-start: 13px;
    color: #3f3f3f;
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
  }

  .brand-video-copy__description p {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
  }

  @media (min-width: 640px) {
    .section-content-wrapper:has(> .brand-video-copy) {
      max-inline-size: 570px;
    }

    .brand-video-copy__heading {
      font-size: 32px;
    }

    .brand-video-copy__description {
      margin-block-start: 20px;
    }
  }

  @media (min-width: 1024px) {
    .section-content-wrapper:has(> .brand-video-copy) {
      max-inline-size: 930px;
    }
  }

  @media (min-width: 1280px) {
    .section-content-wrapper:has(> .brand-video-copy) {
      max-inline-size: 1170px;
    }
  }

  @media (min-width: 1920px) {
    .section-content-wrapper:has(> .brand-video-copy) {
      max-inline-size: 1410px;
    }
  }
/* END_BLOCK:brand-video-copy */

/* START_BLOCK:buy-buttons (INDEX:153) */
.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%;
    padding-block: var(--padding-lg);
  }

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

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

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

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

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

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

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

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

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

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

  .product-form-text__error {
    display: flex;
    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;
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_BLOCK:buy-buttons */

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

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

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

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

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

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

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

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

    min-width: fit-content;

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

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

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

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

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

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

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

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

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

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

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

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

  .email-signup__button {
    white-space: nowrap;

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

  .email-signup__button:not(.ocs-button) {
    padding: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &.email-signup__button--text:not(.ocs-button) {
      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:not(.ocs-button) {
      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):not(.ocs-button) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary:not(.ocs-button) {
    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:162) */
.collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

  .facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

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

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

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

  .collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

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

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets--drawer .facets__actions {
    flex-shrink: 0;
    background-color: var(--color-background);
  }

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

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

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

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all,
  .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__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

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

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:165) */
.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: 750px) {
    .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: 750px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:167) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

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

/* START_BLOCK:image (INDEX:168) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  placeholder-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio);
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

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

/* START_BLOCK:logo (INDEX:170) */
.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: 750px) {
      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:maintenance-message (INDEX:171) */
.maintenance-message {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 90rem);
    margin-inline: auto;
    color: var(--color-foreground);
    text-align: center;
  }

  .maintenance-message__column {
    min-width: 0;
    padding: var(--padding-xl) var(--padding-lg);
    overflow-wrap: anywhere;
  }

  .maintenance-message__column--en {
    border-block-end: 1px solid color-mix(in srgb, currentcolor 45%, transparent);
  }

  .maintenance-message__content {
    font-size: clamp(1.375rem, 2vw, 1.875rem);
    font-weight: 300;
    line-height: 1.3;
  }

  .maintenance-message__content :is(h1, h2) {
    margin-block: 0 0.75em;
    font: inherit;
    font-weight: 500;
  }

  .maintenance-message__content p {
    margin-block: 0;
  }

  .maintenance-message__content a,
  .maintenance-message__cta a {
    color: currentcolor;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .maintenance-message__content a:hover,
  .maintenance-message__cta a:hover {
    text-decoration-thickness: 2px;
  }

  .maintenance-message__content a:focus-visible,
  .maintenance-message__cta a:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .maintenance-message__cta {
    margin-block-start: var(--padding-lg);
    font-size: var(--font-size--md);
    line-height: 1.3;
  }

  .maintenance-message__cta p {
    margin-block: 0;
  }

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

    .maintenance-message__column {
      padding: var(--padding-2xl);
    }

    .maintenance-message__column--en {
      border-block-end: 0;
      border-inline-end: 1px solid color-mix(in srgb, currentcolor 45%, transparent);
    }
  }
/* END_BLOCK:maintenance-message */

/* START_BLOCK:menu (INDEX:173) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:menu */

/* START_BLOCK:ocs-acc-nutrition (INDEX:175) */
/* Nutrition Facts Table */
  .ocs-nutrition-table-wrapper {
    margin-bottom: 24px;
  }

  .ocs-nutrition-table-border {
    max-width: 384px;
    margin: 0 auto;
    border: solid 3px #000;
    background-color: #fff;
    padding: 20px;
  }

  .ocs-nutrition-table {
    width: 100%;
    border-collapse: collapse;
  }

  .ocs-nutrition-table__heading {
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    color: #1A1A1A;
    text-align: left;
    padding: 0;
  }

  .ocs-nutrition-table__serving {
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    color: #1A1A1A;
    padding: 0;
  }

  .ocs-nutrition-table__dv-header td {
    padding: 0;
  }

  .ocs-nutrition-table__dv-label {
    text-align: right;
    font-weight: 400;
    font-size: 18px;
    color: #1A1A1A;
  }

  .ocs-nutrition-table__row--calories {
  }

  .ocs-nutrition-table__row--calories .ocs-nutrition-table__label {
    font-weight: 700;
  }

  .ocs-nutrition-table__label {
    padding: 0;
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    color: #1A1A1A;
  }

  .ocs-nutrition-table__row--indented .ocs-nutrition-table__label {
    padding-left: 26px;
  }

  .ocs-nutrition-table__dv {
    padding: 6px 10px;
    text-align: right;
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    color: #3F3F3F;
    white-space: nowrap;
  }

  .ocs-nutrition-table tfoot td {
    border-top: none;
  }

  .ocs-nutrition-table__footer {
    padding: 0;
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    color: #3F3F3F;
  }

  @media screen and (max-width: 749px) {
    .ocs-nutrition-table__heading,
    .ocs-nutrition-table__serving,
    .ocs-nutrition-table__dv-label,
    .ocs-nutrition-table__label,
    .ocs-nutrition-table__dv,
    .ocs-nutrition-table__footer {
      font-size: 15px;
      line-height: 20px;
    }
  }

  /* Ingredients section */
  .ocs-nutrition {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ocs-nutrition__heading {
    font-weight: 600;
    font-size: 18px;
    line-height: 23px;
    color: #3F3F3F;
    margin: 0 0 8px;
  }

  .ocs-nutrition__text {
    margin: 0;
  }

  @media screen and (max-width: 749px) {
    .ocs-nutrition__heading {
      font-size: 15px;
      line-height: 20px;
    }
  }
/* END_BLOCK:ocs-acc-nutrition */

/* START_BLOCK:ocs-acc-specs (INDEX:176) */
.ocs-spec-table {
    width: 100%;
    max-width: 820px;
    margin: clamp(16px, 8px + 2.133vw, 24px) auto 0;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0;
  }

  .ocs-spec-table__row {
    border-bottom: 1px solid #E0E0E0;
  }

  .ocs-spec-table__label,
  .ocs-spec-table__value {
    padding: 10px;
    vertical-align: middle;
    border: none;
  }

  .ocs-spec-table__label {
    color: #1A1A1A;
    white-space: nowrap;
    padding-right: 24px;
    width: 30%;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0%;
    text-transform: uppercase;
  }

  .ocs-spec-table .ocs-question-icon path {
    fill: #000000;
  }

  .ocs-spec-table__label-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .ocs-spec-table__value {
    color: #3F3F3F;
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    letter-spacing: 0%;
  }

  @media screen and (max-width: 749px) {
    .ocs-spec-table__label {
      font-size: 14px;
      line-height: 17px;
    }

    .ocs-spec-table__value {
      font-size: 15px;
      line-height: 20px;
    }

    .ocs-spec-table__row--allergens .ocs-spec-table__value {
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
  }
  /* Effects section */
  .ocs-effects {
    margin-top: 24px;
  }

  .ocs-effects__heading {
    font-weight: 600;
    font-size: 18px;
    line-height: 23px;
    letter-spacing: 0%;
    color: #3F3F3F;
    margin: 0 0 12px;
  }

  @media screen and (max-width: 749px) {
    .ocs-effects__heading {
      font-size: 15px;
      line-height: 20px;
    }
  }

  .ocs-effects__body {
    margin: 0 0 16px;
  }

  .ocs-effects__body p {
    margin: 0;
  }

  .ocs-effects__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0.5%;
    text-transform: uppercase;
    color: #2E7631;
    text-decoration: none;
  }

  .ocs-effects__cta:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .ocs-effects__cta-chevron {
    width: 12px;
    height: 12px;
    display: inline-flex;
    transition: transform 0.3s ease;
  }

  .ocs-effects__cta:hover .ocs-effects__cta-chevron {
    transform: translateX(4px);
  }
/* END_BLOCK:ocs-acc-specs */

/* START_BLOCK:ocs-add-to-cart (INDEX:177) */
.ocs-add-to-cart {
    display: block;
    width: 100%;
  }

  .ocs-add-to-cart__row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
  }

  /* Quantity dropdown */
  .ocs-add-to-cart__quantity {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
  }

  .ocs-add-to-cart__qty-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 2px;
  }

  .ocs-add-to-cart__quantity-inner {
    position: relative;
  }

  .ocs-add-to-cart__quantity-select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 56px;
    height: 50px;
    padding: 0 28px 0 16px;
    border: 1px solid #a5a5a5;
    border-radius: 4px;
    background: transparent;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
  }

  .ocs-add-to-cart__quantity-select:hover {
    border-color: #2e7631;
  }

  .ocs-add-to-cart__quantity-select:focus-visible {
    outline: 2px solid #2e7631;
    outline-offset: -2px;
  }

  .ocs-add-to-cart__quantity-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #333;
  }

  /* Add to cart button — layout override; visual styles come from .ocs-button */
  .ocs-add-to-cart__button {
    flex: 1;
    gap: 8px;
  }

  .ocs-add-to-cart__button-text,
  .ocs-add-to-cart__button-divider,
  .ocs-add-to-cart__button-price {
    position: relative;
    z-index: 1;
    transition: color 0.2s ease-in-out;
  }

  .ocs-add-to-cart__button-divider {
    opacity: 0.4;
    font-weight: 300;
  }

  .ocs-add-to-cart__button-price {
    font-weight: 600;
  }

  /* Spinner — position:absolute overrides .ocs-button > * { position: relative } */
  .ocs-add-to-cart .ocs-add-to-cart__spinner {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    align-items: center;
    justify-content: center;
    background: inherit;
    border-radius: inherit;
  }

  .ocs-add-to-cart__spinner svg {
    animation: ocs-spin 0.8s linear infinite;
  }

  .ocs-add-to-cart--loading .ocs-add-to-cart__spinner {
    display: flex;
  }

  .ocs-add-to-cart--loading .ocs-add-to-cart__button-text,
  .ocs-add-to-cart--loading .ocs-add-to-cart__button-divider,
  .ocs-add-to-cart--loading .ocs-add-to-cart__button-price {
    visibility: hidden;
  }

  @keyframes ocs-spin {
    to { transform: rotate(360deg); }
  }
/* END_BLOCK:ocs-add-to-cart */

/* START_BLOCK:ocs-badges (INDEX:178) */
.ocs-badges-block {
    display: block;
  }

  .ocs-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .ocs-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    background: #1b2827;
    color: #f6f2ea;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
/* END_BLOCK:ocs-badges */

/* START_BLOCK:ocs-cannabinoids (INDEX:179) */
.ocs-cannabinoids {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .ocs-cannabinoid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .ocs-cannabinoid__badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    background: #d2dc63cc;
    color: #1b2827;
    font-size: 12px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }
/* END_BLOCK:ocs-cannabinoids */

/* START_BLOCK:ocs-features (INDEX:180) */
.ocs-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 1px solid #eaeaea;
    padding-block-start: 16px;
    max-width: 435px;
  }

  .ocs-features__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #1b2827;
    margin: 0;
  }

  .ocs-features__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .ocs-features__item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .ocs-features__icon {
    flex-shrink: 0;
    width: clamp(64px, 10vw, 88px);
    height: clamp(64px, 10vw, 88px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ocs-features__icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .ocs-features__content {
    /* Not flex: a flex item's width comes from the flex-shrink algorithm, not
       from re-measuring against its own wrapped text, so the label and icon
       ended up sized independently of where the text actually wraps (visible
       as dead space between them).

       flow-root + float:right on the icon (below) lets the width
       calculation account for both the floated icon and the wrapped text.

       width: fit-content (not max-content) is the correct default here:
       max-content asks the browser to size against the text laid out on ONE
       unbroken line, which — combined with the floated icon inside this
       flow-root — produced a broken row layout for French, whose label has
       no forced line break (see .ocs-features__content--forced-break below
       for the one case where max-content is actually safe to use).
       fit-content shrinks to the available column width instead, which is
       always safe but can leave a visible gap between text and icon when
       the label's one-line width is much wider than where it actually wraps
       (e.g. "What is Craft" is a lot narrower than "What is Craft Cannabis?").

       font-size/line-height are repeated here (matching .ocs-features__label
       exactly) because this element establishes the inline formatting
       context for its wrapped text — without its own explicit values it
       inherits a taller font-size/line-height from an ancestor, and every
       line box gets padded out to fit that inherited "strut" even though the
       label span itself only needs 18px. That invisible per-line padding
       (measured via getClientRects(): each line reports 18px on its own,
       but the gap between lines was ~11px more than 2 stacked 18px lines)
       was the real cause of the oversized line spacing — not the float,
       which turned out to be unrelated. */
    display: flow-root;
    width: fit-content;
    max-width: 100%;
    position: relative;
    font-size: 15px;
    line-height: 1.15;
  }

  /* Applied (via the "og_content_class"/"craft_content_class" Liquid checks
     above) only when the translated label actually contains a manual <br> —
     currently English only. With an explicit forced break, max-content
     reflects the width of the wider of the two forced lines rather than the
     full unbroken text, so the floated tooltip icon docks flush against the
     text instead of leaving the gap fit-content's shrink-to-available-width
     behaviour produces. Locales without a forced break (e.g. French today)
     never get this class and keep the safe fit-content default above. */
  .ocs-features__content--forced-break {
    width: max-content;
  }

  .ocs-features__content .ocs-tooltip-wrapper {
    float: right;
    margin-inline-start: 4px;
  }

  .ocs-features__label {
    display: inline;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    color: #333;
  }

  .ocs-features__item:only-child {
    grid-column: 1 / -1;
  }

  .ocs-features__item:only-child .ocs-features__content {
    padding-inline-end: 22px;
  }

  /* .ocs-features__content .ocs-tooltip-wrapper--craft {
    right: 15px;
  }

  [lang='fr'] .ocs-features__content .ocs-tooltip-wrapper--craft {
    right: 0;
  } */

  /* .ocs-features__item:only-child .ocs-tooltip-wrapper--craft {
    right: 0;
  } */

  @media screen and (max-width: 749px) {
    .ocs-features__list {
      gap: 4px;
    }

    .ocs-features__item {
      gap: 2px;
    }

    /* There is no room to open beside the trigger at this width, so flip the
       --left tooltip to open above the icon, right-aligned to it (the
       --top-left geometry from custom.css). These are deliberately one
       specificity step above the custom.css rules they override, because
       {% stylesheet %} injection order relative to custom.css is not
       guaranteed and must not decide the winner. */
    .ocs-features .ocs-tooltip--left {
      top: auto;
      bottom: calc(100% + 8px);
      left: auto;
      right: 0;
      transform: none;
    }

    .ocs-features .ocs-tooltip--left::after {
      top: 100%;
      bottom: auto;
      left: auto;
      right: 8px;
      transform: none;
      border-top-color: #a5a5a5;
      border-left-color: transparent;
    }

    .ocs-features .ocs-tooltip--left::before {
      top: calc(100% - 1px);
      bottom: auto;
      left: auto;
      right: 9px;
      transform: none;
      border-top-color: #fff;
      border-left-color: transparent;
    }

    /* ocs-tooltip.js nudges an open tooltip back inside the viewport via this
       custom property. Re-consume it with the flipped geometry so the caret
       stays anchored to the trigger. */
    .ocs-features .ocs-tooltip-wrapper.is-active .ocs-tooltip--left {
      transform: translateX(var(--ocs-tooltip-viewport-offset-x, 0px));
    }

    .ocs-features .ocs-tooltip-wrapper.is-active .ocs-tooltip--left::after {
      right: calc(8px + var(--ocs-tooltip-viewport-offset-x, 0px));
    }

    .ocs-features .ocs-tooltip-wrapper.is-active .ocs-tooltip--left::before {
      right: calc(9px + var(--ocs-tooltip-viewport-offset-x, 0px));
    }
  }
/* END_BLOCK:ocs-features */

/* START_BLOCK:ocs-gram-equivalency (INDEX:181) */
.ocs-gram-equivalency-block {
    display: block;
  }

  .ocs-gram-equivalency {
    display: block;
  }

  .ocs-gram-equivalency__text {
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    color: #3F3F3F;
  }
/* END_BLOCK:ocs-gram-equivalency */

/* START_BLOCK:ocs-plant-type (INDEX:182) */
.ocs-plant-type {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .ocs-plant-type__label {
    font-size: 15px;
    line-height: 18px;
    color: #727272;
  }

  /* Shared tooltip styles are in custom.css */
/* END_BLOCK:ocs-plant-type */

/* START_BLOCK:ocs-price (INDEX:183) */
.ocs-price-block {
    display: block;
  }

  .ocs-price--in-store-message {
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-foreground, #333);
    text-align: left;
    margin: 0;
  }

  .ocs-price--in-store-message a {
    color: inherit;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
  }

  .ocs-pricing {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .ocs-pricing__price {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
  }

  .ocs-pricing__price b {
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: #1b2827;
  }

  .ocs-pricing__price-sale {
    color: #c41230 !important;
  }

  .ocs-pricing__price-striked {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    color: #727272;
    text-decoration: line-through;
  }

  .ocs-pricing__tax-label {
    max-width: 33px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: #727272;
  }

  .ocs-pricing__meta {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .ocs-pricing__meta:empty {
    display: none;
  }

  .ocs-pricing__save-badge {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    color: #c41230;
  }

  .ocs-pricing__ppu {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    color: #727272;
  }
/* END_BLOCK:ocs-price */

/* START_BLOCK:ocs-thc-cbd-badges (INDEX:185) */
.ocs-thc-cbd-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .ocs-thc-cbd-badges__pill {
    padding: 4px 8px;
    border-radius: 4px;
    background: #d2dc63cc;
    color: #1b2827;
    font-size: 12px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
  }
/* END_BLOCK:ocs-thc-cbd-badges */

/* START_BLOCK:ocs-vendor (INDEX:186) */
.ocs-vendor-block {
    display: block;
  }

  .ocs-vendor {
    display: block;
    line-height: 1.4;
  }

  .ocs-vendor__link,
  .ocs-vendor__text {
    font-size: 1rem;
    line-height: 1.4;
    color: inherit;
    text-decoration: none;
    font-weight: 500;
  }

  .ocs-vendor__link:hover {
    text-decoration: underline;
  }
/* END_BLOCK:ocs-vendor */

/* START_BLOCK:page-content (INDEX:187) */
.page-content {
    color: #3f3f3f;
    font-size: 15px;
    line-height: 1.3;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  .page-content * {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  .section-content-wrapper:has(.page-content) .text-block > h1 {
    color: #000;
    font-family: var(--font-primary--family, var(--font-body--family, sans-serif));
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.22;
    margin-block: 0;
    text-align: center;
    text-transform: none;
    text-wrap: wrap;
  }

  .section-content-wrapper:has(.page-content--careers) .text-block > h1 {
    font-size: 0;
  }

  .section-content-wrapper:has(.page-content--careers) .text-block > h1::before {
    content: 'Careers';
    font-size: 18px;
    line-height: 1.22;
  }

  .page-content :is(p, li) {
    color: #3f3f3f;
    line-height: inherit;
  }

  .page-content :is(p, ul, ol, table) {
    margin-block: 0 20px;
  }

  .page-content hr {
    background: #979797;
    border: 0;
    height: 1px;
    margin: 0 0 20px;
  }

  .page-content :is(ul, ol) {
    list-style: none;
    margin-inline-start: 0;
    padding-inline-start: 0;
  }

  .page-content :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block: 0 20px;
  }

  .page-content :is(ul, ol) li {
    padding-left: 20px;
    position: relative;
  }

  .page-content :is(ul, ol) li::before {
    left: 0;
    position: absolute;
  }

  .page-content ul li::before {
    background: #2e7631;
    content: '';
    display: inline-block;
    font-size: 20px;
    height: 10px;
    line-height: 20px;
    margin-top: 5px;
    width: 10px;
  }

  .page-content ol {
    counter-reset: item;
  }

  .page-content ol li {
    counter-increment: item;
  }

  .page-content ol li::before {
    content: counter(item);
    font-weight: 600;
  }

  .page-content :is(h1, h2, h3, h4, h5, h6) {
    color: #000;
    font-weight: 600;
    line-height: 1.22;
    margin-block: 0 20px;
  }

  .page-content > rte-formatter > h3 {
    font-size: 18px;
  }

  .page-content > rte-formatter > h4 {
    font-size: 15px;
  }

  .page-content b,
  .page-content strong {
    font-weight: 600;
  }

  .page-content a {
    color: inherit;
    text-decoration: none;
  }

  .page-content a.btn {
    appearance: none;
    background-color: #000;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: 'Calibre', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 20px;
    min-height: 40px;
    overflow: hidden;
    padding: 10px 20px;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    transition: color 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
    vertical-align: middle;
    white-space: nowrap;
  }

  .page-content a.btn--primary {
    background-color: #2e7631;
    border-color: #2e7631;
  }

  .page-content a.btn--outline {
    background-color: transparent;
    border-color: #000;
    color: #000;
    font-weight: 600;
  }

  .page-content a.btn--primary.btn--outline {
    border-color: #2e7631;
    color: #2e7631;
  }

  .page-content a.btn--primary.btn--outline:hover,
  .page-content a.btn--primary.btn--outline:active,
  .page-content a.btn--primary.btn--outline:focus {
    background-color: #2e7631;
    border-color: #2e7631;
    color: #fff;
    opacity: 1;
  }

  .page-content--accessibility > rte-formatter > :is(h2, h4) {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.22;
    margin-block: 30px 5px;
    text-align: left;
  }

  .page-content--accessibility > rte-formatter > p:has(+ ul) {
    margin-block-end: 5px;
  }

  .page-content--about-us {
    max-width: 670px;
    width: 100%;
  }

  .page-content--integrity-at-the-ocs details.accordion {
    border: 1px solid #ddd;
    margin: 0 0 10px;
    padding: 10px;
  }

  .page-content--integrity-at-the-ocs details.accordion summary {
    cursor: pointer;
    display: list-item;
    font-weight: 600;
    list-style: disclosure-closed inside;
    padding-block: 0;
  }

  .page-content--integrity-at-the-ocs details.accordion[open] summary {
    list-style-type: disclosure-open;
  }

  .page-content--integrity-at-the-ocs details.accordion summary::-webkit-details-marker {
    display: inline-block;
  }

  .page-content .text-cta {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .page-content .text-cta::after {
    -webkit-font-smoothing: antialiased;
    content: '\E00C';
    display: inline-block;
    font-family: 'Icons';
    font-size: 10px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    margin-left: 7px;
    text-decoration: none;
    text-transform: none;
    transform: translateX(0);
    transition: transform 0.1s linear;
  }

  .page-content .text-cta:hover::after,
  .page-content .text-cta:active::after,
  .page-content .text-cta:focus::after {
    transform: translateX(3px);
  }

  .page-content--about-us table {
    border-spacing: 0;
  }

  .page-content table {
    border-collapse: collapse;
    width: auto !important;
  }

  .page-content meta + .rte-table-wrapper {
    margin-block-start: 64px;
  }

  .page-content :is(thead, tr:not(:has(td))) {
    background-color: transparent;
    font-weight: 400;
    text-transform: none;
  }

  .page-content tr:has(td) {
    border-bottom: 0;
  }

  .page-content :is(th, td) {
    font-weight: 400;
    padding: 10px;
    text-align: start;
    text-transform: none;
    vertical-align: baseline;
  }

  .page-content th {
    text-align: center;
  }

  .page-content :is(th, td):first-child {
    padding-left: 0;
  }

  .page-content table :is(p, span, strong, b) {
    text-transform: none;
  }

  .page-content table :is(h1, h2, h3, h4, h5, h6) {
    margin-block-end: 10px;
  }

  .page-content table h4 {
    letter-spacing: 0.2px;
  }

  .page-content table h4 + p {
    letter-spacing: 0.2px;
  }

  @media screen and (min-width: 641px) {
    .section-content-wrapper:has(.page-content) .text-block > h1 {
      font-size: 32px;
      margin-inline: auto;
      max-width: 630px;
    }

    .section-content-wrapper:has(.page-content--careers) .text-block > h1 {
      font-size: 0;
    }

    .section-content-wrapper:has(.page-content--careers) .text-block > h1::before {
      font-size: 32px;
    }

    .page-content {
      font-size: 18px;
      margin-block-end: 60px;
    }

    .page-content .text-cta {
      font-size: 14px;
    }

    .page-content a.btn {
      border-width: 2px;
      font-size: 16px;
    }

    .page-content > rte-formatter > h3 {
      font-size: 32px;
    }

    .page-content > rte-formatter > h4 {
      font-size: 18px;
    }
  }

  @media screen and (min-width: 1025px) {
    .page-content ul li::before {
      font-size: 26px;
    }

    .page-content table h4 {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    .page-content table h4 + p {
      letter-spacing: normal;
    }
  }

  @media screen and (max-width: 640px) {
    .section-content-wrapper:has(.page-content) {
      gap: 20px;
    }

    .page-content table,
    .page-content table * {
      display: block;
    }

    .page-content table > tbody > tr > td {
      padding: 10px 0;
    }

    .page-content table h4 {
      font-size: 14px;
    }
  }
/* END_BLOCK:page-content */

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

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .page-placeholder {
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:189) */
.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:190) */
.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:191) */
.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:193) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:195) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

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

/* START_BLOCK:product-recommendations (INDEX:196) */
.product-recommendations-wrapper {
    width: 100%;
  }

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

  .product-recommendations {
    display: block;
  }

  .block-resource-list {
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }
/* END_BLOCK:product-recommendations */

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

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

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

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

  .social-icons__icon {
    display: none;
  }

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

    .social-icons__icon {
      display: block;
    }

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

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

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

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

  swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

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

  .variant-option--swatches {
    overflow-list::part(list) {
      padding-block: var(--overflow-list-padding-block, 0);
      padding-inline: var(--overflow-list-padding-inline, 0);
    }
  }

  .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_BLOCK:swatches */

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

  .video-block--forced-aspect {
    aspect-ratio: var(--size-style-aspect-ratio);
  }

  .video-block--forced-aspect > .deferred-media__poster-button {
    height: auto;
    aspect-ratio: var(--size-style-aspect-ratio);
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:account-actions (INDEX:207) */
.account-actions {
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: height var(--animation-values);

    &:has([data-active]) .account-actions__main-menu {
      visibility: hidden;
    }
  }

  .account-actions__header {
    padding: var(--padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
  }

  .account-actions__title {
    /* Ideally we set the font-size here, but specificity issues make this necessary */
    --font-h5--size: var(--font-size--lg);

    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .account-actions__email {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    max-width: var(--account-actions-max-width);
    word-break: break-all;
  }

  .account-actions__sign-ins {
    padding: var(--padding-xl);
    padding-block-start: 0;
    padding-block-end: var(--padding-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .account-actions__sign-in-text {
    display: inline;
  }

  .account-actions__fallback-text {
    display: none;
  }

  .account-actions__sign-ins:not(:has(shop-login-button)) {
    gap: 0;

    .account-actions__sign-in-text {
      display: none;
    }

    .account-actions__fallback-text {
      display: block;
    }
  }

  /* Makes the shop login button radius match the theme settings */
  .account-actions__shop-login {
    --buttons-radius: var(--style-border-radius-buttons-primary);
  }

  .account-actions__nav {
    padding: var(--padding-xl);
    padding-block-start: 0;
  }

  .account-actions__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;

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

  .account-actions__link {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .account-actions__icon {
    display: flex;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-block: -4px;
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

    .account-actions :is(a.button, a.button-secondary):focus-visible {
      outline: none;
      overflow: visible;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        inset: calc(-1 * var(--focus-outline-offset));
        border: var(--focus-outline-width) solid currentColor;
        border-radius: var(--style-border-radius-buttons-secondary);
        display: inherit;
      }
    }

    .account-actions a.button:focus-visible::after {
      border-color: var(--button-background-color);
      border-radius: var(--style-border-radius-buttons-primary);
    }
  }
/* END_SNIPPET:account-actions */

/* START_SNIPPET:account-button (INDEX:208) */
.account-button {
    color: var(--color-foreground);
    appearance: none;
    border: none;
    background: none;
    height: var(--button-size);
    width: var(--button-size);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transition: color var(--animation-speed) var(--animation-easing);
    anchor-name: --account-button-trigger;
  }

  .account-button__avatar {
    --account-button-size: 1.3rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--account-button-size);
    height: var(--account-button-size);
    border-radius: var(--style-border-radius-50);
    background-color: var(--color-primary-button-background);
    font-size: var(--font-size--xs);
    font-weight: 500;
    color: var(--color-primary-button-text);
    text-transform: uppercase;
    line-height: 1;
  }

  .account-button__icon {
    color: currentColor;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  /* The shop avatar doesn't bubble the click event up to our button, so we need to prevent that or the button doesn't work */
  .account-button shop-user-avatar {
    pointer-events: none;
  }

  /* ─── Account chip variant (desktop header pill) ───────────────── */
  .account-button--chip {
    --account-chip-border-color: #d8d8d8;
    --account-chip-icon-size: 18px;

    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    min-width: 190px;
    max-width: 207px;
    height: 46px;
    padding: 10px 15px;
    overflow: hidden;
    border: 1px solid var(--account-chip-border-color);
    border-radius: 25px;
    transition: border-color 0.2s ease;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .account-button--chip .icon--account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--account-chip-icon-size);
    height: var(--account-chip-icon-size);
    flex: 0 0 var(--account-chip-icon-size);
    font-size: var(--account-chip-icon-size);
    line-height: 1;
  }

  .account-button .icon--account::before {
    content: "\e002";
    font-family: "Icons";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
  }

  @media screen and (max-width: 749px) {
    .account-button > .icon--account {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 10px;
      color: #000;
      font-size: 24px;
      line-height: 24px;
    }
  }

  .account-button__chip-label {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    line-height: normal;
    text-transform: uppercase;
  }
/* END_SNIPPET:account-button */

/* START_SNIPPET:add-to-cart-button (INDEX:209) */
.add-to-cart-button {
    --text-speed: 0.26;
    --base-delay: calc(var(--text-speed) * 0.25);
    --tick-speed: 0.1;
    --ring-speed: 0.2;
    --check-speed: 0.2;
    --burst-speed: 0.32;
    --step-delay: 3;
    --speed: 1;

    user-select: none;
    transition-property: color, box-shadow, background-color, scale, translate;
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--ease-out-cubic);

    &:active {
      scale: 0.99;
      translate: 0 1px;
    }
  }

  .add-to-cart-button .svg-wrapper .checkmark-burst {
    width: 30px;
    height: 30px;
  }

  .add-to-cart-text {
    --atc-opacity: 0;
    --atc-destination: -1em;
    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .add-to-cart__added {
    --atc-opacity: 1;
    --atc-destination: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }

  .add-to-cart__added-icon {
    width: 32px;
    height: 32px;
  }

  [data-added='true'] .add-to-cart-text,
  [data-added='true'] .add-to-cart__added {
    animation-name: atc-slide;
  }

  .checkmark-burst {
    opacity: 0;
    overflow: visible;

    .burst {
      rotate: 20deg;
    }

    .check {
      opacity: 0.2;
      scale: 0.8;
      filter: blur(2px);
      transform: translateZ(0);
    }

    :is(.ring, .line, .check, .burst, .tick) {
      transform-box: fill-box;
      transform-origin: center;
    }

    :is(.line) {
      stroke-dasharray: 1.5 1.5;
      stroke-dashoffset: -1.5;
      translate: 0 -180%;
    }

    g {
      transform-origin: center;
      rotate: calc(var(--index) * (360 / 8) * 1deg);
    }
  }

  .add-to-cart-button[data-added='true'] .checkmark-burst {
    opacity: 1;
  }

  .add-to-cart-button[data-added='true'] {
    .check {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }

    .tick {
      scale: 1.75;
    }

    .ring {
      opacity: 0;
      scale: 1;
    }

    .line {
      stroke-dashoffset: 1.5;
    }

    .add-to-cart-text {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: circle(0% at 50% 50%);
      filter: blur(2px);
      opacity: 0;
      translate: 0 4px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .add-to-cart-button[data-added='true'] {
      .check {
        transition-property: opacity, scale, filter;
        transition-duration: calc(calc(var(--check-speed) * 1s));
        transition-delay: calc((var(--base-delay) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .tick {
        transition-property: scale;
        transition-duration: calc((calc(var(--tick-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
        transition-timing-function: ease-out;
      }

      .ring {
        transition-property: opacity, scale;
        transition-duration: calc((calc(var(--ring-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .line {
        transition-property: stroke-dashoffset;
        transition-duration: calc((calc(var(--burst-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-cubic);
      }
    }
    .add-to-cart-text {
      transition-property: clip-path, opacity, filter, translate;
      transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
      transition-timing-function: ease-out;
    }
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(100% at 50% 50%);
  }

  @keyframes atc-slide {
    to {
      opacity: var(--atc-opacity, 1);
      translate: 0px var(--atc-destination, 0px);
    }
  }

  /* --- OCS button compatibility ---
     1. Height override: .ocs-button sets height:50px (0,1,0); this rule at 0,2,0 ensures
        product-form height matches --height-buy-buttons regardless of source order.
     2. Checkmark overlay: .ocs-button > * forces position:relative (0,1,0); this
        descendant selector at 0,2,0 restores position:absolute unconditionally.
     3. Disabled/sold-out grey: overrides OCS colour tokens for the button background
        and border. Global .ocs-button:disabled already handles opacity/cursor/pointer-events. */
  .add-to-cart-button.ocs-button {
    min-height: var(--height-buy-buttons);
    height: auto;
  }

  .add-to-cart-button .add-to-cart__added {
    position: absolute;
    z-index: 2;
  }

  .add-to-cart-button.ocs-button:disabled,
  .add-to-cart-button.ocs-button[disabled] {
    --ocs-button-background-color: #3f3f3f;
    --ocs-button-border-color: #3f3f3f;
  }
/* END_SNIPPET:add-to-cart-button */

/* START_SNIPPET:background-media (INDEX:216) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:217) */
.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 (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 (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:218) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:220) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:card-gallery (INDEX:221) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-products (INDEX:223) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  .cart-items__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-child {
    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-2xs);
  }

  .cart-items__details * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--cart-font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
  }

  .cart-items__variant {
    display: inline-block;
  }

  .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(--cart-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(--cart-font-size--md);
  }

  .cart-items__price-unit {
    font-size: var(--cart-font-size--xs);
  }

  .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(--cart-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-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;
      justify-content: center;
    }
  }

  .cart__original-total-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__original-total-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__original-total-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__original-total-container,
  .cart__original-total-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--cart-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%;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

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

  .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(--cart-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(--cart-font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-note .svg-wrapper {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
    margin: 0;
  }

  .cart-note .icon-plus {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
  }

  /* 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__properties dt,
  .cart-items__properties dd {
    display: inline;
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:224) */
.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__summary-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__installments {
    color: var(--color-foreground);
    font-size: var(--cart-font-size--2xs);
  }

  .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(--cart-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 .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

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

  .disclosure-trigger {
    cursor: pointer;
    color: var(--color-foreground);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--padding-sm);
    padding-inline: 0;
    width: 100%;
    border: none;
    background: #0000;

    &[aria-expanded='true'] .horizontal {
      rotate: 90deg;
    }

    &:is(:hover, :focus-visible) {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }

    .horizontal {
      transform-box: fill-box;
      transform-origin: center;
    }

    svg {
      aspect-ratio: 1;
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .disclosure-trigger__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--cart-font-size--2xs);
    font-weight: 500;
  }

  @media (prefers-reduced-motion: no-preference) {
    .disclosure-trigger .horizontal {
      transition: rotate var(--surface-transition-duration) var(--surface-transition-timing);
    }
  }

  .disclosure-content {
    display: grid;
    grid-template-rows: 1fr;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(-5% -5% 0 -5%);
    opacity: 1;

    &[inert] {
      grid-template-rows: 0fr;
      opacity: 0;
    }

    & > * {
      min-height: 0;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .disclosure-content {
      transition-property: grid-template-rows, opacity;
      transition-duration: var(--surface-transition-duration);
      transition-timing-function: var(--surface-transition-timing);
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:226) */
.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:customer-account-header (INDEX:228) */
.customer-account__header {
    padding-block-end: var(--padding-xl);
  }

  .customer-account__header-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .customer-account__header-info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    width: 100%;
  }

  .customer-account__header .customer-account__header-title {
    margin: 0;
    font-weight: 600;
  }


  /* Greeting and email are the same paragraph style in production
     (.accounts__info-wrapper p, 15px rising to 18px at 1024px), so they carry the
     same size here. 18px is the wide value; the 1023px block at the foot of the
     file drops both to 15px. */
  .customer-account__header-greeting {
    margin: 0;
    font-size: 18px;
    font-weight: var(--font-weight-bold, 600);
  }

  .customer-account__header-account-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-sm);
    width: 100%;
    margin-block-start: 12px;
  }

  .customer-account__header-account-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .customer-account__header-email {
    margin: 0;
    color: #000;
    font-size: 18px;
    line-height: 1;
    min-width: 0;
    word-break: break-all;
  }

  /* .customer-account__reset-link visual rules consolidated into
     .customer-account__text-link — see customer-account-shared-styles.liquid.
     Class name preserved for GTM targeting.

     Size is the exception, because production scales this link on its own ladder
     (.accounts__info-wrapper a, 12px rising to 14px at 1024px) rather than with
     the shared --font-size--sm that .customer-account__text-link reads. Both
     classes are named so this beats that rule outright: one class each would tie,
     and a tie between two snippet stylesheets is settled by whichever order
     Horizon happens to bundle them in. */
  .customer-account__reset-link.customer-account__text-link {
    font-size: 14px;
  }

  .customer-account__logout-button {
    background: transparent;
    color: #000;
    /* The shorthand used to hard-code 1px, which overrode the 2px that
       .ocs-button--outline-black already sets at >=640px and left this the only
       thin-stroked outline button on the page. Taking the width from the OCS
       variable restores the heavier desktop stroke and keeps 1px on mobile. */
    border: var(--ocs-button-border-width) solid #000;
    border-radius: 3px;
    /* padding-block used to be --padding-sm (11.2px) with a hard-coded 14px
       font: 22.4px padding + 20px line-height + border pushed the box past
       the --customer-account-cta-height floor (customer-account-shared-styles.liquid)
       at both breakpoints, so height: auto rendered taller than the 40/44px
       spec instead of clamping to it. --padding-xs brings the content box
       back under the floor. Sign out previously stayed a flat 14px here by
       design — a parity review had asked only for the heavier stroke — but
       the current spec wants the same 16px desktop step as every other
       account CTA, so this now reads --customer-account-cta-font-size too. */
    padding-block: var(--padding-xs);
    padding-inline: var(--padding-xl);
    font-size: var(--customer-account-cta-font-size);
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    --button-border-width: 0;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }

  .customer-account__logout-text {
    position: relative;
    z-index: 1;
    transition: color 0.2s ease-in-out;
  }

  .customer-account__logout-animation {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
  }

  .customer-account__logout-animation::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 0;
    padding-bottom: 110%;
    border-radius: 50%;
    background: #000;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
  }

  .customer-account__logout-animation::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .customer-account__logout-button:hover .customer-account__logout-text {
    color: #fff;
  }

  .customer-account__logout-button:hover .customer-account__logout-animation::before {
    transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
  }

  .customer-account__logout-button:hover .customer-account__logout-animation::after {
    opacity: 1;
    transition-duration: 0.01s;
    transition-delay: 0.3s;
  }

  /* Focus ring intentionally not declared here: the shared account rule in
     customer-account-shared-styles.liquid draws it for every `.ocs-button`
     under `.customer-account` at (0,3,0). A `.customer-account__logout-button`
     rule at (0,2,0) could never apply, and the 1.5px `currentcolor` ring it
     used to carry was the invisible-focus defect. */

  /* Production moves the account header type at 1024px, not 640px:
     .accounts__title h1 24→32px, .accounts__info-wrapper p 15→18px, its link
     12→14px. Putting these on 640px made every width from 641 to 1023px render
     the desktop sizes where production renders the small ones.

     Both blocks sit at the foot of the file, after the base rules they override —
     a media query adds no specificity, so an equal-specificity override placed
     earlier in the source simply loses. The title is addressed with two classes in
     both bands so it also outranks the `h3` class the markup carries.

     1023/1024 rather than the 1025 that was here before, which left 1024px itself
     — an iPad in landscape — on the small scale. */
  @media screen and (max-width: 1023px) {
    .customer-account__header .customer-account__header-title {
      font-size: 24px;
      line-height: 1.2;
    }

    .customer-account__header-greeting {
      font-size: 15px;
      line-height: 1.2;
    }

    .customer-account__header-email {
      font-size: 15px;
    }

    .customer-account__reset-link.customer-account__text-link {
      font-size: 12px;
    }
  }

  @media screen and (min-width: 1024px) {
    .customer-account__header .customer-account__header-title {
      font-size: 32px;
    }
  }

  /* Layout only — the type sizes for this band are in the 1023px block above,
     which production holds to that breakpoint rather than this one. */
  @media (max-width: 640px) {
    .customer-account__header-account-row {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: nowrap;
      gap: var(--gap-sm);
    }

    .customer-account__header-account-details {
      flex: 1 1 auto;
      min-width: 0;
    }

    /* Two classes to clear the .ocs-button.customer-account__logout-button rule
       in customer-account-shared-styles, which would otherwise tie and be
       decided by bundle order. Font size is left to --ocs-cta-font-size now —
       it's already 14px below 640px, so no override is needed here. */
    .ocs-button.customer-account__logout-button {
      flex: 0 0 auto;
      white-space: nowrap;
    }
  }
/* END_SNIPPET:customer-account-header */

/* START_SNIPPET:customer-account-nav (INDEX:229) */
/* 40px flat — the same figure at both breakpoints on both tabs (defect-239).
     Order History and Addresses each cancel their own leftover top spacing
     against this rather than the nav giving less, since the amount to cancel
     differs per page: see customer-order-row.liquid's :first-child rule and
     main-customer-account.liquid's .customer-account__no-orders. The address
     empty state pins this back to 20px itself (main-customer-addresses.liquid)
     because it was already correct there and isn't part of this defect. */
  .customer-account__nav {
    margin-block-end: 40px;
  }

  .customer-account__nav-list {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #979797;
    box-sizing: border-box;
  }

  .customer-account__nav-item {
    flex: 1 1 50%;
    min-width: 0;
  }

  .customer-account__nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 6.5px 16px;
    text-align: center;
    text-decoration: none;
    /* The unselected tab is the muted grey; only .is-active is black.

       Production's equivalent (.tab / .tab--active) reads the opposite way round:
       inactive transparent, active a #4a4a4a fill with white text, at 14px. That
       inversion is an open merchant question, not a defect — the parity review
       specified only the inactive text colour. See
       docs/evidence/my-account-parity-open-questions.md before changing these
       colours; it carries the production values and the confidence caveat. */
    color: #3f3f3f;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: #f4f4f4;
    border: 1px solid #f4f4f4;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* Round only outer corners; inner edges sit flush */
  .customer-account__nav-item:first-child .customer-account__nav-link {
    border-radius: var(--style-border-radius-inputs, 3px) 0 0 var(--style-border-radius-inputs, 3px);
    border-inline-end-width: 0;
  }

  .customer-account__nav-item:last-child .customer-account__nav-link {
    border-radius: 0 var(--style-border-radius-inputs, 3px) var(--style-border-radius-inputs, 3px) 0;
  }

  /* Divider between the two tabs. The first link zeroes its own inline-end
     border above, so this is the single shared edge rather than two abutting
     lines — and it reads on both tabs, since the active one is transparent
     while the inactive one is #f4f4f4. */
  .customer-account__nav-item + .customer-account__nav-item .customer-account__nav-link {
    border-inline-start-color: #979797;
  }

  .customer-account__nav-link:hover {
    background: #f4f4f4;
    color: #3f3f3f;
  }

  .customer-account__nav-link.is-active {
    background: transparent;
    color: #000;
  }

  .customer-account__nav-link.is-active:hover {
    background: transparent;
    color: #000;
  }

  .customer-account__nav-link:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
    border-radius: var(--style-border-radius-inputs, 3px);
    z-index: 1;
    position: relative;
  }

  @media screen and (max-width: 640px) {
    /* Full-bleed: the tab strip runs to both screen edges, so it cancels the
       section's inline padding. --page-margin is set to 15px by both account
       sections (main-customer-account, main-customer-addresses); the fallback
       covers any third page that renders the nav without setting it. Cancelling
       exactly the padding cannot introduce horizontal page scroll. */
    .customer-account__nav-list {
      margin-inline: calc(-1 * var(--page-margin, 15px));
      /* 44px including the 1px rules top and bottom, so the strip measures 44px
         rather than 44 plus its own border. */
      min-height: 44px;
      border-inline: 0;
    }

    /* Square ends: with the strip running edge to edge there is no outer corner
       left to round. */
    .customer-account__nav-item:first-child .customer-account__nav-link,
    .customer-account__nav-item:last-child .customer-account__nav-link {
      border-radius: 0;
    }

    .customer-account__nav-link {
      font-size: 12px;
      padding-block: 0;
    }
  }
/* END_SNIPPET:customer-account-nav */

/* START_SNIPPET:customer-account-shared-styles (INDEX:230) */
/*
   * Account CTA geometry — one source of truth
   * ─────────────────────────────────────────────────────────────────────────
   * Every CTA on the account pages is 44px tall on desktop and 40px on mobile —
   * Sign out, Reorder, Order details, Add to bag, Add new address, Delete, Edit,
   * Cancel, Save — with a 16px label on desktop and 14px on mobile. They are
   * declared as variables here and referenced from each component's own
   * button rule rather than being set by one shared selector, because several
   * of those buttons have no distinguishing class (the address Save button is
   * just `.ocs-button` inside .customer-address__form-actions) and a shared
   * rule would tie on specificity with the component rules and be decided by
   * bundle order.
   *
   * Consumed with `height: auto; min-height: var(--customer-account-cta-height)`
   * rather than `height`, so a CTA whose label wraps — Reorder in French — grows
   * instead of clipping. That also has to beat .ocs-button's own
   * `height: var(--ocs-button-height)`, so each consumer sets
   * --ocs-button-height to the same value.
   *
   * On :root because the address dialogs render outside .customer-account, and
   * the prefix keeps them inert everywhere else.
   */
  :root {
    --customer-account-cta-height: 40px;
    --customer-account-cta-font-size: 14px;
  }

  @media screen and (min-width: 640px) {
    :root {
      --customer-account-cta-height: 44px;
      --customer-account-cta-font-size: 16px;
    }
  }

  .customer-account--wide {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  /* Account sections are CSS grids. Their direct children otherwise retain an
     automatic min-content width, so a populated address row can widen the page
     beyond the phone viewport and leave the whole storefront horizontally
     scrollable. Let each region shrink inside the section's center track. */
  .customer-account--wide > * {
    min-width: 0;
    max-width: 100%;
  }

  .customer-account__banner {
    font-size: 15px;
    line-height: 1.35;
  }

  .customer-account__banner--error {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #d91222;
  }

  .customer-account__banner--error ul {
    margin-block: 0;
    padding-inline-start: 0;
    list-style: none;
  }

  /* Matches production ocs.ca `.forgot-password__notification-banner`
     (cdn/shop/t/1084/assets/css_theme.css), which sets no font properties and
     inherits production's body: Calibre 15px/1.3 weight 400, scaling to 18px at
     640px. Those are pinned explicitly rather than inherited so this banner does
     not drift with Horizon's own body scale. Declared after
     .customer-account__banner so it wins the equal-specificity tie on order.
     NOTE: the identical rule in sections/main-customer-login.liquid must be kept
     in sync — both compile into the same bundled stylesheet. */
  .customer-account__banner--success {
    padding: 10px;
    border: 1px solid #2e7631;
    border-radius: 5px;
    background-color: #f8fff9;
    color: #2e7631;
    font-family: 'Calibre', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
  }

  @media screen and (min-width: 640px) {
    .customer-account__banner--success {
      font-size: 18px;
    }
  }

  /* The class is doubled to outrank base.css's `.h2.h2`.

     These titles are `<h1 class="customer-account__title h2">`, so the global h2
     rule applies to them, and it is deliberately doubled to (0,2,0). Written once,
     the selector below would also be (0,2,0) — an exact tie, resolved only by
     which stylesheet the browser saw last. That happens to fall our way today
     (base.css is the external sheet, this is inlined by the snippet after it), but
     it is decided by load order rather than by intent, and base.css now sets an
     h2 size that steps to 55px. A tie lost here is a 55px login heading.

     Doubling makes it (0,3,0) and the question stops being a question. Same
     hardening the account header needed for `.h3` last sprint. */
  .customer-account--auth-form .customer-account__title.customer-account__title {
    margin: 40px 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
  }

  /* 1024px, not the 750px this used to say. ocs.ca steps these titles 24px -> 32px
     at its desktop breakpoint, and for the account forms that is 1024, not the 750
     Horizon uses for cards. Stepping early is what made our account type look a
     size too big through tablet portrait. */
  @media screen and (min-width: 1024px) {
    .customer-account--auth-form .customer-account__title.customer-account__title {
      font-size: 32px;
    }
  }

  /*
   * Auth form fields — login, recover, register, reset password, activate account
   * Match the old-theme/address dialog floating-label input treatment.
   */
  .customer-account--auth-form .customer-text-field__input,
  .customer-account--auth-form .customer-password-field__input {
    height: 40px;
    margin: 0;
    padding: 15px 10px 0;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background-color: #ffffff;
    color: #000;
    font-family: Calibre, sans-serif;
    font-size: 15px;
    line-height: 1.2;
  }

  .customer-account--auth-form .customer-password-field__input {
    padding-inline-end: 44px;
  }

  .customer-account--auth-form .customer-text-field__input:focus-visible,
  .customer-account--auth-form .customer-password-field__input:focus-visible {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: 0;
    border-color: #dcdcdc;
  }

  .customer-account--auth-form .customer-text-field__input--invalid,
  .customer-account--auth-form .customer-password-field__input--invalid {
    border: 1px solid #d91222;
  }

  .customer-account--auth-form .customer-text-field__label,
  .customer-account--auth-form .customer-password-field__label {
    inset-inline-start: 10px;
    color: #979797;
    font-size: 15px;
    transition: all 0.05s linear;
  }

  .customer-account--auth-form .customer-text-field__input:not(:placeholder-shown) ~ .customer-text-field__label,
  .customer-account--auth-form .customer-text-field__input:focus ~ .customer-text-field__label,
  .customer-account--auth-form .customer-password-field__input:not(:placeholder-shown) ~ .customer-password-field__label,
  .customer-account--auth-form .customer-password-field__input:focus ~ .customer-password-field__label {
    top: 12px;
    transform: translateY(-50%);
    color: #4a4a4a;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .customer-account--auth-form .customer-text-field__required,
  .customer-account--auth-form .customer-password-field__required {
    color: #d91222;
  }

  .customer-account--auth-form .customer-password-field__toggle {
    inset-inline-end: 10px;
  }

  /*
   * customer-account primary buttons with local submit-animation spans
   * ─────────────────────────────────────────────────────────────────────────
   * These buttons now target OCS classes directly; legacy Horizon/base button
   * classes were removed from the markup. Address Save/Edit buttons have no
   * local animation spans and rely on the global OCS button system instead.
   *
   *   1. Login/register/reset/activate submit: .ocs-button.customer-account__submit
   *   2. Add-new-address button: .ocs-button.gtm-add-new-address-main
   *   3. Whole-order reorder button: .customer-order__reorder-form--order .ocs-button--primary
   *
   * Excluded intentionally:
   *   — Decline (.customer-account__submit--decline) has its own outline treatment.
   *   — Address Cancel/Delete/Edit/Save buttons use global OCS animation.
   *   — Text-link CTAs (.customer-account__text-link) are not standard buttons.
   */
  .ocs-button.customer-account__submit,
  .ocs-button.gtm-add-new-address-main,
  .customer-order__reorder-form--order .ocs-button--primary {
    background: #2e7631;
    border: 1px solid #2e7631;
    border-radius: 3px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase;
    transition: background-color 0.2s;
    box-shadow: none;
    --button-border-width: 0;
  }

  .ocs-button.customer-account__submit:hover,
  .ocs-button.gtm-add-new-address-main:hover,
  .customer-order__reorder-form--order .ocs-button--primary:hover {
    background-color: #2e7631;
  }

  /*
   * Focus ring — one strong signal for every account CTA
   * ─────────────────────────────────────────────────────────────────────────
   * Keyboard users had no usable indicator here, because two rules were both
   * drawing an outline the same colour as what sits underneath it:
   *   — base.css's `.ocs-button:focus-visible` draws in
   *     `--ocs-button-focus-color`, which defaults to the button's own
   *     `--ocs-button-border-color` — green-on-green for `--primary`.
   *   — the account override that used to sit here drew 1.5px
   *     (`--focus-outline-width`) in `currentcolor`, which on a filled green
   *     button is white, i.e. invisible against the white page. It also only
   *     named three selectors, so the other ~14 account CTAs fell back to the
   *     green-on-green base rule.
   *
   * Matches the home-page treatment (.square-tiles__tile, .promo-squares__tile,
   * .mini-tiles__link): a thick outline in the page foreground with a generous
   * offset. Because it is foreground rather than `currentcolor`, it reads the
   * same against `--primary` (filled green), `--outline-green` and
   * `--outline-black` alike. Offset stays under the smallest surrounding
   * padding — the reorder button sits in a `<td>` inside
   * `.customer-order__table`, which is `overflow: hidden`.
   *
   * Three scopes because the account CTAs share no single ancestor: every
   * main-customer-* section root carries `.customer-account`, but the address
   * add/edit and delete dialogs are `<dialog-component>` siblings rendered
   * outside it. Scoping is mandatory, not tidiness — Horizon bundles every
   * stylesheet-tag body into the one site-wide sheet, so a bare
   * `.ocs-button:focus-visible` here would repaint every button in the theme.
   *
   * (0,3,0) beats base.css's (0,2,0). Note it would only *tie* with the
   * `.ocs-button.customer-account__submit:focus-visible` shape that used to
   * live here and be decided by bundle order, which is why that rule was
   * replaced outright rather than left in place alongside this one.
   */
  .customer-account .ocs-button:focus-visible,
  .customer-address__dialog .ocs-button:focus-visible,
  .customer-address__delete-dialog .ocs-button:focus-visible {
    outline: 3px solid var(--color-foreground, #000);
    outline-offset: 4px;
  }

  .ocs-button.customer-account__submit[disabled],
  .ocs-button.customer-account__submit[aria-disabled='true'],
  .ocs-button.gtm-add-new-address-main[disabled],
  .ocs-button.gtm-add-new-address-main[aria-disabled='true'],
  .customer-order__reorder-form--order .ocs-button--primary[disabled],
  .customer-order__reorder-form--order .ocs-button--primary[aria-disabled='true'] {
    background: #3f3f3f;
    border-color: #3f3f3f;
    color: #fff;
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /*
   * customer-account__text-link
   * ─────────────────────────────────────────────────────────────────────────
   * Unified visual style for all inline text CTAs in customer-account forms,
   * regardless of whether the element is an <a> or a <button>.
   *
   * Rules applied here intentionally reset every browser default that differs
   * between <a> and <button> so the two element types are visually identical.
   */
  .customer-account__text-link {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 3px;
    /* Inherit the surrounding paragraph/div font so this CTA sits inline
       without changing the reading rhythm. */
    font: inherit;
    font-size: var(--font-size--sm);
    font-weight: 400;
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
    /* Override UA button appearance (border-box sizing, system font, etc.) */
    appearance: none;
    line-height: inherit;
    vertical-align: baseline;
    transition: color 0.15s ease, opacity 0.15s ease;
    text-transform: uppercase;
  }

  .customer-account__text-link:hover {
    color: var(--color-primary-hover);
    opacity: 0.85;
  }

  .customer-account__text-link:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  /*
   * customer-account primary button — hover animation
   * ─────────────────────────────────────────────────────────────────────────
   * Mirrors the PDP "Add to bag" circle-expand animation exactly.
   * Structure: <button> contains two spans:
   *   1. .customer-account__submit-animation  (animation host, aria-hidden)
   *   2. .customer-account__submit-text       (visible label, z-index 1)
   * The ::before pseudo on the animation element is a circle that scales from 0→1
   * on hover. ::after then fades in to fill the rest of the button white.
   * Both transitions are gated on :not(:disabled) so the loading/disabled state
   * never triggers the animation.
   */

  /* Container: needs relative+overflow to clip the expanding circle */
  .ocs-button.customer-account__submit,
  .ocs-button.gtm-add-new-address-main,
  .customer-order__reorder-form--order .ocs-button--primary {
    position: relative;
    overflow: hidden;
  }

  /* Text sits above the animation layer */
  .customer-account__submit-text {
    position: relative;
    z-index: 1;
    transition: color 0.2s ease-in-out;
  }

  /* Animation element fills the button and clips its children */
  .customer-account__submit-animation {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
  }

  /* Circle that expands from center on hover */
  .customer-account__submit-animation::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 0;
    padding-bottom: 110%;
    border-radius: 50%;
    background: #fff;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
  }

  /* White fill that fades in after the circle has fully expanded */
  .customer-account__submit-animation::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 0.3s;
  }

  /* Hover: text turns green */
  .ocs-button.customer-account__submit:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) .customer-account__submit-text,
  .ocs-button.gtm-add-new-address-main:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) .customer-account__submit-text,
  .customer-order__reorder-form--order .ocs-button--primary:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) .customer-account__submit-text {
    color: #2e7631;
  }

  /* Hover: circle expands */
  .ocs-button.customer-account__submit:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) .customer-account__submit-animation::before,
  .ocs-button.gtm-add-new-address-main:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) .customer-account__submit-animation::before,
  .customer-order__reorder-form--order .ocs-button--primary:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) .customer-account__submit-animation::before {
    transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
  }

  /* Hover: white fill fades in after circle completes (0.3s delay) */
  .ocs-button.customer-account__submit:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) .customer-account__submit-animation::after,
  .ocs-button.gtm-add-new-address-main:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) .customer-account__submit-animation::after,
  .customer-order__reorder-form--order .ocs-button--primary:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) .customer-account__submit-animation::after {
    opacity: 1;
    transition-duration: 0.01s;
    transition-delay: 0.3s;
  }

  /* Hide animation entirely on disabled buttons to avoid visual glitches */
  .ocs-button:disabled .customer-account__submit-animation,
  .ocs-button[disabled] .customer-account__submit-animation,
  .ocs-button[aria-disabled='true'] .customer-account__submit-animation {
    display: none;
  }

  /*
   * OCS button compatibility guards for customer account
   * ─────────────────────────────────────────────────────────────────────────
   * Account/address CTA markup now uses OCS classes without legacy base button
   * classes. Address tile/form buttons (Edit, Save, Cancel, Delete) have no
   * local animation spans and rely entirely on their OCS modifiers for fill,
   * border, text colour, focus, and circle-expand animation.
   *
   * Buttons that still carry local animation spans (login, register, reset,
   * activate, logout) have their OCS ::before/::after suppressed below so the
   * local span animation runs exclusively (avoids double-animation).
   */
  /*
   * Suppress OCS pseudo-element animation only for buttons that still carry
   * local animation spans (login, register, reset, activate, logout).
   * Cancel, Delete, Edit, and Save address buttons have no spans and rely
   * entirely on the global OCS ::before/::after circle-expand animation.
   */
  .ocs-button.customer-account__submit::before,
  .ocs-button.customer-account__submit::after,
  .ocs-button.customer-account__logout-button::before,
  .ocs-button.customer-account__logout-button::after {
    content: none !important;
  }

  /*
   * Auto height + inset-shadow suppression for customer account OCS buttons.
   * OCS uses explicit borders; box-shadow and --button-border-width stay zeroed
   * to prevent double-border artifacts from page-specific overrides.
   */
  .ocs-button.customer-account__submit,
  .ocs-button.customer-account__logout-button,
  .ocs-button.customer-address__cancel-button,
  .ocs-button.customer-address__delete-button,
  .ocs-button.customer-address__edit-button {
    height: auto;
    min-height: 44px;
    box-shadow: none;
    --button-border-width: 0;
  }

  /*
   * The account-page CTAs among those take the responsive height. Declared
   * separately, and after, so the login/register/reset submit button keeps its
   * flat 44px — those pages are not part of the account parity spec and would
   * otherwise shrink to 40px on mobile.
   */
  .ocs-button.customer-account__logout-button,
  .ocs-button.customer-address__cancel-button,
  .ocs-button.customer-address__delete-button,
  .ocs-button.customer-address__edit-button {
    --ocs-button-height: var(--customer-account-cta-height);
    min-height: var(--customer-account-cta-height);
  }

  /*
   * Cancel button (address forms: new + edit) — visual and animation handled
   * entirely by ocs-button--outline-black in base.css. No local animation CSS
   * needed: spans removed, OCS ::before/::after circle-expand runs directly.
   * Sizing: .customer-address__form-actions .ocs-button (form-new.liquid stylesheet).
   * focus-visible and reduced-motion: inherited from .ocs-button in base.css.
   */
/* END_SNIPPET:customer-account-shared-styles */

/* START_SNIPPET:customer-address-form-new (INDEX:232) */
/* -----------------------------------------------------------------------
     Address form — shared by new + edit forms (.customer-address__form*)
     Text and select inputs are rendered via customer-text-field.liquid and
     customer-select-field.liquid — no field-input/field-select rules needed here.
  ----------------------------------------------------------------------- */
  .customer-address__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .customer-address__shipping-note {
    margin: 0;
    font-size: 18px;
    color: #3f3f3f;
    line-height: 1.2;
  }

  .customer-address__shipping-note a {
    color: #2e7631;
  }

  /* The only helper text on the address form. Shared with
     customer-address-form-edit.liquid, which renders the same class without
     its own rule. */
  .customer-address__phone-note {
    margin: calc(-1 * var(--gap-sm)) 0 0;
    font-size: 13px;
    color: #3f3f3f;
  }

  /* Set-as-primary checkbox row */
  .customer-address__checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-size: 15px;
    cursor: pointer;
  }

  /* 18px square, in px rather than em so it no longer tracks the label's own
     font-size — the label is 15px on mobile and 18px above it, which would have
     given the box two different sizes. */
  .customer-address__checkbox {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-foreground);
    cursor: pointer;
  }

  @media screen and (min-width: 640px) {
    .customer-address__checkbox-label {
      font-size: 18px;
    }
  }

  /* Form action buttons */
  .customer-address__form-actions {
    display: flex;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  /* Cancel and Save. Save is a bare .ocs-button--primary with no class of its
     own, so this descendant selector is the only handle on it — which is why the
     shared CTA geometry is referenced here rather than applied by a shared
     selector that would tie with this one. */
  .customer-address__form-actions .ocs-button {
    min-width: 100px;
    --ocs-button-height: var(--customer-account-cta-height);
    height: auto;
    min-height: var(--customer-account-cta-height);
    padding: var(--padding-xs) var(--padding-md);
    font-size: var(--customer-account-cta-font-size);
    font-weight: 500;
    line-height: 16px;
  }

  .customer-address__form-actions--center {
    width: 100%;
    gap: 25px;
    justify-content: center;
  }

  .customer-address__form-actions--center .ocs-button {
    flex: 1 1 0;
    width: calc((100% - 25px) / 2);
    min-width: 0;
  }

  .customer-address__delete-link-wrap {
    display: flex;
    justify-content: center;
  }

  .customer-address__delete-link {
    appearance: none;
    background: none;
    border: 0;
    border-radius: 3px;
    color: #3f3f3f;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-transform: uppercase;
  }

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

  .customer-address__delete-link:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
/* END_SNIPPET:customer-address-form-new */

/* START_SNIPPET:customer-address-tile (INDEX:233) */
/* -----------------------------------------------------------------------
     Address tile card
  ----------------------------------------------------------------------- */
  .customer-address__tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-block-end: 18px;
    border-bottom: solid 1px #f4f4f4;
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background-rgb));
  }

  .customer-address__tile:last-of-type {
    border-bottom: 0;
  }

  .customer-address__tile-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  /* Takes its own line because it is a flex sibling of .customer-address__details,
     not part of it. Whether it should instead sit inline with the first address
     line — production's .addresses__main__primary appears to — is an open merchant
     question. See docs/evidence/my-account-parity-open-questions.md. */
  .customer-address__badge {
    display: inline-block;
    border-radius: var(--style-border-radius-inputs);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #3f3f3f;
    width: fit-content;
  }

  .customer-address__details {
    display: flex;
    flex-direction: column;
    font-style: normal;
    font-size: 18px;
    line-height: 1.2;
    color: #3f3f3f;
  }

  .customer-address__line {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Production sizes this pair explicitly rather than proportionally:
     .addresses__main__tile__details__buttons is a 10px-gap flex row and each .btn
     is 90px wide, widening to 120px at 1024px. Fixed widths mean the pair is
     250px here and 190px below 1024px, and the address text takes the rest —
     which is what keeps DELETE and EDIT the same size as each other whatever
     their labels are in either language. */
  .customer-address__tile-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-shrink: 0;
    width: auto;
  }

  .customer-address__tile-actions .ocs-button {
    flex: 0 0 120px;
    min-width: 0;
    /* Match Delete (outline) and Edit (primary) to the same height. Without this
       the primary Edit inherits the base 50px and sits taller than the outline
       Delete button. */
    --ocs-button-height: var(--customer-account-cta-height);
    padding: var(--padding-xs) var(--padding-md);
    font-size: var(--customer-account-cta-font-size);
    font-weight: 500;
    line-height: 16px;
  }

  /* -----------------------------------------------------------------------
     Mobile: keep address and actions in a two-column tile grid
  ----------------------------------------------------------------------- */
  /* Production holds the address tile on the small type scale until 1024px
     (.addresses__main__primary and .dont-break-out are 13px up to 1023px), and
     narrows the button pair over the same band. Separate from the 640px block
     below, which is the phone layout proper. */
  @media (max-width: 1023px) {
    .customer-address__badge,
    .customer-address__details {
      font-size: 13px;
    }

    .customer-address__tile-actions .ocs-button {
      flex-basis: 90px;
    }
  }

  @media (max-width: 640px) {
    .customer-address__tile {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 190px);
      align-items: center;
    }

    .customer-address__tile-actions {
      display: flex;
      flex-flow: row nowrap;
      justify-self: end;
      width: 190px;
      min-width: 0;
      max-width: 100%;
    }

    .customer-address__tile-actions .ocs-button {
      width: 90px;
      max-width: calc((100% - 10px) / 2);
      white-space: nowrap;
    }
  }
/* END_SNIPPET:customer-address-tile */

/* START_SNIPPET:customer-order-row (INDEX:234) */
.customer-account__order-row {
    --customer-order-action-width: 210px;
    --customer-order-column-layout: 2fr 2fr 2fr 3fr 3fr;

    list-style: none;
  }

  .customer-account__order-row + .customer-account__order-row {
    border-top: 1px solid #979797;
  }

  .customer-account__order-accordion {
    display: block;
  }

  .customer-account__order-summary {
    display: grid;
    grid-template-columns: var(--customer-order-column-layout);
    /* Top, not centre. IN THIS ORDER: lists every item in the order, so its
       column is taller than the other three; centring made each column sit
       half the difference lower and pushed the four labels out of one row. */
    align-items: start;
    gap: var(--gap-md);
    padding: 30px 0 10px;
    color: var(--color-foreground);
  }

  /* The 30px top padding is what separates one order's summary from the
     border-top that starts the next .customer-account__order-row — rows after
     the first need it. The first row has no border above it, so that same 30px
     just added to the nav's 40px margin-block-end (customer-account-nav.liquid)
     and overshot the defect's 40px tab-to-content spec. Zeroed here rather than
     lowered on the shared rule so orders 2+ keep their spacing. */
  .customer-account__order-row:first-child .customer-account__order-summary {
    padding-block-start: 0;
  }

  /* This stylesheet is desktop-first, so the default is "the group is not
     there": its three children become direct items of the five-column grid
     above and nothing about the desktop row changes. Only the mobile block below
     gives the group a box of its own. */
  .customer-account__order-col-group {
    display: contents;
  }

  .customer-account__order-col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    min-width: 0;
    padding: 5px;
  }

  .customer-account__order-label {
    color: #3f3f3f;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .customer-account__order-value {
    color: #3f3f3f;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .customer-account__order-value--summary {
    line-height: 1.2;
    white-space: normal;
  }

  .customer-account__order-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-sm);
    /* Right-aligned to the content edge, so Reorder and Order details line up
       under Sign out and the Order history / Addresses tabs instead of
       stretching the full width of the last grid column. The narrower
       breakpoints below reset this to full width. */
    width: var(--customer-order-action-width);
    max-width: 100%;
    margin-inline-start: auto;
  }

  .customer-account__order-reorder-form {
    width: 100%;
    margin: 0;
  }

  /* Reorder is a primary button and Order details an outline one, so they came
     from the OCS system at 50px and 40px respectively and did not match each
     other. Both now take the shared account CTA height, which also has to
     override --ocs-button-height because .ocs-button sets `height` from it. */
  .customer-account__order-reorder-button,
  .customer-account__order-action,
  .customer-account-order-details__line-add-button {
    justify-content: center;
    width: 100%;
    --ocs-button-height: var(--customer-account-cta-height);
    height: auto;
    min-height: var(--customer-account-cta-height);
    white-space: normal;
    font-size: var(--customer-account-cta-font-size);
    font-weight: var(--font-weight-medium, 500);
    line-height: 18px;
  }

  .customer-account__order-action {
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    /* Pinned rather than left to .ocs-button--outline-black, so the label stays
       black if the OCS outline palette is ever retuned. Hover still inverts to
       white on black. */
    --ocs-button-text-color: #000;
  }

  .customer-account__order-chevron {
    display: inline-flex;
    width: 18px;
    height: 22px;
    margin: 0 0 0 5px;
    line-height: 1;
    transition: transform 0.15s ease, margin 0.15s ease;
  }

  .customer-account__order-chevron svg {
    width: 100%;
    height: 100%;
  }

  .customer-account__order-action[aria-expanded="true"] .customer-account__order-chevron {
    transform: rotate(180deg);
  }

  /* Focus ring comes from the shared account rule in
     customer-account-shared-styles.liquid — both of these are `.ocs-button`s
     under `.customer-account`, so a (0,2,0) rule here could never apply. */

  .customer-account__order-unavailable-note {
    width: 100%;
    margin: 0 0 20px;
    color: #d91222;
    text-align: center;
    font-size: 13px;
    line-height: 20px;
  }

  .customer-account__order-warning-icon {
    display: inline-block;
    margin-inline-end: 5px;
    vertical-align: baseline;
  }

  .customer-account-order-details {
    --customer-order-details-inline-padding: 5px;

    padding: 0 var(--customer-order-details-inline-padding) var(--padding-xl);
  }

  .customer-account-order-details__cancelled-banner {
    margin: var(--gap-lg) 0 0;
    padding: var(--padding-md) var(--padding-lg);
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    color: var(--color-foreground);
    background: rgb(var(--color-foreground-rgb) / 0.04);
    font-size: var(--font-size--sm);
  }

  .customer-account-order-details__info {
    display: grid;
    grid-template-columns: var(--customer-order-column-layout);
    gap: var(--gap-md);
    margin-inline: calc(var(--customer-order-details-inline-padding) * -1);
    padding-block: var(--padding-xl);
  }

  .customer-account-order-details__info-block {
    min-width: 0;
    padding-inline: 5px;
  }

  .customer-account-order-details__info-block--shipping {
    grid-column: 1;
  }

  .customer-account-order-details__info-block--payment {
    grid-column: 2;
  }

  .customer-account-order-details__info-heading {
    margin: 0 0 16px;
    color: #3f3f3f;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
  }

  .customer-account-order-details__address,
  .customer-account-order-details__info-text {
    margin: 0;
    color: #3f3f3f;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

  .customer-account-order-details__address {
    overflow-wrap: anywhere;
    font-style: normal;
  }

  .customer-account-order-details__items-wrap {
    display: flex;
    flex-direction: column;
  }

  .customer-account-order-details__line-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--customer-order-action-width);
    gap: var(--gap-md);
    padding-block: 20px 12px;
  }

  .customer-account-order-details__line-item:not(:last-child) {
    border-block-end: 1px solid #f4f4f4;
  }

  .customer-account-order-details__line-item--unavailable .customer-account-order-details__line-product {
    opacity: 0.5;
  }

  .customer-account-order-details__line-product {
    display: flex;
    min-width: 0;
  }

  .customer-account-order-details__line-image-wrap {
    flex: 0 0 115px;
  }

  .customer-account-order-details__item-image {
    display: block;
    width: 115px;
    height: 115px;
    object-fit: contain;
  }

  .customer-account-order-details__item-image--placeholder {
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .customer-account-order-details__item-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding-inline-start: 5px;
    color: #3f3f3f;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

  .customer-account-order-details__item-title,
  .customer-account-order-details__item-vendor,
  .customer-account-order-details__item-meta {
    margin: 0;
  }

  .customer-account-order-details__item-purchase-meta {
    margin-block-start: auto;
  }

  .customer-account-order-details__item-title,
  .customer-account-order-details__item-title-link,
  .customer-account-order-details__item-title-text {
    color: #3f3f3f;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
  }

  .customer-account-order-details__item-title-link {
    text-decoration: none;
    text-underline-offset: 0.2em;
  }

  .customer-account-order-details__item-title-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
  }

  .customer-account-order-details__item-title-link:focus-visible,
  .customer-account-order-details__line-add-button:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
    border-radius: 2px;
  }

  .customer-account-order-details__line-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-sm);
    width: var(--customer-order-action-width);
    max-width: 100%;
  }

  .customer-account-order-details__line-add-button {
    position: relative;
    width: 100%;
  }

  .customer-account-order-details__line-add-spinner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    background: inherit;
    border-radius: inherit;
    pointer-events: none;
  }

  .customer-account-order-details__line-add-spinner svg {
    width: 20px;
    height: 20px;
    animation: customer-order-add-spin 0.8s linear infinite;
  }

  .customer-account-order-details__line-add-icon {
    display: none;
    line-height: 1;
  }

  .customer-account-order-details__line-add-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .customer-account-order-details__line-add-button[aria-busy='true'] {
    cursor: progress;
    opacity: 1;
    pointer-events: none;
  }

  .customer-account-order-details__line-add-button[aria-busy='true'] .customer-account-order-details__line-add-label,
  .customer-account-order-details__line-add-button[aria-busy='true'] .customer-account-order-details__line-add-icon {
    visibility: hidden;
  }

  .customer-account-order-details__line-add-button[aria-busy='true'] .customer-account-order-details__line-add-spinner {
    display: flex;
  }

  @keyframes customer-order-add-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .customer-account__order-add-status,
  .customer-account-order-details__line-add-status {
    color: #d91222;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
  }

  .customer-account-order-details__line-unavailable-note {
    color: #3f3f3f;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    opacity: 0.5;
  }

  /* Production splits the account type scale across two breakpoints, and the
     order *list* is on the 1024px one: .order__column h3 and .order__column span
     stay 13px, with the label inline with its value, until 1024px — where the
     label becomes a block and both rise to 18px. Only the expanded order
     *details* further down (.order__detail-info) moves at 640px. That is why the
     two are separate blocks here instead of one: putting the list on 640 made
     641–1023px render desktop-size type where production renders mobile-size. */
  @media screen and (min-width: 1024px) {
    .customer-account__order-label,
    .customer-account__order-value {
      font-size: 18px;
    }

    /* Production aligns the value row by giving every label a fixed 45px block
       (.order__column > :nth-child(1):has(h3) { height:45px }). From 1024px up
       only — below that the label shares a line with its value, where a 45px
       label would stretch the row instead of aligning anything. */
    .customer-account__order-label {
      min-height: 45px;
    }
  }

  @media screen and (min-width: 640px) {
    .customer-account__order-unavailable-note {
      font-size: 15px;
      line-height: 18px;
    }

    .customer-account-order-details__info-heading {
      font-size: 18px;
      line-height: 20px;
    }

    .customer-account-order-details__address,
    .customer-account-order-details__info-text {
      font-size: 18px;
      line-height: normal;
    }

    .customer-account-order-details__line-image-wrap {
      flex-basis: 150px;
    }

    .customer-account-order-details__item-image {
      width: 150px;
      height: 150px;
    }

    .customer-account-order-details__item-info {
      padding-inline-start: 15px;
      font-size: 18px;
      line-height: normal;
    }

    .customer-account-order-details__item-title,
    .customer-account-order-details__item-title-link,
    .customer-account-order-details__item-title-text {
      font-size: 18px;
      line-height: 20px;
    }

    .customer-account-order-details__item-title,
    .customer-account-order-details__item-vendor,
    .customer-account-order-details__item-meta {
      margin-block-end: 5px;
    }
  }

  /* 1023px rather than the 990px this used to be, so the row has one ladder
     instead of two. Production's is 640/1024; ours had grown a third rung at 990,
     which left 991–1023px holding the five-column desktop grid while the type
     scale had already dropped to 13px. Five 2fr tracks at that width are ~150px,
     and an inline "ORDER DATE: 2024-08-13" needs ~145px of the 140px left after
     padding — so the label wrapped in a layout that was meant to be roomy. The
     two-column fallback now covers the whole band below 1024, where the desktop
     grid and the 18px type start together. */
  @media screen and (max-width: 1023px) {
    .customer-account__order-summary,
    .customer-account-order-details__info {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-account__order-actions {
      grid-column: 2 / 3;
      justify-self: end;
      align-items: stretch;
      width: 100%;
    }

    .customer-account__order-reorder-button,
    .customer-account__order-action {
      width: 100%;
    }

    /* Label inline with its value — "ORDER DATE: 2024-08-13" — across this whole
       band, not only on phones. Production carries the pairing the same way:
       .order__column h3 is display:inline-block until 1024px, so what the parity
       mockup asks for on mobile is also production's tablet layout.

       The locale strings already end in a colon, in both languages, so this is
       layout only. Wrapping is allowed rather than suppressed because the French
       labels are much longer than the English ("TOTAL DE LA COMMANDE:" against
       "ORDER TOTAL:") and on their own come close to the half-width column: the
       label breaks if it must and the value drops beneath it, which is preferable
       to either overflowing or being ellipsised. */
    .customer-account__order-col--date,
    .customer-account__order-col--name,
    .customer-account__order-col--total {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      column-gap: 5px;
    }

    .customer-account__order-label {
      display: block;
      white-space: normal;
    }

    .customer-account__order-value {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
  }

  @media screen and (max-width: 640px) {
    /* Mobile layout, per the parity mockup: ORDER DATE / NUMBER / TOTAL stack
       down the left with each label inline with its value, IN THIS ORDER: sits
       beside them rather than on a full-width row of its own, and the two CTAs
       share the row underneath. That removes two rows of height from every order
       in the list. */
    .customer-account__order-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: flex-start;
      /* No row gap: the columns' own block padding already puts 10px between the
         stacked rows, which is the mockup's spacing. The CTAs restore a larger
         gap with a margin of their own.

         The 5px inline inset that the columns used to carry individually moves
         here, to the grid. That way the CTA below each column starts at its
         track edge and still lines up with the text above it — with the inset on
         the columns, the text sat 5px further in than its button. */
      gap: 0 10px;
      padding: 30px 5px 10px;
    }

    /* The shorthand above resets top padding for every row at this width, so
       the desktop :first-child rule needs a mobile-scoped twin. */
    .customer-account__order-row:first-child .customer-account__order-summary {
      padding-block-start: 0;
    }

    /* One grid item, not three. Three items spanning the rows beside a tall item
       list would each be pushed apart: a spanning item grows the auto rows it
       covers and the extra height is distributed evenly between them, so the
       longer the order the further ORDER DATE, NUMBER and TOTAL would drift from
       each other. As a single item their spacing is fixed at any item count, and
       the group simply sits at the top of a row the item list may make taller. */
    .customer-account__order-col-group {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .customer-account__order-col {
      /* row-gap only — the `gap` shorthand this used to be also zeroed
         column-gap, which otherwise comes from the 1023px block above's
         .customer-account__order-col--date/--name/--total rule at the same
         specificity, so this later declaration was winning and closing the
         space between "ORDER DATE:" and its value at this width. */
      row-gap: 0;
      min-width: 0;
      /* Block only — the inline inset is the grid's, so the CTAs can align to
         the same edge as the text above them. */
      padding: 5px 0;
    }

    /* Beside the group rather than under it. IN THIS ORDER: keeps its label
       above its value, since the value is a list and reads as one. */
    .customer-account__order-col--summary {
      grid-column: 2;
      grid-row: 1;
    }

    /* The wrapper stops generating a box so its two children become grid items
       in their own right. That is what puts each CTA in the same track as the
       column it belongs to — ORDER DETAILS under the order fields, REORDER under
       the item list — instead of the pair sharing one full-width row where their
       edges could only approximate the columns above. */
    .customer-account__order-actions {
      display: contents;
    }

    /* Reorder is wrapped in a form (it posts to /cart/add), so the form is the
       grid item and the button fills it. */
    .customer-account__order-reorder-form {
      grid-column: 2;
      grid-row: 2;
    }

    .customer-account__order-action {
      grid-column: 1;
      grid-row: 2;
    }

    /* The row gap the grid no longer has. On the items themselves rather than a
       container, since the container no longer has a box. */
    .customer-account__order-reorder-form,
    .customer-account__order-action {
      margin-block-start: 15px;
    }

    /* Label and value wrapping is set by the 1023px block above, which covers
       this band too. */

    /* Grid items now, so they need no flex sizing of their own — the track is
       the width. min-width keeps a long label from pushing the track open. */
    .customer-account__order-actions > * {
      min-width: 0;
    }

    .customer-account__order-reorder-form {
      width: auto;
    }

    /* Height and font-size come from --customer-account-cta-*, which is already
       40px/14px at this width. */
    .customer-account__order-reorder-button,
    .customer-account__order-action {
      width: 100%;
      margin-block-end: 20px;
      padding-inline: 10px;
    }

    /* padding-block gives this 20px on both edges; combined with the Order
       Details button's own margin-block-end: 20px above, Shipping/Payment
       info sat 40px below the button instead of the defect's 20px. Zeroing
       the top half here leaves the button's margin as the only contributor. */
    .customer-account-order-details__info {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 10px;
      padding-block-start: 0;
    }

    .customer-account-order-details {
      --customer-order-details-inline-padding: var(--padding-lg);
    }

    .customer-account-order-details__line-item {
      grid-template-columns: 65% 35%;
      gap: 0;
    }

    .customer-account-order-details__line-item--unavailable {
      padding-block-end: 20px;
    }

    .customer-account-order-details__line-actions {
      align-items: flex-end;
      padding: 10px 0 0;
      text-align: end;
    }

    .customer-account-order-details__line-add-button {
      display: inline-flex;
      width: auto;
      min-width: 0;
      min-height: 0;
      height: auto;
      gap: 0;
      padding: 5px 15px;
      color: #000;
      background: transparent;
      border: 1px solid #979797;
      border-radius: 30px;
      box-shadow: none;
    }

    .customer-account-order-details__line-add-button::before,
    .customer-account-order-details__line-add-button::after {
      display: none;
    }

    .customer-account-order-details__line-add-label {
      display: none;
    }

    .customer-account-order-details__line-add-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .customer-account-order-details__line-add-icon--plus {
      width: 20px;
      height: 20px;
      --icon-stroke-width: 1px;
    }

    .customer-account-order-details__line-add-icon--bag {
      width: 24px;
      height: 24px;
      margin-inline-start: 10px;
      color: #2e7631;
    }

    .customer-account-order-details__line-unavailable-note {
      position: absolute;
      inset-block-end: -5px;
      inset-inline-start: 0;
      width: 100%;
      font-size: 13px;
      line-height: 20px;
    }
  }
/* END_SNIPPET:customer-order-row */

/* START_SNIPPET:customer-password-field (INDEX:235) */
customer-password-field {
    display: block;
  }

  .customer-password-field__wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .customer-password-field__input {
    width: 100%;
    padding: var(--padding-sm) var(--padding-xl);
    padding-inline-end: calc(var(--padding-xl) * 3);
    padding-block-start: calc(var(--padding-sm) + 0.55em);
    padding-block-end: calc(var(--padding-sm) - 0.3em);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    font-size: inherit;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    transition: border-color 0.2s ease;
    appearance: none;
  }

  .customer-password-field__input::-ms-reveal,
  .customer-password-field__input::-ms-clear {
    display: none;
  }

  .customer-password-field__input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
    border-color: var(--color-input-border);
  }

  .customer-password-field__input--invalid {
    border-color: #d91222;
    border-width: 2px;
  }

  /* Floating label — rises when input is focused or has content */
  .customer-password-field__label {
    position: absolute;
    inset-inline-start: var(--padding-xl);
    top: 50%;
    transform: translateY(-50%);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    font-size: var(--font-size--sm);
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
  }

  /* Float up when input has a value or is focused — works because placeholder=" " (a single space) */
  .customer-password-field__input:not(:placeholder-shown) ~ .customer-password-field__label,
  .customer-password-field__input:focus ~ .customer-password-field__label {
    top: calc(var(--padding-sm) * 0.35);
    transform: translateY(0);
    font-size: var(--font-size--xs);
  }

  .customer-password-field__required {
    color: var(--color-error);
  }

  .customer-password-field__toggle {
    position: absolute;
    inset-inline-end: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-md, 2rem);
    height: var(--icon-size-md, 2rem);
    background: none;
    border: none;
    cursor: pointer;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    padding: 0;
    border-radius: var(--style-border-radius-inputs);
  }

  .customer-password-field__toggle:hover {
    color: var(--color-foreground);
  }

  .customer-password-field__toggle:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .customer-password-field__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm, 1.5rem);
    height: var(--icon-size-sm, 1.5rem);
    font-size: 40px;
    line-height: 1;
  }

  .icon--eye-open::before,
  .icon--eye-closed::before {
    font-family: "Icons";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none;
  }

  .icon--eye-open::before {
    content: "\e012";
  }

  .icon--eye-closed::before {
    content: "\e011";
  }

  /* Prevent display:flex from overriding the [hidden] attribute on the inactive icon */
  .customer-password-field__icon[hidden] {
    display: none;
  }

  .customer-password-field__error {
    margin: var(--gap-xs) 0 0;
    color: #d91222;
    font-size: 15px;
    line-height: 1.35;
  }
/* END_SNIPPET:customer-password-field */

/* START_SNIPPET:customer-password-rules (INDEX:236) */
customer-password-rules {
    display: block;
  }

  /* Font matches production's .password-minimum, which inherits the body:
     13px -> 15px, line-height 1.3, solid #3f3f3f. */
  .customer-password__rules-message {
    font-size: 13px;
    line-height: 1.3;
    color: #3f3f3f;
    margin: 0 0 var(--gap-2xs);
  }

  .customer-password__rules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xs, 0.25rem);
  }

  .customer-password__rule {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    font-size: 13px;
    line-height: 1.3;
    color: #3f3f3f;
    padding-inline-start: 1.5em;
    position: relative;
  }

  @media (min-width: 750px) {
    .customer-password__rules-message,
    .customer-password__rule {
      font-size: 15px;
    }
  }

  /* Default: cross/circle indicator */
  .customer-password__rule::before {
    content: '○';
    position: absolute;
    inset-inline-start: 0;
    font-size: 0.8em;
    line-height: 1.5;
  }

  /* Valid state: checkmark */
  .customer-password__rule.is-valid {
    color: var(--color-foreground);
  }

  .customer-password__rule.is-valid::before {
    content: '✓';
    color: var(--color-success, #2d7a2d);
  }
/* END_SNIPPET:customer-password-rules */

/* START_SNIPPET:customer-privacy-notice (INDEX:237) */
customer-privacy-toggle {
    display: block;
    padding-block-start: var(--gap-md);
    border-block-start: var(--style-border-width-inputs) solid var(--color-border);
    /* Font matches production .customer-account__privacy-notice: 12px,
       weight 400, line-height 14.5px, #727272. Children inherit and only
       override weight, mirroring production's cascade. */
    color: #727272;
    font-size: 12px;
    font-weight: 400;
    line-height: 14.5px;
  }

  /* Label: production .customer-account__privacy-notice-label — 12px, weight 700. */
  .customer-privacy-notice__title {
    margin: 0 0 8px;
    color: #727272;
    font-size: 12px;
    font-weight: 700;
  }

  .customer-privacy-notice__text,
  .customer-privacy-notice__more-text {
    font-size: 12px;
    line-height: 14.5px;
    color: #727272;
  }

  .customer-privacy-notice__text p,
  .customer-privacy-notice__more-text p {
    margin-block-end: 8px;
  }

  .customer-privacy-notice__more-text[hidden] {
    display: none;
  }

  /* Toggle: production .customer-account__privacy-notice-toggler — 12px,
     weight 600, sits 16px below the notice body. Overrides the 14px
     .customer-account__text-link default. */
  .customer-privacy-notice .customer-privacy-notice__toggle {
    /* Block-level flex (not inline-flex) so the 12px/14.5px line-height doesn't
       add half-leading below the button — that leading was showing up as extra
       space between "Read more" and the Create account button. fit-content keeps
       it hugging its label + chevron. */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: var(--gap-2xs);
    margin-block-start: 16px;
    color: #727272;
    font-size: 12px;
    font-weight: 600;
  }

  /* Production underlines only the label text, not the chevron
     (.customer-account__privacy-notice-toggler .toggler-label). */
  .customer-privacy-notice .customer-privacy-notice__toggle:hover {
    color: #727272;
  }

  .customer-privacy-notice__toggle-label {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .customer-privacy-notice__toggle-icon {
    display: inline-flex;
    width: var(--icon-size-xs, 1rem);
    height: var(--icon-size-xs, 1rem);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .customer-privacy-notice__toggle-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .customer-privacy-notice__toggle[aria-expanded="true"] .customer-privacy-notice__toggle-icon {
    transform: rotate(180deg);
  }
/* END_SNIPPET:customer-privacy-notice */

/* START_SNIPPET:customer-select-field (INDEX:238) */
/*
   * Select-specific additions to the customer-text-field design token layer.
   * The base .customer-text-field__input rules live in customer-text-field.liquid;
   * these rules only handle select-exclusive behaviour (chevron, padding adjustment,
   * and the always-floated label when an option is selected).
   */

  /* Chevron + right-padding so text doesn't slide under the icon */
  .customer-text-field__input--select {
    padding-inline-end: calc(var(--padding-xl) + 1.5rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--padding-xl) center;
    cursor: pointer;
  }

  /*
   * Floating label for select — rises when the select has a non-empty value.
   * We use :has(option:checked:not([value=""])) to detect a real selection;
   * this is broadly supported (Chrome 105+, Safari 15.4+, Firefox 121+).
   * When JS populates options and sets .value, the :checked pseudo updates.
   */
  .customer-text-field__input--select:has(option:checked:not([value=""])) ~ .customer-text-field__label,
  .customer-text-field__input--select:focus ~ .customer-text-field__label {
    top: calc(var(--padding-sm) * 0.35);
    transform: translateY(0);
    font-size: var(--font-size--xs);
  }
/* END_SNIPPET:customer-select-field */

/* START_SNIPPET:customer-text-field (INDEX:239) */
.customer-text-field {
    display: block;
  }

  .customer-text-field__wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .customer-text-field__input {
    width: 100%;
    padding: var(--padding-sm) var(--padding-xl);
    padding-block-start: calc(var(--padding-sm) + 0.55em);
    padding-block-end: calc(var(--padding-sm) - 0.3em);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    font-size: inherit;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    transition: border-color 0.2s ease;
    appearance: none;
  }

  .customer-text-field__input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
    border-color: var(--color-input-border);
  }

  .customer-text-field__input--invalid {
    border-color: #d91222;
    border-width: 2px;
  }

  /* Floating label — rises when input is focused or has content */
  .customer-text-field__label {
    position: absolute;
    inset-inline-start: var(--padding-xl);
    top: 50%;
    transform: translateY(-50%);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    font-size: var(--font-size--sm);
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
  }

  /* Float up when input has a value or is focused — works because placeholder=" " (a single space) */
  .customer-text-field__input:not(:placeholder-shown) ~ .customer-text-field__label,
  .customer-text-field__input:focus ~ .customer-text-field__label {
    top: calc(var(--padding-sm) * 0.35);
    transform: translateY(0);
    font-size: var(--font-size--xs);
  }

  .customer-text-field__required {
    color: var(--color-error);
  }

  .customer-text-field__hint {
    margin: var(--gap-xs) 0 0;
    font-size: var(--font-size--xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }
/* END_SNIPPET:customer-text-field */

/* START_SNIPPET:customer-translated-errors (INDEX:240) */
/* The container is a bare wrapper — production puts the box on each message,
     so these resets keep it from drawing a second frame around the list. */
  .customer-account__errors {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #d91222;
    font-size: 15px;
    line-height: 1.3;
  }

  .customer-account__errors[hidden] {
    display: none;
  }

  /* This container is a tabindex="-1" scroll/announce target — Tab cannot reach
     it, but it does take focus programmatically: the load-time path at the foot
     of customer-account.js for server-rendered errors, and #showFormError in the
     same file for client-side ones. That still matches base.css's
     `*:focus-visible { outline: ... solid currentcolor }`, which paints a square
     red frame outside the rounded message box — reading as a second container.
     Suppressing it costs nothing here because the announcement comes from focus
     and the title prefix, not from the ring, and Tab can never land here.
     If summary items are ever turned into links to their fields, those links do
     need a visible ring — style them, don't relax this rule. */
  .customer-account__errors:focus,
  .customer-account__errors:focus-visible {
    outline: none;
  }

  .customer-account__errors-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    /* Production separates stacked messages with `margin: 10px 0` on each li,
       which collapses to 10px between them. A flex gap reproduces that spacing
       without leaking outer margins into the layout gaps around the container. */
    gap: 10px;
  }

  /* Each message is its own tinted, rounded box — matches production
     `.customer-account__register .errors li` (ocs.ca css_theme.css). Every
     property is pinned rather than inherited: production's border is
     `1px solid` picking up currentcolor (#d91222), and its font-size /
     line-height come from the body, which differs from Horizon's defaults. */
  .customer-account__errors-list li {
    margin: 0;
    padding: 10px;
    border: 1px solid #d91222;
    border-radius: 5px;
    background-color: #fff6f6;
    color: #d91222;
    font-size: 15px;
    line-height: 1.3;
    text-align: start;
  }

  /* Defect 178: the message that sits directly above its own field is plain red
     text, not a boxed notice. The box is kept for the summary above the page
     title, which is a standalone notice with nothing to attach itself to.
     Only the box is dropped — colour, size, and leading stay, so the two read as
     the same kind of message. (0,2,1) clears the (0,1,1) rule above. */
  .customer-account__errors--inline .customer-account__errors-list li {
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  /* Inline links (e.g. sign-in / reset-password in existing_email_html) inherit
     the error's red so the whole message is one colour, and stay underlined. */
  .customer-account__errors a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .customer-account__errors a:hover {
    opacity: 0.85;
  }
/* END_SNIPPET:customer-translated-errors */

/* START_SNIPPET:divider (INDEX:241) */
.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:editor-placeholder (INDEX:242) */
.editor-placeholder {
    box-sizing: border-box;
    width: 100%;
    padding: 40px 20px;
    color: var(--color-foreground, #3f3f3f);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    background: rgb(var(--color-foreground-rgb, 26 26 26) / 0.03);
    border: 1px dashed rgb(var(--color-foreground-rgb, 26 26 26) / 0.3);
    border-radius: 8px;
  }
  .editor-placeholder__text { margin: 0; }
/* END_SNIPPET:editor-placeholder */

/* START_SNIPPET:editorial-blog-grid (INDEX:243) */
.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 (max-width: 768px) {
    .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:244) */
.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 (max-width: 768px) {
    .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:245) */
.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 (max-width: 768px) {
    .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:facets-actions (INDEX:246) */
/* Facets - Actions */
  .facets__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
    );

    order: 1;
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    background-image: var(--to-top-gradient-background);
    z-index: var(--facets-sticky-z-index);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
  }

  .facets:not(.facets--drawer) .facets__actions {
    @media screen and (min-width: 750px) {
      position: static;
    }
  }

  .facets--vertical .facets__actions {
    padding-inline: 0;
    justify-content: center;
  }

  .facets--horizontal .facets__actions {
    @media screen and (min-width: 750px) {
      order: 0;
      bottom: auto;
      position: static;
      padding: 0;
      z-index: var(--layer-flat);
      flex-shrink: 0;
      align-items: center;
      margin-top: initial;
      background-image: none;
    }
  }

  .facets--horizontal .facets__actions--active::before {
    @media screen and (min-width: 750px) {
      content: '';
      border-inline-start: var(--style-border-width) solid var(--color-border);
      height: var(--font-paragraph--size);
      position: absolute;
    }
  }

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

  .clear-filter:hover {
    text-decoration: underline;
    background-color: transparent;
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    transition: transform var(--animation-values), opacity var(--animation-values);
    opacity: 0;
    transform: translateY(100%);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__clear-all {
    box-shadow: none;
  }

  .facets--horizontal .facets__clear-all {
    @media screen and (min-width: 750px) {
      --facets-clear-all-min-width: var(--minimum-touch-target);
      text-decoration: underline transparent 0.075em;
      text-underline-offset: 0.125em;
      width: auto;
      transform: none;
      opacity: 1;
      height: var(--minimum-touch-target);
      align-items: center;
      flex-grow: 0;
      transition: text-decoration-color var(--animation-speed) var(--animation-easing);
    }
  }

  .facets--horizontal .facets__clear-all:hover {
    @media screen and (min-width: 750px) {
      --button-color: var(--color-primary-hover);
    }
  }

  @starting-style {
    .facets__clear-all {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .facets__clear-all.active {
    transform: translateY(0);
    opacity: 1;
    display: grid;
  }

  .facets--horizontal .facets__clear-all.active {
    @media screen and (min-width: 750px) {
      padding-block: 0;
      padding-inline: var(--facets-form-horizontal-gap);
      position: static;
      transform: none;
    }
  }

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

    .facets--horizontal .facets__clear-all.active {
      @media screen and (min-width: 750px) {
        opacity: 1;
        transform: none;
      }
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__see-results {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:facets-actions */

/* START_SNIPPET:filter-remove-buttons (INDEX:249) */
/* 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__clear-all-link {
    --button-color: var(--color-primary);

    border: none;
    background-color: transparent;
    padding: var(--padding-xs);
    min-width: fit-content;
    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);

    color: var(--button-color);
    text-decoration-color: var(--button-color);
  }

  .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:254) */
.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;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form */

/* START_SNIPPET:grid-density-controls (INDEX:256) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

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

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .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;
    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:257) */
.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:258) */
.account-popover {
    --account-popover-min-width: 22rem;
    --account-actions-max-width: 22rem;

    flex: 0 0 auto;
  }

  .account-popover__summary {
    padding: 0;

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

  .account-popover__panel {
    --account-popover-opacity: 0;
    --account-popover-y: 20px;

    position-anchor: --account-button-trigger;
    border-radius: var(--style-border-radius-popover);
    margin: 0;
    left: unset;
    width: max-content;
    min-width: var(--account-popover-min-width);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    overflow-y: hidden;
    opacity: var(--account-popover-opacity);
    translate: 0 var(--account-popover-y);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    top: calc(anchor(bottom) + var(--header-padding));
    right: anchor(right);

    &:popover-open {
      --account-popover-opacity: 1;
      --account-popover-y: 0px;
    }

    @supports not (position-anchor: --account-button-trigger) {
      top: calc(var(--anchor-top) * 1px + var(--minimum-touch-target) + var(--header-padding));
      right: calc(var(--anchor-right) * 1px);
    }

    @supports not selector(:popover-open) {
      &.\:popover-open {
        --account-popover-opacity: 1;
        --account-popover-y: 0px;
      }
    }
  }

  @starting-style {
    .account-popover__panel {
      --account-popover-opacity: 0.7;
      --account-popover-y: 20px;
    }

    .account-popover__panel:popover-open {
      --account-popover-opacity: 0.7;
      --account-popover-y: 20px;
    }
  }

  .account-drawer {
    /* The header's own breakpoint, not the theme's: this drawer is what the
       account chip becomes once the header condenses, so it has to survive as
       long as the condensed header does. The cart-drawer rules further down
       stay at 750 - those are the drawer's internals, not the header's mode. */
    @media screen and (min-width: 1024px) {
      display: none;
    }
  }

  .account-drawer__dialog {
    --animation-speed: 0.24s;
    --dialog-drawer-opening-animation: move-and-fade;
    --dialog-drawer-closing-animation: move-and-fade;

    height: fit-content;
    margin: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    border-radius: 0;
    padding: 0;
  }

  .dialog-drawer.account-drawer__dialog[open] {
    --start-x: 0px;
    --end-x: 0px;
    --start-y: 100%;
    --start-opacity: 1;
  }

  .dialog-drawer.account-drawer__dialog.dialog-closing {
    --start-x: 0px;
    --end-x: 0px;
    --end-y: 100%;
    --start-opacity: 1;
  }

  .account-drawer__close-button {
    z-index: 1;
    inset-block-start: var(--padding-xs);
    inset-inline-end: var(--padding-xs);
    color: var(--color-foreground);
    background-color: transparent;
  }

  .account-drawer__close-button .svg-wrapper {
    display: flex;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
  }

  @keyframes account-drawer-slide-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @keyframes account-drawer-slide-out {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(100%);
    }
  }

  /* ── Account chip CSS kept here so the accounts-disabled <a> fallback
     renders correctly even when account-button.liquid is not rendered ─── */
  .account-button--chip {
    --account-chip-border-color: #d8d8d8;
    --account-chip-icon-size: 18px;

    display: flex;
    width: auto;
    min-width: 190px;
    max-width: 207px;
    height: 46px;
    padding: 10px 15px;
    gap: 10px;
    overflow: hidden;
    border: 1px solid var(--account-chip-border-color);
    border-radius: 25px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .account-button--chip .icon--account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--account-chip-icon-size);
    height: var(--account-chip-icon-size);
    flex: 0 0 var(--account-chip-icon-size);
    font-size: var(--account-chip-icon-size);
    line-height: 1;
  }

  .account-button--chip .icon--account::before {
    content: "\e002";
    font-family: "Icons";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
  }

  .account-button__chip-label {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    line-height: normal;
    text-transform: uppercase;
  }

  .cart-drawer {
    --cart-font-size--2xs: var(--font-size--2xs);
    --cart-font-size--xs: var(--font-size--xs);
    --cart-font-size--sm: var(--font-size--sm);
    --cart-font-size--md: var(--font-size--md);
    --cart-font-size--lg: var(--font-size--lg);
    --cart-font-size--xl: var(--font-size--xl);
    --cart-font-size--2xl: var(--font-size--2xl);
  }

  .cart-drawer__dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    inset-block: 0;
    inset-inline-start: auto;
    inset-inline-end: 0;
    overflow: hidden;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: none;
    background-color: var(--color-background);
    transform: translate3d(100%, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    transition: width 0.25s ease;

    &[data-ocs-opening] {
      transition: none;
    }

    &[data-ocs-upsell-state='collapsed'] {
      width: calc(var(--sidebar-width) + 32px);
    }

    &[data-ocs-upsell-state='expanded'],
    &[data-ocs-upsell-loading] {
      width: calc(var(--sidebar-width) + 220px);
    }
  }

  .cart-drawer__dialog:focus,
  .cart-drawer__dialog:focus-visible {
    outline: none;
  }

  .cart-drawer__dialog[data-ocs-opening] .cart-drawer__close-button:focus,
  .cart-drawer__dialog[data-ocs-opening] .cart-drawer__close-button:focus-visible,
  .cart-drawer__dialog[data-ocs-opening] .ocs-upsell-panel__toggle:focus,
  .cart-drawer__dialog[data-ocs-opening] .ocs-upsell-panel__toggle:focus-visible,
  .cart-drawer__dialog[data-ocs-opening] .ocs-upsell-mobile__toggle:focus,
  .cart-drawer__dialog[data-ocs-opening] .ocs-upsell-mobile__toggle:focus-visible,
  .cart-drawer__dialog[data-ocs-opening] .ocs-upsell-reopen-btn:focus,
  .cart-drawer__dialog[data-ocs-opening] .ocs-upsell-reopen-btn:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .cart-drawer__dialog[data-ocs-opening] .cart-drawer__close-button:focus-visible::after {
    content: none;
    display: none;
  }

  .cart-drawer__dialog::backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgb(var(--backdrop-color-rgb) / 0.32);
    opacity: 0;
    transition: none;
  }

  .cart-drawer__dialog[open] {
    animation: ocs-cart-drawer-slide-in 0.24s var(--ease-out-cubic) forwards;
  }

  .cart-drawer__dialog[open]::backdrop {
    animation: ocs-cart-drawer-backdrop-in 0.18s ease-out forwards;
  }

  .cart-drawer__dialog[open].dialog-closing {
    animation: ocs-cart-drawer-slide-out 0.2s var(--animation-easing) forwards;
  }

  .cart-drawer__dialog[open].dialog-closing::backdrop {
    animation: ocs-cart-drawer-backdrop-out 0.16s ease-out forwards;
  }

  @keyframes ocs-cart-drawer-slide-in {
    from {
      transform: translate3d(100%, 0, 0);
    }

    to {
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes ocs-cart-drawer-slide-out {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(100%, 0, 0);
    }
  }

  @keyframes ocs-cart-drawer-backdrop-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes ocs-cart-drawer-backdrop-out {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  #ocs-upsell-tgt-desktop {
    flex-shrink: 0;
    display: flex;
  }

  .ocs-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgb(var(--color-foreground-rgb) / 0.16);
    border-top-color: var(--color-foreground);
    border-radius: 50%;
    animation: ocs-cart-drawer-spin 0.7s linear infinite;
  }

  .cart-drawer__loading-state,
  .ocs-upsell-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    color: rgb(var(--color-foreground-rgb) / 0.72);
    font-size: var(--font-size--sm);
    font-weight: 500;
  }

  .cart-drawer__dialog[data-ocs-cart-loading] .cart-drawer__heading--empty {
    display: none;
  }

  .cart-drawer__dialog[data-ocs-cart-loading] .cart-drawer__loading-state {
    display: flex;
  }

  .cart-drawer__dialog[data-ocs-upsell-loading] .ocs-upsell-loading {
    display: flex;
  }

  .cart-drawer__dialog[data-ocs-upsell-loading] #ocs-upsell-tgt-desktop .ocs-upsell-loading {
    width: 220px;
    min-width: 220px;
    min-height: 100dvh;
    padding: var(--padding-lg);
    border-right: var(--style-border-width) solid var(--color-border);
    background: var(--color-background);
    text-align: center;
  }

  .cart-drawer__dialog[data-ocs-upsell-loading] #ocs-upsell-tgt-mobile .ocs-upsell-loading {
    min-height: 64px;
    margin-inline: 16px;
    border-top: var(--style-border-width) solid var(--color-border);
    border-bottom: var(--style-border-width) solid var(--color-border);
  }

  @media screen and (max-width: 749px) {
    .cart-drawer__dialog[data-ocs-upsell-loading] #ocs-upsell-tgt-desktop .ocs-upsell-loading {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .cart-drawer__dialog[data-ocs-upsell-loading] #ocs-upsell-tgt-mobile .ocs-upsell-loading {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ocs-loading-spinner {
      animation-duration: 1.4s;
    }
  }

  @keyframes ocs-cart-drawer-spin {
    to { rotate: 360deg; }
  }

  .cart-items-component {
    width: var(--sidebar-width);
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-background);

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

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  @media screen and (max-width: 749px) {
    .cart-drawer__dialog:modal {
      width: 100dvw;
      max-width: 100%;
    }

    /* Keep a downward drag at the top of the open cart inside the drawer.
       `none` on the root disables Chrome's pull-to-refresh gesture, while
       `contain` prevents the drawer's own scroll areas from chaining to the
       page without blocking normal cart scrolling. */
    html:has(.cart-drawer__dialog[open]),
    html:has(.cart-drawer__dialog[open]) body {
      overscroll-behavior-y: none;
    }

    .cart-drawer__dialog[open] .cart-drawer__content,
    .cart-drawer__dialog[open] .cart-drawer__items {
      overscroll-behavior-y: contain;
    }
  }

  .cart-drawer__inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-self: end;
    background-color: var(--color-background);

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

  .cart-drawer__content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    overflow-y: auto;
  }

  /* Both cart-drawer headings are spans rather than h2/h3 — they label the drawer
     rather than sectioning the page. `overflow-wrap` is the one declaration they
     used to get from a bare tag selector (`p, h1, …, h6` at base.css:256), so it
     is restated here; everything else they render with is already class-based and
     survived the tag change untouched. The bag title also sets white-space:
     nowrap, which makes this inert for that one — it matters for the empty-state
     message, which can wrap. */
  .cart-drawer__heading,
  .cart-drawer__heading.h4 {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: var(--margin-lg);
    overflow-wrap: break-word;
    font-size: 21px;
    font-weight: 700;

    @media screen and (max-width: 749px) {
      margin-bottom: 0;
      font-size: 18px;
    }
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

    @media screen and (max-width: 749px) {
      top: var(--margin-2xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__summary {
    position: sticky;
    bottom: 0;
    z-index: 10;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: 16px;
    margin-top: auto;
    background-color: var(--color-background);
    box-shadow: 0 4px 12px #0000001f;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary,
  .cart-actions .disclosure-trigger {
    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__original-total-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__empty-cta {
    margin-block-start: var(--margin-lg);
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: 16px;
    padding-bottom: 16px;
    overflow-y: auto;
  }

  .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: 16px;
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    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;
  }

  header-actions {
    display: flex;
    align-items: center;

    /* 20px between My Account and the cart pill, per the design system. The
     * mobile override below keeps its own 0 — the mobile actions are icons,
     * not pills, and they carry their own spacing.
     */
    gap: 20px;

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

  .header-actions__store-locator,
  .header-actions__mobile-account {
    align-items: center;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .header-actions__store-locator .icon--location::before,
  .header-actions__mobile-account .icon--account::before {
    font-family: "Icons";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none;
  }

  .header-actions__store-locator .icon--location::before {
    content: "\e018";
  }

  .header-actions__mobile-account .icon--account::before {
    content: "\e002";
  }

  @media screen and (max-width: 1023px) {
    .header-actions__store-locator,
    .header-actions__mobile-account {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
    }

    .header-actions__store-locator .icon,
    .header-actions__mobile-account .icon {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 10px;
      color: #000;
      font-size: 24px;
      line-height: 24px;
    }
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

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

    cursor: pointer;
    display: flex;
    justify-content: center;
  }

  .header-actions__action:focus-visible {
    outline: var(--focus-outline-width) solid currentColor;
    outline-offset: var(--focus-outline-offset);
    border-radius: 0;
  }

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

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

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

  .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] {
    aspect-ratio: 1;
    min-width: 26px;
  }

  .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: 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;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:259) */
.header__icon--menu {
    position: initial;
  }

  @media screen and (min-width: 1024px) {
    .header--desktop header-menu + .header__drawer header-drawer {
      display: none;
    }
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .header__icon--summary .header-drawer-icon--hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #000;
    font-size: 24px;
    line-height: 24px;
  }

  .header-drawer-icon--hamburger::before {
    content: "\e01a";
    font-family: "Icons";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none;
  }

  .header__drawer {
    display: flex;
    min-height: 60px;
    align-items: center;

    @media screen and (min-width: 1024px) {
      min-height: 0;
    }
  }

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

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 1024px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 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: translateX(100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    z-index: var(--layer-menu-drawer);
    right: 0;
    left: auto;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 1024px) {
      width: 25rem;
      max-width: var(--drawer-max-width);
    }

    .header__drawer--desktop & {
      height: 100vh;
    }
  }

  {%- comment -%}
    No box at all by default, so the >=1024px drawer lays out exactly as it did
    before this wrapper existed: the close button, nav, featured card and
    utility links stay direct flex items of .menu-drawer. The mobile block
    below gives it a real box and the carousel translate.
  {%- endcomment -%}
  .menu-drawer__track {
    display: contents;
  }

  .menu-drawer:has(details[open]) {
    overflow: initial;
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 1024px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 1024px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__mobile-featured-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    max-width: 270px;
    margin-block-start: var(--padding-xl);
    margin-block-end: var(--padding-lg);
    margin-inline: auto;
    padding: 0;
    color: var(--color-foreground);
    text-align: center;
    text-decoration: none;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  a.menu-drawer__mobile-featured-card:hover {
    color: var(--color-foreground);
    opacity: 0.85;
  }

  .menu-drawer__mobile-featured-card:focus-visible {
    color: var(--color-foreground);
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .menu-drawer__mobile-featured-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--menu-image-border-radius);
    background-color: var(--color-foreground-muted);
  }

  .menu-drawer__mobile-featured-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .menu-drawer__mobile-featured-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding-block: 0;
    padding-inline: 0;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .menu-drawer__mobile-featured-card-title {
    width: 100%;
    margin: 0 0 var(--padding-3xs);
    color: var(--menu-child-font-color, currentColor);
    font-family: var(--menu-child-font-family, var(--font-heading--family));
    font-size: 18px;
    font-style: var(--menu-child-font-style, normal);
    font-weight: 600;
    line-height: var(--menu-child-font-line-height, 1.25);
    text-align: center;
    text-transform: var(--menu-child-font-case, none);
  }

  .menu-drawer__mobile-featured-card-text {
    width: 100%;
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
  }

  .menu-drawer__mobile-featured-card-button-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  .menu-drawer__mobile-featured-card-button,
  .menu-drawer__mobile-featured-card-button-wrap .ocs-button {
    align-self: center;
    justify-content: center;
    margin-inline: auto;
    text-align: center;
  }

  @media screen and (min-width: 1024px) {
    .menu-drawer__mobile-featured-card {
      display: none;
    }
  }

  .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__submenu-title {
    display: none;
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 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-start: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  {%- comment -%}
    Category open/close timing, matched to production.

    ocs.ca animates its mobile nav accordion with
    `.accordionize__content--mega-menu { transition: all .3s linear }` and runs
    it in both directions every time. Horizon differs twice, and both show as a
    jerk rather than as a wrong duration:

      the gate      base.css:4198 sets `transition: none` unless the <details>
                    is :focus-within, on the reasoning that a toggle without
                    focus was not a direct user action. For this drawer that is
                    backwards — the sibling we close programmatically is never
                    focused, so it collapsed in a single frame and yanked the
                    list while the tapped row was still expanding. Tapping a
                    <summary> also does not reliably move focus on iOS, which
                    leaves the row being opened unanimated too.

      the duration  --animation-speed-slow is 0.2s with an eased curve;
                    production is 0.3s linear.

    Pinned here rather than in base.css so the other fifteen accordion-custom
    call sites keep Horizon's timing. `content-visibility … allow-discrete` is
    what defers the hide until the collapse has finished — production does the
    same thing with a 350ms `is-hidden` timeout. The
    `.details-content--no-animation` exclusion keeps the drawer's own
    open-without-animation window above working.

    Neither `padding-block` nor `opacity` is in this list, where base.css had
    both. Production animates one property — its `transition: all .3s linear`
    covers a `max-height` and nothing else changes — so a fade layered over the
    unroll is ours, not a match. Worse, the two disagree about what is happening
    on the way down: the clamp shrinks the box for 0.3s while base.css's
    `opacity: 0` empties it, so a closing category is a blank box collapsing
    rather than production's rows being clipped away as the box passes over
    them. `opacity` is pinned to 1 in both directions below instead of being
    left to transition; a closed row is clamped to nothing and clipped, so it is
    invisible either way.

    `padding-block` is out for a different reason: it has to be settled before
    the measuring below can read a stable height. An animating padding is near
    zero at the moment the row is tapped, so the pixel value written would fall
    short of the list's own padding and the rows would stop a few pixels above
    the bottom of the box. Production's `.accordionize__content` has no padding
    to animate at all, which is why its `transition: all` covers only a height.

    Taking it out of the list is not enough on its own, though — base.css's
    `:not([open]) { padding-block: 0 }` then applies at once, and that is what
    the pinned zero further down deals with. See the comment there.
  {%- endcomment -%}
  .header-drawer .menu-drawer__submenu accordion-custom details::details-content,
  .header-drawer
    .menu-drawer__submenu
    accordion-custom
    details
    .details-content:not(.details-content--no-animation) {
    transition: content-visibility 0.3s allow-discrete, max-block-size 0.3s linear;
  }

  {%- comment -%}
    …and the property being animated, which is the other half of the match.

    The duration and curve above were already production's. The engine was not.
    base.css animates `block-size: 0 -> auto` under
    `interpolate-size: allow-keywords`, which re-resolves the row's layout on
    every frame of the 0.3s. Production measures the content once when the row
    is tapped and animates to a fixed pixel `max-height`:

      .accordionize__content            { overflow: hidden }
      .accordionize__content--mega-menu { max-height: 0; transition: all .3s linear }

      var contentHeight = $(this).find('.accordionize__content > *').outerHeight(true);
      $(this).find('.accordionize__content').addClass('accordion--show').css('max-height', contentHeight);

    The measuring is in assets/header-drawer.js — see expandAccordion there. Two
    elements have to be dealt with because base.css writes the collapse twice,
    to `::details-content` for browsers that have the pseudo and to the explicit
    `.details-content` class for those that do not:

      the pseudo    stops clamping entirely and keeps only its
                    `content-visibility` step, which is what defers the hide
                    until the collapse has finished. Nothing can set an inline
                    style on a pseudo-element, so it cannot be the one that
                    animates.

      the list      does the animating, and is a real element JS can measure and
                    clamp.

    `max-block-size: none` is the fallback of the open state's `var()` below, so
    that a drawer whose script has not run still opens the row — unanimated, but
    not stuck shut. The measured pixel value is what actually animates it.
    Production has no such fallback: its CSS gives `max-height: 0` and nothing
    else, so a dead script leaves every row sealed.

    `overflow-y` is pinned past base.css's `&:focus-within { overflow-y:
    visible }`. A clamped box has to clip or the rows spill out of it while it
    grows; production clips unconditionally (`.accordionize__content`). The cost
    is that a focus ring on the last row can be shaved by a pixel or two once
    the clamp settles, which is also true of production.
  {%- endcomment -%}
  .header-drawer .menu-drawer__submenu accordion-custom details::details-content {
    block-size: auto;
    max-block-size: none;
    opacity: 1;
  }

  {%- comment -%}
    `>` rather than a descendant match: the list is the details' own content, and
    expandAccordion in assets/header-drawer.js clamps the same element through
    `:scope > .details-content`. Keep the two in step.

    `box-sizing` is pinned so that the pixel value JS writes and the box the
    clamp applies to are the same box. Measuring a border box and clamping a
    content box would cut the list's own padding off the bottom.

    `padding-block: 0` is what makes the collapse smooth, and it is worth
    knowing why, because it looks like unrelated tidying.

    The rendered height of a clamped box is min(content height, clamp), and only
    the clamp is animating. base.css gives the closed row `padding-block: 0`
    (:4321), so the instant `[open]` comes off, the list's content height drops
    by its own bottom padding — 0.3rem or 0.5rem here, from the
    `.menu-drawer__list-item--deep .menu-drawer__menu` rules below. The box
    therefore jumps that far in one frame, and then holds still for the first
    0.3rem-worth of the transition while the clamp travels back down to meet the
    content it is no longer clamping. A jump, a stall, and only then the linear
    collapse. Production has no padding on the box it clamps, so it has neither.

    Pinning the padding to zero in both states — rather than pinning it to the
    open value — is the direction that matches production: its clamped
    `.accordionize__content` has no padding, and its rows carry their own
    (`li.menu__tier-four { padding: 10px 2px }`, matched at :2253). The visible
    cost is 5-8px of space between the last third-level row and whatever
    follows it, which production does not have either.
  {%- endcomment -%}
  .header-drawer .menu-drawer__submenu accordion-custom details > .details-content {
    box-sizing: border-box;
    block-size: auto;
    padding-block: 0;
    overflow-y: clip;
    opacity: 1;
  }

  {%- comment -%}
    The one padding worth keeping, given back at a specificity that holds in
    both states.

    A category whose links carry collection images renders its third level as a
    grid (:491), and `.menu-drawer__menu--grid` gives it a top padding so the
    first row of tiles is not flush against the category it opened from. Unlike
    the bottom padding above, that gap is not something production does without.

    It has to be constant for the same reason the rest was zeroed: a top padding
    that vanishes when `[open]` comes off pulls every tile up by that much in
    one frame, which is a worse tell than the stall it causes afterwards.
  {%- endcomment -%}
  .header-drawer
    .menu-drawer__submenu
    accordion-custom
    details
    > .details-content.menu-drawer__menu--grid {
    padding-block-start: var(--padding-xs);
  }

  {%- comment -%}
    The clamp skips the no-animation window above for the same reason the
    transition does: a row that is open on arrival has nothing to grow from, and
    clamping it at 0 for those 100ms would hide it outright.
  {%- endcomment -%}
  .header-drawer
    .menu-drawer__submenu
    accordion-custom
    details
    > .details-content:not(.details-content--no-animation) {
    max-block-size: 0;
  }

  {%- comment -%}
    The open height comes through a custom property rather than as an inline
    `max-block-size`, and that indirection is the whole point of it.

    Written inline, the only state a close left behind was `max-block-size: 0px`
    on the element — which meant a first expand and a repeat expand animated
    from different places. `[open]` lands before the script can measure, so for
    that window the value is whatever CSS says: `none` on a first expand, and on
    a repeat the leftover inline zero. `none` does not interpolate to a pixel
    value, so whichever of the two rendered a frame in that window snapped open
    while the other animated.

    A custom property closes the window. A repeat expand already has last
    measurement seeded, so `[open]` resolves straight to a pixel value and the
    transition is running before the script is consulted; the measurement that
    follows in the same task only corrects it, with no frame in between. The
    first expand still falls back to `none` — the same snap risk that was always
    there, and the reason to keep the fallback is unchanged: a drawer whose
    script did not load still opens the row.

    It also takes the close path out of the script entirely. Dropping `[open]`
    is now enough for the closed rule above to apply and animate the row shut,
    which is what lets a collapsing sibling start on the same frame as the row
    that displaced it without being told to.
  {%- endcomment -%}
  .header-drawer .menu-drawer__submenu accordion-custom details[open] > .details-content {
    max-block-size: var(--menu-drawer-l3-height, none);
    overflow-y: clip;
  }

  {%- comment -%}
    The collapse, which happens with the row still open.

    Everything above describes a close as `[open]` coming off and the closed rule
    taking over, and on paper that animates: the clamp goes from its pixel value
    to zero, and the content the UA is hiding underneath it is held on screen for
    the duration by `content-visibility … allow-discrete`. That deferral is the
    one load-bearing piece of our close that production has no counterpart for,
    and it is a mechanism, not a match.

    Production does not defer anything. It takes the close away from the browser
    (`js_theme.js:1060`):

      if ($(this).find('.accordionize__content').hasClass('accordion--show')) {
        e.preventDefault();
        $(this).find('.accordionize__content').removeClass('accordion--show');
        $(this).find('… --mega-menu').css('max-height','0');
        // this timeout should be greater than the CSS transition time which is currently 0.3s
        setTimeout(function(){ … .addClass('is-hidden'); }, 350);
      }

    — the click's default action never runs, the box animates to zero while it is
    still displayed, and `.is-hidden { display: none !important }` lands 350ms
    later, once there is nothing left to see. The animation never depends on the
    browser keeping hidden content painted, because the content is not hidden
    yet.

    This is that, with `[open]` playing the part of `is-hidden`: the script
    intercepts the summary click, marks the row collapsing, and drops `[open]` on
    production's 350ms timer. See `collapseAccordion` in
    assets/header-drawer.js. The handoff at the end is invisible because every
    property the closed state would otherwise change — `padding-block`,
    `opacity`, `block-size` — is already pinned to the same value in both, and
    the clamp is already at zero.
  {%- endcomment -%}
  .header-drawer
    .menu-drawer__submenu
    accordion-custom
    details[open].menu-drawer__accordion--collapsing
    > .details-content {
    max-block-size: 0;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

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

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

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

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

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

  .header-drawer .menu-drawer__menu.menu-drawer__menu--grandchildlist .menu-drawer__menu-item--child {
    font-size: 14px;
    font-weight: 400;
  }

  .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-start: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .header-drawer
    .menu-drawer__submenu
    summary.menu-drawer__menu-item.menu-drawer__menu-item--parent.menu-drawer__menu-item--accordion {
    cursor: pointer;
    list-style: none;
    padding-inline-end: calc(var(--icon-size-xs) + var(--padding-xl));
  }

  .header-drawer
    .menu-drawer__submenu
    summary.menu-drawer__menu-item.menu-drawer__menu-item--parent.menu-drawer__menu-item--accordion::-webkit-details-marker {
    display: none;
  }

  .header-drawer
    .menu-drawer__submenu
    summary.menu-drawer__menu-item.menu-drawer__menu-item--parent.menu-drawer__menu-item--accordion::marker {
    content: '';
  }

  .header-drawer
    .menu-drawer__submenu
    summary.menu-drawer__menu-item.menu-drawer__menu-item--parent.menu-drawer__menu-item--accordion::before,
  .header-drawer
    .menu-drawer__submenu
    summary.menu-drawer__menu-item.menu-drawer__menu-item--parent.menu-drawer__menu-item--accordion::after {
    content: '';
    display: block;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    width: 0.75rem;
    border-block-start: 1.5px solid currentColor;
    transform: translateY(-50%);
    transition: opacity var(--animation-speed-fast, 150ms) ease, transform var(--animation-speed-fast, 150ms) ease;
  }

  .header-drawer
    .menu-drawer__submenu
    summary.menu-drawer__menu-item.menu-drawer__menu-item--parent.menu-drawer__menu-item--accordion::after {
    transform: translateY(-50%) rotate(90deg);
  }

  {%- comment -%}
    The plus loses its upright stroke while the row is open, and gets it back the
    moment the row starts closing rather than when it finishes.

    `:not(…--collapsing)` is what buys the second half. The row keeps `[open]`
    for production's 350ms while it collapses (see the clamp above), so without
    the exclusion the stroke would sit missing through the whole collapse and
    then animate back in against a row that had already gone. Production flips
    its own `accordionize--active` off at once for the same reason.
  {%- endcomment -%}
  .header-drawer
    .menu-drawer__submenu
    details[open]:not(.menu-drawer__accordion--collapsing)
    > summary.menu-drawer__menu-item.menu-drawer__menu-item--parent.menu-drawer__menu-item--accordion::after {
    opacity: 0;
    transform: translateY(-50%) rotate(90deg) scaleX(0);
  }

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

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    right: 0;
    left: auto;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(100%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  /* ── Mobile language selector ─────────────────────────────────────────────
   *
   * Matched to ocs.ca's mobile nav selector, `.mega-menu--language-toggles`,
   * measured by rendering production's own markup under its own css_theme.css.
   *
   * Production's container is `width: 50%` of a `.mega-menu` that is
   * `width: 200%` of the viewport — it is twice the viewport wide because it
   * carries two nav tiers side by side and slides `-50%` to reach the second.
   * 50% of 200% resolves to exactly the viewport width, so the bar is
   * full-bleed. Ours was `width: fit-content` inset by --padding-xl with no
   * background at all, which is what read as misaligned: bare 12px text 20px
   * off the right edge where production has a grey bar spanning the screen.
   *
   * The measured target, at the bottom of the panel (390 and 1440, and either
   * side of production's own 639/640 step):
   *
   *   container   full width, 45px tall below 640 (43px bar, 2px under it)
   *   bar         #f4f4f4, 43px, padding 13px 33px, label right-aligned
   *   label       12px/400, 0.3px letter-spacing, uppercase, #3f3f3f
   *   caret       ~10x6 visible chevron, right edge 12px from the bar's edge
   *   panel       plain white, 80px, right-aligned, flush above the bar
   *   rows        padding 2px 0, panel padding-inline-start 2px, text left
   *   current     #979797 and pointer-events: none — greyed, not bolded
   *
   * Two things here are easy to get backwards. The weight is 400 throughout:
   * no production stylesheet sets font-weight on this widget at all (checked
   * all four it loads), so the current language is distinguished by colour, and
   * ours was bolding it at 500 instead. And the caret points *up* when closed,
   * down when open — the inverse of a normal dropdown, because the panel opens
   * upward, so the arrow shows where the list will appear rather than which way
   * the disclosure turns. Ours had the conventional pair, i.e. backwards.
   */
  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    /* Bottom-anchored and flush. Production's bar has nothing below it — that
       is `justify-content: space-between` on a full-height .mega-menu, which
       .menu-drawer__navigation-container reproduces with its `1fr auto` rows. */
    margin: auto 0 0;
  }

  .menu-drawer__localization--language,
  .menu-drawer__language-details {
    position: relative;
    width: 100%;
  }

  @media screen and (max-width: 639px) {
    /* 45px, not 43: production leaves 2px of panel background under the bar,
       and only below its own 639/640 breakpoint. Above it the container is the
       bar's own height. */
    .menu-drawer__localization--language {
      block-size: 45px;
    }
  }

  .menu-drawer__localization--language .menu-drawer__language-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    inline-size: 100%;
    block-size: 43px;
    padding: 13px 33px;
    background-color: #f4f4f4;
    color: #3f3f3f;
    cursor: pointer;
    font-family: var(--menu-localization-font, var(--font-body--family));
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    list-style: none;
  }

  .menu-drawer__localization--language .menu-drawer__language-toggle::-webkit-details-marker {
    display: none;
  }

  /* Absolute, as production's is: its caret is an icon-font ::after taken out
     of flow, so the label's right edge lands on the 33px padding exactly rather
     than being pushed left by the arrow. Sized 6x10 and rotated a quarter turn,
     which renders 10 wide by 6 tall — the ratio of icon-caret.svg's own 19x32
     viewBox, so the chevron is not squashed. `inset-inline-end` is 14px rather
     than 12: rotation pivots about the centre without changing the layout box,
     so a 6px-wide box centred 17px in shows a 10px-wide chevron ending 12px in.

     `border: 0` because the toolbar's copy of this widget draws its caret with
     borders on this same span (.header-toolbar__lang-caret, which is also in
     the class list) — without this the SVG and a border chevron both paint. */
  .menu-drawer__localization--language .menu-drawer__language-caret {
    position: absolute;
    inset-inline-end: 14px;
    inset-block-start: 50%;
    inline-size: 6px;
    block-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    transition: transform 0.2s ease;
    transform: translateY(-50%) rotate(90deg);
  }

  .menu-drawer__localization--language .menu-drawer__language-caret svg {
    width: 100%;
    height: 100%;
  }

  .menu-drawer__language-details[open] .menu-drawer__language-caret {
    transform: translateY(-50%) rotate(-90deg);
  }

  .menu-drawer__localization--language .menu-drawer__language-panel {
    position: absolute;
    inset-inline-start: auto;
    inset-inline-end: 0;
    inset-block-start: auto;
    /* Flush against the top of the bar — production translates the list up by
       its own height from `top: 0`, leaving no gap. */
    inset-block-end: 100%;
    z-index: var(--layer-menu-drawer);
    box-sizing: border-box;
    inline-size: 80px;
    min-inline-size: 0;
    padding: 0 0 0 2px;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .menu-drawer__localization--language .menu-drawer__language-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .menu-drawer__localization--language .menu-drawer__language-list > li {
    padding: 2px 0;
  }

  /* font-family said out loud for the same reason as the toolbar's copy: a
   * <button> does not inherit the page font the way the <summary> above does,
   * so without this the options fall back to the browser default while the
   * label beside them renders in Calibre.
   */
  .menu-drawer__localization--language .menu-drawer__language-option {
    display: block;
    inline-size: 100%;
    padding: 0;
    font-family: var(--menu-localization-font, var(--font-body--family));
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3px;
    text-align: start;
    text-transform: uppercase;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #3f3f3f;
    white-space: nowrap;
  }

  /* Underline on hover, and no background plate — production's only hover
     treatment, and it excludes the current language, which cannot be hovered
     anyway because it is inert. */
  .menu-drawer__localization--language .menu-drawer__language-option:hover,
  .menu-drawer__localization--language .menu-drawer__language-option:focus-visible {
    background-color: transparent;
    text-decoration: underline;
    outline: none;
  }

  .menu-drawer__localization--language .menu-drawer__language-option--current {
    color: #979797;
    font-weight: 400;
    pointer-events: none;
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  {%- comment -%}
    ocs.ca's `anim__fade-in-up`, copied value for value:

      @keyframes anim__fade-in-up {
        0%   { opacity: 0; transform: translate3d(0, 20%, 0) }
        30%  { opacity: 0 }
        100% { opacity: 1; transform: none }
      }

    Production runs this on the level-two panel itself
    (`html.touchevents .menu__tier-one.has-tier-two-open .menu__tier-two`,
    0.2s, fill both) at the same time as the container slides across. The
    `30%` stop is the reason it reads as a short delay followed by a fade
    rather than one long fade — opacity is held at 0 for the first 60ms while
    the panel has already begun moving up.

    This replaced `menu-drawer-subnav-open`, which was never referenced.
  {%- endcomment -%}
  @keyframes menu-drawer-panel-fade-up {
    0% {
      opacity: 0;
      transform: translate3d(0, 20%, 0);
    }

    30% {
      opacity: 0;
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  .menu-drawer__panel-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    width: 100%;
    box-sizing: border-box;
  }

  .menu-drawer__panel-content:empty {
    display: none;
  }

  @media screen and (max-width: 1023px) {
    {%- comment -%}
      Design system fixes every dividing line in the drawer at #EAEAEA. The
      colour scheme's --color-border resolves to 6% black, which read too light.
    {%- endcomment -%}
    .header-drawer {
      --ocs-drawer-divider-color: #eaeaea;

      {%- comment -%}
        ocs.ca opens its mobile nav with `transition: all .25s ease` on
        `.mega-menu`. Horizon's global default is 0.2s.

        Scoped to the drawer rather than raised where it is declared in
        snippets/theme-styles-variables.liquid: the cart drawer reads the same
        variable (snippets/cart-products.liquid) and has no production
        counterpart to match.
      {%- endcomment -%}
      --drawer-animation-speed: 0.25s;
    }

    {%- comment -%}
      Production has no per-row animation in the mobile nav — anywhere. The
      panel arrives as one piece on the container's own transition, and neither
      the top-level rows, the category rows, nor the links inside them animate
      individually.

      Horizon staggers them: the rule this overrides gives every
      .menu-drawer__animated-element a delay of `speed + (index - 1) * 0.1s`.
      With the live menu that is five top-level links, then the featured card at
      index 6 and the utility links at index 7, so the last element starts at
      0.8s and settles at 1.0s — four times the length of production's entire
      animation. That cascade is what the merchant reported as jarring.

      Overridden here rather than deleted at source because the same rule also
      serves the drawer at >=1024px, which is a Horizon-only surface with no
      production behaviour to match.

      Nothing needs to replace it. The rows were only invisible beforehand
      because @keyframes menu-drawer-nav-open opens on
      `visibility: hidden; opacity: 0` and the rule fills backwards; with no
      animation they simply render, which is what production does.

      The --menu-drawer-animation-index custom properties are left on the list
      items on purpose. They are inert now, and stripping eight style attributes
      out of the markup would bury this one-property revert.
    {%- endcomment -%}
    .menu-drawer-container[open] .menu-drawer__animated-element {
      animation: none;
    }

    {%- comment -%}
      The level-one/level-two carousel, matched to ocs.ca.

      Production:

        .mega-menu      { position: fixed; width: 200%; left: 100%;
                          transition: all .25s ease }
        .mega-menu.active                     { left: 0 }
        .mega-menu.has-tier-two-open--mobile  { transform: translateX(-50%) }
        .menu           { width: 50% }   /* 50% of 200% == 100vw */
        .menu__tier-two { position: absolute; top: 0; right: 0; width: 50% }

      So the whole 200%-wide surface slides half its width, taking level one out
      to the left while the panel parked in the off-screen right half comes in.
      Both levels move together; neither slides over a stationary sibling.

      Horizon slid the panel over level one instead, which is the second reason
      the drawer felt unlike production once the stagger was gone.

      Production can put the carousel translate on the drawer itself because it
      opens the drawer by animating `left`. We keep the cheaper `transform`
      slide and give the carousel the track, which costs one wrapper element and
      no layout-triggering animation.

      Two things make the nesting a non-issue, both checked against the
      production CSS rather than assumed:

        - production's panels are not siblings of the level-one list either.
          `.menu__tier-one` is not positioned on mobile, so `.menu__tier-two`
          resolves against the 200%-wide `.mega-menu`. Ours resolves against the
          track for the same reason.
        - `.mega-menu.active, .mega-menu.has-tier-two-open--mobile
          { transform: none !important }` does exist in production, but only
          inside `@media (min-width: 1024px)`. It does not defeat this.
    {%- endcomment -%}
    .menu-drawer__track {
      position: relative;
      display: flex;
      flex-direction: column;

      {%- comment -%}
        Double width, with the far half taken as padding rather than left as
        content. Both resolve against the drawer's 100vw, so the border box is
        200vw and the content box is exactly the visible 100vw.

        Production sizes each of its top-level regions to 50% instead
        (`.menu`, `.mega-menu--language-toggles`). Doing that here would need a
        width on all four of ours and would still be wrong for the featured
        card: it centres itself with `margin-inline: auto`, and auto margins on
        a flex item distribute across the whole line, so a 200%-wide line would
        centre the card on the fold between the two halves. Holding the half
        back as padding leaves every child stretching to it untouched — which
        is also what lets the close button keep `align-self: flex-end`.

        The panel is unaffected: an absolutely positioned element resolves
        against the padding box, so `right: 0` is still the track's far edge.
      {%- endcomment -%}
      box-sizing: border-box;
      width: 200%;
      padding-inline-end: 100%;

      {%- comment -%}
        Grow to the drawer's height so a short menu still fills it — the
        utility links bottom-anchor themselves with `margin-block-start: auto`
        and need the room — but never shrink below the content: the drawer is
        what scrolls when the top-level list is long, and a fixed
        `height: 100%` here would put the overflow out of reach.
      {%- endcomment -%}
      flex: 1 0 auto;
      transform: translateX(0);
      transition: transform var(--drawer-animation-speed) ease;
    }

    .menu-drawer:has(.menu-drawer__menu-container.menu-open) .menu-drawer__track {
      transform: translateX(-50%);
    }

    {%- comment -%}
      The off-screen half must not be visible or reachable. Production does not
      need this because its drawer *is* the 200% element and the viewport does
      the clipping; ours is 100vw with a wider track inside it. `clip` rather
      than `hidden` on the inline axis so the block axis keeps its scrolling —
      and `:has(details[open]) { overflow: initial }` above has to go with it,
      since it exists only to let the panel escape a drawer it no longer
      leaves.
    {%- endcomment -%}
    .menu-drawer,
    .menu-drawer:has(details[open]) {
      overflow-x: clip;
      overflow-y: auto;
    }

    {%- comment -%}
      None of the drawer's scrollports may take inline space for a scrollbar.

      ocs.ca styles `::-webkit-scrollbar` zero times and sets neither
      `scrollbar-width` nor `scrollbar-gutter`, so every scrollport in it keeps
      the platform's overlay scrollbar — drawn over the content, costing no
      layout. base.css:4426 declares `::-webkit-scrollbar { width: 20px }`
      against the universal selector, and styling that pseudo-element at all is
      what opts an element out of overlay scrollbars, so every scrollport in
      this theme has a classic bar that takes 20px of inline space instead.

      That is a reflow waiting to happen, and this drawer has four scrollports
      nested inside each other for it to happen in. Whenever one crosses
      between overflowing and not, its content box changes width by 20px in a
      single frame and everything inside it moves sideways. Expanding a
      third-level category crosses exactly that line, and the collapsing
      siblings cross it back when their `content-visibility` lands at the end of
      the 0.3s — which is after the expansion has finished and every row is
      already in view.

      `scrollbar-width: none` plus a zeroed `::-webkit-scrollbar` is the pattern
      base.css already uses for its own scrollports (slideshow-slides at :3760,
      the dialog at :2216). It is not literally an overlay scrollbar — no engine
      exposes a way back to one once the pseudo-element has been styled — but it
      matches what production costs in layout, which is nothing, and on a touch
      device the bar production shows is transient anyway.
    {%- endcomment -%}
    .menu-drawer,
    .menu-drawer__navigation-container,
    .menu-drawer__submenu,
    .menu-drawer__inner-submenu {
      scrollbar-width: none;
      scrollbar-color: transparent transparent;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      &::-webkit-scrollbar-track,
      &::-webkit-scrollbar-thumb {
        background: transparent;
        border: none;
      }
    }

    {%- comment -%}
      The panel parks in the track's off-screen right half and stops moving
      itself — production's `.menu__tier-two { position: absolute; top: 0;
      right: 0; width: 50% }`. `right: 0` against a 200%-wide track puts its
      right edge at 200% and its 50% width spans 100%–200%, so the track's
      -50% translate is the entire slide-in.

      Its own translateX(100%) has to go, not just be zeroed: two transforms
      moving the same panel is what would read as the doubled, sliding-over
      motion this replaces.
    {%- endcomment -%}
    .menu-drawer__submenu {
      right: 0;
      left: auto;
      width: 50%;
      transform: none;
    }

    {%- comment -%}
      transform drops out of the panel's transition with it. visibility and
      opacity stay, and that is a deliberate departure from production:
      ocs.ca flips `.menu__tier-two` to `display: none` the instant the class
      comes off, so closing a panel shows a blank white half sliding away.
      Horizon's #close removes `menu-open`, waits for the transition, and only
      then removes `open`, which keeps the panel's contents on screen while it
      leaves. That is better and it is already ours, so it stays.
    {%- endcomment -%}
    details[open] > .menu-drawer__submenu {
      transition: visibility var(--drawer-animation-speed) ease, opacity var(--drawer-animation-speed) ease;
    }

    {%- comment -%}
      Production runs its fade-up on the panel at the same time as the
      container slides — `html.touchevents .menu__tier-one.has-tier-two-open
      .menu__tier-two { animation: anim__fade-in-up .2s both }`. Same 0.2s here
      against the track's 0.25s, so the contents finish easing up just before
      the slide lands.

      It stays on the panel rather than moving to the track for a second
      reason: open() in assets/header-drawer.js times focus trapping off
      onAnimationEnd of this element, so it needs an animation of its own to
      wait for.
    {%- endcomment -%}
    .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
      transform: none;
      animation: menu-drawer-panel-fade-up 0.2s both;
    }

    {%- comment -%}
      Measured on ocs.ca at 390px wide. In the top-level list production runs
      the line edge to edge and insets the text instead: li.menu__tier-one
      spans 0-390 and carries the border, while a.menu__item--link sits at 15.

      Holding the inset on the list ties the line to the text, which is what
      stopped ours short of the drawer edges. Moving it onto the row fixes
      that: the row's border box still reaches the edges, so the line does
      too, while its padding keeps the text where it was.
    {%- endcomment -%}
    .header-drawer .menu-drawer__menu:not(.menu-drawer__menu--grid) {
      padding-inline: 0;
    }

    {%- comment -%}
      Production closes the top of the drawer with a line under the close row:
      div.mega-menu__close is a full-width row inside ul.menu__list carrying a
      border-bottom, so the list below reads as bounded rather than floating.

      Our close button is a bare 52px square with no row around it, so there is
      nothing to hang that line on. Putting it on the top of the list instead
      lands it in the same place, full width, without widening the hit target.
    {%- endcomment -%}
    .header-drawer .menu-drawer__navigation > .menu-drawer__menu {
      border-block-start: 1px solid var(--ocs-drawer-divider-color);
    }

    {%- comment -%}
      Production opens the drawer with the close button at the top right; ours
      sat at the top left. .menu-drawer is a flex column and the button is a
      direct child of it, so aligning to the end is all this needs.

      Only the top-level button moves. The one in a submenu panel already sits
      right, because it shares .menu-drawer__nav-buttons with the back button.

      The 48px matches the min-height the menu rows are given further down, so
      this row is the same height as the ones under it. Its own padding-block
      has to go, or it adds to that height instead of fitting inside it.

      The X also has to land in the same column as the chevrons on the rows
      below, and its own 16px padding put it a pixel off. The rows are inset by
      --drawer-padding, so the button takes the same inset — but that alone
      leaves the X short, because its icon wrapper is 20px around a 13.6px
      glyph and centres it. The chevron's wrapper does not: its glyph sits
      flush against the right edge. Ending the close icon the same way is what
      makes the two right edges agree, rather than a hand-tuned padding that
      happens to cancel the 3.2px of slack.
    {%- endcomment -%}
    {%- comment -%}
      Matched on the track rather than on .menu-drawer since the carousel
      wrapper went in — the button is a child of the track now. The child
      combinator stays load-bearing either way: a descendant match would also
      catch the back/close row inside every panel, which is styled separately
      below.

      `align-self: flex-end` still does the placement. The track holds its far
      half back as padding, so the flex line ends at the visible edge and not
      at 200%.
    {%- endcomment -%}
    .header-drawer .menu-drawer__track > .menu-drawer__close-button {
      align-self: flex-end;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      height: 48px;
      padding-block: 0;
      padding-inline: var(--drawer-padding);
    }

    .header-drawer .menu-drawer__track > .menu-drawer__close-button .svg-wrapper {
      justify-content: flex-end;
    }

    .header-drawer .menu-drawer__menu:not(.menu-drawer__menu--grid) > .menu-drawer__list-item {
      padding-inline: var(--drawer-padding);
    }

    {%- comment -%}
      A nested list already sits inside its parent row's inset, so its own rows
      must not add a second one.
    {%- endcomment -%}
    .header-drawer
      .menu-drawer__list-item
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item {
      padding-inline: 0;
    }

    {%- comment -%}
      A submenu panel is the exception, and it is the opposite arrangement.
      Production does not run every line edge to edge: inside a panel only the
      back/close bar's line is full width, and the content line below it is
      inset to sit under the text. Measured on ocs.ca, .menu__nav-buttons spans
      0-390 while the line under .menu__tier-two__menu-primary spans 15-375.

      So here the inset goes on the list — and as margin, not padding. Padding
      sits inside the border box, so a padded list still draws its line edge to
      edge; only margin pulls the line in with the text. Production insets its
      group with `margin: 0 15px` for exactly this reason.
    {%- endcomment -%}
    .header-drawer .menu-drawer__submenu .menu-drawer__menu:not(.menu-drawer__menu--grid) {
      padding-inline: 0;
      margin-inline: var(--drawer-padding);
    }

    .header-drawer
      .menu-drawer__submenu
      .menu-drawer__list-item
      .menu-drawer__menu:not(.menu-drawer__menu--grid) {
      margin-inline: 0;
    }

    .header-drawer
      .menu-drawer__submenu
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item {
      padding-inline: 0;
    }

    .header-drawer .menu-drawer__menu-item--mainlist {
      font-size: 18px;
      line-height: 1.25;
      font-weight: 600;
    }

    .header-drawer .menu-drawer__menu-item--parent {
      color: #000;
      font-size: 18px;
      line-height: 1.25;
      font-weight: 600;
    }

    .header-drawer .menu-drawer__menu-item--parent:hover,
    .header-drawer .menu-drawer__menu-item--parent:focus-visible {
      color: #000;
    }

    .header-drawer
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item
      > .menu-drawer__menu-item--mainlist,
    .header-drawer
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item
      > details
      > .menu-drawer__menu-item--mainlist,
    .header-drawer
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item
      > accordion-custom
      > details
      > .menu-drawer__menu-item--mainlist,
    .header-drawer
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item
      > .menu-drawer__menu-item--parent:not(:has(> .menu-drawer__link-image)),
    .header-drawer
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item
      > details
      > .menu-drawer__menu-item--parent:not(:has(> .menu-drawer__link-image)),
    .header-drawer
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item
      > accordion-custom
      > details
      > .menu-drawer__menu-item--parent:not(:has(> .menu-drawer__link-image)) {
      min-height: 48px;
      padding-block: var(--padding-xs);
      align-items: center;
    }

    .header-drawer
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item
      > .menu-drawer__menu-item--mainlist
      > .svg-wrapper,
    .header-drawer
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item
      > details
      > .menu-drawer__menu-item--mainlist
      > .svg-wrapper,
    .header-drawer
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item
      > accordion-custom
      > details
      > .menu-drawer__menu-item--mainlist
      > .svg-wrapper,
    .header-drawer
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item
      > .menu-drawer__menu-item--parent:not(:has(> .menu-drawer__link-image))
      > .svg-wrapper,
    .header-drawer
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item
      > details
      > .menu-drawer__menu-item--parent:not(:has(> .menu-drawer__link-image))
      > .svg-wrapper,
    .header-drawer
      .menu-drawer__menu:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item
      > accordion-custom
      > details
      > .menu-drawer__menu-item--parent:not(:has(> .menu-drawer__link-image))
      > .svg-wrapper {
      padding-block: 0;
    }

    .header-drawer .menu-drawer__menu-item--child {
      font-size: 18px;
      line-height: 1.25;
      font-weight: 600;
    }

    {%- comment -%}
      The third-level options sat on the generic --padding-2xs, 4px, which
      packed them tighter than anything else in the drawer. Production gives
      li.menu__tier-four `padding: 10px 2px`.
    {%- endcomment -%}
    .header-drawer .menu-drawer__menu.menu-drawer__menu--grandchildlist .menu-drawer__menu-item--child {
      font-size: 18px;
      font-weight: 400;
      padding-block: 10px;
    }

    {%- comment -%}
      The "Shop all"/"Learn more" reoccurring CTA link ocs-header-mega-panels.js
      injects (li.menu-drawer__list-item--reoccurring, anchor carries its own
      .menu-drawer__reoccurring-link class too) lands in either the childlist
      or grandchildlist depending on whether the category has subcategories —
      target the classes directly rather than guessing position. Chained onto
      .focus-inset (always present on this anchor per the JS) to out-specify
      the (0,4,0) grandchildlist rule above, which would otherwise win.
    {%- endcomment -%}
    .header-drawer .menu-drawer__list-item--reoccurring > .menu-drawer__menu-item--child.menu-drawer__reoccurring-link.focus-inset {
      font-size: 14px;
    }

    .header-drawer .menu-drawer__menu:not(.menu-drawer__menu--grid) > .menu-drawer__list-item {
      border-block-end: 1px solid var(--ocs-drawer-divider-color);
    }

    .header-drawer
      .menu-drawer__menu.menu-drawer__menu--childlist:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item:has(> .menu-drawer__menu-item--child),
    .header-drawer
      .menu-drawer__menu.menu-drawer__menu--grandchildlist:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item:has(> .menu-drawer__menu-item--child) {
      border-block-end: 0;
    }

    .header-drawer
      .menu-drawer__menu.menu-drawer__menu--childlist:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item:has(.menu-drawer__menu-item--parent) {
      border-block-end: 1px solid var(--ocs-drawer-divider-color);
    }

    {%- comment -%}
      A submenu panel gets one line under the whole link group, not one per row.
      Measured on ocs.ca: li.menu__tier-three carries no border at all, and the
      single line sits on ul.menu__tier-two__menu-primary.

      Per-row lines are what made the panel look wrong. Inset, they visibly
      disagreed with the full-width bar above them; full-bleed, they read as
      four heavy rules where production has one. The group line has neither
      problem — it is far enough from the bar to be read as a separator rather
      than as a line that failed to reach the edge.
    {%- endcomment -%}
    .header-drawer .menu-drawer__submenu .menu-drawer__menu:not(.menu-drawer__menu--grid) > .menu-drawer__list-item,
    .header-drawer
      .menu-drawer__submenu
      .menu-drawer__menu.menu-drawer__menu--childlist:not(.menu-drawer__menu--grid)
      > .menu-drawer__list-item:has(.menu-drawer__menu-item--parent) {
      border-block-end: 0;
    }

    .header-drawer
      .menu-drawer__submenu
      .menu-drawer__menu.menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
      border-block-end: 1px solid var(--ocs-drawer-divider-color);
    }

    .header-drawer .menu-drawer__submenu .menu-drawer__nav-buttons {
      min-height: 48px;
      border-block-end: 1px solid var(--ocs-drawer-divider-color);
    }

    .header-drawer .menu-drawer__submenu .menu-drawer__back-button,
    .header-drawer .menu-drawer__submenu .menu-drawer__close-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
      padding: 0;
    }

    .header-drawer .menu-drawer__submenu .menu-drawer__back-button {
      overflow: visible;
    }

    .header-drawer .menu-drawer__submenu .menu-drawer__back-button-label {
      display: none;
    }

    .header-drawer .menu-drawer__submenu .menu-drawer__back-button > .svg-wrapper {
      margin: 0;
    }

    .header-drawer .menu-drawer__submenu-title {
      display: block;
      margin: 20px var(--drawer-padding) 24px;
      color: var(--color-foreground);
      font-family: var(--menu-parent-font-family);

      /* 18px, the same size as the links it heads. --font-size--md is 16 and
       * left the title reading smaller than its own list. */
      font-size: 18px;
      font-style: var(--menu-parent-font-style);
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      text-transform: uppercase;
    }

    .header-drawer .menu-drawer .icon-caret--forward svg {
      transform: scaleX(-1);
      transform-box: fill-box;
      transform-origin: center;
    }

    .header-drawer .menu-drawer__submenu .menu-drawer__back-button .icon-caret--backward svg {
      transform: none;
      transform-box: fill-box;
      transform-origin: center;
    }

    .header-drawer .menu-drawer__submenu .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
      flex-grow: 0;
    }

    .header-drawer .menu-drawer__panel-content {
      flex: 0 0 auto;
      padding-block: var(--padding-sm) var(--padding-xl);
      padding-inline: var(--drawer-padding);
    }

    .header-drawer .menu-drawer__panel-content:empty {
      padding: 0;
    }
  }

  @media screen and (max-width: 1023px) {
    .menu-drawer__panel-cta-area {
      order: 1;
    }

    .menu-drawer__panel-featured-tiles {
      order: 2;
    }
  }

  @media screen and (min-width: 1024px) {
    .menu-drawer__panel-cta-area {
      order: 2;
    }

    .menu-drawer__panel-featured-tiles {
      order: 1;
    }
  }

  .menu-drawer__panel-cta-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
    width: 100%;
    text-align: center;
  }

  {%- comment -%}
    The reoccurring menu CTA, injected by assets/ocs-header-mega-panels.js. It
    is built with the drawer's own child-item classes, so type and colour come
    from menu-font-styles/submenu-font-styles already. The optional underline
    modifier is added only when its Mega Panel setting is enabled.
  {%- endcomment -%}
  .menu-drawer__menu-item.menu-drawer__reoccurring-link {
    justify-content: center;
    text-align: center;
  }

  .menu-drawer__reoccurring-link--underlined .menu-drawer__menu-item-text {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .menu-drawer__reoccurring-link-arrow {
    display: inline-block;
    margin-inline-start: 7px;
    transform: translateX(0);
    transition: transform 0.1s linear;
  }

  .menu-drawer__reoccurring-link:where(:hover, :focus-visible, :active) .menu-drawer__reoccurring-link-arrow {
    transform: translateX(3px);
  }

  {%- comment -%}
    A placeholder menu entry renders without an href (see snippets/menu-link-target.liquid).
    Scoped to anchors on purpose: <summary> carries .menu-drawer__menu-item too and
    never has an href, so an unscoped :not([href]) would freeze the accordions.

    The role exclusion is the same guard one level up. No drawer call site asks
    the snippet for a disclosing placeholder today — everything that opens in here
    is a <summary> — so it matches nothing; it is here so the invariant holds
    wherever the rule is read, since a control that opens something must stay in
    hit-testing. Taking it off one in the desktop nav closed the mega panel.
  {%- endcomment -%}
  a.menu-drawer__menu-item:not([href]):not([role='button']) {
    pointer-events: none;
  }

  {%- comment -%}
    The other half of the caret's NEXT ARROW label, and the reason it reported
    nothing at first. Stock Horizon sets `.svg-wrapper { pointer-events: none }`
    (assets/base.css:788), so the glyph is not a hit-test target: a tap on it
    lands on the <summary> instead, and the label resolver — which reads
    closest('[data-ocs-cta-title]') from event.target — can only ever find the
    row title. Restoring hit-testing on this one wrapper is what makes the two
    taps distinguishable.

    Nothing about the row's behaviour changes. A click inside a <summary> toggles
    it from anywhere in its subtree, which is already how the label span beside
    this one works, and hover still applies to the summary because the pointer is
    over its box either way. (0,2,0) beats base.css's (0,1,0), so load order does
    not decide this one.

    Not inside the mobile block: the desktop drawer renders the same caret, and a
    label that depends on viewport width would split the GA4 series in a way
    production's never did.

    The ::after widens what the glyph catches without moving it. --icon-size-sm
    is 1.25rem, so the wrapper is a 20x20 box — below both the 44px Apple and
    48px Google minimums, and on a phone almost every deliberate tap on the arrow
    landed in the padding beside it and reported the row title instead. The
    insets take it to 48 tall by 46 wide: 20 + 14 + 14 vertically, which is
    exactly the row's min-height so it cannot bleed into its neighbours, and
    20 + 14 + 12 horizontally, where the 12 stays inside --drawer-padding
    (--padding-sm + 7px = 18.2px) so it does not reach past the drawer's edge.
    An empty pseudo-element is still hit-testable and events on it report the
    originating span, so this needs no extra markup and paints nothing.

    Known cost: the 14px on the inline-start edge overlaps the tail of a long
    title, so a tap on its last character or two reports NEXT ARROW. Production
    kept the bare glyph and its arrow label was correspondingly rare; a target
    a thumb can actually hit was judged worth that trade.
  {%- endcomment -%}
  .menu-drawer__menu-item--mainlist .icon-caret--forward {
    pointer-events: auto;
    position: relative;
  }

  .menu-drawer__menu-item--mainlist .icon-caret--forward::after {
    content: '';
    position: absolute;
    inset: -14px -12px -14px -14px;
  }

  .menu-drawer__panel-content .mega-menu-cta-banner {
    flex-direction: column;
    gap: var(--gap-md);
    padding-block: 0;
  }

  .menu-drawer__panel-content .mega-menu-cta-banner__item {
    flex: 0 1 auto;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .menu-drawer__panel-content .mega-menu-cta-banner__divider {
    display: none;
  }

  .menu-drawer__panel-featured-tiles {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    width: 100%;
  }

  .menu-drawer__panel-featured-tiles .mega-menu-featured-tile {
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-md);
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .menu-drawer__panel-featured-tiles .mega-menu-featured-tile__image-wrap {
    width: min(48%, 196px);
    min-width: 132px;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
  }

  .menu-drawer__panel-featured-tiles .mega-menu-featured-tile__content {
    flex: 1 1 auto;
    min-width: 0;
    padding-block: 0;
  }

  .menu-drawer__panel-featured-tiles .mega-menu-featured-tile__title {
    font-size: 18px;
    line-height: 1.25;
  }

  .menu-drawer__panel-featured-tiles .mega-menu-featured-tile__description {
    font-size: 14px;
    line-height: 1.35;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:266) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:269) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch {
    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--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));
  }

  .variant-option--images {
    position: relative;
  }

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

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

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;
    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

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

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

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:270) */
/* 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%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

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

  .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 {
      outline: none;
    }

    /* Re-apply outline for keyboard navigation after the :focus reset above.
       :focus-visible must come last so it wins the cascade at equal specificity. */
    &:focus-visible {
      outline: 2px solid currentcolor;
      border-radius: 0;
    }
  }

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

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

  .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;
    display: none;
  }

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

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

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

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

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

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

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

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

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

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

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

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

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

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

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

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .header__column .localization-form__select {
    background-color: var(--header-bg-color);
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:271) */
.media-block {
    overflow: hidden;
    position: relative;

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

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:mega-menu-cta-banner (INDEX:272) */
.mega-menu-cta-banner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--gap-lg);
    padding-block: var(--padding-lg);
    width: 100%;
    flex-wrap: wrap;
    text-align: center;
    padding-bottom: 0;
  }

  .mega-menu-cta-banner__item {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--gap-md);
    min-width: min(100%, 16rem);
  }

  .mega-menu-cta-banner__button {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* This used to raise the panel CTA to 44px/16px at 1024px, back when outline
     buttons were 40px everywhere and this was the one place asking for 44. Every
     CTA is now 44/16 from 640px up, so the override is redundant — and it was
     applying at the wrong breakpoint anyway. */

  .mega-menu-cta-banner__divider {
    width: 1px;
    background-color: var(--color-border);
    align-self: stretch;
    flex-shrink: 0;
  }
/* END_SNIPPET:mega-menu-cta-banner */

/* START_SNIPPET:mega-menu-featured-tile (INDEX:273) */
.mega-menu-featured-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-foreground);
    border-radius: var(--border-radius-base);
    overflow: hidden;
    transition: opacity var(--animation-speed) var(--animation-easing);
    flex: 1 1 0;
    min-width: 160px;
    max-width: 280px;
  }

  a.mega-menu-featured-tile:hover {
    opacity: 0.85;
  }

  .mega-menu-featured-tile__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--border-radius-base);
    background-color: var(--color-foreground-muted);
  }

  .mega-menu-featured-tile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mega-menu-featured-tile__image-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
  }

  .mega-menu-featured-tile__content {
    min-width: 0;
    padding-block: var(--padding-sm);
    padding-inline: 0;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .mega-menu-featured-tile__title {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: 600;
    font-size: 18px;
    /* Production pins this at 1.25 (18px * 1.25 = 22.5px) on
       .menu__featured-item__title, at top level with no media override, so it
       is 1.25 at every width. --menu-child-font-line-height cannot be used
       here: it resolves through submenu-font-styles.liquid to one of the
       --menu-font-*--line-height values, which are calc(1.1 + 0.5 * min(16/N))
       — roughly 1.5 to 1.67, or ~27-30px against this 18px font-size. The
       mobile drawer already hardcodes 1.25 for this same element (see
       header-drawer.liquid), so this also brings desktop in line with it. */
    line-height: 1.25;
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    margin: 0 0 var(--padding-3xs);
  }

  .mega-menu-featured-tile__description {
    font-size: 14px;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin: 0;
    line-height: 1.4;
  }

  /*
    Legacy desktop mega menus cap each featured card at 160px; the square
    source artwork therefore renders at 160px × 160px rather than filling
    the entire 20%/50% featured column.
  */
  @media screen and (min-width: 1024px) {
    .mega-menu-featured-tile {
      flex: 0 0 160px;
      width: 160px;
      min-width: 160px;
      max-width: 160px;
    }
  }
/* END_SNIPPET:mega-menu-featured-tile */

/* START_SNIPPET:mega-menu-list (INDEX:274) */
/*
    The tiles rendered from blocks/mega-panel.liquid carry this class but that
    file has no stylesheet block of its own, so this rule is what sizes them
    there too. It reaches them because blocks/_header-menu.liquid renders this
    snippet on every page, which is what puts the block on the page at all.
  */
  .mega-menu-list__featured-tiles {
    display: flex;
    flex-direction: row;
    /*
      20px, not --gap-md (0.9rem = 14.4px), which read as the two tiles being
      crowded together. Production spaces them with the tile's own margin —
      .menu__featured-item { margin: 2px 0 20px 20px } at >= 1024px — so 20px is
      the gap between them there, horizontally and when they wrap. Pinned rather
      than taken from --gap-xl, which computes to the same 20px today: this
      tracks a production measurement, not the theme's spacing scale, and the two
      should be free to move independently.
    */
    gap: 20px;
    flex-wrap: wrap;
    padding-block-start: var(--padding-lg);
    width: 100%;
    justify-content: center;
  }
/* END_SNIPPET:mega-menu-list */

/* START_SNIPPET:ocs-cart-chip (INDEX:281) */
/* ─── Wrapper ──────────────────────────────────────────────────── */
  ocs-cart-chip-component {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* ─── Pill button — legacy OCS gram-widget geometry ─────────────── */
  .ocs-gram-pill {
    --pill-height: 46px;
    --pill-width: 190px;
    --pill-max-width: 207px;
    --pill-green: #2e7631;
    --pill-border-color: #d8d8d8;
    --pill-text-color: #3f3f3f;
    --pill-radius: 25px;
    --bag-icon-size: 40px;

    position: relative;
    display: inline-flex;
    align-items: center;
    width: var(--pill-width);
    min-width: var(--pill-width);
    max-width: var(--pill-max-width);
    height: var(--pill-height);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--pill-border-color);
    border-radius: var(--pill-radius);
    background: transparent;
    color: var(--pill-text-color);
    cursor: pointer;
    font-family: "Calibre", sans-serif;
    text-align: start;
    transition: border-color 0.2s ease;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  /* Legacy warning is a wrapper-level icon, not part of the gram text. */
  .ocs-gram-pill__exceeded-icon {
    position: absolute;
    inset-block-start: 5px;
    inset-inline-end: 50px;
    display: none;
    color: #d91222;
    font-size: 13px;
    line-height: normal;
    pointer-events: none;
  }

  .ocs-gram-pill-wrapper--exceeded > .ocs-gram-pill__exceeded-icon {
    display: inline-block;
  }

  .ocs-gram-pill__exceeded-icon::before {
    content: "\e010";
    font-family: "Icons";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none;
  }

  @media screen and (max-width: 1023px) {
    .ocs-gram-pill-wrapper--exceeded > .ocs-gram-pill__exceeded-icon {
      display: none;
    }
  }

  /* ─── Left: gram text (normal flow) ───────────────────────────── */
  .ocs-gram-pill__grams {
    display: inline-block;
    flex-shrink: 0;
    margin: 0 12px;
    padding: 0;
    vertical-align: middle;
    user-select: none;
  }

  .ocs-gram-pill__grams-left {
    position: relative;
    display: inline-block;
    font-weight: 100;
    vertical-align: middle;
  }

  .ocs-gram-pill__current {
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
  }

  .ocs-gram-pill__divider {
    margin-inline: 3px;
    font-size: 24px;
    font-weight: 100;
    line-height: normal;
    letter-spacing: normal;
    opacity: 1;
  }

  .ocs-gram-pill__grams-right {
    display: inline-block;
    text-align: start;
    line-height: 10px;
    vertical-align: middle;
  }

  .ocs-gram-pill__limit {
    font-size: 12px;
    font-weight: 400;
    line-height: 10px;
    opacity: 1;
    white-space: nowrap;
  }

  /* ─── Hover overlay (legacy 77% resting translation) ───────────── */
  .ocs-gram-pill__hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-inline-start: 40px;
    padding-inline-end: 0;
    border-radius: var(--pill-radius);
    background: var(--color-background);
    color: var(--pill-green);
    text-align: center;
    transform: translateX(77%);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  .ocs-gram-pill__hover:hover,
  .ocs-gram-pill:focus-visible .ocs-gram-pill__hover {
    transform: translateX(0);
    background-color: var(--pill-green);
    color: #fff;
  }

  /* ─── Bag icon — legacy 40px white circle ──────────────────────── */
  .ocs-gram-pill__bag-icon {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    width: var(--bag-icon-size);
    height: var(--bag-icon-size);
    border-radius: 50%;
    background: #fff;
    color: var(--pill-green);
    line-height: var(--bag-icon-size);
    text-align: center;
  }

  .ocs-gram-pill__bag-svg.svg-wrapper {
    position: absolute;
    inset-block-start: 5px;
    inset-inline-start: 8px;
    display: flex;
    width: 24px;
    height: 28px;
    margin: 0;

    svg {
      width: 24px;
      height: 28px;
      max-height: 100%;
    }

    path {
      fill: #348338;
    }
  }

  .ocs-gram-pill__count {
    position: absolute;
    inset-block-start: 13px;
    inset-inline-start: 0;
    width: 100%;
    height: 18px;
    color: var(--pill-green);
    font-size: 15px;
    font-style: normal;
    font-stretch: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.2px;
    text-align: center;
  }

  .ocs-gram-pill__count.has-three-digits {
    inset-block-start: 17px;
    height: 10px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
  }

  /* ─── Subtotal price ───────────────────────────────────────────── */
  .ocs-gram-pill__price {
    height: inherit;
    font-size: 24px;
    font-weight: 100;
    line-height: 42px;
    letter-spacing: normal;
    white-space: nowrap;
  }

  /* ─── Mobile: retain the compact current bag-only control ──────── */
  @media screen and (max-width: 749px) {
    .ocs-gram-pill {
      --pill-height: 44px;
      --pill-width: 44px;

      width: var(--pill-width);
      min-width: 0;
      max-width: none;
      height: var(--pill-height);
      border: none;
      border-radius: 0;
    }

    .ocs-gram-pill__grams {
      display: none;
    }

    .ocs-gram-pill__hover {
      justify-content: center;
      padding: 0;
      border-radius: 0;
      background: var(--color-background);
      color: var(--pill-green);
      transform: translateX(0);
    }

    .ocs-gram-pill__price {
      display: none;
    }

    .ocs-gram-pill__bag-icon {
      position: relative;
      inset: auto;
      width: 40px;
      height: 39px;
      border-radius: 0;
      background: transparent;
      line-height: normal;
    }

    .ocs-gram-pill__bag-svg.svg-wrapper {
      inset-block-start: 4px;
      inset-inline-start: 8px;
      width: 24px;
      height: 27px;

      svg {
        width: 24px;
        height: 27px;
      }
    }

    .ocs-gram-pill__count {
      inset-block-start: 12px;
      inset-inline-start: 8px;
      width: 24px;
      height: 18px;
      font-size: 13px;
      font-weight: 400;
      line-height: 18px;
      letter-spacing: normal;
    }

    .ocs-gram-pill__count.has-three-digits {
      inset-block-start: 15px;
      height: 10px;
      font-size: 9px;
      font-weight: 400;
      line-height: 10px;
      letter-spacing: normal;
    }

    .ocs-gram-pill:focus-visible {
      border-radius: 0;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    .ocs-gram-pill__hover:hover,
    .ocs-gram-pill:focus-visible .ocs-gram-pill__hover {
      background: var(--color-background);
      color: var(--pill-green);
      transform: translateX(0);
    }
  }
/* END_SNIPPET:ocs-cart-chip */

/* START_SNIPPET:ocs-cart-drawer-header (INDEX:283) */
.ocs-cart-drawer__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    padding: 1rem 3.5rem;
    box-shadow: 0 0px 4px #0000001f;
  }

  .ocs-cart-drawer__header-left {
    position: absolute;
    top: 12px;
    inset-inline-start: auto;
    inset-inline-end: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 0;
  }

  .ocs-cart-drawer__header-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    min-width: 0;
    flex: 0 1 auto;
  }

  .ocs-cart-drawer__header .cart-drawer__close-button {
    position: static;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
  }

  .ocs-cart-drawer__header .cart-drawer__close-button:focus,
  .ocs-cart-drawer__header .cart-drawer__close-button:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .ocs-cart-drawer__header .cart-drawer__close-button:focus-visible::after {
    content: none;
    display: none;
  }

  /* The bag title is a span (see the markup note above), so none of base.css's
     bare-tag heading rules reach it any more. Nothing here relied on them: the
     type comes from `.h4.h4` at base.css:967, which is class-based and still
     applies, and this rule already pins the display and both margins that the
     tag used to supply — `display: block` from the UA sheet, and the
     `margin-block: 0 20px` at base.css:932 plus the `:last-child:is(…)` reset at
     base.css:282. */
  .ocs-cart-drawer__header .cart-drawer__heading,
  .ocs-cart-drawer__header .cart-drawer__heading.h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media screen and (min-width: 750px) {
    .ocs-cart-drawer__header .cart-drawer__heading,
    .ocs-cart-drawer__header .cart-drawer__heading.h4 {
      font-size: 21px;
    }
  }

  .ocs-cart-drawer__header-bag-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #2e7631;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .ocs-cart-drawer__header-count {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #2e7631;
  }
/* END_SNIPPET:ocs-cart-drawer-header */

/* START_SNIPPET:ocs-cart-item (INDEX:284) */
.ocs-cart-item {
    position: relative;
    padding-block: 20px;
    border-bottom: var(--style-border-width) solid var(--color-border);

    &:last-child {
      border-bottom: none;
      padding-block-end: 0;
    }
  }

  /* ── Quantity-change spinner overlay ─────────────────────────── */
  .ocs-cart-item__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--color-background-rgb, 255 255 255) / 0.75);
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1;

    &::after {
      content: '';
      width: 20px;
      height: 20px;
      border: 2px solid rgb(var(--color-foreground-rgb) / 0.2);
      border-top-color: var(--color-foreground);
      border-radius: 50%;
      animation: ocs-cart-spin 0.65s linear infinite;
    }
  }

  .ocs-cart-item.is-loading .ocs-cart-item__spinner {
    opacity: 1;
    pointer-events: auto;
  }

  @keyframes ocs-cart-spin {
    to { rotate: 360deg; }
  }

  .ocs-cart-item__inner {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 15px;
    align-items: start;
  }

  /* Left column: image stacked above qty selector */
  .ocs-cart-item__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .ocs-cart-item__image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs, 4px);
  }

  .ocs-cart-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Right-side column: stacks top row (details + remove) and bottom row (price) */
  .ocs-cart-item__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  /* Top row: details text fills all available width; remove + price stacked on the right */
  .ocs-cart-item__top {
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }

  .ocs-cart-item__title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }

  .ocs-cart-item__details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    position: relative;
  }

  .ocs-cart-item__vendor {
    font-size: 13px;
    opacity: 0.7;
    margin: 0;
  }

  .ocs-cart-item__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;

    a {
      color: inherit;
      text-decoration: none;

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

  .ocs-cart-item__variant,
  .ocs-cart-item__sku,
  .ocs-cart-item__options {
    font-size: 13px;
    opacity: 0.7;
    margin: 0;
  }

  .ocs-cart-item__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .ocs-cart-item__badges .ocs-card--thc,
  .ocs-cart-item__badges .ocs-card--cbd {
    padding: 4px 8px;
    border-radius: 4px;
    background: #d2dc63cc;
    color: #1b2827;
    font-size: 12px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
  }

  @media (max-width: 749px) {
    .ocs-cart-item__badges .ocs-card--thc,
    .ocs-cart-item__badges .ocs-card--cbd {
      font-size: 10px;
    }
  }

  .ocs-cart-item__unit-price {
    font-size: 13px;
    opacity: 0.7;
    margin: 0;
  }

  .ocs-cart-item__line-price {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
  }

  /* Qty selector below image — constrain to the 72px column width */
  .ocs-cart-item__left .quantity-selector-wrapper {
    width: 100%;
    justify-content: center;
  }

  .ocs-cart-item__left .quantity-selector {
    width: 100%;
    max-width: fit-content;
    height: 26px;
    justify-content: space-between;
  }

  /* Compact qty buttons and input to fit the 72px column */
  .ocs-cart-item__left .quantity-minus,
  .ocs-cart-item__left .quantity-plus {
    padding: 2px;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;

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

  .ocs-cart-item__left input[type="number"] {
    width: 24px;
    font-size: 12px;
    text-align: center;
    padding: 0;
    -moz-appearance: textfield;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button { display: none; }
  }

  .ocs-cart-item__remove {
    color: var(--color-foreground);
    opacity: 0.5;
    cursor: pointer;
    padding: 4px;
    position: absolute;
    bottom: 0;
    right: 0;

    &:hover { opacity: 1; }

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

  .ocs-cart-item__error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 8px;
    /* Danger colour matches the THC over-limit alert styling. The icon SVG uses
       currentColor, so this colours both the danger icon and the message text. */
    color: #d91222;
    font-size: 13px;

    svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    /* The message is a <small>, which defaults to font-size: smaller — pin it to
       13px so it matches the container instead of shrinking below it. */
    .cart-item__error-text {
      font-size: 13px;
    }
  }

  .ocs-cart-item__error.hidden {
    display: none;
  }
/* END_SNIPPET:ocs-cart-item */

/* START_SNIPPET:ocs-cart-summary (INDEX:285) */
.ocs-cart-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .ocs-cart-summary__grams-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    padding-block: 4px;
  }

  .ocs-cart-summary__grams-label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgb(var(--color-foreground-rgb) / 0.7);
    flex-shrink: 0;
  }

  /* Ensure tooltip overflows the sticky summary container */
  .ocs-cart-summary__grams-row {
    overflow: visible;
    position: relative;
    z-index: 20;
  }

  .ocs-cart-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block: 4px;
  }

  .ocs-cart-summary__label {
    opacity: 0.7;
  }

  .ocs-cart-summary__value {
    font-weight: 600;
  }

  .ocs-cart-summary__subtotal .ocs-cart-summary__value {
    font-size: 16px;
  }

  .ocs-cart-summary__over-limit-msg {
    font-size: 13px;
    color: var(--color-error, rgb(196 28 28));
    margin: 0;
  }

  .ocs-cart-summary__terms {
    padding-block: 8px;
  }

  .ocs-cart-summary__terms-label {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    cursor: pointer;
    font-size: 14px;
    background-color: #D2DC6380;
    border-radius: 4px;
    padding-block: 6px;
    padding-inline: 4px;
  }

  .ocs-cart-summary__terms-input {
    flex-shrink: 0;
    margin-block-start: 2px;
    cursor: pointer;
    accent-color: var(--color-foreground);
    width: 18px;
    height: 18px;
    border: 1px solid #727272;
    border-radius: 3px;
  }

  .ocs-cart-summary__terms-text a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: currentcolor;
    text-underline-offset: 2px;
  }

  .ocs-cart-summary__buttons {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  /* OCS button layout overrides for cart summary context */
  .ocs-cart-summary__continue-btn.ocs-button,
  .ocs-cart-summary__checkout-btn.ocs-button {
    width: 100%;
    height: 40px;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
  }

  @media screen and (min-width: 750px) {
    .ocs-cart-summary__continue-btn.ocs-button,
    .ocs-cart-summary__checkout-btn.ocs-button {
      height: 44px;
      font-size: 16px;
    }
  }

  /* Disabled checkout button — over-limit or terms not accepted */
  .ocs-cart-summary__checkout-btn.ocs-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }
/* END_SNIPPET:ocs-cart-summary */

/* START_SNIPPET:ocs-cart-toast (INDEX:286) */
ocs-cart-toast-component {
    position: fixed;
    top: var(--ocs-cart-toast-top, calc(var(--header-section-height, var(--header-height, 0px)) + 4px));
    right: var(--ocs-cart-toast-right, 20px);
    z-index: 1300;
    width: 340px;
    max-width: calc(100vw - 40px);
    transition: opacity 0.25s ease, translate 0.25s ease;

    @media screen and (max-width: 749px) {
      top: var(--ocs-cart-toast-top, calc(var(--header-group-height, var(--header-height, 0px)) + 4px));
      bottom: auto;
      right: auto;
      left: 50%;
      width: calc(100vw - 26px);
      max-width: 400px;
      translate: -50% 0;
    }
  }

  ocs-cart-toast-component[hidden] {
    display: block;
    opacity: 0;
    translate: 0 -12px;
    pointer-events: none;
    visibility: hidden;

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

  .ocs-cart-toast__inner {
    background-color: var(--color-background);
    border: solid 1px #d8d8d8;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .ocs-cart-toast__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    padding-bottom: 0;
  }

  .ocs-cart-toast__heading {
    position: relative;
    font-weight: 700;
    font-size: 18px;
    margin: 0;
    text-align: center;
  }

  .ocs-cart-toast__heading-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: -26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2e7631;
    color: #fff;
    translate: 0 -50%;
  }

  .ocs-cart-toast__heading-icon::before {
    content: '';
    display: block;
    width: 4px;
    height: 7px;
    margin-top: -3px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  /* Scoped to outrank .button in base.css, which sets position: relative and
     height: 50px at the same specificity and would pull the X out of the corner. */
  .ocs-cart-toast .ocs-cart-toast__close {
    position: absolute;
    top: 50%;
    /* 3px + the 4px padding below centres the X on the "Y" of the QTY label in
       the row underneath. Tuned to Calibre Semibold at 14px — if the QTY font,
       size or weight changes, this needs remeasuring. */
    inset-inline-end: 3px;
    translate: 0 -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    color: var(--color-foreground);
    opacity: 0.6;
    padding: 4px;
    cursor: pointer;

    &:hover {
      opacity: 1;
    }

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

  .ocs-cart-toast__body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 6px;
  }

  /* Product list — one row per line item; scrolls when a whole-order reorder
     adds more rows than fit on screen. */
  .ocs-cart-toast__products {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 50vh;
    overflow-y: auto;
  }

  /* Divider between stacked rows (only when there is more than one) */
  .ocs-cart-toast__products .ocs-cart-toast__product + .ocs-cart-toast__product {
    padding-top: 12px;
    border-top: 1px solid #e5e5e5;
  }

  .ocs-cart-toast__product {
    display: flex;
    gap: 15px;
    align-items: flex-start;
  }

  .ocs-cart-toast__image-wrap {
    width: 100px;
    height: auto;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-inputs, 4px);
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .ocs-cart-toast__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }

  .ocs-cart-toast__details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;

    p {
      margin: 0;
      font-size: 13px;
    }
  }

  .ocs-cart-toast__badges:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;

    .ocs-card--thc,
    .ocs-card--cbd {
      padding: 3px 7px;
      border-radius: 4px;
      background: #d2dc63cc;
      color: #1b2827;
      font-size: 12px;
      font-weight: 500;
      line-height: 1;

      @media (max-width: 749px) {
        font-size: 10px;
      }
    }
  }

  .ocs-cart-toast__details .ocs-cart-toast__vendor {
    opacity: 0.7;
    display: flex;
    font-size: 15px;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .ocs-cart-toast__qty {
    font-size: 14px;
    font-weight: 600;
    color: #000;
  }
  .ocs-cart-toast__details .ocs-cart-toast__title {
    font-weight: 600;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .ocs-cart-toast__title-text {
    padding-right: 6px;
    line-height: 1.2;
  }
  .ocs-cart-toast__title-qty {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    padding-right: 2px;
  }
  .ocs-cart-toast__options {
    opacity: 0.7;
  }

  .ocs-cart-toast__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-inline: -10px;
    margin-block-end: -10px;
    padding: 10px;
    background: #f4f4f4;
    font-size: 14px;
  }

  .ocs-cart-toast__subtotal-label {
    font-weight: 700;
    text-transform: uppercase;
  }
  .ocs-cart-toast__subtotal-value {
    font-weight: 600;
  }

  .ocs-cart-toast__footer {
    display: flex;
    gap: 8px;
    padding: 10px;
    padding-top: 0;
    background: #f4f4f4;
  }

  /* OCS button layout overrides for compact toast context */
  .ocs-cart-toast__continue.ocs-button,
  .ocs-cart-toast__view-bag.ocs-button {
    flex: 1;
    height: 40px;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
  }
/* END_SNIPPET:ocs-cart-toast */

/* START_SNIPPET:ocs-cart-upsell (INDEX:287) */
.ocs-upsell-panel,
  .ocs-upsell-mobile,
  .ocs-upsell-page,
  .ocs-upsell-variant-modal,
  .ocs-upsell-reopen-btn,
  .ocs-upsell-panel__toggle,
  .ocs-upsell-mobile__toggle,
  .ocs-upsell-card__add-btn,
  .ocs-upsell-card__size-opt,
  .ocs-upsell-variant-opt {
    font-family: var(--font-body--family);
  }

  /* ─── Panel wrapper ─────────────────────────────────────────── */
  .ocs-upsell-panel {
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    border-right: var(--style-border-width) solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    /* width slides open immediately; products fade in after (see delay below) */
    transition: width 0.25s ease, min-width 0.25s ease;
  }

  .ocs-upsell-panel--collapsed {
    width: 32px;
    min-width: 32px;
  }

  .ocs-upsell-panel--collapsed .ocs-upsell-panel__header {
    justify-content: center;
    padding-inline: 6px;
    border-bottom: none;
  }

  .ocs-upsell-panel--collapsed .ocs-upsell-panel__products {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .ocs-upsell-panel--collapsed .ocs-upsell-panel__title {
    opacity: 0;
    visibility: hidden;
  }

  .ocs-upsell-reopen-btn {
    display: none;
    position: absolute;
    left: -32px;
    top: 0;
    width: 32px;
    height: 40px;
    background: var(--color-background);
    border: var(--style-border-width) solid var(--color-border);
    border-left: none;
    border-radius: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
    z-index: 1;

    .svg-wrapper svg {
      width: 10px;
      height: 10px;
    }
  }

  /* Collapsed panel keeps its own toggle visible; the legacy external reopen tab stays hidden. */

  /* Hide desktop panel on mobile */
  @media screen and (max-width: 749px) {
    .ocs-upsell-panel,
    .ocs-upsell-reopen-btn { display: none !important; }
  }

  /* ─── Panel header ──────────────────────────────────────────── */
  .ocs-upsell-panel__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    flex-shrink: 0;
    border-bottom: var(--style-border-width) solid var(--color-border);
    overflow: hidden;
  }

  .ocs-upsell-panel__toggle {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
  }

  .ocs-upsell-panel__toggle-icon.svg-wrapper {
    display: flex;
    transition: transform 0.25s ease;
    transform: rotate(180deg);
    transform-origin: center;
  }

  .ocs-upsell-panel__toggle-icon.svg-wrapper svg {
    width: 10px;
    height: 10px;
  }

  .ocs-upsell-panel--collapsed .ocs-upsell-panel__toggle-icon {
    transform: rotate(0deg);
  }

  .ocs-upsell-panel__title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
  }

  /* ─── Products list ─────────────────────────────────────────── */
  .ocs-upsell-panel__products {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    &::-webkit-scrollbar { width: 3px; }
    &::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
  }

  /* ─── Product card ──────────────────────────────────────────── */
  .ocs-upsell-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: var(--style-border-radius-inputs, 4px);
    padding: 12px;
  }

  .ocs-upsell-card__media {
    position: relative;
    width: 100%;
    max-height: 120px;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs, 4px);
    display: flex;
    justify-content: center;
    align-items: center;

    a {
      display: block;
      width: 100%;
      height: auto;
      margin: 0 auto;
    }
  }

  .ocs-upsell-card__img {
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    display: block;
  }

  .ocs-upsell-card__info {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .ocs-upsell-card__vendor,
  .ocs-upsell-card__title,
  .ocs-upsell-card__price,
  .ocs-upsell-card__taxes {
    font-size: 13px;
    margin: 0;
    line-height: 1.3;
  }

  .ocs-upsell-card__vendor { opacity: 0.6; }

  .ocs-upsell-card__title a {
    color: inherit;
    text-decoration: none;
    &:hover { text-decoration: underline; }
  }

  .ocs-upsell-card__price { font-weight: 600; }

  .ocs-upsell-card__per-gram {
    font-weight: 400;
    opacity: 0.6;
  }

  .ocs-upsell-card__taxes {
    opacity: 0.5;
    font-size: 9px;
  }

  /* ─── Hover overlay ─────────────────────────────────────────── */
  .ocs-upsell-card__overlay {
    position: absolute;
    inset: 0;
    border-radius: var(--style-border-radius-inputs, 4px);
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;

    form {
      width: 100%;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
  }

  .ocs-upsell-card__media:hover .ocs-upsell-card__overlay,
  .ocs-upsell-card__media:focus-within .ocs-upsell-card__overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .ocs-upsell-card__overlay.is-loading {
    opacity: 1;
    pointer-events: none;

    form { opacity: 0; }

    &::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255, 255, 255, 0.25);
      border-top-color: #fff;
      border-radius: 50%;
      animation: ocs-upsell-spin 0.6s linear infinite;
    }
  }

  @keyframes ocs-upsell-spin {
    to { transform: rotate(360deg); }
  }

  /* Single variant: ADD TO BAG button — desktop matches the white→green size variants. */
  .ocs-upsell-card__add-btn {
    width: 100%;
    background: #fff;
    border: 1px solid #A5A5A5;
    border-radius: 4px;
    color: #3F3F3F;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 7px 4px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

    &:hover,
    &:focus-visible {
      background: #2e7631;
      border-color: #2e7631;
      color: #fff;
    }
  }

  /* Multi-variant: size grid (inside overlay) */
  .ocs-upsell-card__sizes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    width: 100%;
  }

  .ocs-upsell-card__size-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #A5A5A5;
    border-radius: 4px;
    color: #3F3F3F;
    font-size: 12px;
    cursor: pointer;
    flex: 1;
    height: 36px;
    padding: 0 4px;
    text-align: center;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

    input[type='radio'] { display: none; }
  }

  .ocs-upsell-card__size-opt:not(.ocs-upsell-card__size-opt--oos):hover {
    background: #2e7631;
    border-color: #2e7631;
    color: #fff;
  }

  .ocs-upsell-card__size-opt--oos {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .ocs-upsell-card__size-opt:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
  }

  .ocs-upsell-card__more-link {
    display: inline-block;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 0.8;
  }

  .ocs-upsell-card__more-link:hover {
    opacity: 1;
  }

  /* ─── Mobile accordion ──────────────────────────────────────── */
  .ocs-upsell-mobile { display: none; }

  @media screen and (max-width: 749px) {
    .ocs-upsell-mobile {
      display: block;
      border-top: var(--style-border-width) solid var(--color-border);
      flex-shrink: 0;
      background: #fff;
    }

    .ocs-upsell-mobile__toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 16px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: center;
      text-transform: uppercase;
      color: var(--color-foreground);
    }

    .ocs-upsell-mobile__title {
      display: inline-block;
      text-align: center;
    }

    .ocs-upsell-mobile__icon.svg-wrapper {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      height: 12px;
      color: currentColor;
      opacity: 1;
      pointer-events: none;
      flex-shrink: 0;
    }

    .ocs-upsell-mobile__icon.svg-wrapper svg {
      display: block;
      width: 10px;
      height: 10px;
      transform: rotate(270deg);
      transform-origin: center;
      transition: transform 0.2s ease;
    }

    .ocs-upsell-mobile[data-open] .ocs-upsell-mobile__icon.svg-wrapper svg {
      transform: rotate(90deg);
    }

    .ocs-upsell-mobile__products {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 12px;
      gap: 12px;
      padding: 12px;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar { display: none; }
    }

    .ocs-upsell-mobile__products[hidden] { display: none; }

    /* ─── Mobile card ───────────────────────────────────────────── */
    .ocs-upsell-card--mobile {
      flex: 0 0 calc(100% - 100px);
      scroll-snap-align: start;
      display: flex;
      flex-direction: row;
      gap: 12px;
      align-items: flex-start;
      padding: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border-radius: var(--style-border-radius-inputs, 4px);
      flex-shrink: 0;
    }

    .ocs-upsell-card--mobile__img-link {
      flex: 0 0 80px;
      width: 80px;
      height: 80px;
      display: block;
      overflow: hidden;
      border-radius: var(--style-border-radius-inputs, 4px);
    }

    .ocs-upsell-card--mobile__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .ocs-upsell-card--mobile .ocs-upsell-card__info {
      flex: 1;
      min-width: 0;
      gap: 4px;
    }

    .ocs-upsell-card--mobile__form,
    .ocs-upsell-card__add-btn--mobile[data-ocs-upsell-variant-btn] {
      margin-top: 6px;
    }

    /* Mobile add button — always visible, green */
    .ocs-upsell-card__add-btn--mobile {
      background: #2e7d32;
      border-color: #2e7d32;
      color: #fff;

      &:hover {
        background: #1b5e20;
        border-color: #1b5e20;
      }
    }

    /* Mobile size opts — dark theme (not white-on-dark) */
    .ocs-upsell-card--mobile .ocs-upsell-card__sizes {
      max-height: none;
    }

    .ocs-upsell-card--mobile .ocs-upsell-card__size-opt {
      color: var(--color-foreground);
      border-color: rgba(0, 0, 0, 0.2);

      &:hover:not(.ocs-upsell-card__size-opt--oos) {
        background: rgba(0, 0, 0, 0.06);
      }
    }

    .ocs-upsell-card--mobile .ocs-upsell-card__size-opt:focus-visible {
      outline-color: var(--color-foreground);
    }

    /* Mobile add button spinner */
    .ocs-upsell-card--mobile__form.is-loading button {
      color: transparent;
      pointer-events: none;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        width: 14px;
        height: 14px;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        border: 2px solid rgba(255, 255, 255, 0.35);
        border-top-color: #fff;
        border-radius: 50%;
        animation: ocs-upsell-spin 0.6s linear infinite;
      }
    }

    /* ─── Variant modal ─────────────────────────────────────────── */
    .ocs-upsell-variant-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: flex-end;
    }

    .ocs-upsell-variant-modal[hidden] { display: none; }

    .ocs-upsell-variant-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
    }

    .ocs-upsell-variant-modal__sheet {
      position: relative;
      width: 100%;
      background: var(--color-background);
      border-radius: 16px 16px 0 0;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: 60vh;
      overflow-y: auto;
    }

    .ocs-upsell-variant-modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-shrink: 0;
    }

    .ocs-upsell-variant-modal__title {
      font-size: 14px;
      font-weight: 600;
      margin: 0;
    }

    .ocs-upsell-variant-modal__close {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      color: var(--color-foreground);
      display: flex;

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

    .ocs-upsell-variant-modal__opts {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .ocs-upsell-variant-opt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      background: none;
      cursor: pointer;
      font-size: 14px;
      color: var(--color-foreground);
      transition: background 0.15s ease;

      &:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); }
    }

    .ocs-upsell-variant-opt--oos {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .ocs-upsell-variant-opt.is-loading {
      color: transparent;
      pointer-events: none;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        border: 2px solid rgba(0, 0, 0, 0.15);
        border-top-color: var(--color-foreground);
        border-radius: 50%;
        animation: ocs-upsell-spin 0.6s linear infinite;
      }
    }

    .ocs-upsell-variant-opt__price {
      font-weight: 600;
      opacity: 0.7;
    }
  }

  /* ─── Cart page flat upsell ─────────────────────────────────── */
  .ocs-upsell-page {
    padding-block: 20px;
    border-top: var(--style-border-width) solid var(--color-border);
  }

  .ocs-upsell-page__title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: var(--color-foreground);
  }

  .ocs-upsell-page__products {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;

    &::-webkit-scrollbar { display: none; }
  }

  .ocs-upsell-page__products .ocs-upsell-card--mobile {
    flex: 0 0 280px;
    scroll-snap-align: start;

    @media screen and (max-width: 749px) {
      flex: 0 0 calc(100% - 48px);
    }
  }
/* END_SNIPPET:ocs-cart-upsell */

/* START_SNIPPET:ocs-gram-meter (INDEX:288) */
.ocs-gram-meter {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    white-space: nowrap;
    background: #e8e8e8;
    padding: 0 6px;
    border-radius: 8px;
  }

  .ocs-gram-meter__values {
    display: flex;
    align-items: baseline;
  }

  .ocs-gram-meter__current {
    font-weight: 600;
  }

  .ocs-gram-meter__label {
    margin-inline-start: var(--gap-2xs);
    font-size: var(--font-size--xs);
    opacity: 0.7;
  }

  .ocs-gram-meter__icon.svg-wrapper,
  .ocs-gram-meter__icon.ocs-tooltip-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    line-height: 1;
    color: inherit;

    svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
  }

  .ocs-gram-meter__tooltip-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* Content sizing/typography only — positioning is handled by .ocs-tooltip--left in custom.css */
  .ocs-gram-meter__tooltip {
    width: 220px;
    line-height: 1.4;
  }

  @media screen and (min-width: 1024px) {
    .ocs-gram-meter__tooltip {
      width: 200px;
    }
  }

  .ocs-gram-meter__tt-title {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    color: #4a4a4a;
    text-transform: uppercase;
  }

  .ocs-gram-meter__tt-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    color: #4a4a4a;
    text-transform: none;

    a {
      color: #2e7631;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
  }

  .cart-drawer__header .ocs-gram-meter {
    margin-top: 4px;
  }

  .ocs-gram-meter--exceeded {
    background: #ff00002b;
    color: var(--color-error, rgb(196 28 28));

    .ocs-gram-meter__icon--danger svg {
      color: var(--color-error, rgb(196 28 28));
    }
  }
/* END_SNIPPET:ocs-gram-meter */

/* START_SNIPPET:ocs-product-information-content (INDEX:294) */
.product-information {
    gap: var(--gap) 0;
  }

  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile: reorder grid children so mobile header comes first, then media, then details */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
      order: 1;
      /* Merchant-requested 16px gap below ocs-plant-type on mobile (defect-113):
         set on the media block itself (below, the last item in
         .ocs-mobile-header) rather than as a margin on that neighbour.
         .product-information__grid has no row-gap of its own (only
         grid-template-columns is subgridded, not rows), so this is the full,
         exact 16px rather than stacking on top of another gap.

         Top only: the bottom side already gets its own, larger, pre-existing
         gap from product-details' block padding-block-start (24px, set in
         templates/product.json on the product-details group — applies
         before the first *visible* child regardless of the mobile duplicate
         items hidden above it). A bottom margin here would stack on top of
         that and make the gallery-to-badges gap 40px instead of 24px. */
      margin-block-start: 16px;
    }

    .product-details {
      grid-column: 2 / 3;
      order: 2;
    }

    .ocs-mobile-header {
      --padding-md: 15px;
      grid-column: 1 / -1;
      order: 0;
      padding-inline: var(--padding-md);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .ocs-mobile-header__badges {
      margin-inline-start: 8px;
    }

    /* Hide items in product-details that are duplicated in mobile header */
    .product-information-ocs .product-details .ocs-vendor,
    .product-information-ocs .product-details .text-block:has(h1),
    .product-information-ocs .product-details .ocs-plant-type,
    .product-information-ocs .product-details .ocs-badges-block,
    .product-information-ocs .product-details .ocs-badges {
      display: none;
    }
  }

  /* Desktop: hide mobile header */
  @media screen and (min-width: 750px) {
    .ocs-mobile-header {
      display: none;
    }

    .product-information__grid {
      grid-column: 2;
    }

    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    .product-information__grid:not(.product-information--media-none) {
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

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

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

  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    max-width: var(--sidebar-width);
  }

  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:ocs-product-information-content */

/* START_SNIPPET:ocs-product-media-gallery-content (INDEX:295) */
/* OCS click zoom — overlay approach
   * All overlay element styles are set via inline JS in ocs-gallery-zoom.js
   * to avoid conflicts with base.css rules on `.product-media-container img`
   * (aspect-ratio: inherit; object-fit: contain). Only cursor + overflow live
   * here since they affect the container itself, not the injected overlay. */
  .product-media-container--ocs-zoomable {
    overflow: hidden;
    cursor: zoom-in;
  }

  .product-media-container--ocs-zoomable.ocs-zoomed {
    cursor: zoom-out;

    @media screen and (max-width: 749px) {
      touch-action: none;
    }
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }

    /* Dots normally render on top of the image (controls-on-media) and rely
       on mix-blend-mode: difference for contrast instead of a background —
       that overlaps the photo and shows colour artifacts (green) over
       saturated product photography as slides change (defect-113). Mobile-
       only: match the off-media dots already used by the home page product
       carousel (ocs-home-collection-blocks.liquid) — take the dots out of
       the on-media overlay and give them their own solid colour instead of
       the blend-mode trick. The 16px gap the merchant asked for is a
       separate fix, on .product-information__media in
       ocs-product-information-content.liquid — the dots themselves should
       sit right against the image.

       Scoped via the <media-gallery> wrapper (unique to the product gallery,
       not used by any other slideshow) rather than .media-gallery__mobile-
       controls: desktop and mobile pagination styles both resolve to 'dots'
       on the live PDP config, so only a single shared slideshow-controls
       instance renders — that class is never applied in that case. */
    media-gallery slideshow-controls[controls-on-media]:has(.slideshow-controls__dots) {
      position: static;
      /* slideshow-controls has min-height: var(--minimum-touch-target) (~44px)
         for its on-media absolute layout, which was invisible while it
         overlapped the image. Off-media it becomes a big empty flex row with
         the dots pill centred inside it — kill it so the row hugs the dots. */
      min-height: 0;
      mix-blend-mode: normal;
    }

    /* --size (dot diameter) is never given a default in slideshow-controls.liquid
       itself, only set per-usage — the home page carousel sets 13px
       (ocs-home-collection-blocks.liquid), match it here. */
    media-gallery .slideshow-controls__dots {
      --size: 13px;
      padding-block: 0;
    }

    media-gallery .slideshow-controls__dots button::after {
      background-color: #fff;
      box-shadow: inset 0 0 0 1px #a5a5a5;
    }

    media-gallery .slideshow-controls__dots button[aria-selected='true']::after {
      background-color: #f4f4f4;
      box-shadow: inset 0 0 0 1px #a5a5a5;
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }
/* END_SNIPPET:ocs-product-media-gallery-content */

/* START_SNIPPET:ocs-upsell-variant-picker (INDEX:297) */
.ocs-upsell-picker {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-block: var(--gap-2xs);
  }

  .ocs-upsell-picker__option {
    cursor: pointer;
  }

  .ocs-upsell-picker__option--oos {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
  }

  .ocs-upsell-picker__label {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    border: var(--style-border-width) solid var(--color-border);
    border-radius: 3px;
    line-height: 1.4;
    white-space: nowrap;
    background-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .ocs-upsell-picker__radio:checked + .ocs-upsell-picker__label {
    background-color: var(--color-foreground);
    color: var(--color-background);
    border-color: var(--color-foreground);
  }

  .ocs-upsell-picker__radio:focus-visible + .ocs-upsell-picker__label {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }
/* END_SNIPPET:ocs-upsell-variant-picker */

/* START_SNIPPET:overlay (INDEX:300) */
.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:301) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:predictive-search-products-list (INDEX:303) */
.predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }
/* END_SNIPPET:predictive-search-products-list */

/* START_SNIPPET:predictive-search-resource-carousel (INDEX:304) */
.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:305) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }

  .facets__inputs-wrapper.price-facet__inputs-wrapper {
    flex-wrap: nowrap;
  }

  .price-facet__field {
    width: 50%;
    flex-grow: 0;
  }

  @container (max-width: 199px) {
    .facets__inputs-wrapper.price-facet__inputs-wrapper {
      flex-wrap: wrap;
      width: 100%;
    }

    .price-facet__inputs-wrapper .price-facet__field {
      width: 100%;
    }
  }

  .facets .facets__inputs-wrapper.price-facet__inputs-wrapper {
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  .facets--horizontal .facets__panel-content:has(.price-facet) {
    min-width: 360px;
  }

  .facets--horizontal .facets__inputs-wrapper.price-facet__inputs-wrapper {
    @media screen and (min-width: 750px) {
      padding: calc(var(--padding-md) + var(--style-border-width-inputs));
    }
  }

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

  .facets--horizontal .price-facet__highest-price {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .field__label.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:307) */
product-card-link,
  :not(product-card-link) product-card {
    width: 100%;
  }

  .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:308) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

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

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

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

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

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

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

  /* 40px is what this rendered before h2 went to the production 26/55 ladder, and
     it is held here on purpose. ocs.ca has no empty-collection state to copy — the
     legacy theme's only nearby rule, `.search__collections h2`, is for the
     collection links in search results, not a no-results message. Rather than
     invent a size, this keeps the empty state exactly as UAT saw it. Worth a
     merchant decision later; it is not a parity finding either way. */
  .main-collection-grid__empty-title {
    margin: 0;
    font-size: 40px;
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:309) */
.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 .placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    max-width: var(--sidebar-width);
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content (INDEX:310) */
.dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:311) */
.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;
      }
    }
  }

  ::view-transition-old(gallery-item),
  ::view-transition-new(gallery-item) {
    animation-duration: 0ms;
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:312) */
.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);
    }
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:resource-card (INDEX:313) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:314) */
.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:320) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

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

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

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

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  .predictive-search-results__inner {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);
    --list-item-padding-block: var(--padding-sm);

    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:321) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  .header__column--center .search-action {
    width: auto;
    flex-grow: 1;
  }

  :is(.header__column--left, .header__column--center) .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:322) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:slideshow-controls (INDEX:328) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      /* --size: 0.56rem; */

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow (INDEX:330) */
slideshow-slides {
    align-items: var(--slideshow-align-items, normal);
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  /*
    When auto-hide-controls is active and the dots control (direct child slideshow-controls)
    is hidden (meaning nothing to scroll), also hide the arrows.
    > on slideshow-controls ensures we only match the direct-child dots control, not nested
    slideshows. slideshow-arrows is a descendant (inside slideshow-container), so the
    un-qualified descendant combinator correctly reaches it.
  */
  slideshow-component[auto-hide-controls]:has(> slideshow-controls[hidden]) slideshow-arrows {
    display: none;
  }
/* END_SNIPPET:slideshow */

/* START_SNIPPET:sorting (INDEX:331) */
.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:341) */
: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:351) */
.variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  @media (prefers-reduced-motion: no-preference) {
    .variant-option__button-label,
    .variant-option__select-wrapper,
    .variant-option__button-label::before,
    .variant-option__button-label::after,
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill,
    .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }

    .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
      transition-property: clip-path;
    }

    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label::after {
      transition-property: clip-path;
    }

    .variant-option__button-label::before {
      transition-property: border-color;
    }

    .variant-option__select-wrapper,
    .variant-option__button-label {
      transition-property: background-color, border-color, color;
    }
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    cursor: pointer;
    display: flex;
    flex: 0 0 3.25em;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    overflow: clip;
    justify-content: center;
    min-height: 3.25em;
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);

    &:hover,
    &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

    /* so instead use the layered background image trick */
    &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
      border-width: 0;
    }

    /* ::after/::before act as a fake border for the button style variant */

    /* ::after is the unavailable variant border that clips in */
    &:not(.variant-option__button-label--has-swatch)::before,
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: var(--options-border-width) solid var(--color-selected-variant-border);
      border-radius: inherit;
      pointer-events: none;
      z-index: 2;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
    }

    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
      inset: 0;
    }

    &:not(.variant-option__button-label--has-swatch)::before {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(0 0 0 0);
      border-color: var(--color-variant-border);
      inset: calc(var(--options-border-width) * -1);
    }

    &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
      border-color: var(--color-selected-variant-border);
    }

    /* setting left/right accounts for variant buttons of different widths */
    &:not(:has(:checked)):has(~ label > :checked),
    &:has(:checked):has(~ label > [data-previous-checked='true']) {
      .variant-option__button-label__pill {
        right: 0;
        left: unset;
      }
    }

    &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
    &:has(:checked) ~ label {
      .variant-option__button-label__pill {
        left: 0;
        right: unset;
      }
    }

    &:not(:has(:checked)):has(~ label > :checked) {
      --pill-offset: calc(100% + 1px);
    }

    &:has(:checked) ~ label {
      --pill-offset: calc(-100% - 1px);
    }

    &:has([data-current-checked='true']):first-of-type
      ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
    &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
      --clip: 0 0 0 100%;
    }

    &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
        .variant-option__button-label--has-swatch
      ),
    &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
      --clip: 0 100% 0 0;
    }

    &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  /* wrap around only for 3 or more variants in a row */

  /* the more complex selector rules here produce the wrap around effect for first/last variants */
  .variant-option--buttons:has(:nth-of-type(3)) {
    .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
      --pill-offset: calc(100% + 1px);
    }

    .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
        ~ label:last-of-type > :checked
      ) {
      --pill-offset: calc(-100% - 1px);
    }
  }

  .variant-option__button-label__pill {
    background: var(--color-selected-variant-background);
    position: absolute;
    top: calc(var(--options-border-width) * -1);
    bottom: calc(var(--options-border-width) * -1);
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    transform: translateX(var(--pill-offset, 0));
  }

  .variant-option__button-label__text {
    pointer-events: none;
    text-align: start;
    text-wrap: auto;
    z-index: 2;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);

    padding: 0;
    border: none;
    display: block;
    flex-basis: auto;
    min-height: auto;
  }

  .variant-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label:has(:checked):hover {
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);

    .variant-option__button-label__pill {
      background-color: var(--color-selected-variant-hover-background);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

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

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
    outline-offset: var(--focus-outline-offset);
  }

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

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-foreground);

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch,
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .swatch::after,
    .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;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    background-color: inherit;
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .variant-option__button-label input,
  .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;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .variant-option__button-label svg {
    position: absolute;
    left: var(--options-border-width);
    top: var(--options-border-width);
    height: calc(100% - (var(--options-border-width) * 2));
    width: calc(100% - (var(--options-border-width) * 2));
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
    stroke: var(--color-variant-border);

    line {
      stroke-width: var(--options-border-width);
    }

    line:last-of-type {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
      stroke: rgb(var(--color-variant-text-rgb) / 1);
    }
  }

  .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--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:video (INDEX:353) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:354) */
.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 */