/** Shopify CDN: Minification failed

Line 3705:39 Unterminated string token
Line 3724:39 Unterminated string token
Line 3846:39 Unterminated string token
Line 3868:39 Unterminated string token

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:affiliate-signup (INDEX:6) */
.affiliate-signup__heading,
  .affiliate-signup__subheading {
    text-align: center;
  }

  .affiliate-signup__subheading {
    margin-inline: auto;
    max-width: 60ch;
  }

  .affiliate-signup__embed {
    position: relative;
  }

  .affiliate-signup__embed iframe {
    display: block;
    width: 100%;
    border: 0;
  }

  .affiliate-signup__notice {
    text-align: center;
  }
/* END_SECTION:affiliate-signup */

/* START_SECTION:bag-finder (INDEX:7) */
.bag-finder {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Header */
  .bag-finder__header {
    text-align: center;
    padding-inline: var(--util-page-margin);
  }

  .bag-finder__heading {
    font-family: var(--font-heading-family, inherit);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 1rem;
    color: rgb(var(--color-foreground-rgb));
  }

  .bag-finder__copy {
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
    color: rgb(var(--color-foreground-rgb));
  }

  .bag-finder__mobile-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 12px;
    font-weight: 400;
    margin: 1rem 0 0;
  }

  @media (min-width: 750px) {
    .bag-finder__mobile-hint {
      display: none;
    }
  }

  /* Filter Label */
  .bag-finder__filter-label {
    font-family: var(--font-heading--family);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1.5rem;
    color: rgb(var(--color-foreground-rgb));
  }

  /* Filter Buttons */
  .bag-finder__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-inline: var(--util-page-margin);
  }

  @media (min-width: 750px) {
    .bag-finder__filters {
      gap: 0.75rem;
      margin-bottom: 3rem;
    }
  }

  .bag-finder__filter-btn {
    font-family: "Red Hat Display", sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    line-height: 17.5px;
    padding: 0.75rem 1rem;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-radius 0.2s ease;
    background-color: transparent;
    color: rgb(var(--color-foreground-rgb));
  }

  .bag-finder__filter-btn:hover {
    opacity: 0.7;
  }

  .bag-finder__filter-btn[aria-pressed="true"] {
    background-color: rgb(var(--color-foreground-rgb));
    color: rgb(var(--color-background-rgb, 255 255 255));
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  @media (max-width: 749px) {
    .bag-finder__filters {
      margin-bottom: 0.75rem;
    }

    .bag-finder__filter-btn {
      padding: 10px;
      margin-bottom: 20px;
      margin-left: 10px;
    }

    .bag-finder__btn {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.6px;
      font-family: "Red Hat Display", sans-serif;
    }

    .bag-finder__card-specs,
    .bag-finder__card-specs p,
    .bag-finder__card-specs strong,
    .bag-finder__card-specs b {
      font-size: 15px;
      font-weight: 400;
      font-family: "Mada", sans-serif;
      letter-spacing: 0.6px;
      line-height: 20px;
    }

    .bag-finder__card-inner {
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      border: 1px solid rgb(229, 231, 235);
    }
  }

  @media (min-width: 750px) {
    .bag-finder__filter-btn {
      padding: 0.875rem 1.125rem;
    }
  }

  /* Carousel */
  .bag-finder__carousel {
    width: 100%;
  }

  .bag-finder__slideshow {
    --slide-size: calc((100% - (var(--columns-gap) * (var(--column-count) - 1))) / var(--column-count));
  }

  .bag-finder__slideshow slideshow-slides {
    gap: var(--columns-gap, 16px);
  }

  @media screen and (max-width: 749px) {
    .bag-finder__slideshow {
      --slide-size: 85cqw;
    }
  }

  .bag-finder__slide {
    flex: 0 0 var(--slide-size);
    scroll-snap-align: start;
  }

  /* Card */
  .bag-finder__card {
    height: 100%;
  }

  .bag-finder__card[hidden] {
    display: none !important;
  }

  .bag-finder__card-inner {
    background-color: rgb(var(--color-background-rgb, 255 255 255));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .bag-finder__card-header {
    padding: 1rem;
    text-align: center;
  }

  .bag-finder__card-title {
    font-family: var(--font-heading-family, inherit);
    font-size: 1.5rem;
    font-weight: 900;
    margin: 0;
    color: rgb(var(--color-foreground-rgb));
    text-transform: uppercase;
  }

  .bag-finder__card-image {
    padding: 0 1rem;
  }

  .bag-finder__card-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .bag-finder__card-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Info Row */
  .bag-finder__card-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .bag-finder__card-clubs {
    color: rgb(var(--color-foreground-rgb));
  }

  .bag-finder__card-clubs-label {
    display: block;
    font-size: 1.125rem;
    font-weight: normal;
  }

  .bag-finder__card-clubs-value {
    display: block;
    font-weight: 800;
    font-size: 1.125rem;
  }

  .bag-finder__card-price {
    text-align: right;
  }

  .bag-finder__card-compare-price {
    display: block;
    font-size: 1.125rem;
    text-decoration: line-through;
    color: rgb(var(--color-foreground-rgb));
  }

  .bag-finder__card-sale-price {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-accent, #5ec369);
  }

  /* Icons */
  .bag-finder__card-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 1rem 0;
    margin: 0.5rem 0;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
  }

  .bag-finder__icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 66px;
    padding: 0.25rem;
  }

  .bag-finder__icon-item img {
    max-width: 40px;
    height: auto;
  }

  .bag-finder__icon-label {
    font-family: var(--font-heading-family, inherit);
    font-size: 0.8125rem;
    font-weight: normal;
    text-align: center;
    margin-top: 0.5rem;
    line-height: 1.2;
    color: rgb(var(--color-foreground-rgb));
  }

  @media screen and (max-width: 749px) {
    .bag-finder__icon-label {
      font-family: "Red Hat Display", sans-serif;
      font-size: 12px;
      font-weight: 800;
    }
  }

  /* Specs */
  .bag-finder__card-specs,
  .bag-finder__card-specs p,
  .bag-finder__card-specs strong,
  .bag-finder__card-specs b {
    font-size: 1rem;
    font-weight: 400 !important;
    line-height: 1.4;
  }

  .bag-finder__card-specs {
    margin-bottom: 1rem;
    flex: 1;
  }

  .bag-finder__card-specs p {
    margin: 0;
  }

  .bag-finder__card-specs br {
    display: block;
    content: "";
    margin: 0;
  }

  /* CTA Button */
  .bag-finder__card-cta {
    margin-top: auto;
  }

  .bag-finder__btn {
    display: block;
    width: 100%;
    padding: 1rem 1.5rem;
    font-family: var(--font-heading-family, inherit);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .bag-finder__btn:hover {
    opacity: 0.85;
  }

  .bag-finder__btn--primary {
    background-color: rgb(var(--color-foreground-rgb));
    color: rgb(var(--color-background-rgb, 255 255 255));
  }

  .bag-finder__btn--notify {
    background-color: #f97316;
    color: #fff;
  }

  /* Swatches */
  .bag-finder__card-swatches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 1rem;
    min-height: 20px;
  }

  .bag-finder__swatch {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid transparent;
    overflow: hidden;
    transition: border-color 0.2s ease;
  }

  .bag-finder__swatch:hover {
    border-color: #f97316;
  }

  .bag-finder__swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .bag-finder__swatch--image {
    background-size: cover;
    background-position: center;
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
  }

  /* Empty State */
  .bag-finder__empty {
    padding: 2rem;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  /* Slideshow arrows positioning */
  .bag-finder slideshow-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
  }

  .bag-finder slideshow-arrows button {
    pointer-events: auto;
  }

  .bag-finder slideshow-container {
    position: relative;
  }

  /* Dots positioning & styling (match staging Swiper bullets) */
  .bag-finder slideshow-controls {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
    mix-blend-mode: normal;
  }

  .bag-finder .slideshow-controls__dots {
    gap: 2rem;
    background: transparent;
  }

  .bag-finder .slideshow-controls__dots button {
    --size: 1.25rem;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background-color: rgb(var(--color-foreground-rgb));
    opacity: 0.3;
    transition: opacity 0.2s ease;
  }

  .bag-finder .slideshow-controls__dots button[aria-selected="true"] {
    opacity: 1;
  }
/* END_SECTION:bag-finder */

/* START_SECTION:bundle-accordions (INDEX:9) */
.bundle-accordions-section {
    max-width: 1380px;
    margin: 0 auto;
    padding: 40px 20px;
  }

  .bundle-accordions-section__inner {
    max-width: 800px;
    margin: 0 auto;
  }

  .bundle-accordions-section__heading {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 24px;
  }

  .bundle-accordion {
    border-bottom: 1px solid var(--color-border, #e5e5e5);
  }

  .bundle-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

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

  .bundle-accordion__summary::marker {
    display: none;
    content: '';
  }

  .bundle-accordion__icon {
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }

  .bundle-accordion[open] .bundle-accordion__icon {
    transform: rotate(180deg);
  }

  .bundle-accordion__content {
    padding: 0 0 16px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-foreground-muted, #616161);
  }

  .bundle-accordion__content p {
    margin: 0 0 8px;
  }

  .bundle-accordion__content p:last-child {
    margin-bottom: 0;
  }
/* END_SECTION:bundle-accordions */

/* START_SECTION:bundle-header (INDEX:11) */
.bundle-header {
    /* Logo scale against the Figma lockup, which is 220x61 on desktop and
       fills its cell on mobile. Kept as a factor so the design's own numbers
       stay visible and both breakpoints move together. */
    --bundle-header-logo-scale: 0.62;

    /* Matches the main site header, which this bar replaces on bundle layouts.
       The main header publishes its own height as --header-height, but header.js
       sets that by measuring the header element — and there is no main header on
       this layout to measure, so the value is mirrored here instead.

       min- rather than a fixed block-size: the labels deliberately wrap below
       roughly 1200px (see .bundle-header__label), and a fixed height would clip
       the second line instead of letting the bar grow. */
    --bundle-header-height: 53px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-block-size: var(--bundle-header-height);
    padding-inline: 50px;
    /* The stacked icon + label is 45px on its own, so the 53px bar has no room
       for block padding; the flex centering does the vertical spacing. */
    padding-block: 0;
    background: #f8f5ed;
  }

  .bundle-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    max-inline-size: 1340px;
  }

  /* Each pair takes an equal share of the row, so the logo stays centred
     however wide the labels run. */
  .bundle-header__group {
    display: flex;
    flex: 1 0 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-inline-size: 0;
    padding-inline: 16px;
  }

  .bundle-header__item {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-inline-size: 0;
  }

  /* Height normalised; each icon keeps its own width and aspect ratio. */
  .bundle-header__icon svg {
    display: block;
    block-size: 21px;
    inline-size: auto;
  }

  .bundle-header__label {
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.84px;
    text-align: center;
    text-transform: uppercase;
    /* Deliberately NOT nowrap. The Figma is drawn at 1440 where every label
       fits on one line; below roughly 1200 the longest ("FREE SHIPPING $300+")
       exceeds its third of the row and, held on one line, overlaps its
       neighbour. Wrapping is the graceful failure. */
    text-wrap: balance;
    color: #1c404c;
  }

  .bundle-header__logo {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: center;
    min-inline-size: 0;
    padding-inline: 8px;
    text-decoration: none;
  }

  .bundle-header__logo-img {
    inline-size: auto;
    block-size: auto;
    max-inline-size: calc(220px * var(--bundle-header-logo-scale));
    max-block-size: calc(61px * var(--bundle-header-logo-scale));
    object-fit: contain;
  }

  .bundle-header__logo-text {
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: 18px;
    color: #1c404c;
  }

  /* Mobile (Figma 268:17 at 390 wide — the frame is responsive, so the same
     node carries both states). The 2 | logo | 2 row is KEPT; only the metrics
     change. Labels drop to 10px/14px at 0.6px tracking and wrap inside their
     sixth of the row, the bar loses its inline gutter and max-width, and the
     logo fills its cell rather than being capped. Icons keep the shared size. */
  @media screen and (max-width: 749px) {
    .bundle-header {
      padding-inline: 16px;
    }

    .bundle-header__inner {
      max-inline-size: none;
    }

    .bundle-header__group {
      padding-inline: 0;
    }

    .bundle-header__label {
      font-size: 10px;
      line-height: 14px;
      letter-spacing: 0.6px;
    }

    .bundle-header__logo-img {
      /* Fills its cell in the design; scaled by the same factor as desktop. */
      inline-size: calc(100% * var(--bundle-header-logo-scale));
      max-inline-size: none;
      max-block-size: none;
    }
  }
/* END_SECTION:bundle-header */

/* START_SECTION:bundle-items (INDEX:12) */
.bundle-items {
    display: block;
    background-color: var(--bundle-items-bg, #ffffff);
    width: 100%;
  }

  .bundle-items__header {
    text-align: center;
    padding: 0 16px;
  }

  .bundle-items__heading {
    font-family: var(--font-heading--family);
    font-weight: 900;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1c404c;
    margin: 0 0 20px;
  }

  @media screen and (min-width: 750px) {
    .bundle-items__heading {
      font-size: 32px;
    }
  }

  /* Tabs */
  .bundle-items__tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 0 16px;
  }

  .bundle-items__tab {
    padding: 10px 24px;
    border: none;
    border-radius: 10px;
    background-color: #f5f5f5;
    color: #102983;
    font-family: var(--font-heading--family);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
  }

  @media screen and (min-width: 750px) {
    .bundle-items__tab {
      font-size: 20px;
      padding: 12px 32px;
    }
  }

  .bundle-items__tab--active {
    background-color: #ffec00;
    color: #102983;
  }

  /* Carousel */
  .bundle-items__carousel {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .bundle-items__viewport {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    scrollbar-width: none;
    padding: 8px 0;
    width: 100%;
  }

  .bundle-items__viewport::-webkit-scrollbar {
    display: none;
  }

  .bundle-items__card {
    flex: 0 0 calc(100% - 32px);
    max-width: 300px;
    scroll-snap-align: start;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  @media screen and (min-width: 750px) {
    .bundle-items__card {
      flex: 0 0 calc(25% - 12px);
    }
  }

  .bundle-items__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }

  /* Badge */
  .bundle-items__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #e20d10;
    color: #ffffff;
    font-family: var(--font-heading--family);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
    letter-spacing: 0.03em;
  }

  /* Card Image */
  .bundle-items__card-image {
    padding: 16px;
    text-align: center;
    background: #f8f8f8;
  }

  .bundle-items__card-image img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
  }

  /* Card Info */
  .bundle-items__card-info {
    padding: 16px;
  }

  .bundle-items__category {
    display: block;
    font-family: var(--font-heading--family);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    margin-bottom: 4px;
  }

  .bundle-items__rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
  }

  .bundle-items__review-count {
    font-size: 12px;
    color: #999;
    margin-left: 4px;
  }

  .bundle-items__card-title {
    font-family: var(--font-heading--family);
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1c404c;
    margin: 4px 0 8px;
  }

  .bundle-items__card-pricing {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
  }

  .bundle-items__card-price {
    font-family: var(--font-heading--family);
    font-size: 16px;
    font-weight: 700;
    color: #48ba25;
  }

  .bundle-items__card-compare {
    font-size: 13px;
    color: #616161;
    text-decoration: line-through;
  }

  .bundle-items__card-specs {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
  }

  .bundle-items__spec {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #666;
  }

  .bundle-items__includes,
  .bundle-items__best-for {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
    line-height: 1.4;
  }

  .bundle-items__includes ul {
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
  }

  .bundle-items__includes li::before {
    content: "\2713 ";
    color: #48ba25;
  }

  /* CTA Button */
  .bundle-items__cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    background-color: #286834;
    color: #ffffff;
    font-family: var(--font-heading--family);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    margin-top: 12px;
    transition: background-color 0.2s;
    letter-spacing: 0.05em;
  }

  .bundle-items__cta:hover {
    background-color: #e20d10;
    color: #ffffff;
  }

  /* Arrows */
  .bundle-items__arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
  }

  .bundle-items__arrow:hover {
    background: rgba(0, 0, 0, 0.1);
  }

  @media screen and (max-width: 749px) {
    .bundle-items__arrow {
      display: none;
    }
  }

  /* Dots */
  .bundle-items__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 0;
  }

  .bundle-items__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #d9d9d9;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
  }

  .bundle-items__dot--active {
    background: #1c404c;
  }
/* END_SECTION:bundle-items */

/* START_SECTION:bundle-reviews (INDEX:13) */
.bundle-reviews-section {
    width: 100%;
    max-width: 1380px;
    margin-inline: auto;
  }

  .bundle-reviews-section__inner {
    padding: 0 20px 40px;
  }

  .bundle-reviews-section__heading {
    margin: 0 0 16px;
    font-family: var(--bb-font-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bb-text);
  }

  .bundle-reviews-widget {
    display: block;
    min-block-size: 200px;
  }

  .bundle-reviews-widget .jdgm-review-widget {
    max-width: 1200px;
    margin-inline: auto;
  }

  .bundle-reviews-widget[data-loading] {
    opacity: 0.5;
    transition: opacity 0.15s ease;
  }

  .bundle-reviews-section[data-hide-desktop] {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .bundle-reviews-section__inner {
      padding: 0 16px 32px;
    }
    .bundle-reviews-section[data-hide-mobile] {
      display: none;
    }
    .bundle-reviews-section[data-hide-desktop] {
      display: block;
    }
  }
/* END_SECTION:bundle-reviews */

/* START_SECTION:c-faqs-page (INDEX:14) */
/* -------------------------------------------------------
   FAQ PAGE — Scoped styles
   ------------------------------------------------------- */

/* ---------- Hero ---------- */
.faqs-hero__image img {
  display: block;
  width: 100%;
  height: auto;
}
.faqs-hero__image--mobile { display: block; }
.faqs-hero__image--desktop { display: none; }

@media (min-width: 990px) {
  .faqs-hero__image--mobile { display: none; }
  .faqs-hero__image--desktop { display: block; }
}

.faqs-hero {
  background: #f2f2f2;
  padding: 3rem 1.5rem;
  text-align: center;
}
.faqs-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.faqs-hero__heading {
  color: var(--color-foreground-heading);
  font-family: var(--font-heading--family, sans-serif);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}
.faqs-hero__subheading {
  color: var(--color-foreground-heading);
  font-size: 1.25rem;
  margin: 0;
}
.faqs-hero__hint {
  display: block;
  margin-top: 1rem;
  color: #6b7280;
  font-size: 1rem;
}

@media (min-width: 990px) {
  .faqs-hero { padding: 3rem 2rem; }
  .faqs-hero__heading { font-size: 3.75rem; }
  .faqs-hero__subheading { font-size: 1.875rem; }
  .faqs-hero__hint { display: none; }
}

/* ---------- Main grid ---------- */
/* minmax(0, …) keeps the tracks from being blown out by their content's
   min-content width, which would push the whole page wider than the
   viewport (mobile browsers respond by zooming the entire page out). */
.faqs-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

@media (min-width: 990px) {
  .faqs-main {
    grid-template-columns: minmax(0, 2fr) minmax(0, 4fr);
    padding: 5rem 2rem 8rem;
    gap: 3rem;
  }
}

/* ---------- Sidebar ---------- */
.faqs-sidebar {
  min-width: 0;
  background: #EEEEEE;
  padding: 3rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  order: 1;
}
@media (min-width: 990px) {
  .faqs-sidebar {
    order: 0;
    padding: 5rem 1.5rem;
  }
}

.faqs-sidebar__heading {
  color: var(--color-foreground-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.75rem;
  margin: 0;
}
.faqs-sidebar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.faqs-sidebar__item img {
  width: 40px;
  height: 40px;
}
.faqs-sidebar__link,
.faqs-sidebar__text {
  color: var(--color-foreground);
  font-size: 1.25rem;
  margin: 0;
  text-decoration: none;
}
.faqs-sidebar__link:hover {
  text-decoration: underline;
}

/* ---------- FAQs content column ---------- */
.faqs-content {
  min-width: 0;
  order: -1;
}
@media (min-width: 990px) {
  .faqs-content {
    order: 0;
  }
}

/* ---------- Tabs ---------- */
/* Mobile: auto-fit tracks wrap the categories onto as many rows as the
   column needs, so every category stays visible without a sideways scroll
   that phones can't discover. Desktop keeps the original single-row
   scroller (see the 990px block below). */
.faqs-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--color-foreground);
}
@media (min-width: 990px) {
  .faqs-tabs {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    padding-top: 0.5rem;
  }
}

.faqs-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  min-width: 0;
  /* Overrides the theme-wide `button { height: 55px }` below 750px, which
     otherwise squeezes the icon and label out of the tab. */
  height: auto;
  padding: 0.875rem 0.5rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  background: #e5e7eb;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
@media (min-width: 990px) {
  .faqs-tab {
    justify-content: center;
    min-width: 120px;
    flex-shrink: 0;
    padding: 1rem 1.25rem;
  }
}
.faqs-tab:hover {
  background: #d1dfe4;
}
.faqs-tab:hover .faqs-tab__icon--default { display: none; }
.faqs-tab:hover .faqs-tab__icon--active  { display: block; }

/* Active state */
.faqs-tab.active {
  background: var(--color-foreground);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.faqs-tab.active .faqs-tab__label { color: #fff; }
.faqs-tab.active .faqs-tab__icon--default { display: none; }
.faqs-tab.active .faqs-tab__icon--active  { display: block; }

/* Icon toggling */
.faqs-tab__icons {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
}
.faqs-tab__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.faqs-tab__icon--active {
  display: none;
  position: absolute;
  inset: 0;
}
.faqs-tab__icon--default {
  display: block;
}

/* Tab label */
.faqs-tab__label {
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  color: var(--color-foreground);
  line-height: 1.2;
  text-align: center;
  overflow-wrap: break-word;
}
@media (min-width: 990px) {
  .faqs-tab__label { font-size: 1rem; }
}

/* ---------- Accordion ---------- */
.faqs-questions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.faqs-accordion {
  background: #EEEEEE;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  overflow: hidden;
}
.faqs-accordion[hidden] {
  display: none;
}

.faqs-accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 1.25rem;
  list-style: none;
}
@media (min-width: 990px) {
  .faqs-accordion__header { padding: 1.5rem 2rem; }
}
.faqs-accordion__header::-webkit-details-marker { display: none; }
.faqs-accordion__header::marker { display: none; content: ''; }

.faqs-accordion__question {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-foreground);
  flex: 1;
  padding-right: 1rem;
}
@media (min-width: 990px) {
  .faqs-accordion__question { font-size: 1.5rem; }
}

.faqs-accordion__chevron {
  width: 28px;
  height: 28px;
  color: var(--color-foreground);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.faqs-accordion[open] .faqs-accordion__chevron {
  transform: rotate(180deg);
}

.faqs-accordion__answer {
  padding: 0 1.25rem 1.25rem;
  font-size: 1rem;
  color: #1C404C;
  line-height: 1.6;
  overflow-wrap: break-word;
}
@media (min-width: 990px) {
  .faqs-accordion__answer {
    padding: 0 2rem 1.5rem;
    font-size: 1.25rem;
  }
}

/* ---------- CTA ---------- */
.faqs-cta {
  text-align: center;
  margin-top: 3rem;
}
.faqs-cta__button {
  display: inline-block;
  background: var(--color-foreground);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 1rem 3rem;
  border-radius: 4px;
  transition: opacity 0.2s;
}
.faqs-cta__button:hover {
  opacity: 0.85;
}
/* END_SECTION:c-faqs-page */

/* START_SECTION:c-main-article (INDEX:20) */
/* -------------------------------------------------------
   ARTICLE PAGE — Staging 1:1 rebuild (scoped styles)
   ------------------------------------------------------- */

.article-template {
  font-family: var(--font-paragraph--family, sans-serif);
  color: var(--vogue-fg, #1C404D);
}

/* ---------- Hero image ---------- */
.article-template__hero-container {
  max-width: 1200px;
  margin: 0 auto;
}

.article-template__hero {
  overflow: hidden;
}

.article-template__hero img {
  display: block;
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: 0;
}

/* ---------- Header / title ---------- */
.article-template__header {
  max-width: 72.6rem;
  margin: 4.4rem auto 2rem;
  padding: 0 1.5rem;
  line-height: 1.2;
}

@media screen and (min-width: 750px) {
  .article-template__header {
    margin-top: 5rem;
    padding: 0;
  }
}

.article-template__title {
  font-family: var(--font-heading--family, serif);
  font-size: 2.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.15;
}

@media screen and (min-width: 750px) {
  .article-template__title {
    font-size: 3.2rem;
  }
}

.article-template__title:not(:only-child) {
  margin-bottom: 1rem;
}

.article-template__meta {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
}

.article-template__meta + .article-template__meta::before {
  content: "\2022";
  margin: 0 0.6em;
}

/* ---------- Content ---------- */
.article-template__content {
  max-width: 72.6rem;
  margin: 3rem auto;
  padding: 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.75;
}

@media screen and (min-width: 750px) {
  .article-template__content {
    padding: 0;
  }
}

.article-template__content img {
  width: auto;
  height: auto;
  border-radius: 4px;
}

.article-template__content h2,
.article-template__content h3,
.article-template__content h4 {
  font-family: var(--font-heading--family, serif);
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.article-template__content p {
  margin-bottom: 1.2em;
}

.article-template__content a {
  color: var(--vogue-accent, #1C404D);
  text-decoration: underline;
}

.article-template__content ul,
.article-template__content ol {
  padding-left: 1.5em;
  margin-bottom: 1.2em;
}

/* ---------- Share ---------- */
.article-template__share {
  max-width: 72.6rem;
  margin: 2rem auto 3rem;
  padding: 0 1.5rem;
  position: relative;
}

@media screen and (min-width: 750px) {
  .article-template__share {
    padding: 0;
  }
}

.article-template__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: none;
  border: 1px solid #ddd;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: var(--font-paragraph--family, sans-serif);
  color: var(--vogue-fg, #1C404D);
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: border-color 0.2s, background 0.2s;
}

.article-template__share-btn:hover {
  border-color: var(--vogue-accent, #1C404D);
  background: #f8f8f8;
}

.article-template__share-tooltip {
  position: absolute;
  top: -2.5rem;
  left: 0;
  background: #1C404D;
  color: #fff;
  padding: 0.4em 0.8em;
  border-radius: 4px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.article-template__share-tooltip.is-visible {
  opacity: 1;
}

/* ---------- Back to blog ---------- */
.article-template__back {
  max-width: 72.6rem;
  margin: 3rem auto 3.2rem;
  padding: 0 1.5rem;
  text-align: center;
}

@media screen and (min-width: 750px) {
  .article-template__back {
    padding: 0;
  }
}

.article-template__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 1.1rem;
  color: var(--vogue-fg, #1C404D);
  text-decoration: none;
  font-family: var(--font-paragraph--family, sans-serif);
  letter-spacing: 0.03em;
  transition: color 0.2s;
}

.article-template__back-link:hover {
  color: var(--vogue-accent, #1C404D);
  text-decoration: underline;
}

/* ---------- Comments wrapper ---------- */
.article-template__comments-wrapper {
  background: #f5f5f5;
  margin-top: 5rem;
  padding: 2.7rem 1.5rem;
}

@media screen and (min-width: 750px) {
  .article-template__comments-wrapper {
    margin-top: 6rem;
    padding: 3.6rem 0;
  }
}

.article-template__comments-inner {
  max-width: 72.6rem;
  margin: 0 auto;
}

.article-template__comments-inner h2 {
  font-family: var(--font-heading--family, serif);
  margin-top: 0;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Comments list ---------- */
.article-template__comments-list {
  margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
  .article-template__comments-list {
    margin-bottom: 7rem;
  }
}

.article-template__comment {
  background: #fff;
  padding: 2rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.75);
}

@media screen and (min-width: 750px) {
  .article-template__comment {
    padding: 2rem 2.5rem;
  }
}

.article-template__comment p {
  margin: 0 0 1rem;
}

.article-template__comment-footer {
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: 0.85rem;
  color: #888;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-template__comments-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.article-template__comments-pagination a {
  color: var(--vogue-fg, #1C404D);
  text-decoration: none;
  padding: 0.3em 0.6em;
}

.article-template__comments-pagination a:hover,
.article-template__comments-pagination .current {
  border-bottom: 1px solid var(--vogue-fg, #1C404D);
}

/* ---------- Comment form ---------- */
.article-template__form-fields {
  margin-bottom: 1.5rem;
}

.article-template__form-row {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 750px) {
  .article-template__form-row {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.article-template__field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4em;
  color: var(--vogue-fg, #1C404D);
}

.article-template__field input,
.article-template__field textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.8em 1em;
  font-size: 1rem;
  font-family: var(--font-paragraph--family, sans-serif);
  background: #fff;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.article-template__field input:focus,
.article-template__field textarea:focus {
  outline: none;
  border-color: var(--vogue-accent, #1C404D);
}

.article-template__moderated-note {
  font-size: 0.85rem;
  color: #888;
  margin: 1rem 0 1.5rem;
}

.article-template__submit-btn {
  display: inline-block;
  background: var(--vogue-accent, #1C404D);
  color: #fff;
  border: none;
  padding: 0.9em 2em;
  font-size: 0.95rem;
  font-family: var(--font-paragraph--family, sans-serif);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.article-template__submit-btn:hover {
  background: #153339;
}

.article-template__form-message {
  padding: 1em;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.article-template__form-message--error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
}

.article-template__form-message--success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #15803d;
}

.article-template__form-message ul {
  margin: 0.5em 0 0;
  padding-left: 1.2em;
}

/* ---------- First child spacing (no hero) ---------- */
.article-template > *:first-child:not(.article-template__hero-container) {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .article-template > *:first-child:not(.article-template__hero-container) {
    margin-top: 7rem;
  }
}
/* END_SECTION:c-main-article */

/* START_SECTION:c-main-blog (INDEX:21) */
/* -------------------------------------------------------
   MAGAZINE / EDITORIAL BLOG — Scoped styles
   ------------------------------------------------------- */

:root {
  --vogue-bg: #fff;
  --vogue-fg: #1C404D;
  --vogue-accent: #1C404D;
  --vogue-border: #e5e3e0;
  --vogue-card-shadow: 0 12px 32px rgba(40, 40, 40, 0.10);
}

.main-blog {
  background: var(--vogue-bg);
  color: var(--vogue-fg);
  font-family: var(--font-paragraph--family, sans-serif);
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

/* ---------- Headline ---------- */
.main-blog h1 {
  font-family: var(--font-heading--family, serif);
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.8em;
  border-bottom: 1px solid var(--vogue-border);
  padding-bottom: 0.4em;
}

/* ---------- Featured list ---------- */
.featured-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  list-style: none;
  padding: 0 0 2rem 0;
  margin: 0;
  border-bottom: 1px solid var(--vogue-border);
}

.featured-list li {
  font-family: var(--font-heading--family, serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--vogue-accent);
  letter-spacing: 0.03em;
}

.featured-list a {
  color: var(--vogue-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--vogue-border);
  transition: border 0.2s, color 0.2s;
}

.featured-list a:hover {
  color: var(--vogue-accent);
  border-bottom: 1px solid var(--vogue-accent);
}

/* ---------- Layout ---------- */
.blog-container {
  display: flex;
  gap: 3.2rem;
  max-width: 1480px;
  margin: 0 auto;
}

.blog-main {
  flex: 3;
  min-width: 0;
}

.blog-sidebar {
  flex: 1;
  max-width: 350px;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  background: #fff;
  border-left: 1px solid var(--vogue-border);
  padding-left: 2rem;
}

@media (max-width: 1200px) {
  .blog-container { gap: 2rem; }
  .blog-sidebar { max-width: 280px; padding-left: 1rem; }
}

@media (max-width: 949px) {
  .main-blog h1 { font-size: 2.1rem; }
  .blog-container { flex-direction: column; }
  .blog-sidebar {
    position: static;
    max-width: 100%;
    border-left: none;
    padding-left: 0;
  }
}

@media (max-width: 749px) {
  .blog-articles { column-count: 1 !important; }
  .blog-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80vw;
    height: 100vh;
    background: #fff;
    z-index: 200;
    transition: right 0.3s ease;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
    border-left: 1px solid var(--vogue-border);
    padding: 2rem 1.2rem;
  }
  .blog-sidebar.open { right: 0; }
  .sidebar-toggle { display: flex !important; }
}

/* ---------- Sidebar toggle (mobile) ---------- */
.sidebar-toggle {
  display: none;
  align-items: center;
  background: #fff;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--vogue-border);
}

.sidebar-toggle button {
  font-family: var(--font-paragraph--family, sans-serif);
  font-size: 1.25rem;
  background: var(--vogue-accent);
  color: #fff;
  border: none;
  padding: 0.5em 1.2em;
  border-radius: 30px;
  letter-spacing: 0.08em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}

@media (min-width: 750px) {
  .sidebar-toggle { display: none !important; }
  .blog-sidebar {
    position: sticky;
    right: auto !important;
    width: auto !important;
    height: auto;
    background: transparent;
    box-shadow: none;
  }
}

/* ---------- Magazine-style grid ---------- */
.blog-articles {
  column-count: 3;
  column-gap: 2.5rem;
  margin-top: 2.5rem;
  overflow: hidden;
}

@media (max-width: 1200px) { .blog-articles { column-count: 2; } }
@media (max-width: 949px) { .blog-articles { column-count: 1; } }

/* ---------- Card styles ---------- */
.blog-article {
  background: #fff;
  border-radius: 0.25rem;
  box-shadow: var(--vogue-card-shadow);
  margin-bottom: 2.5rem;
  overflow: hidden;
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  transition: transform 0.17s cubic-bezier(.39, .13, .37, 1.32), box-shadow 0.17s;
  border: 1px solid var(--vogue-border);
  padding: 0.55rem;
}

.blog-article:hover {
  transform: translateY(-7px) scale(1.016);
  box-shadow: 0 18px 42px rgba(28, 64, 77, 0.16);
  border-color: var(--vogue-accent);
}

.blog-article img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid var(--vogue-border);
  border-radius: 0;
  margin-bottom: 0.75em;
  transition: filter 0.24s;
}

.blog-article:hover img {
  filter: grayscale(0.14) brightness(0.94);
}

.blog-article h2 {
  font-family: var(--font-heading--family, serif);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0.5em 0 0.1em 0;
  line-height: 1.1;
  font-weight: 600;
}

.blog-article h2 a {
  color: var(--vogue-fg);
  text-decoration: none;
}

.blog-article-meta {
  font-family: var(--font-paragraph--family, sans-serif);
  font-size: 1rem;
  color: #a3a3a3;
  margin-bottom: 0.7em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Sidebar sections ---------- */
.sidebar-section {
  margin-bottom: 2.7rem;
  border-bottom: 1px solid var(--vogue-border);
  padding-bottom: 2rem;
}

.sidebar-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-section h3 {
  font-family: var(--font-heading--family, serif);
  font-size: 1.1rem;
  color: var(--vogue-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  font-weight: 600;
}

.sidebar-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-section li {
  margin-bottom: 0.7em;
  font-family: var(--font-paragraph--family, sans-serif);
  font-size: 1rem;
  color: #343434;
}

.sidebar-section a {
  color: var(--vogue-fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border 0.18s, color 0.18s;
}

.sidebar-section a:hover {
  color: var(--vogue-accent);
  border-bottom: 1px solid var(--vogue-accent);
}

.sidebar-section input[type="search"] {
  font-family: var(--font-paragraph--family, sans-serif);
  border: 1px solid var(--vogue-border);
  border-radius: 1.7em;
  padding: 0.7em 1.2em;
  font-size: 1rem;
  width: 100%;
  background: #faf9f6;
  margin-bottom: 1rem;
  outline: none;
  transition: border-color 0.19s;
  box-sizing: border-box;
}

.sidebar-section input[type="search"]:focus {
  border-color: var(--vogue-accent);
}

/* ---------- Pagination ---------- */
.blog-pagination {
  margin-top: 3rem;
  text-align: center;
}
/* END_SECTION:c-main-blog */

/* START_SECTION:collection-links (INDEX:27) */
collection-links-component {
    --alignment: flex-start;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:comparison-table (INDEX:30) */
/* Core table styles */
  .comparison-table {
    position: relative;
    overflow: visible;
  }

  .comparison-table .page-width {
    margin: 0 auto;
  }

  .comparison-table .section-header {
    text-align: center;
    margin-bottom: 2rem;
  }

  .comparison-table .section-header .title {
    margin: 0 0 0.5rem;
  }

  .comparison-table .section-header .description {
    margin-bottom: 1.75rem;
  }

  @media (min-width: 750px) {
    .comparison-table .section-header .description {
      margin-bottom: 2.5rem;
    }
  }

  .table-header {
    margin-bottom: 2rem;
    text-align: center;
  }

  @media (min-width: 750px) {
    .table-header {
      margin-bottom: 3rem;
    }
  }

  @media (max-width: 749px) {
    .comparison-table .table-responsive {
      padding: 0 1.5rem;
      margin: 0 -1.5rem;
    }
  }

  .comparison-table .table-responsive.card {
    background: var(--color-card);
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .comparison-table .table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    table-layout: fixed;
    line-height: normal;
    border: none;
  }

  @media (min-width: 750px) {
    .comparison-table .table {
      min-width: var(--table-min-width);
    }
  }

  .comparison-table .table caption {
    color: var(--color-foreground);
    opacity: 0.7;
    text-align: center;
    padding: 1rem 0;
  }

  .comparison-table .table > :not(caption) > * > * {
    padding: 1rem;
  }

  .comparison-table .table,
  .comparison-table .table th,
  .comparison-table .table td {
    border: none;
  }

  .comparison-table .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--striped-bg-color);
  }

  /* Header styles */
  .comparison-table .table thead th {
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Helvetica Neue LT Std", sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.4px;
  }

  .comparison-table .table thead th.top-left-cell {
    border: none;
    font-weight: normal;
    width: var(--table-first-col-width);
  }

  .comparison-table .table thead th img {
    max-width: 127px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .comparison-table .table thead th img + span {
    display: block;
    margin-top: 0.5rem;
  }

  .comparison-table .table thead th.highlighted {
    background-color: var(--highlight-bg-color);
    color: var(--highlight-text-color);
  }

  /* Body styles */
  .comparison-table .table tbody th,
  thead tr th.normal-text span {
    text-align: var(--first-col-text-align);
    font-weight: 700;
    width: var(--table-first-col-width);
    font-style: normal;
    line-height: normal;
  }

  thead tr th.normal-text span {
    font-size: 20px;
    line-height: 1 !important;
    display: block;
    text-align: left;
    width: 100%;
    font-weight: 400;
    margin-left: .2em;
  }

  @media (max-width: 750px) {
    thead tr th.normal-text span {
      font-size: 12px;
    }
  }

  .comparison-table .table tbody td {
    vertical-align: middle;
  }

  .comparison-table .table tbody td.highlighted {
    background-color: var(--highlight-bg-color);
    color: var(--highlight-text-color);
  }

  /* Icon styles */
  .comparison-table .table tbody td .icon {
    display: flex;
    width: 1.8em;
    height: 1.8em;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;
    border: var(--icon-thickness) solid var(--icon-border-color);
    background: none;
  }

  .comparison-table .table tbody td .icon svg {
    width: 16px;
    height: 16px;
  }

  .comparison-table .table tbody td .icon svg {
    display: block;
    margin: 0 auto;
  }

  .comparison-table .table tbody td .cell-text {
    margin-top: 0.5rem;
  }

  /* Border styles for cells */
  .comparison-table .table th,
  .comparison-table .table td {
    border-right: var(--table-border-width) solid var(--table-border-color) !important;
    border-bottom: var(--table-border-width) solid var(--table-border-color);
    padding: var(--cell-padding);
    border-left: var(--table-border-width) solid var(--table-border-color);
    border-top: var(--table-border-width) solid var(--table-border-color);
  }

  .comparison-table .table th:last-child,
  .comparison-table .table td:last-child {
    border-right: none;
  }

  .comparison-table .table thead th:empty,
  .comparison-table .table thead th:not(:has(img, span)) {
    border: none;
  }

  /* Scroll hint */
  .comparison-table .scroll-hint {
    display: none;
    text-align: left;
  }

  @media (max-width: 749px) {
    .comparison-table .scroll-hint {
      display: inline-block;
    }
  }

  .comparison-table td.highlighted,
  .comparison-table th.highlighted {
    background-color: var(--highlight-bg-color);
  }

  .row-text {
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.36px;
  }

  .comparison-table .table tbody th {
    font-weight: normal;
    padding: .5em;
    text-align: left !important;
    line-height: 1;
    width: unset !important;
  }

  .comparison-table .table-responsive {
    overflow-x: 0;
    -webkit-overflow-scrolling: 0;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Mobile Responsive Styles */
  @media (max-width: 749px) {
    .comparison-table .table {
      table-layout: auto;
      min-width: 0;
    }

    .comparison-table .table thead th span {
      display: block;
      margin: 0 auto;
      line-height: 1;
      font-size: 11px;
      word-break: break-word;
    }

    .comparison-table .table thead th {
      font-size: 11px !important;
      padding: 0.5rem 0.25rem;
    }

    .comparison-table .table tbody td .icon {
      width: 1.4em;
      height: 1.4em;
    }

    .comparison-table .table tbody td .icon svg {
      width: 12px !important;
      height: 12px !important;
    }

    .comparison-table .table tbody td .icon svg.check-close {
      height: 10px !important;
    }

    .comparison-table .table-responsive {
      overflow-x: hidden;
      margin-bottom: 1.5rem;
      padding: 0;
    }

    .comparison-table .table > :not(caption) > * > * {
      padding: 0.6rem 0.4rem;
    }

    .comparison-table .table tbody th {
      padding: 0.6rem 0.5rem;
      font-size: 13px !important;
      width: auto;
      word-break: break-word;
      hyphens: auto;
      line-height: 1.3;
    }

    .comparison-table .table thead th img {
      max-width: 60px;
    }

    .comparison-table .table tbody td .icon {
      border-width: max(1px, calc(var(--icon-thickness) * 0.75));
    }

    .comparison-table .table th,
    .comparison-table .table td {
      border-width: max(1px, calc(var(--table-border-width) * 0.75)) !important;
    }

    .comparison-table .table-responsive.card {
      padding: 1rem;
      padding-left: 0;
      margin: 0 1rem;
      margin-left: 0;
      border-radius: 4px;
    }

    .comparison-table .table tbody td .cell-text {
      margin-top: 0.25rem;
      font-size: 12px;
    }

    .comparison-table .table thead th.top-left-cell {
      width: 55%;
    }
  }

  /* CTA button below table */
  .comparison-table__cta {
    text-align: center;
    margin-top: 2rem;
  }

  .comparison-table__button {
    display: inline-block;
  }

  /* Extra small devices */
  @media (max-width: 480px) {
    .comparison-table .table tbody th {
      padding: 0.5rem 0.4rem;
      font-size: 12px !important;
      line-height: 1.25;
    }

    .comparison-table .table {
      min-width: 0;
    }

    .comparison-table .table > :not(caption) > * > * {
      padding: 0.4rem 0.3rem;
    }

    .comparison-table .table thead th img {
      max-width: 50px;
    }

    .comparison-table .table thead th span {
      font-size: 10px;
    }

    .comparison-table .table thead th.top-left-cell {
      width: 50%;
    }
  }
/* END_SECTION:comparison-table */

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

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

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

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

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

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

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

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

/* START_SECTION:footer-utilities (INDEX:36) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-left: 2em;
    gap: 0;
    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;
      padding-left: 0;
    }
  }

  .utilities,
  .utilities p,
  .utilities a,
  .utilities .footer-utilities__text {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.6px;
  }

  .utilities a {
    color: #fff;
  }

  .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:37) */
/* Mobile: Zero out padding and gap */
  @media screen and (max-width: 749px) {
    .footer-content {
      --padding-block-start-mobile: 0px !important;
      --padding-block-end-mobile: 0px !important;
      --footer-gap: 0px;
    }

    .footer-content .menu__details {
      padding: 12.5px 25px;
    }

    .footer-content .menu__heading {
      padding: 0;
    }

    .footer-content > :nth-child(2) {
      margin-bottom: 12.5px;
      margin-top: 20px;
    }

    .footer-content > :nth-child(3) {
      margin-bottom: 20px;
    }

    .footer-content accordion-custom.menu {
      padding-left: 20px;
      padding-right: 20px;
      border-top: 1px solid rgb(229, 231, 235);
    }

    .footer-content > :nth-child(4) > .group-block-content > :nth-child(1) {
      margin-bottom: 1em;
    }
  }

  /* Mobile: Single column layout (base styles) */
  .footer-content {
    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--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;
    }
  }

  /* First column separator - border on the right side */
  @media screen and (min-width: 990px) {
    .footer-content--has-separator > :first-child {
      border-right: 2px solid #f2f2f2;
      padding-right: 96px;
    }
  }

  /* Footer logo max-width */
  .footer-content > :first-child img {
    max-width: 150px;
  }

  /* Tagline font-weight */
  .footer-content > :first-child .text-block {
    font-weight: 700;
  }

  @media screen and (max-width: 749px) {
    .footer-content > :first-child .text-block {
      min-width: 100%;
      width: 100%;
      max-width: 100%;
    }

    .footer-content > :first-child .text-block p {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.6px;
      text-align: center;
      margin-top: 15px;
      padding-bottom: 1em;
    }

    .footer-content .image-block__image {
      object-fit: contain;
    }
  }

  /* Newsletter heading h5 */
  .footer-content > :nth-child(4) .text-block h5 {
    font-size: 16.5px !important;
  }

  /* Footer email signup — white background, compact height (all viewports) */
  footer .email-signup__input {
    background-color: #ffffff;
    color: #1F2937;
    padding: 8px var(--padding-3xl);
    height: 37px;
    box-sizing: border-box;
  }

  footer .email-signup__input::placeholder {
    color: #6b7280;
  }

  footer .email-signup__button--arrow {
    height: 37px;
    width: 37px;
    aspect-ratio: 1;
  }

  /* Desktop footer overrides to match staging */
  @media screen and (min-width: 990px) {
    /* Desktop padding */
    footer .footer-content.spacing-style {
      padding-block-start: 80px !important;
      padding-block-end: 80px !important;
    }

    /* BRAND column (2nd child) */
    .footer-content > :nth-child(2) {
      padding-left: 40px;
    }
  }

  /* Mobile footer reordering */
  @media screen and (max-width: 749px) {
    /* Center logo group + tagline on mobile */
    .footer-content > :nth-child(1) {
      text-align: center;
    }

    .footer-content > :nth-child(1) .group-block-content {
      align-items: center;
    }

    /* Reorder top-level blocks: Newsletter first, menus, then logo+subtext */
    .footer-content > :nth-child(1) { order: 4; }
    .footer-content > :nth-child(2) { order: 2; }
    .footer-content > :nth-child(3) { order: 3; }

    /* Explode newsletter parent group so children join footer grid */
    .footer-content > :nth-child(4) {
      display: contents;
    }

    .footer-content > :nth-child(4) > .group-block__media-wrapper {
      display: none;
    }

    .footer-content > :nth-child(4) > .group-block-content {
      display: contents;
    }

    /* Order newsletter group children */
    /* Newsletter icon + text */
    .footer-content > :nth-child(4) > .group-block-content > :nth-child(1) {
      order: 1;
    }

    /* Email signup */
    .footer-content > :nth-child(4) > .group-block-content > :nth-child(2) {
      order: 1;
    }

    /* Social links — after logo+subtext */
    .footer-content > :nth-child(4) > .group-block-content > :nth-child(3) {
      order: 5;
    }

    /* Newsletter text mobile styling */
    .footer-content > :nth-child(4) > .group-block-content > :nth-child(1) .text-block {
      font-size: 16.5px;
      font-weight: 700;
      letter-spacing: 0.6px;
    }

    /* Social links centered on mobile */
    footer .footer-content > :nth-child(4) > .group-block-content > :nth-child(3) {
      width: 100%;
      padding-top: 20px;
    }

    footer .footer-content > :nth-child(4) > .group-block-content > :nth-child(3) .group-block-content {
      align-items: center;
    }
  }
/* END_SECTION:footer */

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

  .announcement-bar__slide--promo .announcement-bar__text * {
    display: inline;
  }

  .announcement-bar .text-block p {
    margin: 0;
    padding: 0;
    line-height: var(--line-height, 1);
  }

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

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

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

  body:has(> #header-group > header) {
    --header-height: 60px;
  }

  body:has(> #header-group:empty) {
    --header-group-height: 0px;
  }

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

  /* Make entire header group (including announcement bar) sticky */
  #header-group:has(#header-component[sticky='always']),
  #header-group:has(#header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;
    top: -1px;
    z-index: var(--layer-sticky);
  }

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

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

  .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: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
    }
  }

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

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

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

  .header__column--left,
  .header__column--center {
    gap: var(--menu-items-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: calc(var(--gap-xl) / 2);
    justify-content: flex-end;
    grid-area: right;

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

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

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

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

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

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

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

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

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

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

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

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

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

      &:not(:has(.account-actions)) .search-action {
        grid-area: rightA;
        justify-self: end;
      }

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

      header-actions {
        grid-area: rightB;
        justify-self: start;
      }
    }
  }

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

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

/* START_SECTION:hero (INDEX:40) */
.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));
  }

  @media screen and (max-width: 749px) {
    .hero {
      min-height: calc(var(--hero-min-height-mobile, var(--hero-min-height)) - var(--hero-height-offset));
    }
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-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:logo (INDEX:41) */
.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-post (INDEX:44) */
.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:45) */
/* --- Vogue / Editorial Magazine Style Blog --- */
 
:root {
  --vogue-bg: #fff;
  --vogue-fg: #1C404D;
  --vogue-accent: #1C404D;
  --vogue-border: #e5e3e0;
  --vogue-card-shadow: 0 12px 32px rgba(40, 40, 40, 0.10);
}
.main-blog {
  font-family: 'Mada', sans-serif;
  background: var(--vogue-bg);
  color: var(--vogue-fg);
  letter-spacing: 0.01em;
  padding-top: var(--blog-padding-top, 36px);
  padding-bottom: var(--blog-padding-bottom, 36px);
}

/* Headline styling */
.main-blog h1 {
  font-family: 'Red Hat Display, serif;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.8em;
  border-bottom: 1px solid var(--vogue-border);
  padding-bottom: 0.4em;
}

.featured-list {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  padding: 0 0 2rem 0;
  margin: 0;
  border-bottom: 1px solid var(--vogue-border);
}
.featured-list li {
  font-family: 'Red Hat Display, serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--vogue-accent);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.featured-list a {
  color: var(--vogue-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--vogue-border);
  transition: border 0.2s, color 0.2s;
}
.featured-list a:hover {
  color: var(--vogue-accent);
  border-bottom: 1px solid var(--vogue-accent);
}

/* Layout */
.blog-container {
  display: flex;
  gap: 3.2rem;
  max-width: 1480px;
  margin: 0 auto;
}

.blog-main { flex: 3; }
.blog-sidebar {
  flex: 1;
  max-width: 350px;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  background: #fff;
  border-left: 1px solid var(--vogue-border);
  padding-left: 2rem;
}

@media (max-width: 1200px) {
  .blog-container { gap: 2rem; }
  .blog-sidebar { max-width: 280px; padding-left: 1rem;}
}
@media (max-width: 949px) {
  .main-blog h1 { font-size: 2.1rem; }
  .blog-container { flex-direction: column; }
  .blog-sidebar { position: static; max-width: 100%; border-left: none; padding-left: 0;}
}
@media (max-width: 749px) {
  .blog-articles { column-count: 1 !important; }
  .blog-sidebar { 
    position: fixed; top: 0; right: -100%; width: 80vw; height: 100vh; background: #fff; z-index: 200; transition: right .3s ease; box-shadow: -8px 0 24px rgba(0,0,0,0.12); overflow-y: auto;
    border-left: 1px solid var(--vogue-border); padding: 2rem 1.2rem;
  }
  .blog-sidebar.open { right: 0;}
  .sidebar-toggle { display: flex !important;}
}
.sidebar-toggle { display: none; align-items: center; background: #fff; padding: 0.75rem 0; border-bottom: 1px solid var(--vogue-border);}
.sidebar-toggle button {
  font-size: 1.25rem; background: var(--vogue-accent); color: #fff; border: none;
  padding: 0.5em 1.2em; border-radius: 30px; letter-spacing: 0.08em; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 12px rgba(201,169,107,0.10);
}
@media (min-width: 750px) { .sidebar-toggle { display: none !important; } .blog-sidebar { position: sticky; right: auto !important; width: auto !important; height: auto; background: transparent; box-shadow: none; } }

/* Magazine-style grid — "collage" packs cards of uneven height into columns */
.blog-articles {
  column-count: 3;
  column-gap: 2.5rem;
  margin-top: 2.5rem;
}
@media(max-width:1200px){ .blog-articles { column-count:2; } }
@media(max-width:949px){ .blog-articles { column-count:1; } }

/* "grid" aligns cards on a row baseline instead of packing them */
.main-blog--grid .blog-articles {
  column-count: initial;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media(max-width:1200px){ .main-blog--grid .blog-articles { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:949px){ .main-blog--grid .blog-articles { grid-template-columns: 1fr; } }

.blog-filter-clear {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--vogue-accent);
}

/* Card styles */
.blog-article {
  background: #fff;
  border-radius: .25rem;
  box-shadow: var(--vogue-card-shadow);
  margin-bottom: 2.5rem;
  overflow: hidden;
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  transition: transform 0.17s cubic-bezier(.39,.13,.37,1.32), box-shadow 0.17s;
  border: 1px solid var(--vogue-border);
  padding:.55rem;
}
.blog-article:hover {
  transform: translateY(-7px) scale(1.016);
  box-shadow: 0 18px 42px rgba(201,169,107,0.16);
  border-color: var(--vogue-accent);
}
.blog-article img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--blog-card-image-ratio, 4 / 3);
  object-fit: cover;
  border-bottom: 1px solid var(--vogue-border);
  border-radius: 0;
  margin-bottom: 0.75em;
  transition: filter 0.24s;
}
.blog-article:hover img { filter: grayscale(0.14) brightness(0.94); }
.blog-article h2 {
  font-family: 'Red Hat Display, serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0.5em 0 0.1em 0;
  line-height: 1.1;
  font-weight: 600;
}
.blog-article h2 a { color: var(--vogue-fg); text-decoration: none; }
.blog-article-meta {
  font-size: 1rem;
  color: #a3a3a3;
  font-family: 'Mada', sans-serif;
  margin-bottom: 0.7em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Sidebar sections */
.sidebar-section { margin-bottom: 2.7rem; border-bottom: 1px solid var(--vogue-border); padding-bottom: 2rem;}
.sidebar-section:last-child { border-bottom: none; padding-bottom: 0;}
.sidebar-section h3 {
  font-family: 'Red Hat Display, serif;
  font-size: 1.1rem;
  color: var(--vogue-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  font-weight: 600;
}

.sidebar-section ul { list-style: none; padding: 0; margin: 0;}
.sidebar-section li {
  margin-bottom: 0.7em;
  font-size: 1rem;
  font-family: 'Mada', sans-serif;
  color: #343434;
}
.sidebar-section a {
  color: var(--vogue-fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border 0.18s, color 0.18s;
}
.sidebar-section a:hover {
  color: var(--vogue-accent);
  border-bottom: 1px solid var(--vogue-accent);
}
.sidebar-section input[type="search"] {
  border: 1px solid var(--vogue-border);
  border-radius: 1.7em;
  padding: 0.7em 1.2em;
  font-size: 1rem;
  width: 100%;
  font-family: 'Mada', sans-serif;
  background: #faf9f6;
  margin-bottom: 1rem;
  outline: none;
  transition: border-color 0.19s;
}
.sidebar-section input[type="search"]:focus { border-color: var(--vogue-accent); }
.pagination { margin-top: 3rem; text-align: center;}
/* --- END Vogue Blog --- */
/* END_SECTION:main-blog */

/* START_SECTION:main-bundle (INDEX:46) */
/* ═══════════════════════════════════════════════════════════════
     Bundle Builder - Main Container
     ═══════════════════════════════════════════════════════════════ */
  .bundle-builder {
    display: block;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
  }

  /* ═══════════════════════════════════════════════════════════════
     Navigation Bar
     ═══════════════════════════════════════════════════════════════ */
  .bundle-nav {
    display: block;
    background-color: #1c404c;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .bundle-nav__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 1380px;
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bundle-nav__inner::-webkit-scrollbar {
    display: none;
  }

  .bundle-nav__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-heading--family);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
  }

  @media screen and (min-width: 750px) {
    .bundle-nav__btn {
      font-size: 14px;
      padding: 14px 20px;
    }
  }

  .bundle-nav__btn:hover {
    color: rgba(255, 255, 255, 0.85);
  }

  .bundle-nav__btn--active {
    color: #ffffff;
    border-bottom-color: #d48b2b;
  }

  .bundle-nav__btn--completed {
    color: rgba(255, 255, 255, 0.85);
  }

  .bundle-nav__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .bundle-nav__btn--active .bundle-nav__number {
    background-color: #d48b2b;
    color: #ffffff;
  }

  .bundle-nav__btn--completed .bundle-nav__number {
    background-color: #48ba25;
  }

  .bundle-nav__label {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .bundle-nav__label {
      display: inline;
    }
  }

  /* ═══════════════════════════════════════════════════════════════
     Price Bar
     ═══════════════════════════════════════════════════════════════ */
  .bundle-price-bar {
    background-color: #f8f8f8;
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 16px;
  }

  .bundle-price-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 1380px;
    margin: 0 auto;
  }

  .bundle-price-bar__sale {
    color: #48ba25;
    font-family: var(--font-heading--family);
    font-size: 18px;
    font-weight: 700;
  }

  .bundle-price-bar__compare {
    color: #616161;
    font-size: 14px;
    text-decoration: line-through;
  }

  .bundle-price-bar__savings {
    display: inline-flex;
    align-items: center;
    background-color: #48ba25;
    color: #ffffff;
    font-family: var(--font-heading--family);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.03em;
  }

  /* ═══════════════════════════════════════════════════════════════
     Steps Container
     ═══════════════════════════════════════════════════════════════ */
  .bundle-steps {
    position: relative;
  }

  .bundle-step {
    display: none;
  }

  .bundle-step--active {
    display: block;
  }

  [hidden] {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     Bundle Step Layout
     ═══════════════════════════════════════════════════════════════ */
  .bundle-step__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 16px;
  }

  @media screen and (min-width: 750px) {
    .bundle-step__layout {
      grid-template-columns: 8fr 4fr;
      gap: 32px;
      padding: 24px 20px;
    }
  }

  /* Gallery */
  .bundle-step__gallery {
    position: relative;
  }

  @media screen and (min-width: 750px) {
    .bundle-step__gallery {
      position: sticky;
      top: 120px;
      align-self: start;
    }
  }

  .bundle-step__main-image {
    border-radius: 8px;
    overflow: hidden;
    background: #f8f8f8;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bundle-step__main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .bundle-step__thumbnails {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 0;
  }

  .bundle-step__thumbnails::-webkit-scrollbar {
    display: none;
  }

  .bundle-step__thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: #f8f8f8;
    transition: border-color 0.2s;
  }

  .bundle-step__thumb--active {
    border-color: #d48b2b;
  }

  .bundle-step__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Sidebar */
  .bundle-step__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .bundle-step__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .bundle-step__title {
    font-family: var(--font-heading--family);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-foreground);
    margin: 0;
  }

  .bundle-step__price-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .bundle-step__price {
    color: #48ba25;
    font-family: var(--font-heading--family);
    font-size: 17px;
    font-weight: 700;
  }

  .bundle-step__price-compare {
    color: #616161;
    font-size: 15px;
    text-decoration: line-through;
  }

  /* Selection Group Tabs */
  .bundle-step__group-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .bundle-step__group-tab {
    padding: 8px 16px;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    background: none;
    font-family: var(--font-heading--family);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
  }

  @media screen and (min-width: 750px) {
    .bundle-step__group-tab {
      font-size: 16px;
    }
  }

  .bundle-step__group-tab--active {
    border-color: #1c404c;
    background-color: #1c404c;
    color: #ffffff;
  }

  /* Swatches */
  .bundle-swatches__container {
    display: grid;
  }

  .bundle-swatches {
    grid-area: 1 / 1;
    display: none;
    flex-wrap: wrap;
    gap: 8px;
  }

  .bundle-swatches--active {
    display: flex;
  }

  .bundle-swatch-item {
    position: relative;
  }

  .bundle-swatch-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .bundle-swatch-item__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: box-shadow 0.2s;
  }

  .bundle-swatch-item__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .bundle-swatch-item input[type="radio"]:checked + .bundle-swatch-item__visual {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #1c404c;
  }

  .bundle-swatch-item input[type="radio"]:disabled + .bundle-swatch-item__visual {
    opacity: 0.65;
    pointer-events: none;
  }

  .bundle-swatch-item input[type="radio"]:disabled + .bundle-swatch-item__visual::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #999;
    transform: rotate(45deg);
    transform-origin: center;
  }

  .bundle-step__selected-name {
    font-size: 14px;
    color: #666;
    margin: 0;
  }

  /* Navigation Buttons */
  .bundle-step__nav-buttons {
    display: flex;
    gap: 12px;
    margin-top: 8px;
  }

  .bundle-step__btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: var(--font-heading--family);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .bundle-step__btn--prev {
    background-color: #f0f0f0;
    color: #333;
  }

  .bundle-step__btn--prev:hover {
    background-color: #e0e0e0;
  }

  .bundle-step__btn--next {
    flex: 1;
    background-color: #d48b2b;
    color: #ffffff;
  }

  .bundle-step__btn--next:hover {
    background-color: #c07a22;
  }

  /* Step Summary (Your Bundle) */
  .bundle-step__summary {
    border-top: 1px solid #e5e5e5;
    padding-top: 16px;
  }

  .bundle-step__summary-title {
    font-family: var(--font-heading--family);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 12px;
  }

  .bundle-step__summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .bundle-step__summary-item img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: contain;
    background: #f8f8f8;
  }

  .bundle-step__summary-item-title {
    flex: 1;
    font-size: 13px;
    color: #333;
  }

  .bundle-step__summary-change {
    background: none;
    border: none;
    color: #1c404c;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
  }

  /* ═══════════════════════════════════════════════════════════════
     Personalization
     ═══════════════════════════════════════════════════════════════ */
  .bundle-personalization {
    display: block;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px;
  }

  .bundle-personalization__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .bundle-personalization__label {
    font-family: var(--font-heading--family);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .bundle-personalization__fee {
    color: #48ba25;
    font-weight: 600;
    font-size: 14px;
  }

  .bundle-personalization__toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
  }

  .bundle-personalization__radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }

  .bundle-personalization__radio input[type="radio"] {
    accent-color: #1c404c;
  }

  .bundle-personalization__radio-label {
    font-size: 14px;
    font-weight: 600;
  }

  .bundle-personalization__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .bundle-personalization__preview {
    text-align: center;
  }

  .bundle-personalization__preview img {
    max-width: 120px;
    height: auto;
  }

  .bundle-personalization__description {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
  }

  .bundle-personalization__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .bundle-personalization__field-label {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .bundle-personalization__char-count {
    font-weight: 400;
    color: #999;
    font-size: 12px;
  }

  .bundle-personalization__input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
  }

  .bundle-personalization__input:focus {
    outline: none;
    border-color: #1c404c;
  }

  .bundle-personalization__select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
  }

  /* ═══════════════════════════════════════════════════════════════
     Add-on
     ═══════════════════════════════════════════════════════════════ */
  .bundle-addon {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px 16px;
  }

  .bundle-addon__label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
  }

  .bundle-addon__checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: #1c404c;
  }

  .bundle-addon__info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
  }

  .bundle-addon__image {
    flex-shrink: 0;
  }

  .bundle-addon__image img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 4px;
  }

  .bundle-addon__details {
    flex: 1;
  }

  .bundle-addon__title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
  }

  .bundle-addon__pricing {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .bundle-addon__compare {
    color: #616161;
    font-size: 13px;
    text-decoration: line-through;
  }

  .bundle-addon__price {
    color: #48ba25;
    font-size: 13px;
    font-weight: 700;
  }

  /* ═══════════════════════════════════════════════════════════════
     Review Step
     ═══════════════════════════════════════════════════════════════ */
  .bundle-review__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 16px;
  }

  .bundle-review__title {
    text-align: center;
    font-family: var(--font-heading--family);
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .bundle-review__title {
      font-size: 28px;
    }
  }

  .bundle-review__price-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }

  .bundle-review__price {
    color: #48ba25;
    font-family: var(--font-heading--family);
    font-size: 20px;
    font-weight: 700;
  }

  .bundle-review__compare {
    color: #616161;
    font-size: 16px;
    text-decoration: line-through;
  }

  .bundle-review__savings-badge {
    display: inline-flex;
    background-color: #48ba25;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
  }

  /* Selections list */
  .bundle-review__selections {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
  }

  .bundle-review__selection {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .bundle-review__selection-image {
    flex-shrink: 0;
  }

  .bundle-review__selection-image img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 6px;
    background: #f8f8f8;
  }

  .bundle-review__selection-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .bundle-review__selection-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.05em;
  }

  .bundle-review__selection-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
  }

  .bundle-review__selection-price {
    font-size: 14px;
    font-weight: 700;
    color: #48ba25;
  }

  .bundle-review__selection-change {
    background: none;
    border: none;
    color: #1c404c;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }

  .bundle-review__selection--addon,
  .bundle-review__selection--personalization,
  .bundle-review__selection--upsell {
    padding-left: 20px;
    background-color: #fafafa;
  }

  /* Upsells */
  .bundle-review__upsells {
    margin-bottom: 24px;
  }

  .bundle-review__upsells-title {
    font-family: var(--font-heading--family);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 12px;
  }

  .bundle-review__upsells-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 0;
  }

  .bundle-review__upsells-grid::-webkit-scrollbar {
    display: none;
  }

  /* Upsell Card */
  .bundle-upsell-card {
    display: block;
    flex: 0 0 180px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
  }

  .bundle-upsell-card__image {
    background: #f8f8f8;
    padding: 12px;
    text-align: center;
  }

  .bundle-upsell-card__image img {
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
  }

  .bundle-upsell-card__info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .bundle-upsell-card__title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
  }

  .bundle-upsell-card__pricing {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .bundle-upsell-card__price {
    font-size: 13px;
    font-weight: 700;
    color: #48ba25;
  }

  .bundle-upsell-card__compare {
    font-size: 12px;
    color: #616161;
    text-decoration: line-through;
  }

  .bundle-upsell-card__variant-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
  }

  .bundle-upsell-card__toggle {
    width: 100%;
    padding: 8px;
    border: 2px solid #1c404c;
    border-radius: 6px;
    background: none;
    color: #1c404c;
    font-family: var(--font-heading--family);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
  }

  .bundle-upsell-card__toggle:hover {
    background-color: #1c404c;
    color: #ffffff;
  }

  .bundle-upsell-card__toggle--added {
    background-color: #c00;
    border-color: #c00;
    color: #ffffff;
  }

  /* Submit Section */
  .bundle-review__submit {
    text-align: center;
    margin-bottom: 16px;
  }

  .bundle-review__atc-btn {
    width: 100%;
    max-width: 400px;
    padding: 16px 32px;
    background-color: #48ba25;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-heading--family);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s;
    letter-spacing: 0.05em;
  }

  .bundle-review__atc-btn:hover {
    background-color: #3da520;
  }

  .bundle-review__atc-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .bundle-review__error {
    color: #c00;
    font-size: 14px;
    margin-top: 10px;
  }

  /* Value Props */
  .bundle-review__value-props {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
  }

  .bundle-review__value-prop {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
  }

  .bundle-review__value-prop svg {
    color: #48ba25;
    flex-shrink: 0;
  }
/* END_SECTION:main-bundle */

/* START_SECTION:main-cart (INDEX:47) */
.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--2xl: var(--font-size--2xl);

    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

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

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

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

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

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

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

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

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

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

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

    .cart__container--extend {
      height: 100%;
    }
  }

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

/* START_SECTION:main-collection (INDEX:49) */
.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:marquee (INDEX:51) */
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;
  }

  /* Image blocks in marquee */
  .marquee__repeated-items .image-block img {
    height: var(--marquee-image-height, 40px);
    width: auto;
    object-fit: contain;
  }

  @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:52) */
.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-with-content__media-wrapper {
      grid-area: media;
      position: relative;
    }

    .media-with-content__media-wrapper .media-block {
      height: 100%;
    }

    .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--content-overlay {
    .media-with-content__media-wrapper {
      position: relative;
    }

    .media-with-content__media-secondary {
      grid-area: content;
    }

    /* Force 50/50 split when both media blocks are present on desktop */
    @media screen and (min-width: 750px) {
      &.section--full-width {
        --media-with-content-grid-columns: 1fr 1fr;
      }

      &.section--page-width {
        --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__content-over-media {
      position: absolute;
      inset: 0;
      z-index: var(--layer-raised, 2);
      display: flex;
      pointer-events: none;

      :is(a, button, input, textarea, select) {
        pointer-events: auto;
      }
    }

    .media-with-content__content-over-media .media-with-content__content {
      width: 100%;

      > .group-block-content {
        min-height: 100%;
        padding-inline: var(--page-margin);
        padding-block: var(--page-margin);
      }
    }
  }

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

    min-height: 500px;
  }

  /* Reverse the mobile stacking order: content above media.
     One rule per grid variant so each keeps its margin columns. */
  @media screen and (max-width: 749px) {
    .media-with-content--reverse-mobile {
      grid-template-areas: 'content content content' 'media media media';
    }

    .section--page-width.media-with-content--reverse-mobile {
      grid-template-areas:
        'margin-left content margin-right'
        'margin-left media margin-right';
    }

    .media-with-content--media-extend.media-with-content--reverse-mobile {
      grid-template-areas:
        'margin-left content margin-right'
        'media media media';
    }
  }
/* END_SECTION:media-with-content */

/* START_SECTION:multicolumn-slider (INDEX:53) */
.multicolumn-slider {
    display: flex;
    flex-direction: column;
    gap: var(--gap, 24px);
  }

  .multicolumn-slider__header {
    padding-inline: var(--util-page-margin);
  }

  .multicolumn-slider__text {
    padding-inline: var(--util-page-margin);
  }

  .multicolumn-slider__subheading {
    margin-bottom: 0.5rem;
  }

  .multicolumn-slider__heading {
    margin: 0;
  }

  .multicolumn-slider__description {
    margin-top: 0.75rem;
    color: rgb(var(--color-foreground-rgb) / 0.8);
  }

  .multicolumn-slider__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-inline: var(--util-page-margin);
  }

  .multicolumn-slider__carousel {
    width: 100%;
  }

  .multicolumn-slider__slideshow {
    --slide-size: calc((100% - (var(--columns-gap) * (var(--column-count) - 1))) / var(--column-count));
  }

  .multicolumn-slider__slideshow slideshow-slides {
    gap: var(--columns-gap, 16px);
    overflow-y: clip;
    padding-top: 30px;
    padding-bottom: 10px;
  }

  @media screen and (max-width: 749px) {
    .multicolumn-slider__slideshow {
      --slide-size: 100%;
    }

    .multicolumn-slider__slideshow slideshow-slides {
      gap: 0 !important;
      padding-inline-start: 0 !important;
      padding-inline-end: 0 !important;
      scroll-padding-inline-start: 0 !important;
    }

    .multicolumn-slider__slide {
      margin: 0 auto;
      padding: 0 20px;
      box-sizing: border-box;
    }

    .multicolumn-slider__column-text p {
      font-family: 'Mada', sans-serif;
      font-size: 17.38px;
      font-weight: 400;
      letter-spacing: 0;
    }
  }

  .multicolumn-slider__slide {
    flex: 0 0 var(--slide-size);
    scroll-snap-align: center;
  }

  .multicolumn-slider__column {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--column-border-radius, 0);
    text-align: var(--column-text-align, left);
    overflow: hidden;
  }

  @media screen and (min-width: 750px) {
    .multicolumn-slider__column--connector {
      overflow: visible;
    }

    .multicolumn-slider__column--connector::after {
      content: '';
      position: absolute;
      top: var(--connector-top, 33px);
      left: 100%;
      width: calc(var(--columns-gap, 16px));
      height: var(--connector-height, 4px);
      background-color: var(--connector-color, #1c404c);
      pointer-events: none;
    }
  }

  .multicolumn-slider__column--has-border {
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }

  .multicolumn-slider__column--overlay-top-left {
    overflow: visible;
  }

  /* Content area with background color */
  .multicolumn-slider__column-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--column-padding, 24px);
    background-color: var(--column-bg-color, transparent);
    border-radius: var(--column-border-radius, 0);
  }

  /* Quote wrapper - inline quote mark with text */
  .multicolumn-slider__column-quote-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    padding-top: var(--text-padding-top, 12px);
    padding-bottom: var(--text-padding-bottom, 16px);
  }

  /* Top text (quote mark) with customizable styling */
  .multicolumn-slider__column-top-text {
    margin: 0;
    font-family: 'Mada', sans-serif;
    font-size: var(--top-text-size, 14px);
    color: var(--top-text-color, currentColor);
    font-weight: var(--top-text-weight, 400);
    line-height: 1;
    flex-shrink: 0;
  }

  .multicolumn-slider__column-image {
    margin-bottom: 1rem;
  }

  .multicolumn-slider__column-image img {
    width: 100%;
    height: auto;
    border-radius: var(--image-border-radius, 0);
  }

  .multicolumn-slider__column-title {
    margin: 0 0 0.5rem;
    font-size: var(--title-font-size, 1.125rem);
    font-weight: var(--title-font-weight, 600);
  }

  .multicolumn-slider__column-text {
    margin: 0;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.8);
  }

  .multicolumn-slider__column-quote-wrapper {
    margin-bottom: 0;
  }

  .multicolumn-slider__column-text,
  .multicolumn-slider__column-text p {
    font-size: var(--text-font-size);
    font-weight: var(--text-font-weight);
    color: var(--text-color);
  }

  .multicolumn-slider__column-text p {
    margin: 0;
  }

  .multicolumn-slider__column-author-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .multicolumn-slider__column-author {
    font-size: 1.05rem;
    font-weight: 700;
  }

  .multicolumn-slider__column-caption {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    margin-top: 0.15rem;
  }

  .multicolumn-slider__column-author-badge {
    flex-shrink: 0;
  }

  .multicolumn-slider__column-author-badge img {
    display: block;
    max-height: 18px;
    max-width: 76px;
    width: auto;
    object-fit: contain;
  }

  /* Rating row with stars and source badge inline */
  .multicolumn-slider__column-rating-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .multicolumn-slider__column-stars {
    display: flex;
    gap: 0.25rem;
  }

  .multicolumn-slider__column-stars svg {
    width: 16px;
    height: 16px;
    fill: var(--color-star, #fbbf24);
  }

  .multicolumn-slider__column-rating-row--top-right {
    position: absolute;
    top: var(--column-padding, 24px);
    right: var(--column-padding, 24px);
    margin-top: 0;
  }

  /* Source as badge pill */
  .multicolumn-slider__column-source {
    background: #48BA25;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
  }

  /* Link area without background */
  .multicolumn-slider__column-link-area {
    padding: var(--column-padding, 24px);
    padding-top: 1rem;
    background-color: transparent;
  }

  .multicolumn-slider__column-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading--family);
    font-size: 14px;
    font-weight: 700;
    color: #1c404c;
    margin-bottom: 5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: gap 0.2s ease;
  }

  .multicolumn-slider__column-link:hover {
    gap: 0.75rem;
  }

  .multicolumn-slider__column-link svg {
    width: 16px;
    height: 16px;
  }

  /* Overlay image with circular container */
  .multicolumn-slider__column-overlay {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    background: #F2F2F2;
    border: 3px solid #1c404c;
    border-radius: 50%;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .multicolumn-slider__column-overlay--bottom-right {
    right: 10px;
    bottom: 0;
    margin-top: -29%;
  }

  .multicolumn-slider__column-overlay--top-left {
    left: 10px;
    top: -30px;
    background: #ffffff;
    box-shadow: none;
    border: none;
    border-radius: 50%;
    padding: 0;
    width: 65.82px;
    height: 65.82px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .multicolumn-slider__column-overlay--top-left img {
    border-radius: 0;
    object-fit: contain;
    width: 80%;
    height: 80%;
  }

  .multicolumn-slider__column-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .multicolumn-slider__empty {
    padding: 2rem;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  /* Ensure arrows position correctly on the sides */
  .multicolumn-slider slideshow-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
  }

  .multicolumn-slider slideshow-arrows button {
    pointer-events: auto;
  }

  .multicolumn-slider slideshow-container {
    position: relative;
  }

  /* Dots positioning */
  .multicolumn-slider slideshow-controls {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
  }

  /* Arrows - always visible, rounded style */
  .multicolumn-slider slideshow-arrows {
    opacity: 1 !important;
  }

  .multicolumn-slider slideshow-arrows .slideshow-control {
    opacity: 1 !important;
    animation: none !important;
    width: 48px;
    height: 48px;
    border-radius: 8px !important;
    background: var(--color-background) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }

  .multicolumn-slider slideshow-arrows .slideshow-control:hover {
    transform: scale(1.05);
  }

  .multicolumn-slider slideshow-arrows .slideshow-control svg {
    width: 20px;
    height: 20px;
    color: var(--color-foreground);
  }

  .multicolumn-slider .slideshow-controls__dots button {
    --size: 10px;
    font-size: 0;
  }

  .multicolumn-slider .slideshow-controls__dots button[aria-selected='true']::after {
    background-color: #575757;
  }
  /* Hover image swap */
  .multicolumn-slider .has-hover-image {
    position: relative;
  }

  .multicolumn-slider .has-hover-image .hover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--hover-image-fit, contain);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .multicolumn-slider .has-hover-image:hover .default-img {
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .multicolumn-slider .has-hover-image:hover .hover-img {
      opacity: 1;
    }
  }

  .multicolumn-slider .has-hover-image.is-hovered .default-img {
    opacity: 0;
    transition: none;
  }

  .multicolumn-slider .has-hover-image.is-hovered .hover-img {
    opacity: 1;
    transition: none;
  }

  .multicolumn-slider .has-hover-image .default-img {
    transition: opacity 0.3s ease;
  }

  @media screen and (min-width: 750px) {
    .multicolumn-slider__mobile-only {
      display: none !important;
    }
  }
/* END_SECTION:multicolumn-slider */

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

  .password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .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:plp-bag-finder-popup (INDEX:56) */
[data-plp-bag-finder-test] {
    display: none;
  }

  html.ig-plp-bag-finder-active [data-plp-bag-finder-test],
  body.ig-plp-bag-finder-active [data-plp-bag-finder-test],
  .plp-bag-finder-popup--editor-visible[data-plp-bag-finder-test] {
    display: block;
  }

  .plp-bag-finder-popup {
    --plp-popup-viewport-margin-block: 16px;
    --plp-popup-viewport-margin-inline: 16px;
    position: relative;
    z-index: 30;
  }

  .plp-bag-finder-popup__shell {
    display: contents;
  }

  .plp-bag-finder-popup__launcher {
    position: fixed;
    right: max(40px, env(safe-area-inset-right));
    bottom: max(40px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    z-index: 35;
  }

  .plp-bag-finder-popup__dismiss {
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(99, 101, 105, 0.2);
    box-shadow: 0 4px 12px rgba(61, 73, 77, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: #636569;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .plp-bag-finder-popup__dismiss svg {
    display: block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
  }

  .plp-bag-finder-popup__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: calc(100vw - 32px);
    padding: 8px 12px;
    border-radius: 6px;
    background: #0f1822;
    box-shadow: 4px 4px 20px rgba(61, 73, 77, 0.3);
    cursor: pointer;
    color: #f7f4ec;
    white-space: nowrap;
    height: unset;
  }
  .plp-bag-finder-popup__trigger:hover{
    background-color: #0f1822;
  }

  .plp-bag-finder-popup__trigger-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex: 0 0 auto;
  }

  .plp-bag-finder-popup__trigger svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  .plp-bag-finder-popup__trigger-label {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.56px;
    text-transform: uppercase;
  }

  .plp-bag-finder-popup__dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(1240px, calc(100vw - var(--plp-popup-viewport-margin-inline) - var(--plp-popup-viewport-margin-inline)));
    max-width: calc(100vw - var(--plp-popup-viewport-margin-inline) - var(--plp-popup-viewport-margin-inline));
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    transform-origin: center center;
    will-change: transform, opacity;
  }

  .plp-bag-finder-popup__dialog[open] {
    animation: plpBagFinderPopupOpen var(--animation-speed) var(--animation-easing) forwards;
  }

  .plp-bag-finder-popup__dialog.dialog-closing {
    animation: plpBagFinderPopupClose var(--animation-speed) var(--animation-easing) forwards;
  }

  .plp-bag-finder-popup__dialog-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: auto;
    max-height: calc(100dvh - (var(--plp-popup-viewport-margin-block) * 2));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 32px;
    -webkit-overflow-scrolling: touch;
  }

  .plp-bag-finder-popup__dialog-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #636569;
    z-index: 2;
    cursor: pointer;
  }

  .plp-bag-finder-popup__dialog-close svg {
    width: 16px;
    height: 16px;
  }

  .plp-bag-finder-popup__dialog-close:focus {
    outline: none;
  }

  .plp-bag-finder-popup__dialog-close:focus-visible {
    outline: none;
  }

  .plp-bag-finder-popup__content {
    --color-background-rgb: 255 255 255;
    --color-foreground-rgb: 28 64 76;
    --plp-bag-card-width: 240px;
    --plp-bag-card-gap: 12px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: 694px;
    flex-shrink: 0;
  }

  .plp-bag-finder-popup .bag-finder {
    gap: 32px;
  }

  .plp-bag-finder-popup .bag-finder__header {
    text-align: center;
    padding-inline: 48px;
  }

  .plp-bag-finder-popup .bag-finder__heading {
    margin: 0;
    color: #1c404c;
    font-family: var(--font-heading--family, inherit);
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
  }

  .plp-bag-finder-popup .bag-finder__copy {
    margin: 0.5rem 0 0;
    color: #375664;
    font-size: 1rem;
    line-height: 1.35;
  }

  .plp-bag-finder-popup .bag-finder__mobile-hint {
    margin: 0;
    color: #5d707a;
  }

  .plp-bag-finder-popup .bag-finder__component {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: 0;
  }

  .plp-bag-finder-popup .bag-finder__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 8px;
    margin: 0;
    padding-inline: 0;
  }

  .plp-bag-finder-popup .bag-finder__filter-btn {
    font-family: var(--font-heading--family, inherit);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: unset;
    padding: 12px 16px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #2c4856;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
    text-transform: uppercase;
  }

  .plp-bag-finder-popup .bag-finder__filter-btn:hover {
    opacity: 0.75;
  }

  .plp-bag-finder-popup .bag-finder__filter-btn[aria-pressed='true'] {
    background: #2f4b59;
    color: #fff;
    box-shadow: none;
  }

  .plp-bag-finder-popup .bag-finder__carousel {
    width: 100%;
    min-height: 0;
  }

  .plp-bag-finder-popup .bag-finder__slideshow {
    --slide-size: var(--plp-bag-card-width);
  }

  .plp-bag-finder-popup .bag-finder__slideshow slideshow-slides {
    gap: var(--plp-bag-card-gap);
    align-items: stretch;
  }

  .plp-bag-finder-popup .bag-finder__slideshow slideshow-slides[data-plp-filter-centered] {
    padding-inline-start: var(--plp-filter-center-offset, 0px);
    padding-inline-end: var(--plp-filter-center-offset, 0px);
    scroll-padding-inline-start: var(--plp-filter-center-offset, 0px);
    scroll-padding-inline-end: var(--plp-filter-center-offset, 0px);
  }

  .plp-bag-finder-popup .bag-finder__slide {
    position: relative;
    display: flex;
    flex: 0 0 var(--slide-size);
    width: var(--slide-size);
    scroll-snap-align: start;
  }

  .plp-bag-finder-popup .bag-finder__slide[data-plp-divider-before]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((var(--plp-bag-card-gap) / -2) - 0.5px);
    width: 1px;
    background: #e8eced;
    pointer-events: none;
  }

  .plp-bag-finder-popup .bag-finder__card {
    display: flex;
    height: 100%;
    width: 100%;
  }

  .plp-bag-finder-popup .bag-finder__card[hidden] {
    display: none !important;
  }

  .plp-bag-finder-popup .bag-finder__card-inner {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 16px;
  }

  .plp-bag-finder-popup .bag-finder__card-header {
    display: flex;
    align-items: flex-end;
    padding: 0 0 16px;
  }

  .plp-bag-finder-popup .bag-finder__card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    color: #1c404c;
    font-family: var(--font-mada, inherit);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
  }

  .plp-bag-finder-popup .bag-finder__card-image {
    padding: 0;
    margin-bottom: 16px;
  }

  .plp-bag-finder-popup .bag-finder__card-image img {
    display: block;
    width: 100%;
    height: auto;
    background: #f7f7f5;
  }

  .plp-bag-finder-popup .bag-finder__card-content {
    padding: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  .plp-bag-finder-popup .bag-finder__card-info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 14px;
  }

  .plp-bag-finder-popup .bag-finder__card-clubs-label,
  .plp-bag-finder-popup .bag-finder__card-clubs-value {
    display: block;
    color: #294250;
    font-size: 18px;
    line-height: 1.3;
  }

  .plp-bag-finder-popup .bag-finder__card-clubs-value {
    font-weight: 800;
    margin-top: 3px;
  }

  .plp-bag-finder-popup .bag-finder__card-price {
    text-align: right;
    white-space: nowrap;
  }

  .plp-bag-finder-popup .bag-finder__card-compare-price {
    display: block;
    color: #586870;
    font-size: 18px;
    text-decoration: line-through;
  }

  .plp-bag-finder-popup .bag-finder__card-sale-price {
    display: block;
    color: #74bb67;
    font-size: 18px;
    font-weight: 800;
  }

  .plp-bag-finder-popup .bag-finder__card-icons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
    margin: 0 0 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(28, 64, 76, 0.14);
    border-bottom: 1px solid rgba(28, 64, 76, 0.14);
  }

  .plp-bag-finder-popup .bag-finder__icon-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 8px;
    padding: 0;
  }

  .plp-bag-finder-popup .bag-finder__icon-item img {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .plp-bag-finder-popup .bag-finder__icon-label {
    margin-top: 0;
    color: #2b4552;
    font-family: var(--font-mada, inherit);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
  }

  .plp-bag-finder-popup .bag-finder__card-specs,
  .plp-bag-finder-popup .bag-finder__card-specs p,
  .plp-bag-finder-popup .bag-finder__card-specs strong,
  .plp-bag-finder-popup .bag-finder__card-specs b {
    color: #314c59;
    font-size: 14px;
    font-weight: 400 !important;
    line-height: 1.45;
  }

  .plp-bag-finder-popup .bag-finder__card-specs {
    flex: 1;
    margin-bottom: 14px;
  }

  .plp-bag-finder-popup .bag-finder__card-specs p {
    margin: 0;
  }

  .plp-bag-finder-popup .bag-finder__card-specs br {
    display: block;
    content: "";
    margin: 0;
  }

  .plp-bag-finder-popup .bag-finder__card-cta {
    margin-top: auto;
  }

  .plp-bag-finder-popup .bag-finder__btn {
    display: block;
    width: 100%;
    padding: 0.95rem 1.125rem;
    border-radius: 4px;
    border: none;
    background: #294250;
    color: #fff;
    font-family: var(--font-heading--family, inherit);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.2s ease;
  }

  .plp-bag-finder-popup .bag-finder__btn:hover {
    opacity: 0.88;
  }

  .plp-bag-finder-popup .bag-finder__btn--notify {
    background: #f97316;
  }

  .plp-bag-finder-popup .bag-finder__empty {
    padding: 32px;
    text-align: center;
    color: rgba(28, 64, 76, 0.65);
  }

  .plp-bag-finder-popup .bag-finder slideshow-arrows {
    position: absolute;
    inset: 50% 0 auto;
    transform: translateY(-50%);
    pointer-events: none;
    mix-blend-mode: normal;
    z-index: 2;
  }

  .plp-bag-finder-popup .bag-finder slideshow-arrows button {
    pointer-events: auto;
  }

  .plp-bag-finder-popup .bag-finder slideshow-container {
    position: relative;
  }

  .plp-bag-finder-popup__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding-top: 10px;
  }

  .plp-bag-finder-popup__pagination[hidden] {
    display: none;
  }

  .plp-bag-finder-popup__pagination-arrow {
    min-width: 20px;
    min-height: 20px;
    width: 20px;
    height: 20px;
    padding: 0;
    color: #0f495c;
    border: 1px solid #0f495c;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
  }

  .plp-bag-finder-popup__pagination-arrow .svg-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  .plp-bag-finder-popup__pagination-arrow--previous .svg-wrapper {
    transform: rotate(90deg);
  }

  .plp-bag-finder-popup__pagination-arrow--next .svg-wrapper {
    transform: rotate(-90deg);
  }

  .plp-bag-finder-popup__pagination-arrow svg {
    width: 12px;
    height: 12px;
  }

  .plp-bag-finder-popup__pagination-arrow[disabled] {
    opacity: 0.2;
  }

  .plp-bag-finder-popup__pagination-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .plp-bag-finder-popup__pagination-dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    border-radius: 999px;
    background: #e8eced;
    border: 0;
    padding: 0;
    display: block;
    cursor: pointer;
  }

  .plp-bag-finder-popup__pagination-dot:hover{
    background-color: #e8eced;
  }

  .plp-bag-finder-popup__pagination-dot[aria-selected='true'] {
    background: #e88c2b;
  }

  @keyframes plpBagFinderPopupOpen {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.985);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @keyframes plpBagFinderPopupClose {
    from {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    to {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.985);
    }
  }

  @media screen and (max-width: 989px) {
    .plp-bag-finder-popup__dialog-close svg {
    width: 12px;
    height: 12px;
  }
    .plp-bag-finder-popup {
      --plp-popup-viewport-margin-block: 14px;
      --plp-popup-viewport-margin-inline: 14px;
    }

    .plp-bag-finder-popup__dialog {
      width: min(1240px, calc(100vw - (var(--plp-popup-viewport-margin-inline) * 2)));
      max-width: calc(100vw - (var(--plp-popup-viewport-margin-inline) * 2));
      height: auto;
    }

    .plp-bag-finder-popup__dialog-inner {
      padding: 32px 16px;
    }

    .plp-bag-finder-popup .bag-finder__header {
      padding-inline: 36px;
    }

    .plp-bag-finder-popup .bag-finder__heading {
      font-size: 32px;
    }
  }

  @media screen and (max-width: 749px) {
    .plp-bag-finder-popup {
      --plp-popup-viewport-margin-block: 12px;
      --plp-popup-viewport-margin-inline: 16px;
    }

    .plp-bag-finder-popup .bag-finder {
      gap: 20px;
    }

    .plp-bag-finder-popup__launcher {
      right: max(16px, env(safe-area-inset-right));
      bottom: max(16px, env(safe-area-inset-bottom));
      gap: 6px;
    }

    .plp-bag-finder-popup__dialog {
      width: calc(100vw - (var(--plp-popup-viewport-margin-inline) * 2));
      max-width: calc(100vw - (var(--plp-popup-viewport-margin-inline) * 2));
      border-radius: 0;
    }

    .plp-bag-finder-popup__dialog-inner {
      padding: 32px 16px;
    }

    .plp-bag-finder-popup__dialog-close {
      top: 8px;
      right: 8px;
      width: 40px;
      height: 40px;
    }

    .plp-bag-finder-popup__dialog-close:focus-visible::after {
      display: none;
    }

    .plp-bag-finder-popup__content {
      gap: 20px;
      min-height: 680px;
    }

    .plp-bag-finder-popup .bag-finder__header {
      text-align: left;
      padding-inline: 0;
    }

    .plp-bag-finder-popup .bag-finder__heading {
      padding-right: 40px;
      font-size: 24px;
      line-height: 1.3;
      text-align: left;
    }

    .plp-bag-finder-popup .bag-finder__mobile-hint {
      display: none;
    }

    .plp-bag-finder-popup .bag-finder__filters {
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 6px;
      margin: 0;
      padding-bottom: 2px;
      scrollbar-width: none;
      align-items: center;
      -webkit-overflow-scrolling: touch;
    }

    .plp-bag-finder-popup .bag-finder__filters::-webkit-scrollbar {
      display: none;
    }

    .plp-bag-finder-popup .bag-finder__filter-btn {
      flex: 0 0 auto;
      padding: 10px 14px;
      font-size: 12px;
      margin-bottom: 0;
      margin-left: 0px;
    }

    .plp-bag-finder-popup .bag-finder__card-inner {
      padding: 0 16px;
    }

    .plp-bag-finder-popup .bag-finder__card-title {
      font-size: 16px;
    }

    .plp-bag-finder-popup .bag-finder__card-header {
      min-height: 0;
      padding-bottom: 12px;
    }

    .plp-bag-finder-popup .bag-finder__card-image {
      margin-bottom: 12px;
    }

    .plp-bag-finder-popup .bag-finder__card-info-row {
      gap: 0.5rem;
      margin-bottom: 10px;
    }

    .plp-bag-finder-popup .bag-finder__card-clubs-label {
      font-size: 14px;
    }

    .plp-bag-finder-popup .bag-finder__card-clubs-value {
      font-size: 14px;
    }

    .plp-bag-finder-popup .bag-finder__card-compare-price {
      font-size: 14px;
    }

    .plp-bag-finder-popup .bag-finder__card-sale-price {
      font-size: 14px;
    }

    .plp-bag-finder-popup .bag-finder__card-icons {
      gap: 12px 16px;
      padding: 10px 0;
      margin-bottom: 12px;
    }

    .plp-bag-finder-popup .bag-finder__icon-item {
      width: 100%;
    }

    .plp-bag-finder-popup .bag-finder__icon-item img {
      width: 34px;
      min-width: 34px;
      height: 34px;
    }

    .plp-bag-finder-popup .bag-finder__icon-label {
      font-size: 12px;
    }

    .plp-bag-finder-popup .bag-finder__card-specs,
    .plp-bag-finder-popup .bag-finder__card-specs p,
    .plp-bag-finder-popup .bag-finder__card-specs strong,
    .plp-bag-finder-popup .bag-finder__card-specs b {
      font-size: 0.875rem;
      line-height: 1.45;
    }

    .plp-bag-finder-popup .bag-finder__btn {
      font-size: 0.875rem;
      padding: 0.95rem 1rem;
    }

    .plp-bag-finder-popup__pagination {
      gap: 16px;
      padding-top: 20px;
    }

    .plp-bag-finder-popup .bag-finder__component {
      gap: 20px;
    }
  }
/* END_SECTION:plp-bag-finder-popup */

/* START_SECTION:predictive-search (INDEX:58) */
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-carry (INDEX:59) */
.product-carry {
    padding-top: var(--padding-top, 60px);
    padding-bottom: var(--padding-bottom, 60px);
  }

  .product-carry__container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 var(--page-margin);
  }

  .product-carry__heading {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--color-foreground);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
  }

  .product-carry__image {
    width: 83%;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  .product-carry__image--mobile {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .product-carry__image--desktop {
      display: none;
    }

    .product-carry__image--mobile {
      display: block;
    }
  }
/* END_SECTION:product-carry */

/* START_SECTION:product-information (INDEX:60) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* The grid should only ever hold the media and details elements. App blocks
     (e.g. Back in Stock) can emit malformed markup that the HTML parser hoists
     into a stray element here, which then steals a grid column and stacks the
     layout. Neutralise anything that isn't one of the two intended children. */
  .product-information__grid > :not(.product-information__media):not(.product-details) {
    display: none;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
      margin-top: 1em;
    }
  }

  /* 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-information__grid:has(.product-information__media:empty) {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(:has(.product-information__media:empty)) {
      /* 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(:has(.product-information__media:empty)),
      .product-information__grid:not(:has(.product-information__media:empty)) {
        &.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,
        :has(.product-information__media:empty)
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        :has(.product-information__media:empty)
      ).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_SECTION:product-information */

/* START_SECTION:product-list (INDEX:61) */
/* Product list carousel arrows - always visible, rounded style */
  .section-resource-list .resource-list__carousel slideshow-arrows {
    opacity: 1 !important;
  }

  .section-resource-list .resource-list__carousel slideshow-arrows .slideshow-control {
    opacity: 1 !important;
    animation: none !important;
    width: 48px;
    height: 48px;
    border-radius: 8px !important;
    background: var(--color-background) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }

  .section-resource-list .resource-list__carousel slideshow-arrows .slideshow-control:hover {
    transform: scale(1.05);
  }

  .section-resource-list .resource-list__carousel slideshow-arrows .slideshow-control svg {
    width: 20px;
    height: 20px;
    color: var(--color-foreground);
  }

  /* Position arrows at the edges of the screen */
  .section-resource-list .resource-list__carousel slideshow-arrows {
    position: absolute;
    left: calc(-1 * var(--page-margin, 2rem));
    right: calc(-1 * var(--page-margin, 2rem));
    width: auto;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }

  .section-resource-list .resource-list__carousel slideshow-arrows .slideshow-control--previous {
    margin-left: var(--padding-xs);
  }

  .section-resource-list .resource-list__carousel slideshow-arrows .slideshow-control--next {
    margin-right: var(--padding-xs);
  }

  .section-resource-list__view-all-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .section-resource-list__view-all {
    display: block;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
  }

  .section-resource-list__view-all:hover {
    opacity: 0.8;
  }
/* END_SECTION:product-list */

/* START_SECTION:product-recommendations (INDEX:62) */
.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:wholesale-form (INDEX:77) */
.wholesale-form-section {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .wholesale-form__container {
    max-width: var(--wholesale-form-max-width, 800px);
    margin-inline: auto;
    padding-inline: var(--padding-md);
  }

  .wholesale-form__heading {
    text-align: center;
    margin-block-end: var(--gap-sm);
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .wholesale-form__description {
    text-align: center;
    margin-block-end: var(--gap-lg);
    color: var(--color-foreground);
    opacity: 0.8;
  }

  .wholesale-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .wholesale-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
  }

  @media screen and (max-width: 749px) {
    .wholesale-form__grid {
      grid-template-columns: 1fr;
    }
  }

  .wholesale-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
  }

  .wholesale-form__field--half {
    grid-column: span 1;
  }

  .wholesale-form__field--full {
    grid-column: 1 / -1;
  }

  .wholesale-form__label {
    font-weight: 600;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-foreground);
  }

  .wholesale-form__required {
    color: var(--color-primary);
    margin-inline-start: 0.25em;
  }

  .wholesale-form__input {
    width: 100%;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size-base, 1rem);
    font-family: inherit;
    background-color: var(--color-input-background, var(--color-background));
    color: var(--color-input-text, var(--color-foreground));
    border: var(--style-border-width-inputs, 1px) solid var(--color-input-border, var(--color-border));
    border-radius: var(--style-border-radius-inputs, 8px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .wholesale-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
  }

  .wholesale-form__input:hover:not(:focus) {
    background-color: var(--color-input-hover-background, var(--color-input-background, var(--color-background)));
  }

  .wholesale-form__input--textarea {
    resize: vertical;
    min-height: 120px;
  }

  .wholesale-form__fieldset {
    border: none;
    padding: 0;
    margin: 0;
  }

  .wholesale-form__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm) var(--gap-md);
    margin-block-start: var(--gap-xs);
  }

  .wholesale-form__radio-label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    cursor: pointer;
    font-size: var(--font-size-base, 1rem);
  }

  .wholesale-form__radio {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--color-primary);
    cursor: pointer;
  }

  .wholesale-form__radio-text {
    color: var(--color-foreground);
  }

  .wholesale-form__field--submit {
    margin-block-start: var(--gap-sm);
  }

  .wholesale-form__submit {
    width: 100%;
    padding: var(--padding-md) var(--padding-lg);
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .wholesale-form__submit.button {
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    border: var(--style-border-width-primary, 0) solid var(--color-primary-button-border);
    border-radius: var(--style-border-radius-buttons-primary, 100px);
  }

  .wholesale-form__submit.button:hover {
    background-color: var(--color-primary-button-hover-background);
    color: var(--color-primary-button-hover-text);
    border-color: var(--color-primary-button-hover-border);
  }

  .wholesale-form__submit.button-secondary {
    background-color: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
    border: var(--style-border-width-secondary, 1px) solid var(--color-secondary-button-border);
    border-radius: var(--style-border-radius-buttons-secondary, 100px);
  }

  .wholesale-form__submit.button-secondary:hover {
    background-color: var(--color-secondary-button-hover-background);
    color: var(--color-secondary-button-hover-text);
    border-color: var(--color-secondary-button-hover-border);
  }

  .wholesale-form__message {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--padding-md);
    border-radius: var(--style-border-radius-inputs, 8px);
    font-size: var(--font-size-base, 1rem);
  }

  .wholesale-form__message--success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
  }

  .wholesale-form__message--error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
  }

  .wholesale-form__message svg {
    flex-shrink: 0;
  }
/* END_SECTION:wholesale-form */

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

/* START_BLOCK:_announcement (INDEX:80) */
.text-block {
    width: var(--width);
    max-width: 100%;
  }

  .text-block > * {
    width: var(--width);
    max-width: var(--max-width, 100%);
    text-align: var(--text-align);
  }

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

/* START_BLOCK:_blog-post-description (INDEX:83) */
.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:84) */
.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:85) */
.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:86) */
.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:_cart-products (INDEX:87) */
.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);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:88) */
.cart__summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart__summary-item.tax-note {
    font-size: var(--cart-font-size--sm);
  }

  .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:89) */
.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:92) */
.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:94) */
.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:98) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    gap: var(--gap);
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: var(--layer-flat);
    pointer-events: none;
  }

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

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    height: 100%;

    .featured-blog-posts-card__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      flex-shrink: 0;
      height: auto;
    }
  }

  @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 {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    gap: var(--gap);
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius);
  }

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

/* START_BLOCK:_featured-blog-posts-image (INDEX:99) */
.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:103) */
.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:104) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-links (INDEX:106) */
.header-links {
    display: flex;
    align-items: center;
  }

  .header-links__list {
    display: flex;
    gap: var(--menu-items-gap, var(--gap-xl));
    margin: 0;
    padding: 0;
  }

  .header-links__item {
    display: flex;
    align-items: center;
  }

  .header-links__link {
    font-family: var(--menu-top-level-font-family);
    font-size: var(--menu-top-level-font-size-desktop);
    font-weight: var(--menu-top-level-font-weight);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    text-transform: var(--menu-top-level-font-case);
    letter-spacing: var(--menu-top-level-font-letter-spacing);
    line-height: var(--menu-top-level-font-line-height);
    display: flex;
    min-height: var(--minimum-touch-target);
    align-items: center;
    white-space: nowrap;
  }

  /* Mobile navigation bar */
  .header-links-nav-bar {
    display: flex;
    padding: var(--padding-sm) 0;
  }

  .header-links-nav-bar__list {
    display: flex;
    gap: var(--gap-lg);
    margin: 0;
    padding: 0 var(--padding-lg);
    overflow-x: auto;
  }

  .header-links-nav-bar__link {
    color: var(--color-foreground);
    text-decoration: none;
    white-space: nowrap;
    padding: var(--padding-2xs) 0;
  }
/* END_BLOCK:_header-links */

/* START_BLOCK:_header-logo (INDEX:107) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

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

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

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

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

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

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

  .header-logo__image {
    object-fit: contain;
    height: auto;
    width: 100px;

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

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

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

/* START_BLOCK:_header-menu (INDEX:108) */
.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 {
    flex: 0 0 auto;
  }

  /* Drawer menu featured content */
  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-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);
    letter-spacing: var(--menu-top-level-font-letter-spacing);
    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: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  /*
      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: calc(var(--layer-header-menu) - 1);
  }

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

    box-shadow: var(--shadow-drawer);
    visibility: hidden;
    background-color: var(--color-background);
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width));
    z-index: var(--layer-header-menu);
    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) {
    max-height: calc(95vh - var(--header-height));
    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: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;
    transition: color var(--animation-speed) var(--animation-easing);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    width: 200px;
  }

  .mega-menu__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;
  }
/* END_BLOCK:_header-menu */

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_product-details (INDEX:119) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

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

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

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

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

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

  /* PDP product title */
  .product-details h1,
  .product-details .text-block h1,
  .product-details .text-block:has(h1),
  .product-details .text-block.h3 {
    font-size: 30px !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    line-height: 39px !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_product-media-gallery (INDEX:123) */
media-gallery {
    position: relative;
  }

  @media screen and (max-width: 749px) {
    media-gallery {
      margin-bottom: 1em;
    }
  }

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

  .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_BLOCK:_product-media-gallery */

/* START_BLOCK:_search-input (INDEX:125) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

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

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:126) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
  }

  .slide__content > * {
    margin: auto;
  }

  /* Full-slide overlay link, positioned above the media. */
  .slide__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    display: block;
  }

  /* The content wrapper spans the whole slide and would otherwise swallow
     clicks meant for the overlay link. When a slide link is present, let
     clicks fall through the wrapper to the link, but keep the slide's own
     interactive elements (buttons, links, inputs) clickable. */
  .slide__link ~ .slide__content {
    pointer-events: none;
  }

  .slide__link ~ .slide__content a,
  .slide__link ~ .slide__content button,
  .slide__link ~ .slide__content input,
  .slide__link ~ .slide__content select,
  .slide__link ~ .slide__content textarea,
  .slide__link ~ .slide__content label,
  .slide__link ~ .slide__content [role="button"] {
    pointer-events: 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 > placeholder-image,
  .slide__image-container > placeholder-image > img {
    width: 100%;
  }

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

  /* When a separate mobile image is set, swap desktop/mobile at the 749/750px breakpoint. */
  @media (max-width: 749px) {
    .slide__image-container > .slide__image--desktop {
      display: none;
    }
  }

  @media (min-width: 750px) {
    .slide__image-container > .slide__image--mobile {
      display: none;
    }
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:127) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    fill: currentColor;
    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:128) */
.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:129) */
.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;
    margin-top: 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: 15px;
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    color: var(--color-foreground);
    padding: 1rem 0;
  }

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

  .accordion .details__header .icon-caret,
  .accordion .details__header .icon-plus {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
  }

  accordion-custom .metafield-rich_text_field p {
    font-size: 15px;
    font-weight: normal;
  }

  /* Accordion body copy shouldn't inherit the bold paragraph weight.
     Extend the normalization to list items and non-rich-text content
     (previously only .metafield-rich_text_field p was covered, so <li> stayed bold). */
  accordion-custom .text-block :is(p, li, ul, ol),
  accordion-custom .metafield-rich_text_field :is(p, li) {
    font-weight: normal;
  }
/* END_BLOCK:accordion */

/* START_BLOCK:bundle-card (INDEX:132) */
.bundle-card {
    --bundle-card-rule: #d9d9d9;
    --bundle-card-swatch-border: #e5e7eb;

    /* `container-type: inline-size` removes intrinsic inline sizing, so the
       card MUST be told to fill its track — without this it collapses to zero
       width in any shrink-to-fit parent (e.g. a centered flex column). */
    container-type: inline-size;
    /* Containing block for the title link's stretched ::after (see
       `.bundle-card__title::after`). `container-type` already establishes one
       via its implied `contain: layout`, but that is a side effect — state the
       dependency outright so removing the container query can't silently
       reattach the overlay to some ancestor and blow it up to page size. */
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    /* Padding settings. --spacing-scale must be declared: values over 20px
       are emitted as max(20px, calc(var(--spacing-scale) * Npx)) and the
       whole declaration is dropped if the scale is undefined. */
    --spacing-scale: var(--spacing-scale-md);
    padding-block: var(--padding-block-start, 8px) var(--padding-block-end, 8px);
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--bundle-card-background, #f3f4f6);
    color: var(--bundle-card-text, #0f495c);
  }

  @media screen and (min-width: 990px) {
    .bundle-card {
      --spacing-scale: var(--spacing-scale-default);
    }
  }

  @media screen and (max-width: 989px) {
    .bundle-card {
      padding-block: var(--padding-block-start-mobile, var(--padding-block-start, 8px))
        var(--padding-block-end-mobile, var(--padding-block-end, 8px));
    }
  }

  .bundle-card--empty {
    padding: 24px;
    font-family: var(--font-body--family);
    font-size: 14px;
    text-align: center;
  }

  /* ── Media ─────────────────────────────────────────────────────────── */

  .bundle-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 250 / 246;
  }

  .bundle-card__media-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  .bundle-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .bundle-card__badge {
    position: absolute;
    inset-block-start: 9px;
    inset-inline-start: 0;
    padding: 5px 8px;
    border-start-end-radius: 5px;
    border-end-end-radius: 5px;
    background-color: var(--bundle-card-badge-background, #c89c3d);
    color: #fff;
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .bundle-card__rating {
    position: absolute;
    inset-block-start: 13px;
    inset-inline-end: 9px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border-radius: 40px;
  }

  .bundle-card__star {
    display: block;
    flex-shrink: 0;
    width: 11.42px;
    height: 11.36px;
  }

  .bundle-card__rating-value {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
  }

  /* ── Body ──────────────────────────────────────────────────────────── */

  .bundle-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding-inline: 16px;
  }

  .bundle-card__header,
  .bundle-card__titles {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bundle-card__title {
    font-family: var(--font-heading--family);
    font-weight: 900;
    font-size: 17px;
    line-height: 1.1;
    letter-spacing: 0.34px;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
  }

  /* Stretched link. The card carried three separate anchors to the same URL —
     media, title, button — and everything between them (price, swatches, the
     "Includes" grid, the call-out row, the badge and the rating) was inert.
     A hit-test of a 6px grid across the rendered card measured 39% of its area
     dead; on a page that is nothing but these cards that was the single largest
     source of dead taps. This overlay routes the whole tile to the product.

     ONLY THIS ONE MAY STRETCH — two stretched links would overlap and the
     topmost would win arbitrarily. The title is the right one to pick:

       - It is the only anchor here carrying a meaningful accessible name, so
         the tile-wide target is announced as the bundle's name.
       - The media anchor is `aria-hidden="true" tabindex="-1"` — deliberately
         outside the a11y tree — so making IT the primary target would name the
         card's whole hit area with nothing.
       - `.bundle-card__media` is `position: relative` to anchor the badge and
         rating, so an ::after on the media anchor would be trapped inside the
         media box and cover only ground that anchor already covers.

     The media anchor is left in place: it is invisible to assistive tech and
     now sits under this overlay, so it costs nothing, and keeping it means a
     future override of this rule degrades to today's behaviour rather than
     killing the image tap too. */
  .bundle-card__title::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Above the badge and rating, which are positioned with `z-index: auto`. */
    z-index: 1;
  }

  /* The whole tile is the target now, so ring the whole tile. Inset so the
     carousel's `overflow-x: auto` can't clip it off the leading edge. */
  .bundle-card:has(.bundle-card__title:focus-visible) {
    outline: 2px solid currentcolor;
    outline-offset: -2px;
  }

  .bundle-card__subtitle {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
  }

  .bundle-card__rule {
    width: 100%;
    height: 1px;
    margin: 0;
    border: 0;
    background-color: var(--bundle-card-rule);
  }

  .bundle-card__price-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
  }

  .bundle-card__price-prefix {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.3px;
  }

  .bundle-card__price {
    font-family: var(--font-heading--family);
    font-weight: 800;
    font-size: 19px;
    line-height: 1;
    letter-spacing: 0.39px;
    color: var(--bundle-card-price-color, #48ba25);
  }

  /* ── Swatches ──────────────────────────────────────────────────────── */

  .bundle-card__swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }

  /* 24px outer box including the 2px ring, matching the design's swatch. */
  .bundle-card__swatch {
    box-sizing: border-box;
    display: block;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border: 2px solid var(--bundle-card-swatch-border);
    border-radius: 50%;
    background-color: var(--bundle-card-swatch-border);
  }

  .bundle-card__swatch img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  .bundle-card__swatch-more {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
  }

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

  .bundle-card__button {
    /* Above the title link's stretched ::after. Without this the overlay
       swallows the button's :hover and the card's one real call to action
       stops reacting to the cursor. It points at the same URL, so whichever
       of the two takes the click is the same navigation. */
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 9px 12px;
    border-radius: 8px;
    background-color: var(--bundle-card-button-background, #0f495c);
    color: #fff;
    font-family: var(--font-heading--family);
    font-weight: 900;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.27px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--animation-speed) var(--animation-easing);
  }

  /* Hover is the gold the button used to sit at, so the two states read as a
     deliberate pair rather than a tint of one colour. */
  .bundle-card__button:hover {
    background-color: var(--bundle-card-button-hover-background, #c89b3c);
  }

  /* ── Includes ──────────────────────────────────────────────────────── */

  .bundle-card__includes {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bundle-card__includes-heading {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.6;
  }

  /* Column-major fill (1,2 | 3,4) — `columns` would line-balance instead. */
  .bundle-card__includes-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--bundle-card-includes-rows, 2), auto);
    column-gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
  }

  /* The global `li` type selector in theme-styles-variables.liquid sets
     font-size/line-height/letter-spacing directly on the item, so the list's
     own values never inherit down. Restate them on the li to win. */
  .bundle-card__includes-list li {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: normal;
  }

  .bundle-card__includes-list li::before {
    content: '• ';
  }

  /* ── Features ──────────────────────────────────────────────────────── */

  /* Call-outs sit three across. The lockups are wide (2.18 to 2.41) and carry
     their own type, so the row is tight — a 4px gap buys back width for the
     artwork, which needs it more than the row needs separation. */
  /* Three equal columns. The cells used to size themselves as fixed flex
     thirds; with that rule gone the track does the work, so a card with two
     call-outs still renders them at the same size as a card with three
     instead of letting them grow to halves. */
  .bundle-card__features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Height-driven at a fixed 50px; width follows each lockup's own aspect
     ratio (2.18 to 2.41), so they land at 109-120px wide. Driving from height
     rather than width is what keeps the baked-in type one size across the row:
     cap height is ~9 of the artwork's 44 units, so type ≈ 0.2 × height, or
     about 10px here. Sizing by width instead would vary it with each icon's
     ratio.

     max-width is the safety valve for cells narrower than the lockup — at the
     ~370px card the page renders, a third is ~110px, which the two widest
     icons just exceed. preserveAspectRatio (default xMidYMid meet) scales the
     artwork down to fit rather than distorting it, so the row degrades to
     slightly smaller icons instead of overflowing the card. */
  .bundle-card__feature-icon {
    display: block;
    height: 50px;
    width: auto;
    max-width: 100%;
  }

  .bundle-card__feature-label {
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.1;
    text-transform: uppercase;
  }

  /* Narrow grid columns: close the row up entirely. The icons are sized as a
     fraction of the card, so they scale on their own — the gap is the only
     thing left worth reclaiming. */
  @container (max-width: 340px) {
    .bundle-card__features {
      gap: 2px;
    }
  }

  @container (max-width: 260px) {
    .bundle-card__includes-list {
      grid-auto-flow: row;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
    }
  }
/* END_BLOCK:bundle-card */

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

  .bundle-picker__desc {
    font-size: 2rem;
    font-weight: var(--bp-font-weight);
    font-family: var(--font-body--family), sans-serif;
    color: var(--bp-text-color);
    text-transform: uppercase;
    margin: 0 0 1.5rem;
    line-height: 1.4;
  }

  .bundle-picker__group {
    margin-bottom: 1.5rem;
  }

  .bundle-picker__label {
    font-size: 1.6rem;
    font-weight: 600;
    font-family: var(--font-body--family), sans-serif;
    color: var(--bp-text-color);
    text-transform: uppercase;
    margin: 0 0 0.75rem;
  }

  .bundle-picker__item-price {
    font-family: var(--font-subheading--family), sans-serif;
    font-weight: 700;
    color: var(--bp-text-color);
    margin-left: 0.5rem;
  }

  .bundle-picker__item-price:empty {
    display: none;
  }

  .bundle-picker__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .bundle-picker__swatch {
    width: var(--bp-swatch-size);
    height: var(--bp-swatch-size);
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    padding: 0;
    background: #f5f5f5;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
  }

  .bundle-picker__swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }

  .bundle-picker__swatch--active {
    border-color: var(--bp-primary-color);
    box-shadow: 0 0 0 2px var(--bp-primary-color);
  }

  .bundle-picker__swatch:hover:not(.bundle-picker__swatch--active) {
    border-color: #999;
  }

  .bundle-picker__swatch:focus-visible {
    outline: 2px solid var(--bp-primary-color);
    outline-offset: 2px;
  }

  .bundle-picker__pricing {
    margin: 1.5rem 0;
    padding: 1rem 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }

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

  .bundle-picker__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    font-family: var(--font-body--family), sans-serif;
  }

  .bundle-picker__row--regular {
    color: #999;
    text-decoration: line-through;
    font-size: var(--bp-price-size);
  }

  .bundle-picker__row--discount {
    color: var(--bp-price-color);
    font-size: var(--bp-price-size);
    font-weight: 600;
  }

  .bundle-picker__row--total {
    font-size: 1.75rem;
    font-weight: var(--bp-font-weight);
    color: var(--bp-text-color);
    text-transform: uppercase;
    margin-top: 0.5rem;
    margin-bottom: 0;
  }

  .bundle-picker__total-val {
    font-family: var(--font-subheading--family), sans-serif;
    font-weight: 700;
    color: var(--bp-price-color);
  }

  .bundle-picker__cart-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.6rem;
    font-weight: var(--bp-font-weight);
    font-family: var(--font-body--family), sans-serif;
    text-transform: uppercase;
    background: var(--bp-button-bg);
    color: var(--bp-button-text);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  .bundle-picker__cart-btn:hover:not(:disabled) {
    opacity: 0.9;
  }

  .bundle-picker__cart-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .bundle-picker__success {
    display: none;
    text-align: center;
    color: var(--bp-price-color);
    font-weight: 700;
    font-size: 1.4rem;
    margin-top: 0.75rem;
    font-family: var(--font-body--family), sans-serif;
  }

  .bundle-picker__success--visible {
    display: block;
  }
/* END_BLOCK:bundle-picker */

/* START_BLOCK:buy-buttons (INDEX:135) */
.buy-buttons-block {
    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, .quantity-rules, .quantity-label) {
    flex: 1 1 185px;
    min-width: fit-content;
  }

  .product-form-buttons--stacked > *:not(.quantity-selector, .quantity-rules, .quantity-label) {
    flex-basis: 51%; /* Force the buttons to be on separate rows */
  }

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

  .bis-notify-button.BIS_trigger {
    width: 100%;
    margin-block-start: var(--gap-xs);
    cursor: pointer;
    /* Match the buy buttons' size. Colors, corner radius, font family and text
       case come from the chosen button style class + the theme button settings,
       so the button follows the color scheme. Do NOT set box-shadow here — the
       global button classes draw their border via inset box-shadow. */
    height: var(--height-buy-buttons);
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 21.6px;
    /* Force uppercase to match the add-to-cart button, which does the same — a
       broad theme button reset sets text-transform:none at equal specificity. */
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* "Link" button style: drop the boxed button treatment for a text link. */
  .bis-notify-button--link.BIS_trigger {
    height: auto;
    padding-block: var(--gap-xs);
    padding-inline: 0;
  }

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

  .product-form-buttons:has(.quantity-rules) .quantity-selector {
    margin-inline-end: var(--gap-sm);
    margin-block-end: var(--gap-sm);
  }

  .quantity-selector:has(+ .quantity-rules) {
    margin-block-end: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 21.6px;
    /* Corner radius, font family and text case follow the theme button
       settings via the button style class. */
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* "Link" button style: drop the boxed button treatment for a text link. */
  .add-to-cart-button--link {
    height: auto;
    box-shadow: none;
  }

  /* External "Shop Now" link — rendered as an <a>, so it sits outside the
     add-to-cart-component scope that supplies the button typography. Match it. */
  .external-shop-button {
    text-decoration: none;
    font-family: 'Red Hat Display', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
  }

  .add-to-cart-button .add-to-cart-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

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

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

  .product-form-buttons .shopify-payment-button__button {
    width: 100%;
    min-height: var(--minimum-touch-target);
  }

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

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

  .quantity-rules__item {
    position: relative;
    display: inline-block;
  }

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

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

/* START_BLOCK:complementary-products (INDEX:138) */
.product-recommendations {
    display: block;
  }

  /* List carousel header with inline navigation */
  .section-resource-list__content--with-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md, 16px);
  }

  .section-resource-list__header {
    flex: 1;
  }

  .list-carousel__header-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }

  .list-carousel__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--color-background, #fff);
    color: var(--color-foreground);
    border: 1px solid var(--color-foreground);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .list-carousel__nav-btn:hover:not(:disabled) {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  .list-carousel__nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
/* END_BLOCK:complementary-products */

/* START_BLOCK:contact-form-submit-button (INDEX:139) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:email-signup (INDEX:142) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 37px;
    --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-background);
    height: 37px;
  }

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

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

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

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

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

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

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

  .email-signup__input,
  .email-signup__button--text {
    padding: 0 var(--padding-sm);
  }

  .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 {
    align-self: stretch;
    margin: 0;
    margin-right: -1px;
    flex-shrink: 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:filters (INDEX:144) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

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

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

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

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

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

  .facets--horizontal {
    display: none;

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

  .facets--vertical {
    display: none;

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

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

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

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

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;
    font-weight: 400;
    font-size: 14px;

    @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;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
      font-weight: 400;
      font-size: 14px;
    }
  }

  .facets__count-sort-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      align-items: center;
      gap: var(--gap-sm);
      margin-left: auto;
      flex-shrink: 0;
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

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

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:147) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:form (INDEX:148) */
.form-block__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md, 1rem);
    width: 100%;
  }

  .form-block--width-narrow .form-block__form { max-width: 28rem; }
  .form-block--width-medium .form-block__form { max-width: 38rem; }
  .form-block--width-full .form-block__form { max-width: 100%; }

  .form-block__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md, 1rem);
  }

  .form-block__field {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs, 0.375rem);
    flex: 1 1 100%;
    min-width: 0;
  }

  .form-block__field--half { flex: 1 1 calc(50% - var(--gap-md, 1rem)); }

  @media screen and (max-width: 749px) {
    .form-block__field--half { flex: 1 1 100%; }
  }

  .form-block__label {
    font-size: var(--font-size--sm, 0.875rem);
    font-weight: 500;
    color: var(--color-foreground);
  }

  .form-block--hide-labels .form-block__label,
  .form-block--hide-labels .form-block__group > .form-block__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Keep consent checkbox label visible even when labels are hidden — it is the consent text itself */
  .form-block--hide-labels .form-block__option--consent {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .form-block__req { color: var(--color-primary, currentColor); }

  .form-block__input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-family: inherit;
    font-size: var(--font-size--sm, 0.875rem);
    font-weight: 400;
    color: var(--color-input-text, var(--color-foreground));
    background-color: var(--color-input-background, var(--color-background));
    border: var(--style-border-width-inputs, 1px) solid var(--color-input-border, currentColor);
    border-radius: var(--style-border-radius-inputs, 6px);
    transition: border-color var(--animation-speed, 0.2s) ease, box-shadow var(--animation-speed, 0.2s) ease, background-color var(--animation-speed, 0.2s) ease;
  }

  .form-block__input::placeholder {
    font-weight: 400;
    color: rgb(var(--color-input-text-rgb, 0 0 0) / 0.55);
  }

  .form-block__textarea { min-height: 6.5rem; resize: vertical; }

  .form-block__input:hover {
    background-color: var(--color-input-hover-background, var(--color-input-background));
  }

  .form-block__input:focus {
    outline: none;
    border-color: var(--color-input-border, var(--color-primary));
    background-color: var(--color-input-hover-background, var(--color-input-background));
    box-shadow: 0 0 0 1px var(--color-input-border, var(--color-primary));
  }

  .form-block__input:user-invalid {
    border-color: var(--color-error, #d34a4a);
  }

  .form-block__date {
    position: relative;
  }

  .form-block__input--date {
    min-width: 0;
    max-width: 100%;
  }

  .form-block__input--date::-webkit-date-and-time-value {
    text-align: left;
  }

  /* Faux placeholder only renders on iOS (below); native everywhere else. */
  .form-block__date-placeholder {
    display: none;
  }

  /* iOS Safari only. Native date controls there ignore width:100% and overflow
     the page; only appearance:none forces them to fit, but that also drops the
     native height and the "mm/dd/yyyy" placeholder. So, on iOS only, we reset
     appearance, restore an explicit height, and show a faux placeholder.
     Desktop and Android keep fully native rendering (their placeholder works
     and they don't overflow). */
  @supports (-webkit-touch-callout: none) {
    .form-block__input--date {
      -webkit-appearance: none;
      appearance: none;
      min-height: calc(1.5em + 1.25rem + (var(--style-border-width-inputs, 1px) * 2));
      line-height: 1.5;
    }

    .form-block__input--date::-webkit-date-and-time-value {
      margin: 0;
      line-height: 1.5;
      min-height: 1.5em;
    }

    .form-block__date-placeholder {
      display: block;
      position: absolute;
      inset-inline-start: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      font-size: var(--font-size--sm, 0.875rem);
      font-weight: 400;
      color: rgb(var(--color-input-text-rgb, 0 0 0) / 0.55);
    }

    .form-block__date[data-filled] .form-block__date-placeholder,
    .form-block__date:focus-within .form-block__date-placeholder {
      display: none;
    }
  }

  .form-block__group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs, 0.375rem);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .form-block__group .form-block__label { margin-bottom: var(--gap-2xs, 0.375rem); }

  .form-block__option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--font-size--sm, 0.875rem);
    color: var(--color-foreground);
    cursor: pointer;
  }

  .form-block__option input {
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-primary, var(--color-foreground));
  }

  .form-block__option--consent { margin-block-start: var(--gap-2xs, 0.375rem); }

  .form-block__help {
    font-size: var(--font-size--xs, 0.75rem);
    color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.6);
  }

  .form-block__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .form-block__turnstile { margin-block-start: var(--gap-2xs, 0.375rem); }

  .form-block__actions { margin-block-start: var(--gap-xs, 0.5rem); }

  .form-block__submit { cursor: pointer; }
  .form-block__submit:disabled { opacity: 0.6; cursor: not-allowed; }

  .form-block__message {
    padding: 0.75rem 1rem;
    border-radius: var(--style-border-radius-inputs, 6px);
    font-size: var(--font-size--sm, 0.875rem);
  }

  .form-block__message--success {
    background-color: var(--color-success-background, #e3f5e9);
    color: var(--color-success-text, #1c6b3c);
  }

  .form-block__message--error {
    background-color: var(--color-error-background, #fbe7e7);
    color: var(--color-error-text, #a32b2b);
  }

  .form-block__notice {
    padding: 0.625rem 0.875rem;
    margin-block-end: 1rem;
    font-size: var(--font-size--sm, 0.875rem);
    background-color: var(--color-error-background, #fbe7e7);
    color: var(--color-error-text, #a32b2b);
    border-radius: var(--style-border-radius-inputs, 6px);
  }
/* END_BLOCK:form */

/* START_BLOCK:icon (INDEX:150) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

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

/* START_BLOCK:image (INDEX:151) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');

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

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  /* <picture> wrapper for the mobile image swap must stay transparent to layout */
  .image-block picture {
    display: contents;
  }

  @media screen and (max-width: 749px) {
    .image-block__image {
      aspect-ratio: var(--ratio-mobile, var(--ratio));
    }

    /* base.css gives image blocks inside a mobile row `flex: 1 1 <basis>`.
       flex-grow beats `width` on a flex item, so any explicitly sized mobile
       width — Custom or Fit content — was only ever a starting basis before
       stretching to fill the row. Applies to both; Fill still grows.

       flex-basis stays `auto` so the item defers to the `width` that
       .size-style already set from --size-style-width-mobile. That resolves
       correctly for a length, a percentage and the fit-content keyword
       alike, without relying on fit-content being valid as a flex-basis.
       max-width caps a value wider than the viewport instead of overflowing. */
    .layout-panel-flex--row:not(.mobile-column) > .image-block.image-block--width-mobile-fixed {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: auto;
      max-width: 100%;
    }
  }

  .image-block--has-shape {
    position: relative;
  }

  .image-block__shape {
    position: absolute;
    width: var(--shape-size, 120%);
    height: var(--shape-size, 120%);
    top: 50%;
    left: 50%;
    transform: translate(
      calc(-50% + var(--shape-offset-x, 0%)),
      calc(-50% + var(--shape-offset-y, 0%))
    );
    z-index: 0;
    color: var(--shape-color, #000000);
    pointer-events: none;
  }

  .image-block__shape svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .image-block--has-shape .image-block__image,
  .image-block--has-shape .placeholder-image {
    position: relative;
    z-index: 1;
    transform: translate(var(--image-offset-x, 0%), var(--image-offset-y, 0%));
  }

  /* Hover image swap */
  .image-block__hover-wrapper {
    position: relative;
    display: inline-flex;
    width: 100%;
  }

  .image-block__hover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--hover-image-fit, contain);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .image-block__hover-wrapper:hover .image-block__image:not(.image-block__hover-img) {
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .image-block__hover-wrapper:hover .image-block__hover-img {
      opacity: 1;
    }
  }

  .image-block__hover-wrapper.is-hovered .image-block__image:not(.image-block__hover-img) {
    opacity: 0;
    transition: none;
  }

  .image-block__hover-wrapper.is-hovered .image-block__hover-img {
    opacity: 1;
    transition: none;
  }

  .image-block__hover-wrapper .image-block__image {
    transition: opacity 0.3s ease;
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:156) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:157) */
.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 {
    padding-block: 0;
    padding-bottom: 5px;
  }

  /* The heading text lives in a span inside the summary, but the block's
     typography (preset class or custom inline style) sits on the summary — so
     the span only inherits it. theme-styles-variables pins font-family,
     font-size, letter-spacing, line-height AND font-weight directly on every
     `span`, and a direct rule always beats an inherited value, so the heading
     rendered at body weight no matter what the setting said.

     Make the spans follow their summary at every breakpoint. The mobile
     overrides below are declared after this and win when they are set. */
  .menu .menu__heading > span {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading--underline {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  @media screen and (max-width: 749px) {
    .menu__heading--no-underline-mobile {
      text-decoration: none;
    }
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* The visible mobile heading is a span inside the summary, so section-level
       styles targeting it out-specify the typography inherited from the summary.
       Keep this above that specificity: unset custom properties fall back to
       `inherit`, which is the heading preset the summary already carries. */
    .menu .menu__heading > span {
      font-size: var(--menu-heading-font-size-mobile, inherit);
      font-weight: var(--menu-heading-weight-mobile, inherit);
      letter-spacing: var(--menu-heading-letter-spacing-mobile, inherit);
      text-transform: var(--menu-heading-case-mobile, inherit);
    }

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

  @media screen and (min-width: 750px) {
    .menu__list--horizontal {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--spacing--size);
    }

    .menu__list--horizontal .menu__item + .menu__item {
      margin-block-start: 0;
    }
  }

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:159) */
.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:160) */
.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:161) */
.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:162) */
.tax-note:empty {
    display: none;
  }

  .tax-note {
    font-size: 12px !important;
    font-family: 'Mada', sans-serif !important;
    color: var(--color-foreground) !important;
    letter-spacing: 0.7px !important;
    font-weight: 400 !important;
    line-height: 20.4px !important;
  }

  .pdp-discount-messaging {
    display: block;
    font-size: 11.2px;
    font-weight: 600;
    font-family: 'Mada', sans-serif;
    letter-spacing: 0.8px;
    color: #E54E37 !important;
  }

  form.payment-terms {
    padding-top: 0.5em;
    font-family: 'Mada', sans-serif !important;
    font-size: 13px !important;
    color: var(--color-foreground) !important;
    letter-spacing: 0.4px !important;
    font-weight: 400 !important;
  }

  shopify-payment-terms {
    font-family: 'Mada', sans-serif !important;
    font-size: 13px !important;
    color: #000 !important;
    letter-spacing: 0.4px !important;
    font-weight: 400 !important;
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }

  /* Product card price ordering: compare-at (slashed) first, then sale price */
  .product-card product-price [ref="priceContainer"] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5em;
  }

  .product-card product-price [ref="priceContainer"] > span:has(.compare-at-price) {
    order: 1;
  }

  .product-card product-price [ref="priceContainer"] > span:has(.price) {
    order: 2;
  }

  .product-card product-price [ref="priceContainer"] > .price {
    order: 2;
  }

  .product-card product-price [ref="priceContainer"] span.price {
    font-size: 1.05em;
    font-weight: 800;
    letter-spacing: 0;
  }

  .product-card product-price [ref="priceContainer"] .compare-at-price {
    font-size: 13px;
    font-weight: 600;
    line-height: 19.5px;
    letter-spacing: normal;
  }

  /* Judge.me badge text styling */
  .jdgm-prev-badge__text {
    font-weight: 400;
    font-size: 0.75em;
    text-transform: none;
  }

  /* Judge.me star color and size - collection product cards only */
  .product-card .jdgm-star {
    color: #b98a45 !important;
    font-family: inherit !important;
  }

  .product-card .jdgm-star::before {
    content: "\2605" !important;
  }

  .product-card .jdgm-star.jdgm--half::before {
    content: "\2605" !important;
  }

  .product-card .jdgm-prev-badge .jdgm-prev-badge__stars {
    transform: scale(0.75);
    transform-origin: left center;
  }
/* END_BLOCK:price */

/* START_BLOCK:product-card-button (INDEX:163) */
.product-card-button-wrapper {
    display: flex;
    width: 100%;
    margin-top: auto;

    /* Alignment - mobile first */
    justify-content: var(--product-card-button-align-mobile, center);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-card-button-align, center);
    }
  }

  .product-card-button {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-family: 'Mada', sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0 1.3rem 1rem;
  }

  /* Solid/outline variants take their colors from the assigned color scheme's
     button styles via the global .button / .button-secondary / .button-tertiary
     classes. The card only contributes its rounded shape + drop shadow; the
     border tracks whichever button style the scheme defines. */
  .product-card-button.button {
    border-radius: 6px !important;
    border: 1px solid var(--button-border-color) !important;
    box-shadow: rgb(var(--color-shadow-rgb) / 0.15) 0px 4px 5px 0px !important;
  }

  /* Link style - minimal underline style */
  /* Normalize Notify Me <button> to match Learn More <a> sizing */
  .product-card-button-wrapper .product-card-button.bis-notify-button {
    display: inline-block;
    box-sizing: border-box;
    font-family: 'Mada', sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: normal;
    padding-block: var(--button-padding-block);
    padding-inline: var(--button-padding-inline);
    width: auto;
    margin-block-start: 0;
  }

  .product-card-button--link {
    background: none;
    border: none;
    padding: var(--padding-2xs) 0;
    font-family: var(--button-font-family-primary);
    font-size: var(--font-size--sm);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .product-card-button--link:hover {
    opacity: 0.7;
  }
/* END_BLOCK:product-card-button */

/* START_BLOCK:product-custom-property (INDEX:165) */
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:167) */
.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-coming_soon {
    color: #1ECBE1;
  }

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

/* START_BLOCK:product-recommendations (INDEX:168) */
.product-recommendations-wrapper {
    width: 100%;
  }

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

  .product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  /* List carousel header with inline navigation */
  .section-resource-list__content--with-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md, 16px);
  }

  .section-resource-list__header {
    flex: 1;
  }

  .list-carousel__header-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }

  .list-carousel__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--color-background, #fff);
    color: var(--color-foreground);
    border: 1px solid var(--color-foreground);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .list-carousel__nav-btn:hover:not(:disabled) {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  .list-carousel__nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:product-title (INDEX:169) */
.custom-font-size .product-title__subtitle {
    display: block;
    font-weight: 700;
    padding-top: 2px;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 10px;
    letter-spacing: 1.3px;
  }

  .discount-cart-messaging {
    display: block;
    font-size: 11.2px;
    font-weight: 600;
    font-family: 'Mada', sans-serif;
    letter-spacing: 0.8px;
    color: #E54E37;
  }
/* END_BLOCK:product-title */

/* START_BLOCK:promo-banner-custom (INDEX:170) */
.promo-custom {
    display: none;
    border-radius: var(--promo-custom-radius, 10px);
    border: var(--promo-custom-border, none);
    position: relative;
    overflow: hidden;
  }

  .promo-custom--visible {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .promo-custom--visible.promo-custom--has-image {
    grid-template-columns: 1fr var(--promo-image-col, 50%);
  }

  .promo-custom--hidden {
    display: none !important;
  }

  .promo-custom__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    position: relative;
    z-index: 1;
  }

  .promo-custom--image-left .promo-custom__content {
    order: 2;
  }

  .promo-custom--image-left .promo-custom__image {
    order: 1;
  }

  .promo-custom__pretext,
  .promo-custom__headline,
  .promo-custom__subheadline {
    margin: 0;
    text-transform: uppercase;
  }

  .promo-custom__additional-text {
    margin: 0;
  }

  .promo-custom__additional-text * {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    margin: 0;
  }

  .promo-custom__coupon {
    margin: 0;
  }

  .promo-custom__coupon-code {
    display: inline-block;
    padding: 4px 12px;
    border: 2px dashed currentColor;
    border-radius: 4px;
    text-transform: uppercase;
  }

  .promo-custom__action {
    margin: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .promo-custom__content[style*="text-align: left"] .promo-custom__action {
    justify-content: flex-start;
  }

  .promo-custom__content[style*="text-align: center"] .promo-custom__action {
    justify-content: center;
  }

  .promo-custom__content[style*="text-align: right"] .promo-custom__action {
    justify-content: flex-end;
  }

  .promo-custom__button {
    display: inline-block;
    padding: 12px 28px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    transition: opacity 0.2s, transform 0.2s;
    line-height: 1;
  }

  .promo-custom__button:hover {
    opacity: 0.9;
    transform: scale(1.02);
  }

  .promo-custom__button:active {
    transform: scale(0.98);
  }

  .promo-custom__image {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .promo-custom__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .promo-custom__footer {
    grid-column: 1 / -1;
  }

  .promo-custom__fine-print {
    margin: 0;
    text-transform: uppercase;
  }

  .promo-custom__countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
  }

  .promo-custom__countdown-timer {
    font-weight: 700;
  }

  /* Product info mode - single column with product cards in a row */
  .promo-custom--product-info.promo-custom--visible {
    grid-template-columns: 1fr;
  }

  .promo-custom__products {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .promo-custom__product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 120px;
    max-width: 220px;
  }

  .promo-custom__product-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .promo-custom__product-title {
    margin: 0 0 10px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
    flex: 1;
  }

  .promo-custom__product-card .promo-custom__button {
    width: 100%;
    margin-top: auto;
  }

  /* Product slider */
  .promo-custom__slider {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .promo-custom__slider-track {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease;
  }

  .promo-custom__slider-track .promo-custom__product-card {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
    min-width: 0;
  }

  .promo-custom__slider-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s;
  }

  .promo-custom__slider-arrow:hover {
    background: #fff;
  }

  .promo-custom__slider-arrow--prev {
    left: 4px;
  }

  .promo-custom__slider-arrow--next {
    right: 4px;
  }

  @media screen and (max-width: 749px) {
    .promo-custom--visible {
      grid-template-columns: 1fr;
    }

    .promo-custom--mobile-image-above .promo-custom__image {
      order: -1;
    }

    .promo-custom__image img {
      max-width: 80%;
      height: auto;
      margin: 0 auto;
    }

    /* Mobile content alignment */
    .promo-custom__content--mobile-left {
      text-align: left !important;
    }
    .promo-custom__content--mobile-center {
      text-align: center !important;
    }
    .promo-custom__content--mobile-right {
      text-align: right !important;
    }

    .promo-custom__content--mobile-center .promo-custom__action {
      justify-content: center;
    }
    .promo-custom__content--mobile-left .promo-custom__action {
      justify-content: flex-start;
    }
    .promo-custom__content--mobile-right .promo-custom__action {
      justify-content: flex-end;
    }

    .promo-custom__products {
      gap: 12px;
    }

    .promo-custom__product-card {
      max-width: 160px;
    }

    .promo-custom__slider-track .promo-custom__product-card {
      flex: 0 0 calc(50% - 6px);
      max-width: calc(50% - 6px);
    }

    .promo-custom__slider-track {
      gap: 12px;
    }

    .promo-custom__slider-arrow {
      width: 22px;
      height: 22px;
      font-size: 12px;
    }

    /* Mobile display order */
    .promo-custom__content > [style*="--m-order"] {
      order: var(--m-order);
    }

    /* Mobile font overrides */
    .promo-custom [style*="--m-fs"] {
      font-size: var(--m-fs) !important;
    }
    .promo-custom [style*="--m-lh"] {
      line-height: var(--m-lh) !important;
    }
    .promo-custom [style*="--m-ls"] {
      letter-spacing: var(--m-ls) !important;
    }
  }
/* END_BLOCK:promo-banner-custom */

/* START_BLOCK:promo-block (INDEX:171) */
.promo-block {
    display: none;
    padding: var(--padding-lg);
    border-radius: var(--promo-border-radius, 10px);
    border: var(--promo-border-width, 2px) var(--promo-border-style, dashed) var(--color-border);
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .promo-block--visible {
    display: block;
  }

  .promo-block--hidden {
    display: none !important;
  }

  .promo-block__inner {
    position: relative;
    z-index: 1;
  }

  .promo-block__pretext {
    margin: 0 0 var(--margin-xs);
    font-size: var(--font-size--md);
    font-weight: 700;
    color: var(--color-sale, #dc2626);
    text-transform: uppercase;
  }

  .promo-block__headline {
    margin: 0 0 var(--margin-sm);
    font-size: var(--font-size--xl);
    font-weight: 900;
    text-transform: uppercase;
  }

  .promo-block__subheadline {
    margin: 0 0 var(--margin-xs);
    font-size: var(--font-size--md);
    font-weight: 500;
    text-transform: uppercase;
  }

  .promo-block__fine-print {
    margin: 0 0 var(--margin-md);
    font-size: var(--font-size--sm);
    font-weight: 400;
    text-transform: uppercase;
    opacity: 0.8;
  }

  .promo-block__products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-md, 15px);
    margin-bottom: var(--margin-sm);
  }

  .promo-block__product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .promo-block__product-image {
    width: 100px;
    height: auto;
    border-radius: var(--border-radius-sm, 8px);
    margin-bottom: var(--margin-xs);
  }

  .promo-block__product-title {
    margin: 0 0 var(--margin-xs);
    font-size: var(--font-size--sm);
    font-weight: 700;
    text-transform: uppercase;
  }

  .promo-block__action {
    margin-bottom: var(--margin-sm);
  }

  .promo-block__button {
    min-width: 150px;
    text-transform: uppercase;
    font-weight: 500;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .promo-block__button:hover {
    transform: scale(1.02);
  }

  .promo-block__button:active {
    transform: scale(0.98);
  }

  .promo-block__countdown {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--padding-xs) var(--padding-sm);
    background: var(--color-foreground);
    color: var(--color-background);
    border-radius: var(--border-radius-sm, 5px);
    font-size: var(--font-size--sm);
    font-weight: 500;
    text-transform: uppercase;
  }

  .promo-block__countdown-timer {
    font-weight: 700;
  }
/* END_BLOCK:promo-block */

/* START_BLOCK:review (INDEX:173) */
.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:reviews-slider (INDEX:174) */
.reviews-slider {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg, 24px);
  }

  .reviews-slider__header {
    padding-inline: var(--util-page-margin);
  }

  .reviews-slider__subheading {
    margin-bottom: 0.5rem;
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  .reviews-slider__heading {
    margin: 0;
  }

  .reviews-slider__carousel {
    width: 100%;
  }

  .reviews-slider__slideshow {
    --slide-size: calc((100% - (var(--reviews-gap) * (var(--reviews-columns) - 1))) / var(--reviews-columns));
  }

  .reviews-slider__slideshow slideshow-slides {
    gap: var(--reviews-gap, 16px);
  }

  @media screen and (max-width: 749px) {
    .reviews-slider__slideshow {
      --slide-size: calc((100% - (var(--reviews-gap) * (var(--reviews-columns-mobile) - 1))) / var(--reviews-columns-mobile));
    }
  }

  .reviews-slider__slide {
    flex: 0 0 var(--slide-size);
    scroll-snap-align: start;
  }

  .reviews-slider__card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--card-padding, 24px);
    background-color: var(--card-bg, var(--color-background));
    border-radius: var(--card-radius, 8px);
    transition: box-shadow 0.2s ease;
  }

  .reviews-slider__card--bordered {
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }

  .reviews-slider__quote {
    font-family: Georgia, serif;
    font-size: 3rem;
    line-height: 1;
    color: rgb(var(--color-foreground-rgb) / 0.15);
    margin-bottom: -0.5rem;
  }

  .reviews-slider__text {
    flex: 1;
    font-size: var(--font-size--base, 1rem);
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.85);
    margin-bottom: 1rem;
  }

  .reviews-slider__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
  }

  .reviews-slider__author-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .reviews-slider__author {
    font-weight: 600;
    font-size: var(--font-size--sm, 0.875rem);
  }

  .reviews-slider__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .reviews-slider__badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background-color: var(--color-verified, #48BA25);
    border-radius: 10px;
  }

  .reviews-slider__stars {
    display: flex;
    gap: 2px;
  }

  .reviews-slider__star {
    width: 14px;
    height: 14px;
    color: rgb(var(--color-foreground-rgb) / 0.2);
  }

  .reviews-slider__star--filled {
    color: var(--color-star, #fbbf24);
  }

  .reviews-slider__product-link {
    flex-shrink: 0;
  }

  .reviews-slider__product-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-foreground);
    background-color: var(--color-background);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .reviews-slider__product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .reviews-slider__empty {
    padding: 2rem;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  /* Navigation positioning */
  .reviews-slider slideshow-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
  }

  .reviews-slider slideshow-arrows button {
    pointer-events: auto;
  }

  .reviews-slider slideshow-container {
    position: relative;
  }

  .reviews-slider slideshow-controls {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
  }
/* END_BLOCK:reviews-slider */

/* START_BLOCK:social-links (INDEX:176) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (max-width: 749px) {
      gap: 3px;
      padding-bottom: 2em;
    }

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

    @media screen and (max-width: 749px) {
      width: 24px;
      height: 28px;

      svg {
        width: 100%;
        height: 100%;
      }
    }
  }

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

    @media screen and (max-width: 749px) {
      width: 27px;
      height: 28px;
    }

    .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:177) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:178) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

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

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:account-actions (INDEX:182) */
.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:183) */
.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.625rem;

    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--sm);
    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;
  }
/* END_SNIPPET:account-button */

/* START_SNIPPET:account-drawer (INDEX:184) */
.account-drawer {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .account-drawer__dialog {
    --animation-speed: 0.24s;
    --dialog-drawer-opening-animation: account-drawer-slide-in;
    --dialog-drawer-closing-animation: account-drawer-slide-out;

    height: fit-content;
    margin: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    border-radius: 0;
    padding: 0;
  }

  .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%);
    }
  }
/* END_SNIPPET:account-drawer */

/* START_SNIPPET:account-popover (INDEX:185) */
.account-popover {
    --account-popover-min-width: 22rem;
    --account-actions-max-width: 22rem;
  }

  .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;
    }
  }
/* END_SNIPPET:account-popover */

/* START_SNIPPET:background-media (INDEX:189) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:background-video (INDEX:190) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-video */

/* START_SNIPPET:bb-accident (INDEX:191) */
/* Flush row inside the shared .bb-addons-panel — no own border/padding/bg,
     in collapsed or active state (active just reveals the tier picker). */
  .bb-accident {
    display: block;
  }

  .bb-accident__head {
    display: block;
  }

  .bb-accident__toggle {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
  }

  .bb-accident__check {
    inline-size: 20px;
    block-size: 20px;
    margin-block-start: 2px;
    accent-color: var(--bb-brand);
    flex: 0 0 auto;
    cursor: pointer;
  }

  .bb-accident__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-inline-size: 0;
    padding-inline-start: 7px;
  }

  /* Title + shield icon. Red Hat Display Bold 16px / 24px, #1c404c, 0.6px. */
  .bb-accident__title-row {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }

  .bb-accident__title {
    font-family: var(--bb-font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.6px;
    color: var(--bb-brand);
  }

  /* Icon sized to the title's line-height (24px) so it spans the text line. */
  .bb-accident__icon {
    inline-size: 24px;
    block-size: 24px;
    color: var(--bb-brand);
    flex: 0 0 auto;
  }

  /* "From $X" ... "See Details" — Mada 14px / 16px, space-between.
     Sibling of the label rather than a child of it (see the markup comment),
     so the indent that used to come from the label's flex layout is restated
     here: 20px checkbox + 9px gap + 7px body padding. */
  .bb-accident__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-inline-start: 36px;
    font-family: var(--bb-font-body);
    font-size: 14px;
    line-height: 16px;
  }

  /* Wrapper only groups the trigger with its dialog; `contents` keeps the
     button itself as the flex item so space-between still pushes it right. */
  .bb-accident__details-modal {
    display: contents;
  }

  .bb-accident__from {
    font-weight: 400;
    color: var(--bb-brand);
    white-space: nowrap;
  }

  .bb-accident__details {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    color: var(--bb-text-muted);
    font: inherit;
    font-weight: 400 !important;
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
    white-space: nowrap;
  }

  /* ── "See Details" content modal ──
     .dialog-modal supplies the backdrop, shadow and open/close animation, and
     goes full-screen under 750px; everything below is the content shell. */
  .bb-accident__dialog {
    /* Native <dialog> centring. */
    margin: auto;
    padding: 0;
    inline-size: min(440px, calc(100vw - 32px));
    color: var(--bb-text);
  }

  /* The theme's shared open/close animations tween `margin-top` and hold it at
     0 with `forwards`, which pins the dialog to the top of the viewport and
     defeats `margin: auto`. Swap in equivalents that move the box with
     `transform` instead, so the motion survives without touching centring. */
  .dialog-modal[open].bb-accident__dialog {
    animation: bbAccidentDialogIn var(--animation-speed) var(--animation-easing) forwards;
  }

  .dialog-modal.dialog-closing.bb-accident__dialog {
    animation: bbAccidentDialogOut var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes bbAccidentDialogIn {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes bbAccidentDialogOut {
    from {
      opacity: 1;
      transform: none;
    }

    to {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

  .bb-accident__dialog-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
  }

  .bb-accident__dialog-close {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--bb-brand);
    cursor: pointer;
  }

  .bb-accident__dialog-close svg {
    inline-size: 16px;
    block-size: 16px;
  }

  .bb-accident__dialog-title {
    margin: 0;
    /* Room for the close button so a long heading never runs under it. */
    padding-inline-end: 32px;
    font-family: var(--bb-font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--bb-brand);
  }

  .bb-accident__dialog-body {
    font-family: var(--bb-font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bb-text);
  }

  .bb-accident__dialog-body :where(p, ul, ol) {
    margin: 0 0 12px;
  }

  .bb-accident__dialog-body :where(p, ul, ol):last-child {
    margin-block-end: 0;
  }

  /* Coverage-tier picker — mirrors .bb-personalization__fields treatment. */
  .bb-accident__tiers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-block-start: 14px;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--bb-border);
  }

  .bb-accident__tiers[hidden] {
    display: none;
  }

  .bb-accident__tiers-label {
    font-family: var(--bb-font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: var(--bb-brand);
  }

  .bb-accident__select {
    inline-size: 100%;
    padding: 10px 12px;
    border: 1px solid #b4b4b4;
    border-radius: var(--bb-radius-sm);
    background: #fff;
    color: var(--bb-text);
    font: inherit;
    font-weight: 400;
    cursor: pointer;
  }

  .bb-accident__select:focus {
    outline: 2px solid var(--bb-brand);
    outline-offset: 1px;
  }
/* END_SNIPPET:bb-accident */

/* START_SNIPPET:bb-addon (INDEX:193) */
/* Flush row inside the shared .bb-addons-panel (Figma 384-9834) — checkbox +
     title + a "From $X / See Details" meta row. No own box, no product image. */
  .bb-addon {
    display: block;
  }

  .bb-addon[hidden] {
    display: none;
  }

  .bb-addon__row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
  }

  .bb-addon__check {
    inline-size: 24px;
    block-size: 24px;
    accent-color: var(--bb-brand);
    flex: 0 0 auto;
    cursor: pointer;
  }

  .bb-addon__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding-inline-start: 7px;
    min-inline-size: 0;
  }

  .bb-addon__title {
    font-family: var(--bb-font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.6px;
    color: var(--bb-brand);
  }

  .bb-addon__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    inline-size: 100%;
    font-family: var(--bb-font-body);
    font-size: 14px;
    line-height: 16px;
  }

  .bb-addon__from {
    font-weight: 400;
    color: var(--bb-brand);
    white-space: nowrap;
  }

  .bb-addon__details {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    color: var(--bb-text-muted);
    font: inherit;
    font-weight: 400 !important;
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
    white-space: nowrap;
  }
/* END_SNIPPET:bb-addon */

/* START_SNIPPET:bb-bottom-bar (INDEX:194) */
bundle-bottom-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 50;
    display: block;
    background: #fff;
    box-shadow: 0 -4px 20px 8px rgb(0 0 0 / 25%);
  }

  /* ── Shared summary (title + price) ── */
  .bb-bar__title {
    font-family: var(--bb-font-heading);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--bb-text);
  }

  .bb-bar__pricing {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .bb-bar__compare {
    font-family: var(--bb-font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--bb-text-muted);
    text-decoration: line-through;
  }

  .bb-bar__total {
    font-family: var(--bb-font-heading);
    font-weight: 700;
    font-size: 17px;
    color: var(--bb-success);
  }

  .bb-bar__savings {
    display: inline-flex;
    align-items: center;
    padding: 5px;
    border-radius: 20px;
    background: var(--bb-success);
    color: #fff;
    font-family: var(--bb-font-heading);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.12px;
  }

  /* ── Collapsed ── */
  .bb-bar__collapsed {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1440px;
    margin-inline: auto;
    padding: 16px 40px;
  }

  .bb-bar__summary {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    gap: 8px;
    min-inline-size: 0;
  }

  .bb-bar__view {
    flex: 0 0 auto;
    padding: 17px;
    border: none;
    border-radius: 8px;
    background: var(--bb-accent);
    color: #fff;
    font-family: var(--bb-font-heading);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.56px;
    text-transform: uppercase;
    cursor: pointer;
  }

  .bb-bar__view:hover {
    background: var(--bb-accent-hover);
  }

  /* ── Expanded ── */
  .bb-bar__expanded {
    position: relative;
    max-width: 1440px;
    margin-inline: auto;
    padding: 24px 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .bb-bar__close {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 16px;
    inline-size: 22px;
    block-size: 22px;
    padding: 0;
    border: none;
    background: none;
    color: var(--bb-text);
    cursor: pointer;
  }

  .bb-bar__slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 32px;
  }

  @media screen and (min-width: 750px) {
    .bb-bar__slots {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .bb-bar__slot {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-block-size: 70px;
    padding: 10px 16px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    background: none;
    cursor: pointer;
    text-align: center;
  }

  .bb-bar__slot[data-filled] {
    justify-content: flex-start;
    text-align: start;
    border-color: transparent;
    background: var(--bb-sand);
  }

  .bb-bar__slot-empty {
    font-family: var(--bb-font-body);
    font-size: var(--font-size--md, 1.0625rem);
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--bb-text);
  }

  .bb-bar__slot-thumb {
    flex: 0 0 auto;
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--bb-radius-sm);
    overflow: hidden;
  }

  .bb-bar__slot-thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .bb-bar__slot-filled {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-inline-size: 0;
  }

  .bb-bar__slot-name {
    font-family: var(--bb-font-heading);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--bb-text);
    line-height: 1.25;
  }

  .bb-bar__slot-change {
    font-family: var(--bb-font-body);
    font-size: 0.8125rem;
    color: var(--bb-text);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .bb-bar__summary--expanded {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* ── State toggle ── */
  .bb-bar:not([data-collapsed]) .bb-bar__collapsed,
  .bb-bar[data-collapsed] .bb-bar__expanded {
    display: none;
  }

  /* ── Mobile checkout CTA (Figma 257-22143): gold, full-width, inside the
     expanded bar. Hidden on desktop so the desktop bar is unchanged. ── */
  .bb-bar__checkout {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Collapsed: title stays at the Figma 22px (matches collapsed frame). */
    .bb-bar__collapsed {
      padding: 8px 16px;
      gap: 12px;
    }
    .bb-bar__summary { gap: 4px; }

    /* "View Bundle" → "View" on mobile (collapsed CTA). Keeps the markup/ref
       intact; just hides the " Bundle" suffix. */
    .bb-bar__view-suffix { display: none; }

    /* Dial bar text down so the title + price line fit comfortably on a 390px
       screen (Figma 323-2830). Desktop sizes are untouched. */
    .bb-bar__title { font-size: 18px; }
    .bb-bar__total { font-size: 15px; }
    .bb-bar__compare { font-size: 13px; }
    .bb-bar__savings { font-size: 11px; }

    /* Expanded: full-width stacked slots + checkout (Figma 257-22143).
       Order top→bottom: summary (title/price) · slots · checkout. The summary
       sits below the slots in the desktop DOM, so reorder it to the top here. */
    .bb-bar__expanded {
      padding: 0 0 16px;
      gap: 0;
    }
    .bb-bar__summary--expanded { order: 1; }
    .bb-bar__slots { order: 2; }
    .bb-bar__checkout { order: 3; }
    .bb-bar__close {
      inset-block-start: 16px;
      inset-inline-end: 16px;
    }

    /* Title/price summary sits in its own padded row above the slots. */
    .bb-bar__summary--expanded {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding: 16px 52px 8px 16px;
    }

    /* Single-column, full-width slots with their own 8px-padded list. */
    .bb-bar__slots {
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 8px 8px 0;
    }

    .bb-bar__slot {
      min-block-size: 0;
      padding: 12px 16px;
      justify-content: center;
    }

    /* Empty slot: centered underlined "Choose Your X" (Figma 323-2830). */
    .bb-bar__slot:not([data-filled]) .bb-bar__slot-empty {
      text-align: center;
    }

    /* Filled slot: thumb left, name + Change right-aligned (Figma 257-22143). */
    .bb-bar__slot[data-filled] {
      gap: 10px;
      padding: 10px;
      justify-content: flex-start;
    }
    .bb-bar__slot[data-filled] .bb-bar__slot-thumb {
      inline-size: 50px;
      block-size: 50px;
      border-radius: 0;
    }
    .bb-bar__slot-filled {
      flex: 1 0 0;
      align-items: flex-end;
      text-align: end;
      gap: 8px;
    }
    .bb-bar__slot-name {
      font-family: var(--bb-font-heading);
      font-weight: 400;
      font-size: 15px;
      line-height: 1.3;
    }
    .bb-bar__slot-change {
      font-size: 15px;
      line-height: 1.3;
    }

    /* Gold checkout button beneath the slots — only once every step is filled
       (bar gets [data-complete] from bb-bottom-bar.js). Hidden otherwise. */
    .bb-bar:not([data-complete]) .bb-bar__checkout {
      display: none;
    }
    .bb-bar[data-complete] .bb-bar__checkout {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: calc(100% - 16px);
      /* Top margin separates the button from the last slot card (Figma 257-22143
         uses an 8px gap between the slot list and the CTA). */
      margin: 8px 8px 8px;
      block-size: 52px;
      border: none;
      border-radius: var(--bb-radius);
      background: var(--bb-accent);
      color: #fff;
      font-family: var(--bb-font-heading);
      font-weight: 800 !important;
      font-size: 16px;
      letter-spacing: 0.64px;
      text-transform: uppercase;
      cursor: pointer;
    }
    .bb-bar__checkout:hover {
      background: var(--bb-accent-hover);
    }
  }
/* END_SNIPPET:bb-bottom-bar */

/* START_SNIPPET:bb-details-drawer (INDEX:195) */
.bb-drawer {
    display: contents;
  }

  /* Drawer shell — 400px panel pinned to the inline-end edge (Figma: x=1040,
     width=400 inside a 1440 frame). 360px content column + 20px gutters. */
  .bb-drawer__dialog {
    inline-size: min(400px, 100vw);
    max-inline-size: 100vw;
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin: 0 0 0 auto;
    padding: 0;
    border: none;
    background: #fff;
    color: var(--bb-text);
    overflow: hidden;
    font-family: var(--bb-font-heading);
  }

  .bb-drawer__inner {
    position: relative;
    block-size: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
  }

  .bb-drawer__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* ── Gallery ──────────────────────────────────────────────────────── */
  .bb-drawer__gallery {
    display: flex;
    flex-direction: column;
  }

  /* Top row holding the close (X) aligned to the inline-end edge. */
  .bb-drawer__gallery-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-block-end: 8px;
  }

  .bb-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--bb-text);
  }

  .bb-drawer__close svg {
    inline-size: 18px;
    block-size: 18px;
  }

  .bb-drawer__main {
    position: relative;
    aspect-ratio: 344 / 425;
    inline-size: 100%;
    background: var(--bb-surface-alt);
    overflow: hidden;
  }

  .bb-drawer__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .bb-drawer__badge {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 76px;
    block-size: 21.5px;
    padding-inline: 8px;
    border-radius: var(--bb-radius-sm);
    background: var(--bb-success);
    color: var(--bb-surface-alt);
    font-family: var(--bb-font-body);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
  }

  .bb-drawer__zoom {
    position: absolute;
    inset-block-end: 16px;
    inset-inline-end: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--bb-text);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.12);
  }

  .bb-drawer__zoom svg {
    inline-size: 22px;
    block-size: 22px;
  }

  .bb-drawer__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bb-surface-alt) 70%, transparent);
  }

  .bb-drawer__spinner svg {
    inline-size: 32px;
    block-size: 32px;
    color: var(--bb-brand);
    animation: bb-drawer-spin 0.8s linear infinite;
  }

  @keyframes bb-drawer-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Thumbnail strip (JS-populated when >1 image). Figma hides the thumbs in
     favour of a swipe slider, but the component renders clickable 50px
     thumbnails — style them to match the Cloud gallery surface. */
  .bb-drawer__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 8px;
  }

  .bb-drawer__thumbs:empty {
    display: none;
  }

  .bb-drawer__thumb {
    inline-size: 50px;
    block-size: 50px;
    padding: 0;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    background: var(--bb-surface-alt);
    cursor: pointer;
    overflow: hidden;
  }

  .bb-drawer__thumb[aria-current='true'] {
    border-color: var(--bb-brand);
  }

  .bb-drawer__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* ── Details column ───────────────────────────────────────────────── */
  .bb-drawer__details {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .bb-drawer__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-inline: 10px;
  }

  .bb-drawer__title {
    margin: 0;
    font-family: var(--bb-font-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bb-text);
  }

  .bb-drawer__rating {
    display: inline-flex;
    align-items: center;
    block-size: 32px;
    text-decoration: none;
    color: inherit;
  }

  .bb-drawer__stars {
    display: inline-flex;
    align-items: center;
    color: var(--bb-accent);
    font-size: 16px;
    letter-spacing: 1px;
  }

  .bb-drawer__rating-count {
    margin-inline-start: 6px;
    color: var(--bb-brand);
    font-family: var(--bb-font-body);
    font-size: 14.5px;
    line-height: normal;
  }

  .bb-drawer__pricing {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    block-size: 18px;
  }

  .bb-drawer__compare {
    color: #616161;
    font-family: var(--bb-font-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: line-through;
  }

  .bb-drawer__price {
    color: var(--bb-success);
    font-family: var(--bb-font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
  }

  /* When the item is not on sale the price falls back to the neutral Dark. */
  .bb-drawer__pricing:not(:has(.bb-drawer__compare:not([hidden]))) .bb-drawer__price {
    color: var(--bb-text);
  }

  .bb-drawer__savings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 20px;
    background: var(--bb-success);
    color: #fff;
    font-family: var(--bb-font-heading);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.12px;
    text-transform: uppercase;
  }

  /* ── Description accordion ────────────────────────────────────────── */
  .bb-drawer__accordion {
    border-block-start: 1px solid #e3e3e3;
  }

  .bb-drawer__accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-block: 13px;
    cursor: pointer;
    list-style: none;
  }

  .bb-drawer__accordion-summary::-webkit-details-marker {
    display: none;
  }

  .bb-drawer__accordion-label {
    flex: 1 0 0;
    min-inline-size: 0;
    font-family: var(--bb-font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    color: var(--bb-brand);
  }

  .bb-drawer__accordion-icon {
    inline-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bb-font-heading);
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    color: var(--bb-brand);
  }

  .bb-drawer__accordion-icon::after {
    content: '+';
  }

  .bb-drawer__accordion[open] .bb-drawer__accordion-icon::after {
    content: '\2212'; /* minus */
  }

  .bb-drawer__description {
    padding-block-end: 13px;
    font-family: var(--bb-font-heading);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    color: #000;
  }

  .bb-drawer__description :is(p, ul, ol) {
    margin-block: 0 0;
  }

  .bb-drawer__description ul,
  .bb-drawer__description ol {
    padding-inline-start: 22.5px;
  }

  /* ── CTA ──────────────────────────────────────────────────────────── */
  .bb-drawer__cta {
    inline-size: 100%;
    margin-block-start: 8px;
  }

  /* ── Reviews ──────────────────────────────────────────────────────── */
  .bb-drawer__reviews {
    margin-block-start: 8px;
  }

  /* Reviews snippet adds its own top border + spacing; suppress the
     duplicate when nested in the drawer. */
  .bb-drawer__reviews .bb-reviews {
    margin-block-start: 16px;
    padding-block-start: 16px;
  }
/* END_SNIPPET:bb-details-drawer */

/* START_SNIPPET:bb-personalization (INDEX:197) */
/* Flush row inside the shared .bb-addons-panel — no own box/bg/padding in
     collapsed or active state (active just reveals the image + fields). */
  .bb-personalization {
    display: block;
  }

  .bb-personalization__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .bb-personalization__check {
    inline-size: 24px;
    block-size: 24px;
    accent-color: var(--bb-brand);
    flex: 0 0 auto;
    cursor: pointer;
  }

  .bb-personalization__body {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    flex: 1 1 auto;
  }

  .bb-personalization__head {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .bb-personalization__label {
    font-family: var(--bb-font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.6px;
    color: var(--bb-brand);
  }

  /* The row's contents follow the selected product, so parts of it are hidden
     rather than removed. Anything with an explicit `display` needs this — the
     UA's `[hidden]` rule loses to a class selector. (The fee pill no longer
     needs a rule: it always carries a price or "Free" while the row is shown.) */
  .bb-personalization[hidden] {
    display: none;
  }

  .bb-personalization__fee {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: 22px;
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--bb-success);
    color: #fff;
    font-family: var(--bb-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
  }

  .bb-personalization__tagline {
    font-family: var(--bb-font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: var(--bb-text-muted);
  }

  /* ── Revealed panel (checked) ──────────────────────────────────────────── */
  .bb-personalization__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-block-start: 8px;
  }

  .bb-personalization__panel[hidden] {
    display: none;
  }

  .bb-personalization__preview {
    inline-size: 200px;
    block-size: 200px;
    border-radius: var(--bb-radius-sm);
    overflow: hidden;
    flex: 0 0 auto;
  }

  .bb-personalization__preview-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .bb-personalization__fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    inline-size: 100%;
  }

  .bb-personalization__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .bb-personalization__field-label {
    font-family: var(--bb-font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: var(--bb-brand);
  }

  .bb-personalization__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  .bb-personalization__input,
  .bb-personalization__select {
    inline-size: 100%;
    block-size: 32px;
    padding: 0 12px;
    border: 1px solid #b4b4b4;
    border-radius: var(--bb-radius-sm);
    background: #fff;
    color: var(--bb-text);
    font-family: var(--bb-font-body);
    font-size: 14px;
    font-weight: 400;
  }

  .bb-personalization__input:focus,
  .bb-personalization__select:focus {
    outline: 2px solid var(--bb-brand);
    outline-offset: 1px;
  }

  .bb-personalization__count {
    position: absolute;
    inset-inline-end: 12px;
    color: var(--bb-text-muted);
    font-family: var(--bb-font-body);
    font-size: 12px;
    pointer-events: none;
  }

  .bb-personalization__footnote {
    inline-size: 100%;
    font-family: var(--bb-font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    text-align: start;
    color: var(--bb-brand);
  }

  .bb-personalization__footnote :is(p, ul, ol) {
    margin: 0;
  }

  .bb-personalization__footnote ul,
  .bb-personalization__footnote ol {
    padding: 0;
    list-style: none;
  }
/* END_SNIPPET:bb-personalization */

/* START_SNIPPET:bb-reviews (INDEX:198) */
.bb-reviews {
    display: block;
    margin-block-start: 32px;
    padding-block-start: 24px;
    border-block-start: 1px solid var(--bb-border);
  }

  .bb-reviews[data-loading] .bb-reviews__widget {
    opacity: 0.45;
    transition: opacity 0.15s ease;
    pointer-events: none;
  }

  .bb-reviews__widget {
    min-block-size: 80px;
  }

  /* Judge.me hides the review list (`.jdgm-rev-widg`) and each review card
     (`.jdgm-rev`) with display:none until its own JS hydrates them. We inject
     the pre-rendered list from the product page, so that JS never runs against
     it — reveal them ourselves. Scoped to our widget so the live PDP is
     untouched. */
  /* Judge.me reveals its SSR markup via JS (inline styles) we don't run, so
     reveal the review list ourselves. (bb-reviews.js also adds the
     `jdgm--done-setup-widget` class for jdgm's own scoped styling + hi-res
     images.) */
  .bb-reviews__widget .jdgm-legacy-widget-content,
  .bb-reviews__widget .jdgm-rev-widg,
  .bb-reviews__widget .jdgm-rev-widg__body,
  .bb-reviews__widget .jdgm-rev-widg__reviews,
  .bb-reviews__widget .jdgm-rev {
    display: block !important;
  }

  /* Histogram: jdgm lays out the rows via JS; rebuild the flex ourselves. The
     bar widths are inline on `.jdgm-histogram__bar-content`, so revealing +
     flexing the rows is enough to render the distribution bars correctly. */
  .bb-reviews__widget .jdgm-histogram {
    display: block !important;
  }

  .bb-reviews__widget .jdgm-histogram__row {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  .bb-reviews__widget .jdgm-histogram__bar {
    flex: 1 1 auto;
    block-size: 8px;
    background: #ececec;
    border-radius: 4px;
    overflow: hidden;
  }

  /* The fill already carries jdgm's colour + inline width (e.g. 86%); it just
     needs height since jdgm's JS-state CSS doesn't apply here. */
  .bb-reviews__widget .jdgm-histogram__bar-content {
    display: block;
    block-size: 100%;
  }

  /* No client-side pagination here — hide the (dead) page links + any spinner. */
  .bb-reviews__widget .jdgm-paginate,
  .bb-reviews__widget .jdgm-rev-widg__paginate,
  .bb-reviews__widget .jdgm-rev-widg__paginate-spinner-wrapper,
  .bb-reviews__widget .jdgm-spinner {
    display: none !important;
  }
/* END_SNIPPET:bb-reviews */

/* START_SNIPPET:bb-step (INDEX:199) */
/* ── Product image gallery ──
     Mobile (Figma 257-11241): a full-bleed swipeable carousel showing ~1.15
     cards — each slide is ~85% of the viewport so the next image peeks ~15% — and
     snaps. The grid breaks out of the layout's 16px side padding so the first
     image sits flush against the viewport edge. Desktop: 2-col grid of all
     images. The DOM (one cell per image, rebuilt by bb-step.js) is identical for
     both; only layout differs. */
  .bb-step__gallery-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: 8px;
    /* Full bleed: cancel the layout's 16px side padding so slide 1 touches the
       viewport edge. End padding leaves a small inset after the last slide. */
    margin-inline: -16px;
    padding-inline-end: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Slim scroll indicator track (mirrors the Figma slider bar under the image). */
  .bb-step__gallery-grid::-webkit-scrollbar {
    height: 4px;
  }
  .bb-step__gallery-grid::-webkit-scrollbar-track {
    background: var(--bb-border);
    border-radius: 2px;
  }
  .bb-step__gallery-grid::-webkit-scrollbar-thumb {
    background: var(--bb-brand);
    border-radius: 2px;
  }

  .bb-step__gallery-cell {
    aspect-ratio: 1 / 1;
    background: var(--bb-surface);
    border-radius: var(--bb-radius);
    overflow: hidden;
    scroll-snap-align: start;
  }

  @media screen and (min-width: 750px) {
    .bb-step__gallery-grid {
      grid-auto-flow: row;
      grid-template-columns: 1fr 1fr;
      grid-auto-columns: auto;
      gap: 12px;
      margin-inline: 0;
      padding-inline-end: 0;
      overflow-x: visible;
      scroll-snap-type: none;
    }
  }

  .bb-step__gallery-cell--full {
    grid-column: 1 / -1;
  }

  .bb-step__gallery-cell img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    display: block;
  }

  /* ── Sidebar (right column) ── */
  .bb-step__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: start;
  }

  /* Two columns, left-weighted: what you are choosing beside what it costs.
     `align-items: flex-start` is what top-aligns the price with the eyebrow —
     the two columns are independent stacks of different line heights, so only
     their box tops can be made to agree. */
  .bb-step__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  /* Left column: eyebrow → live tier/product title → reviews badge, stacked.
     It takes ALL the slack (`flex: 1 1 auto`), which is what puts the price hard
     against the right edge without a justify-content rule. `min-inline-size: 0`
     is load-bearing — without it a long tier name sets the column's min-content
     width and pushes the price column off the right edge instead of wrapping. */
  .bb-step__headline {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .bb-step__eyebrow {
    margin: 0;
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 400 !important;
    line-height: 1;
    text-transform: uppercase;
    color: var(--bb-eyebrow);
  }

  .bb-step__title {
    margin: 0;
    font-family: var(--bb-font-heading);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--bb-text);
  }

  .bb-step__reviews {
    display: flex;
    align-items: center;
    gap: 8px;
    min-block-size: 20px;
  }

  /* ── Bundle price (right column; rendered by bb-step.js) ──
     Compare-at over total, hard right. `flex: 0 0 auto` holds the column at the
     figures' natural width so the left column absorbs every wrap. The 4px gap
     is measured, not arbitrary: it lands the total's line box on the title's
     (12px eyebrow + 7px head gap = 15px compare + 4px), which is what makes the
     two columns read as two rows. */
  .bb-step__pricing {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: end;
  }

  /* The UA's `[hidden] { display: none }` loses to ANY author display rule, so
     both toggled nodes have to opt out explicitly or they keep their box and
     the price column stays reserved for a bundle that has no price. */
  .bb-step__pricing[hidden],
  .bb-step__compare[hidden] {
    display: none;
  }

  /* Type/colour mirror .bb-bar__* (snippets/bb-bottom-bar.liquid) so the page
     can't show two different-looking prices for one bundle. Line heights are
     pinned rather than inherited: the theme's global leading would drop both
     figures below the lines they are meant to sit on. `nowrap` guarantees a
     price never breaks mid-figure when the column is squeezed. */
  .bb-step__compare {
    font-family: var(--bb-font-heading);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    color: var(--bb-text-muted);
    text-decoration: line-through;
    white-space: nowrap;
  }

  .bb-step__total {
    font-family: var(--bb-font-heading);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: var(--bb-success);
    white-space: nowrap;
  }

  /* No compare-at line means nothing is discounted, so the "sale" green would be
     claiming a saving that isn't there — fall back to neutral (as
     .bb-drawer__price does). */
  .bb-step__pricing:not(:has(.bb-step__compare:not([hidden]))) .bb-step__total {
    color: var(--bb-text);
  }

  @media screen and (max-width: 749px) {
    /* Still two columns on a phone. The price is two short nowrap figures — a
       worst-case "$1,234.56" is ~70px — so it costs the title far less width
       than stacking it would cost vertical space above the gallery. Stepped
       down to the bar's mobile sizes so the two prices on screen match. */
    .bb-step__head {
      gap: 12px;
    }

    .bb-step__total {
      font-size: 15px;
    }

    .bb-step__compare {
      font-size: 13px;
    }
  }

  .bb-step__color {
    margin: 0;
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-family: var(--bb-font-body);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.6px;
  }

  .bb-step__color-label {
    font-weight: 400;
    color: var(--bb-brand);
  }

  .bb-step__color-name {
    font-family: var(--bb-font-heading);
    font-weight: 700;
    color: var(--bb-brand);
  }

  /* Same green the tier buttons used for their "+$30", so the figure reads as
     the same thing in its new home. Collapses out of the flex row when empty
     (zero delta) rather than leaving the line's trailing gap behind. */
  .bb-step__color-delta {
    font-family: var(--bb-font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: normal;
    color: var(--bb-success);
  }

  .bb-step__color-delta:empty {
    display: none;
  }

  /* ── Size ("way") picker: 5-Way / 14-Way ──
     Mirrors the variant row's shape (label line + pill row) because the two sit
     one above the other and pick from the same visual vocabulary. The pills are
     plain .bb-group-tab: unlike variant values, a divider count is always two
     words, so none of the wrapping overrides below apply. */
  .bb-sizes {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* `display: flex` above would defeat the hidden attribute's UA rule, and the
     row IS hidden for every colourway with no counterpart — most of them. */
  .bb-sizes[hidden] {
    display: none;
  }

  .bb-sizes__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Single panel containing the personalization, add-on and accident rows. */
  .bb-addons-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fff;
    border: 2px solid var(--bb-border);
    border-radius: 10px;
    padding: 16px 8px;
  }

  /* Every row hides itself on bundle:update — personalization for a bag that can't be
     embroidered, the add-on for a group that has none — and accident protection only
     renders when the step enables it. Collapse the panel once nothing is left rather
     than leaving an empty bordered box behind. Match the rows by name: each one also
     emits a <script> for its component, which is a child but never renders. */
  .bb-addons-panel:not(:has(> :is(bundle-personalization, bundle-addon, bundle-accident):not([hidden]))) {
    display: none;
  }

  /* ── Accessory type dropdown (Figma 384-9770) ──
     Sand panel, Slate hairline border and row rules, Mada Bold rows with a
     green delta on the right. A <details> so open/close is native. */
  .bb-select {
    --bb-select-sand: #e0dcd1;

    inline-size: 100%;
    padding-inline: 8px;
    border: 1px solid var(--bb-brand);
    border-radius: var(--bb-radius-sm);
    background: var(--bb-select-sand);
    overflow: clip;
  }

  /* Rows — trigger and options share one treatment. */
  .bb-select__trigger,
  .bb-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 4px;
    font-family: var(--bb-font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 0.6px;
    color: var(--bb-brand);
    cursor: pointer;
  }

  .bb-select__trigger {
    /* Roomier than the option rows (which stay at the Figma 4px) so the
       collapsed control reads as a control rather than a list row. */
    padding-block: 8px;
    list-style: none;
  }

  .bb-select__trigger::-webkit-details-marker {
    display: none;
  }

  .bb-select__chevron {
    flex: 0 0 auto;
    inline-size: 20px;
    block-size: 11px;
    color: var(--bb-brand);
    /* Points down when closed, up when open (Figma shows the open state). */
    transform: rotate(180deg);
    transition: transform 0.15s;
  }

  .bb-select[open] .bb-select__chevron {
    transform: none;
  }

  .bb-select__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* A 1px rule above every row in the open list — including the first, which
     separates it from the trigger. */
  .bb-select__option {
    border-block-start: 1px solid var(--bb-brand);
  }

  /* The active type is named by the trigger, so it drops out of the list. */
  .bb-select__option[aria-selected='true'] {
    display: none;
  }

  .bb-select__delta {
    flex: 0 0 auto;
    font-family: var(--bb-font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: normal;
    color: var(--bb-accent-green, #48ba25);
  }

  /* The global `li` type selector sets font-size/line-height/letter-spacing
     directly on the item, so the row's own values never inherit down. */
  .bb-select__option {
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 0.6px;
  }

  /* ── Trust badges (Figma 384:2490): #f2f2f2 block, 2×2 grid ── */
  .bb-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #f2f2f2;
    padding: 8px 16px;
    border-radius: 10px;
  }

  .bb-trust__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
  }

  .bb-trust__icon {
    width: 24px;
    height: 24px;
    color: var(--bb-brand);
  }

  .bb-trust__label {
    font-family: var(--bb-font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.84px;
    text-transform: uppercase;
    color: var(--bb-brand);
  }

  /* ── Accordions (Figma 384:2575): native <details>/<summary> rows ── */
  .bb-accordions {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .bb-accordion {
    border-bottom: 1px solid #e3e3e3;
  }

  /* Top border only on the first row, so adjacent rows share a single rule. */
  .bb-accordion:first-child {
    border-top: 1px solid #e3e3e3;
  }

  .bb-accordion__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
  }

  .bb-accordion__row::-webkit-details-marker {
    display: none;
  }

  .bb-accordion__title {
    flex: 1 0 0;
    min-width: 0;
    font-family: var(--bb-font-heading);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    color: var(--bb-brand);
  }

  /* "+" → "−" via content swap; Red Hat Display SemiBold. */
  .bb-accordion__sign {
    flex: 0 0 auto;
    width: 20px;
    font-family: var(--bb-font-heading);
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    text-align: center;
    color: var(--bb-brand);
  }

  .bb-accordion__sign::before {
    content: '+';
  }

  .bb-accordion[open] .bb-accordion__sign::before {
    content: '\2212'; /* minus sign */
  }

  .bb-accordion__body {
    padding: 0 0 16px;
    font-family: var(--bb-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--bb-text);
  }

  .bb-accordion__body:empty {
    display: none;
  }

  .bb-accordion__body :where(p, ul, ol) {
    margin: 0 0 8px;
  }

  .bb-accordion__body :where(p, ul, ol):last-child {
    margin-bottom: 0;
  }

  /* ── Variant picker (e.g. "Size") ──
     Same pill treatment as the bag-type tabs, but variant values are long
     sentences ("5-8 years old 27” (H) 8” (W)"), not one-word material names —
     so the row wraps and each pill wraps internally rather than overflowing.
     Every override is written as `.bb-group-tab.bb-variant` so it outranks the
     single-class base rules in assets/bundle-builder-v2.css regardless of which
     stylesheet the browser loads first. */
  .bb-variants {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* `display: flex` above would defeat the hidden attribute's UA rule, and the
     row IS hidden for single-variant products (and while none is resolved). */
  .bb-variants[hidden] {
    display: none;
  }

  /* "Size: 9-12 years old …" — the .bb-step__color pattern used above the
     swatches, allowed to wrap because the value can be a full phrase. */
  .bb-variants__head {
    flex-wrap: wrap;
  }

  .bb-variants__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .bb-group-tab.bb-variant {
    /* Shrinkable and wrappable: never force one line, never overflow the column. */
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-inline-size: 100%;
    min-inline-size: 0;
    /* The base pill pins a 27px line-height (and 35px height on mobile) for
       single-line labels — both have to give for multi-line text. */
    block-size: auto;
    min-block-size: 35px;
    padding-block: 6px;
    line-height: 1.35;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  @media screen and (max-width: 749px) {
    .bb-group-tab.bb-variant {
      block-size: auto;
    }
  }

  /* Sold-out variants stay visible (the client wants every size shown) but are
     non-interactive: dimmed to the muted token, struck through, and flagged.
     Swatches never needed this — `hide_sold_out` drops unavailable PRODUCTS
     before they render, but a variant of a shown product has nowhere to go. */
  .bb-group-tab.bb-variant[disabled] {
    border-color: var(--bb-border);
    background: none;
    color: var(--bb-text-muted);
    opacity: 0.6;
    cursor: not-allowed;
  }

  .bb-group-tab.bb-variant[disabled] .bb-group-tab__label {
    text-decoration: line-through;
  }

  .bb-variant__flag {
    flex: 0 0 auto;
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 400 !important;
    line-height: 1.2;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--bb-text-muted);
  }
/* END_SNIPPET:bb-step */

/* START_SNIPPET:bb-stepbar (INDEX:200) */
bundle-stepbar {
    display: block;
    width: 100%;
    background: #fff;
  }

  .bb-stepbar__inner {
    display: flex;
    align-items: center;
    max-width: 1380px;
    margin-inline: auto;
    padding: 16px 20px;
  }

  .bb-stepbar__dot {
    flex: 0 0 auto;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    border: 1px solid #000;
    border-radius: 100px;
    background: none;
    font-family: var(--bb-font-heading);
    font-weight: 700;
    font-size: 10px;
    line-height: 24px;
    color: var(--bb-brand);
    cursor: pointer;
  }

  /* Current + completed steps are filled. */
  .bb-stepbar__dot[aria-current='true'],
  .bb-stepbar__dot[data-done] {
    background: #e6e6e6;
  }

  /* Completed steps show a checkmark instead of the number. */
  .bb-stepbar__dot[data-done] {
    position: relative;
    color: transparent;
  }

  .bb-stepbar__dot[data-done]::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bb-brand);
    font-size: 11px;
  }

  .bb-stepbar__line {
    flex: 1 0 0;
    block-size: 1px;
    background: #d9d9d9;
  }

  /* Mobile (Figma 257-11241): tighter step indicator — less vertical padding so
     the dots sit closer to the step content below. Desktop spacing unchanged. */
  @media screen and (max-width: 749px) {
    .bb-stepbar__inner {
      padding: 8px 16px;
    }
  }
/* END_SNIPPET:bb-stepbar */

/* START_SNIPPET:bento-grid (INDEX:201) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:202) */
.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:212) */
.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:215) */
.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:carousel-progress (INDEX:216) */
.carousel-progress {
    display: flex;
    justify-content: center;
    padding-block-start: var(--padding-sm);
  }

  /* The author-level `display: flex` above outranks the UA [hidden] rule. */
  .carousel-progress[hidden] {
    display: none;
  }

  .carousel-progress__track {
    position: relative;
    display: block;
    width: min(var(--carousel-progress-width, 120px), 60%);
    height: 3px;
    border-radius: 3px;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-20));
    overflow: hidden;
  }

  /* Driven entirely by the two custom properties the element writes on every scroll frame:
     `start` is the thumb's offset as a fraction of the track, `size` its share of it. */
  .carousel-progress__thumb {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--carousel-progress-start, 0) * 100%);
    width: calc(var(--carousel-progress-size, 1) * 100%);
    border-radius: inherit;
    background-color: var(--color-foreground);
  }

  /* The nudge is the discoverability half of this feature, so it is the half that has to
     go away for shoppers who asked for less motion — the bar itself still reads fine
     static, because a short thumb in a long track already implies more content. */
  @media (prefers-reduced-motion: no-preference) {
    .carousel-progress[hint] .carousel-progress__thumb {
      animation: carousel-progress-hint 1.4s var(--ease-out-quad) 0.4s 2;
    }
  }

  @keyframes carousel-progress-hint {
    0%,
    100% {
      translate: 0;
    }

    45% {
      translate: 30%;
    }
  }
/* END_SNIPPET:carousel-progress */

/* START_SNIPPET:cart-bubble (INDEX:217) */
.cart-bubble .cart-bubble__text-count {
    font-size: 10px;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-discount (INDEX:218) */
.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;
  }

  .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;
    font-weight: normal;
    color: var(--color-foreground);
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
    font-weight: normal;
  }

  .cart-discount__pill-icon {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    flex-shrink: 0;
  }

  .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);
  }
/* END_SNIPPET:cart-discount */

/* START_SNIPPET:cart-drawer (INDEX:219) */
.cart-drawer.cart-drawer .cart-drawer__dialog.cart-drawer__dialog {
    width: 30rem;
    max-width: calc(100vw - 3rem);
    height: 100%;
    max-height: 100dvh;
  }

  .cart-drawer.cart-drawer .cart-drawer__dialog.cart-drawer__dialog[open] {
    display: flex;
    flex-direction: column;
  }

  .cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .cart-drawer__heading {
    font-weight: 700;
  }

  .cart-drawer__count {
    font-weight: 700;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    padding-block-end: var(--padding-sm);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding: var(--cart-drawer-padding-desktop);
      padding-block-end: var(--padding-sm);
    }
  }

  .cart-drawer__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
  }

  .cart-drawer__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
  }

  .cart-drawer__items {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: var(--cart-drawer-padding);
    padding-block-start: 0;

    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */

    @media screen and (min-width: 750px) {
      padding: var(--cart-drawer-padding-desktop);
      padding-block-start: 0;
      min-height: 280px;
    }
  }

  /* Hide scrollbar for Chrome, Safari, Opera */
  .cart-drawer__items::-webkit-scrollbar {
    display: none;
  }

  .cart-drawer__summary {
    background-color: var(--color-background);
    flex-shrink: 1;
    padding: var(--cart-drawer-padding);
    border-block-start: 1px solid var(--color-border);
    position: sticky;
    bottom: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding: var(--cart-drawer-padding-desktop);
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-gift-group (INDEX:220) */
/* Base .cart-gift styles are duplicated from cart-gift-product.liquid so this
     group card renders correctly even when no single-gift card is on the page. */
  .cart-gift--group {
    margin-bottom: var(--margin-md, 1rem);
  }

  .cart-gift--group .cart-gift__heading {
    margin: 0 0 var(--margin-2xs, 0.375rem);
    font-size: calc(var(--cart-font-size--sm, 0.875rem) * 1.05);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--color-foreground);
  }

  .cart-gift--group .cart-gift__card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm, 12px);
    padding: var(--padding-sm, 12px);
    border: 2px dashed #65c548;
    border-radius: var(--border-radius-sm, 8px);
    background-color: var(--color-background);
  }

  .cart-gift--group .cart-gift__card-row {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 12px);
  }

  .cart-gift--group .cart-gift__link {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 12px);
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
  }

  .cart-gift--group .cart-gift__image {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: var(--border-radius-sm, 4px);
    background-color: var(--color-background-secondary, #f5f5f5);
  }

  .cart-gift--group .cart-gift__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-gift--group .cart-gift__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }

  .cart-gift--group .cart-gift__title {
    font-size: var(--cart-font-size--sm, 0.875rem);
    font-weight: 600;
    color: var(--color-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cart-gift--group .cart-gift__price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cart-font-size--sm, 0.875rem);
  }

  .cart-gift--group .cart-gift__price-free {
    color: #65c548;
    font-weight: 700;
    text-transform: uppercase;
  }

  .cart-gift--group .cart-gift__price-compare {
    color: var(--color-foreground-secondary, #999);
    font-weight: 400;
    text-decoration: line-through;
  }

  .cart-gift--group .cart-gift__add {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #65c548;
    color: #fafafa;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
  }

  .cart-gift--group .cart-gift__add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .cart-gift--group .cart-gift__variant {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .cart-gift--group .cart-gift__variant-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-foreground-secondary, #666);
  }

  .cart-gift--group .cart-gift__variant-select {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-foreground);
    background-color: var(--color-background);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.2));
    border-radius: 4px;
    cursor: pointer;
    touch-action: manipulation;
  }
/* END_SNIPPET:cart-gift-group */

/* START_SNIPPET:cart-gift-product (INDEX:221) */
.cart-gift {
    margin-bottom: var(--margin-md, 1rem);
  }

  .cart-gift__heading {
    margin: 0 0 var(--margin-2xs, 0.375rem);
    font-size: calc(var(--cart-font-size--sm, 0.875rem) * 1.05);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--color-foreground);
  }

  .cart-gift__card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm, 12px);
    padding: var(--padding-sm, 12px);
    border: 2px dashed #65c548;
    border-radius: var(--border-radius-sm, 8px);
    background-color: var(--color-background);
  }

  .cart-gift__card-row {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 12px);
  }

  .cart-gift__variant {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .cart-gift__variant-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-foreground-secondary, #666);
  }

  .cart-gift__variant-select {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-foreground);
    background-color: var(--color-background);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.2));
    border-radius: 4px;
    cursor: pointer;
    touch-action: manipulation;
  }

  .cart-gift__link {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 12px);
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
  }

  .cart-gift__image {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: var(--border-radius-sm, 4px);
    background-color: var(--color-background-secondary, #f5f5f5);
  }

  .cart-gift__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-gift__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }

  .cart-gift__title {
    font-size: var(--cart-font-size--sm, 0.875rem);
    font-weight: 600;
    color: var(--color-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cart-gift__price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cart-font-size--sm, 0.875rem);
  }

  .cart-gift__price-free {
    color: #65c548;
    font-weight: 700;
    text-transform: uppercase;
  }

  .cart-gift__price-compare {
    color: var(--color-foreground-secondary, #999);
    font-weight: 400;
    text-decoration: line-through;
  }

  .cart-gift__add {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #65c548;
    color: #fafafa;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
  }

  .cart-gift__add:hover:not(:disabled) {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  .cart-gift__add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  @media screen and (max-width: 749px) {
    .cart-gift__image {
      width: 48px;
      height: 48px;
    }

    .cart-gift__title {
      font-size: 14px;
    }

    .cart-gift__add {
      padding: 6px 10px;
      font-size: 13px;
    }
  }
/* END_SNIPPET:cart-gift-product */

/* START_SNIPPET:cart-icon-component (INDEX:222) */
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:cart-icon-component */

/* START_SNIPPET:cart-products (INDEX:224) */
.cart-items {
    --cart-item-media-width-min: 3.125rem;
    --cart-item-media-width-max: 9.375rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;

    /* Match the cart upsell header padding-block for spacing on mobile */
    @media screen and (max-width: 749px) {
      margin-block-end: var(--padding-sm, 0.75rem);
    }
  }

  /*
    Busy state while a cart mutation is in flight.

    This must NEVER use `pointer-events: none`. It used to, applied to
    <cart-items-component>, which wraps the whole cart INCLUDING #checkout. Every
    quantity tap made the entire cart non-hit-testable for 1.2s on a fast
    connection and 3.9s on Slow 4G + 4x CPU. Taps in that window fell through to
    the bare section <div> behind (verified: document.elementFromPoint over the
    "+" button returned div.shopify-section), which dispatches a real click that
    changes nothing — the definition of a dead click.

    Controls stay hit-testable; re-entrancy is handled in JS instead, where a tap
    during flight is queued rather than swallowed. See component-cart-items.js.
  */
  .cart-items-busy .cart-items__table-row {
    opacity: 0.6;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .cart-items-busy .quantity-selector,
  .cart-items-busy .cart-items__remove {
    cursor: progress;
  }

  .cart-items__table {
    width: 100%;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    display: grid;
    grid-template-columns: clamp(5rem, 28cqi, 12.5rem) minmax(0, 1fr);
    grid-template-areas:
      'media details'
      'media quantity'
      'media error';
    column-gap: var(--gap-lg);
    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 {
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-child {
    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: calc(15 / 16 * 1rem);
    font-weight: 900;
    letter-spacing: calc(0.8 / 16 * 1rem);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    font-family: var(--cart-secondary-font-family);
  }

  .cart-items__subtitle {
    display: block;
    font-weight: 700;
    padding-top: 2px;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 10px;
    letter-spacing: 1.3px;
  }

  .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 .quantity-selector {
    display: inline-flex;
    flex: 0 1 var(--quantity-selector-width);
    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-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin-block-start: var(--margin-2xs);
    font-size: calc(15 / 16 * 1rem);
    font-weight: 900;
    letter-spacing: calc(0.8 / 16 * 1rem);
    font-family: var(--cart-secondary-font-family);
  }

  .cart-items__sale-price {
    color: #65C548;
    font-weight: 900;
    font-family: var(--cart-secondary-font-family);
  }

  .cart-items__compare-price {
    color: rgba(var(--color-foreground-rgb), 0.5);
    text-decoration: line-through;
    font-weight: 400;
    font-family: var(--cart-secondary-font-family);
  }

  .cart-items__regular-price {
    color: var(--color-foreground);
    font-weight: 900;
    font-family: var(--cart-secondary-font-family);
  }

  .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 {
      grid-template-columns: 11.25rem 1fr auto;
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity'
        'media details error';
    }

    .cart-items__quantity {
      grid-area: initial;
      margin-top: 0;
    }
  }

  .cart__original-total-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    &:has(.cart__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: 700;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .cart__total-label {
    font-size: 13px;
    font-weight: 700;
    font-family: var(--cart-secondary-font-family);
    letter-spacing: 0;
  }

  .cart__total-value {
    font-size: calc(var(--cart-font-size--2xl) * 0.95);
    font-weight: 700;
    font-family: var(--cart-secondary-font-family);
    letter-spacing: 0;
  }

  .cart__savings {
    display: flex;
    justify-content: space-between;
    font-size: calc(15 / 16 * 1rem);
    font-weight: 400;
    letter-spacing: calc(0.6 / 16 * 1rem);
    font-family: var(--cart-secondary-font-family);
    margin-block-start: 0;
    margin-block-end: var(--margin-sm);
  }

  .cart__savings-label {
    font-family: var(--cart-secondary-font-family);
  }

  .cart__savings-amount {
    color: #65C548;
    font-family: var(--cart-secondary-font-family);
  }

  .cart__summary-item.tax-note {
    font-size: 13px;
    color: var(--color-foreground);
  }

  .cart__summary-item.tax-note small {
    font-size: 13px;
  }

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

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

  .free-shipping-bar {
    padding: var(--padding-2xs) 0;
    margin-bottom: var(--margin-xs);
    text-align: center;
  }

  .free-shipping-bar__text {
    margin: 0 0 var(--margin-2xs);
    font-size: calc(var(--cart-font-size--sm) * 1.15);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-foreground);
  }

  .free-shipping-bar__track {
    width: 100%;
    height: 10px;
    background: var(--color-background-alt, #e0e0e0);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
  }

  .free-shipping-bar__fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
  }

  /* Reward bar: give the track room for the milestone icons sitting at each threshold */
  .free-shipping-bar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .free-shipping-bar__track {
    overflow: visible;
  }

  /* Milestone icon badges sit on the track, one per reward tier */
  .free-shipping-bar__milestone {
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-background, #fff);
    border: 2px solid rgb(var(--color-foreground-rgb) / 0.3);
    color: rgb(var(--color-foreground-rgb) / 0.45);
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: border-color 0.4s ease, background 0.4s ease, color 0.4s ease;
  }

  .free-shipping-bar__milestone svg {
    display: block;
    width: 12px;
    height: 12px;
  }

  .free-shipping-bar__milestone.is-reached {
    background: #65c548;
    border-color: #65c548;
    color: #fff;
  }

  .free-shipping-bar__fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      110deg,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,0.35) 50%,
      rgba(255,255,255,0) 70%
    );
    animation: shimmer 2s ease-in-out infinite;
  }

  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  .free-shipping-bar__unlocked {
    display: inline-block;
    animation: unlocked 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  @keyframes unlocked {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }

  .cart-items__discounts {
    margin: 0;
    padding: 0;
  }

  .cart-items__discount {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-items__discount-icon {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    flex-shrink: 0;
  }

  .cart-items__discount-title {
    font-weight: normal;
    color: var(--color-foreground);
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:226) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    border-block: 1px solid var(--color-border);
    padding-block: var(--padding-sm);
    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);
  }

  .accident-protection-section {
    width: 100%;
    margin-bottom: .2rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: #f9f5f0;
  }

  .accident-protection-details {
    width: 100%;
  }

  .accident-protection-details summary {
    padding: 1rem;
    padding-bottom: .5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
  }

  .accident-protection-details summary::-webkit-details-marker {
    display: none;
  }

  .accident-protection-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .accident-protection-title {
    font-size: calc(12 / 16 * 1rem);
    font-weight: 600;
    display: flex;
    align-items: center;
  }

  .accident-protection-icon {
    width: 12px;
    height: 12px;
    margin-left: 0.5rem;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .accident-protection-details[open] .accident-protection-icon {
    transform: rotate(180deg);
  }

  .accident-protection-content {
    padding: 1rem;
    padding-top: 0;
  }

  .accident-protection-description {
    font-family: 'Mada', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 1rem;
    letter-spacing: 0.03em;
  }

  .accident-protection-note {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

  .accident-protection-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .accident-protection-option {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    cursor: pointer;
  }

  .accident-protection-radio {
    margin-right: 0.5rem;
    width: 0.9375rem;
    height: 0.9375rem;
  }

  .option-label {
    display: flex;
    align-items: center;
    font-family: 'Mada', sans-serif;
    font-weight: 600;
    font-size: 14px;
  }

  .badge-cart {
    font-family: 'Mada', sans-serif;
    font-weight: 600;
    font-size: 10px;
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
  }

  .badge-cart--most-popular {
    background-color: #9e553e;
    color: #fff;
  }

  .badge-cart--best-value {
    background-color: var(--color-foreground);
    color: #fff;
  }

  .accident-protection-error {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-error, #b3261e);
  }

  .accident-protection-error[hidden] {
    display: none;
  }

  .add-protection-button {
    width: 100%;
    margin-top: 1rem;
    padding: 0.25rem;
    background-color: var(--color-background);
    color: var(--color-foreground);
    text-transform: uppercase;
    font-weight: 600;
    border: solid 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .add-protection-button:hover {
    background-color: #ff8034;
    color: white;
  }

  .protection-added-message {
    font-size: 0.875rem;
    color: #333;
    font-weight: 500;
    text-align: center;
    margin: 1rem 0;
  }

  .checkout-lock-icon {
    margin-right: 0.5rem;
    flex-shrink: 0;
  }

  .cart__checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:229) */
.collection-card {
    --fixed-card-height: var(--height-small);
    flex: 1 1 var(--card-width-small);
    width: 100%;
    position: relative;
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    gap: var(--collection-card-gap);
    display: flex;
    flex-direction: column;
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    z-index: var(--layer-flat);
    pointer-events: none;

    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 {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--collection-card-gap);
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment);
  }

  .collection-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

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

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

    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:contact-form (INDEX:231) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

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

    .contact-form__form-row .contact-form__field {
      flex: 1;
    }
  }

  .contact-form__field {
    position: relative;
    width: 100%;
  }

  .contact-form__label {
    position: absolute;
    top: -0.5rem;
    left: 0.75rem;
    display: inline-block;
    background-color: var(--color-background, #fff);
    padding: 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-foreground);
    z-index: 1;
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-foreground);
    background-color: transparent;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input:focus {
    outline: none;
    border-color: var(--color-primary, #1c404c);
    box-shadow: 0 0 0 1px var(--color-primary, #1c404c);
  }

  .contact-form__input::placeholder {
    color: var(--color-foreground);
    opacity: 0.5;
    font-size: 0.875rem;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: 200px;
  }

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

/* START_SNIPPET:disclosure-content (INDEX:232) */
.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:disclosure-content */

/* START_SNIPPET:disclosure-trigger (INDEX:233) */
.disclosure-trigger {
    cursor: pointer;
    color: var(--color-foreground);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--padding-sm);
    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);
    }
  }

  .disclosure-trigger__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--cart-font-size--sm);
  }

  @media (prefers-reduced-motion: no-preference) {
    .disclosure-trigger .horizontal {
      transition: rotate var(--surface-transition-duration) var(--surface-transition-timing);
    }
  }
/* END_SNIPPET:disclosure-trigger */

/* START_SNIPPET:divider (INDEX:234) */
.divider {
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  /* Horizontal divider (default) */
  .divider--horizontal {
    align-self: stretch;
  }

  .divider--horizontal .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--divider-color, var(--color-border));
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    width: var(--divider-size);
    height: 0;
  }

  /* Vertical divider */
  .divider--vertical {
    align-self: stretch;
    justify-content: center;
    width: fit-content;
  }

  /* In column groups, let divider respect parent alignment instead of stretching */
  .layout-panel-flex--column > .divider--vertical,
  .mobile-column > .divider--vertical {
    align-self: auto;
  }

  .divider--vertical .divider__line {
    border-right: var(--divider-border-thickness) solid var(--divider-color, var(--color-border));
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    width: 0;
    height: var(--divider-size);
  }

  /* Flip vertical to horizontal on mobile */
  @media screen and (max-width: 749px) {
    .divider--horizontal-on-mobile {
      align-self: auto;
      width: fit-content;
    }

    .divider--horizontal-on-mobile .divider__line {
      border-right: none;
      border-bottom: var(--divider-border-thickness) solid var(--divider-color, var(--color-border));
      width: var(--divider-size);
      height: 0;
    }
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:237) */
.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;
    }

    .featured-blog-posts-card__image {
      min-height: 200px;
    }

    /* 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:238) */
.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:239) */
.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:241) */
/* 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);
      --button-color: var(--color-primary);

      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);
      background-color: transparent;
      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:242) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:filters-toggle (INDEX:243) */
/* Facets - Toggle */
  .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 */
  .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%;
      }
    }
  }
/* END_SNIPPET:filters-toggle */

/* START_SNIPPET:geo-redirect-popup (INDEX:247) */
.geo-redirect-popup__dialog {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 1rem;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
  }

  .geo-redirect-popup__dialog:not([open]) {
    display: none;
  }

  .geo-redirect-popup__dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.45);
  }

  .geo-redirect-popup__card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background-color: #fff;
    border-radius: 12px;
    padding: 2.5rem 2rem 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    text-align: center;
    font-family: inherit;
  }

  .geo-redirect-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #666;
    line-height: 0;
  }

  .geo-redirect-popup__close:hover {
    color: #000;
  }

  .geo-redirect-popup__text {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin: 0 0 4px;
  }

  .geo-redirect-popup__store-name {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin: 0 0 1.5rem;
  }

  .geo-redirect-popup__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .geo-redirect-popup__btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: opacity 0.15s ease;
  }

  .geo-redirect-popup__btn:hover {
    opacity: 0.85;
  }

  .geo-redirect-popup__btn--yes {
    background-color: #000;
    color: #fff;
  }

  .geo-redirect-popup__btn--no {
    background-color: #e8e8e8;
    color: #333;
  }
/* END_SNIPPET:geo-redirect-popup */

/* START_SNIPPET:gift-card-recipient-form (INDEX:248) */
.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:249) */
.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:250) */
/* ── Spacing ─────────────────────────────────────────────────────────
     Consumes the custom properties that the spacing-style snippet emits
     into this element's style attribute, in place of the shared
     `.spacing-style` utility class.

     The default declarations are load-bearing, not boilerplate: without
     them `--padding-*` inherits from any ancestor that set it — a section,
     typically — and a group with no padding of its own would silently take
     on its parent's. Declaring them here shadows that inheritance.

     `--spacing-scale` must be declared too: the snippet emits
     `max(20px, calc(var(--spacing-scale) * Npx))` for values over 20px,
     which is an invalid declaration if the scale is undefined.

     Differs from `.spacing-style` in one way: `--section-top-offset` is not
     added to the top padding. That offset is a section-level concern, and a
     block inside an already-offset section would double-count it. */
  /* stylelint-disable length-zero-no-unit */
  .group-block {
    --spacing-scale: var(--spacing-scale-md);
    --padding-block: 0px;
    --padding-block-start: var(--padding-block, 0px);
    --padding-block-end: var(--padding-block, 0px);
    --padding-inline: 0px;
    --padding-inline-start: var(--padding-inline, 0px);
    --padding-inline-end: var(--padding-inline, 0px);

    padding-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  }
  /* stylelint-enable length-zero-no-unit */

  @media screen and (min-width: 990px) {
    .group-block {
      --spacing-scale: var(--spacing-scale-default);
    }
  }

  @media screen and (max-width: 989px) {
    .group-block {
      padding-block: var(--padding-block-start-mobile, var(--padding-block-start))
        var(--padding-block-end-mobile, var(--padding-block-end));
      padding-inline: var(--padding-inline-start-mobile, var(--padding-inline-start))
        var(--padding-inline-end-mobile, var(--padding-inline-end));
    }
  }

  .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;
  }
  .group-overlay-wrapper {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  @media screen and (min-width: 750px) {
    .group-overlay--mobile-only {
      display: none;
    }

    .group-block--connector {
      position: relative;
      overflow: visible;
    }

    .group-block--connector::after {
      content: '';
      position: absolute;
      top: var(--connector-top, 33px);
      left: var(--connector-left, 100%);
      width: var(--connector-width, 100%);
      height: var(--connector-height, 4px);
      background-color: var(--connector-color, #1c404c);
      pointer-events: none;
    }
  }

  /* ── Sticky ──────────────────────────────────────────────────────────
     `position: sticky` is bounded by the group's own container, so the
     block travels with the scroll only as far as its parent extends.
     `align-self: flex-start` is required: a stretched flex item fills the
     container height and can never move relative to it. Two class names so
     these win over `.group-block { position: relative }` in base.css. */
  @media screen and (min-width: 750px) {
    .group-block.group-block--sticky {
      position: sticky;
      top: var(--group-sticky-offset, 0px);
      align-self: flex-start;
    }
  }

  @media screen and (max-width: 749px) {
    .group-block.group-block--sticky-mobile {
      position: sticky;
      top: var(--group-sticky-offset, 0px);
      align-self: flex-start;
    }
  }

  /* ── Mobile carousel ─────────────────────────────────────────────────
     Scroll-snap rather than a JS carousel, so any block type can be a
     slide. Two class names to beat `.layout-panel-flex--column`. */
  @media screen and (max-width: 749px) {
    .group-block-content.group-block-content--mobile-carousel {
      flex-flow: row nowrap;
      align-items: stretch;
      justify-content: flex-start;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .group-block-content.group-block-content--mobile-carousel::-webkit-scrollbar {
      display: none;
    }

    .group-block-content.group-block-content--mobile-carousel > * {
      flex: 0 0 var(--group-carousel-slide-width, 85%);
      scroll-snap-align: start;
    }
  }

  /* ── Desktop carousel ────────────────────────────────────────────────
     Same scroll-snap approach as the mobile carousel, for the same reason:
     no JS carousel component, so any block type can be a slide. Scoped to
     the complement of that media query, so the two never fight and all
     four on/off combinations render.

     The slide width is derived rather than set directly — N slides plus
     the (N - 1) gaps between them add up to the full row. `--gap` is the
     property `gap-style` already emits into this element's style
     attribute for `.layout-panel-flex`, so the carousel tracks the
     group's own gap setting, responsive scaling included.

     Declared on the container rather than inline on the slides on
     purpose: the var() references in a custom property resolve against
     the element that declares it, so `--gap` here is always the
     container's gap and can't be shadowed by a child that sets its own. */
  @media screen and (min-width: 750px) {
    .group-block-content.group-block-content--desktop-carousel {
      /* stylelint-disable-next-line length-zero-no-unit */
      --group-desktop-slide-width: calc(
        (100% - (var(--group-desktop-slides, 3) - 1) * var(--gap, 0px)) / var(--group-desktop-slides, 3)
      );

      flex-flow: row nowrap;
      align-items: stretch;
      justify-content: flex-start;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .group-block-content.group-block-content--desktop-carousel::-webkit-scrollbar {
      display: none;
    }

    .group-block-content.group-block-content--desktop-carousel > * {
      flex: 0 0 var(--group-desktop-slide-width);
      scroll-snap-align: start;
    }
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:251) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @media screen and (min-width: 750px) {
      margin-inline-end: calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);

    @media screen and (min-width: 750px) {
      width: var(--sidebar-width);
      max-width: 95vw;
    }
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

    @media screen and (max-width: 749px) {
      top: var(--margin-2xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-2xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-2xl);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid none;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  header-actions {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);

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

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  @media screen and (min-width: 750px) {
    .header__column--right header-actions {
      margin-inline-start: calc(var(--gap-md) * -1);
    }
  }

  header-actions .header-actions__action {
    overflow: visible;
    display: flex;
    align-items: center;

    /* Mobile: full 44px tap target with the icon centred in it, so the cart
       keeps the position it has always had relative to the screen edge. The
       gap to the search icon is closed from the search side — see
       search.liquid. */
    @media screen and (max-width: 749px) {
      min-width: var(--minimum-touch-target);
      min-height: var(--minimum-touch-target);
      justify-content: center;
    }
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 14px;
    --cart-bubble-top: -2px;
    --cart-bubble-right: -4px;

    display: inline-flex;
    align-self: center;
    position: relative;
    /* The mobile gap to the search icon comes from the button's touch-target
       padding above, not from nudging the icon inside its button. */
    margin-inline-start: 0;
  }

  .header-actions__cart-icon .cart-bubble {
    width: 14px;
    height: 14px;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-size: 8px;
  }

  .header-actions__cart-icon .svg-wrapper svg {
    width: 24px;
    height: 24px;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon .svg-wrapper {
      width: 44px;
      height: 44px;
    }
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon .cart-bubble {
      top: 10px;
      right: 5px;
    }

    .header-actions__cart-icon .cart-bubble__text-count {
      font-size: 10px;
      font-weight: 400;
      font-family: "Red Hat Display", sans-serif;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

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

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

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

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

  .cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }

      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:252) */
.header__icon--menu {
    position: initial;
  }

  @media screen and (min-width: 750px) {
    .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;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: calc(var(--icon-size-xs) * 1.5);
    height: calc(var(--icon-size-xs) * 1.5);
  }

  .header__drawer {
    display: flex;
    min-height: 60px;
    align-items: center;

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

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

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not([open]) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details[open] .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details[open] .header__icon--menu .header-drawer-icon--open {
    display: none;

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

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }

    .header__drawer--desktop & {
      height: 100vh;
    }
  }

  .menu-drawer:has(details[open]) {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
    will-change: transform;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

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

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline-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;
  }

  .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(--font-mada, "Mada", sans-serif);
    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,
  .menu-drawer__menu-item--child {
    min-height: 69px;
    font-family: var(--font-mada, "Mada", sans-serif);
    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--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;
  }

  .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: sticky;
    top: 0;
    left: 100%;
    right: auto;
    width: fit-content;
    height: fit-content;
    padding: var(--padding-lg);
    will-change: transform;
    z-index: 10;
    align-self: flex-start;
  }

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

  /* The link/summary carries the menu typography (--menu-top-level-* on
     .menu-drawer__menu-item--mainlist, --menu-parent-* on --parent/--child),
     but the label itself is a span — and theme-styles-variables pins
     font-family, font-size, letter-spacing, line-height and font-weight
     directly on every `span`. A direct rule beats an inherited value, so the
     label ignored the menu's own weight. Follow the item instead. */
  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }

  /* Label + callout badge, mirroring .sunday-mega-menu__title-row on desktop.
     The drawer item is `justify-content: space-between`, so without a row of
     their own the two would be pushed to opposite ends of the card. This is a
     span too, so it repeats the `font: inherit` above — otherwise it would
     reset the chain and the label would inherit the pinned span type from here
     instead of the menu type from the item. */
  .menu-drawer__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Header links in drawer */
  .menu-drawer__links-separator {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--padding-md) var(--drawer-padding);
  }

  .menu-drawer__links-menu {
    padding-inline: var(--drawer-padding);
    margin: 0;
  }

  .menu-drawer__links-item {
    display: flex;
    flex-direction: column;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__links-item--divider {
    border-bottom: 1px solid var(--color-border);
  }

  /* Drawer banner styles */
  .menu-drawer__banner {
    padding: var(--drawer-padding);
    padding-block-end: var(--padding-md);
  }

  .menu-drawer__banner-link {
    display: block;
  }

  .menu-drawer__banner-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: cover;
  }

  /* Menu item card styles */
  .menu-drawer__menu.has-submenu {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs);
  }

  /* No font-weight here either: a 400 in this rule still beat the
     --menu-top-level-font-weight set further up, so top-level drawer items
     stayed regular while every level of the desktop mega menu is bold. */
  .menu-drawer__menu-item--mainlist {
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
    border-radius: 8px;
    padding: 0.66rem var(--padding-md);
    font-size: 1.125rem;
    font-family: var(--font-mada, "Mada", sans-serif);
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item--mainlist {
    border-radius: 0;
    background-color: transparent;
  }

  /* Child link with collection image styles */
  .menu-drawer__childlink-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    overflow: hidden;
    min-width: 0;
  }

  .menu-drawer__childlink-image {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
  }

  /* Same span pin as .menu-drawer__menu-item-text. The enclosing
     .menu-drawer__menu-item--child carries the submenu typography
     (--menu-parent-*), so inheriting picks that up rather than the larger
     top-level drawer size. .menu-drawer__childlink-desc is left alone: it sets
     its own font deliberately and is meant to read as body copy. */
  .menu-drawer__childlink-title {
    overflow: hidden;
    text-overflow: ellipsis;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }

  .menu-drawer__childlink-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }

  .menu-drawer__childlink-desc {
    display: block;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.6px;
    line-height: 1.4;
    color: rgb(var(--color-foreground-rgb) / 0.5);
    white-space: normal;
    text-transform: uppercase;
  }

  /* Submenu chevron icon size */
  .menu-drawer .icon-caret svg,
  .menu-drawer .icon-caret--forward svg,
  .menu-drawer .icon-caret--backward svg {
    width: calc(var(--icon-size-xs) * 1.2);
    height: calc(var(--icon-size-xs) * 1.2);
  }

  /* Hide chevron icons on mobile menu items with children */
  .menu-drawer__menu-item .icon-caret--forward {
    display: none;
  }

  /* Mobile drawer menu items (match staging).
     No font-weight here on purpose: an `!important` weight overrode the
     --menu-top-level-font-weight / --menu-parent-font-weight rules earlier in
     this file, so the drawer ignored the menu block's weight setting entirely.
     font-size and font-family are still pinned here — those are separate.
     Letter-spacing follows the menu setting, as the desktop mega menu does;
     left alone it fell through to the body default and ran wider. */
  .menu-drawer__menu-item--mainlist,
  .menu-drawer__menu-item--parent,
  .menu-drawer__menu-item--child {
    min-height: 65px;
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
    border-radius: 8px;
    padding: 0.66rem var(--padding-md);
    font-size: 1.125rem !important;
    font-family: var(--font-mada, "Mada", sans-serif) !important;
    letter-spacing: var(--menu-top-level-font-letter-spacing);
    text-decoration: none;
    color: var(--menu-top-level-font-color);
  }

  .menu-drawer__list-item:hover,
  .menu-drawer__list-item:active,
  .menu-drawer__list-item a:hover,
  .menu-drawer__list-item a:active,
  .menu-drawer__menu-item--mainlist:hover,
  .menu-drawer__menu-item--parent:hover,
  .menu-drawer__menu-item--child:hover {
    opacity: 1 !important;
    color: inherit !important;
    background-color: rgb(var(--color-foreground-rgb) / 0.05) !important;
    transition: none !important;
  }

  /* Gap between child/grandchild items to match first level */
  .menu-drawer__menu--childlist {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs);
  }

  /* Grandchild list styling to match other menu levels */
  .menu-drawer__menu--grandchildlist {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs);
    width: 100%;
    padding: 0;
  }

  .menu-drawer__menu--grandchildlist .menu-drawer__list-item {
    width: 100%;
  }

  .menu-drawer__menu--grandchildlist .menu-drawer__menu-item {
    min-height: 65px;
    width: 100%;
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
    border-radius: 8px;
    padding: 0.66rem var(--padding-md);
    font-size: 1.125rem !important;
    font-family: var(--font-mada, "Mada", sans-serif) !important;
    letter-spacing: var(--menu-top-level-font-letter-spacing);
    text-decoration: none;
    color: var(--menu-top-level-font-color);
  }

  .menu-drawer__menu--grandchildlist .menu-drawer__menu-item:hover,
  .menu-drawer__menu--grandchildlist .menu-drawer__menu-item:active {
    opacity: 1 !important;
    color: inherit !important;
    background-color: rgb(var(--color-foreground-rgb) / 0.05) !important;
    transition: none !important;
  }

  /* Ensure grandchild accordion opens on click */
  .menu-drawer accordion-custom {
    width: 100%;
  }

  .menu-drawer accordion-custom details {
    width: 100%;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:262) */
.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:landing-form (INDEX:263) */
.landing-form[id] {
    scroll-margin-top: calc(var(--header-height, 100px) + 120px);
  }

  .landing-form__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto;
  }

  .landing-form__fields-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .landing-form__field {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    position: relative;
  }

  @media screen and (min-width: 750px) {
    .landing-form__fields-wrapper {
      max-width: 350px;
    }

    .landing-form__field {
      max-width: none;
      margin: 0;
    }

    .landing-form__field--submit {
      width: 100%;
    }
  }

  .landing-form__input {
    display: block;
    width: 100%;
    height: 33px;
    padding: 14px 1rem 4px;
    font-size: 12px;
    font-weight: 400;
    font-family: inherit;
    color: #000000;
    background-color: #F2F2F2;
    border: 0.6px solid #A2A9AD;
    border-radius: 5.13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-font-smoothing: antialiased;
  }

  @media screen and (min-width: 750px) {
    .landing-form__input {
      height: 40px;
      font-size: 14px;
      padding-bottom: 7px;
    }

    .landing-form__submit {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      margin: 0;
    }
  }

  .landing-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
  }

  .landing-form__input::placeholder {
    color: transparent;
  }

  .landing-form__label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-family: 'Mada', sans-serif;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #000000;
    pointer-events: none;
    transition: all 0.2s ease;
  }

  @media screen and (min-width: 750px) {
    .landing-form__label {
      font-size: 14px;
    }
  }

  .landing-form__input:focus ~ .landing-form__label,
  .landing-form__input:not(:placeholder-shown) ~ .landing-form__label {
    top: 4px;
    transform: translateY(0);
    font-size: 9px;
    color: #666666;
  }

  @media screen and (min-width: 750px) {
    .landing-form__input:focus ~ .landing-form__label,
    .landing-form__input:not(:placeholder-shown) ~ .landing-form__label {
      top: 5px;
      font-size: 10px;
    }
  }

  .landing-form__field--date .landing-form__label {
    top: 4px;
    transform: translateY(0);
    font-size: 9px;
    color: #666666;
  }

  @media screen and (min-width: 750px) {
    .landing-form__field--date .landing-form__label {
      top: 5px;
      font-size: 10px;
    }
  }

  .landing-form__field--date .landing-form__input {
    padding-top: 18px;
  }

  .landing-form__input--textarea {
    resize: vertical;
    min-height: 100px;
    height: auto;
    align-items: flex-start;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .landing-form__field--submit {
    margin-top: 0.5rem;
  }

  .landing-form__submit {
    width: 100%;
    max-width: 300px;
    height: 55px;
    margin: 0 auto;
    display: block;
    padding: 0.75rem 1.5rem;
    font-size: 16px;
    font-weight: 900;
    font-family: 'Mada', sans-serif;
    letter-spacing: 0.08em;
    color: #0F495C;
    background-color: #E88C2B;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .landing-form__submit.button {
    background-color: #E88C2B;
    color: #0F495C;
    border: none;
    border-radius: var(--style-border-radius-buttons-primary, 100px);
  }

  .landing-form__submit.button:hover {
    background-color: var(--color-primary-button-hover-background);
    color: var(--color-primary-button-hover-text);
    border-color: var(--color-primary-button-hover-border);
  }

  .landing-form__submit.button-secondary {
    background-color: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
    border: var(--style-border-width-secondary, 1px) solid var(--color-secondary-button-border);
    border-radius: var(--style-border-radius-buttons-secondary, 100px);
  }

  .landing-form__submit.button-secondary:hover {
    background-color: var(--color-secondary-button-hover-background);
    color: var(--color-secondary-button-hover-text);
    border-color: var(--color-secondary-button-hover-border);
  }

  .landing-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .landing-form__message {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    text-align: center;
  }

  .landing-form__message--success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
  }

  .landing-form__message--error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
  }
/* END_SNIPPET:landing-form */

/* START_SNIPPET:linked-product-swatches (INDEX:266) */
.linked-product-swatches {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .linked-product-swatches__label {
    display: block;
    font-size: var(--font-size--sm);
    font-weight: 500;
    margin-bottom: var(--gap-sm);
    color: var(--color-foreground);
  }

  .linked-product-swatches__current-value {
    font-weight: 700;
  }

  .linked-product-swatches__list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) * 0.6);
  }

  /* Size variants */
  .linked-product-swatches__list--small .linked-product-swatches__swatch {
    --swatch-size: 32px;
  }

  .linked-product-swatches__list--medium .linked-product-swatches__swatch {
    --swatch-size: 50px;
  }

  .linked-product-swatches__list--large .linked-product-swatches__swatch {
    --swatch-size: 56px;
  }

  @media screen and (max-width: 749px) {
    .linked-product-swatches__list--small .linked-product-swatches__swatch {
      --swatch-size: 36px;
    }

    .linked-product-swatches__list--medium .linked-product-swatches__swatch {
      --swatch-size: 40px;
    }

    .linked-product-swatches__list--large .linked-product-swatches__swatch {
      --swatch-size: 60px;
    }
  }

  /* Shape variants */
  .linked-product-swatches__list--circle .linked-product-swatches__swatch {
    border-radius: 50%;
  }

  .linked-product-swatches__list--square .linked-product-swatches__swatch {
    border-radius: 0;
  }

  .linked-product-swatches__list--rounded .linked-product-swatches__swatch {
    border-radius: var(--border-radius-sm);
  }

  /* Swatch styles */
  .linked-product-swatches__swatch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--swatch-size, 44px);
    height: var(--swatch-size, 44px);
    border: 2px solid transparent;
    overflow: hidden;
    background-color: var(--color-background-secondary, #f5f5f5);
    transition: border-color var(--animation-speed) var(--animation-easing),
                transform var(--animation-speed) var(--animation-easing);
    cursor: pointer;
    text-decoration: none;
  }

  .linked-product-swatches__swatch:hover {
    border-color: var(--color-foreground);
    transform: scale(1.05);
  }

  .linked-product-swatches__swatch--active {
    border-color: var(--color-primary, var(--color-foreground));
    pointer-events: none;
  }

  .linked-product-swatches__swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .linked-product-swatches__swatch-placeholder {
    font-size: var(--font-size--sm);
    font-weight: 600;
    color: var(--color-foreground);
    text-transform: uppercase;
  }

  /* Size pills */
  .linked-product-swatches--sizes {
    margin-block-start: 0;
  }

  .linked-product-swatches__size-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) * 0.6);
  }

  .linked-product-swatches__size-pill {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    font-size: var(--font-size--sm);
    font-weight: 500;
    font-family: var(--font-body--family);
    color: var(--color-foreground);
    background: transparent;
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
    border-radius: var(--style-border-radius-pills, 4px);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--animation-speed) var(--animation-easing),
                background-color var(--animation-speed) var(--animation-easing);
    white-space: nowrap;
  }

  .linked-product-swatches__size-pill:hover {
    border-color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .linked-product-swatches__size-pill--active {
    border-color: var(--color-foreground);
    font-weight: 700;
    pointer-events: none;
  }

  /* ---------------------------------------------------------------------------
     Loading feedback

     Every swatch and size pill is a link to a different product, so choosing one
     is a full page navigation. Until the next page paints the browser leaves this
     page on screen untouched, so without these states a tap looks like nothing
     happened. See assets/linked-product-swatches.js.
     --------------------------------------------------------------------------- */

  /* Immediate, pre-JS acknowledgement of the press. */
  .linked-product-swatches__swatch:active {
    transform: scale(0.94);
  }

  .linked-product-swatches__size-pill:active {
    transform: scale(0.97);
  }

  .linked-product-swatches__size-pill {
    transition: border-color var(--animation-speed) var(--animation-easing),
                background-color var(--animation-speed) var(--animation-easing),
                transform var(--animation-speed) var(--animation-easing);
  }

  /* The pending choice takes the selected ring; the real current one gives it up so
     that only one item ever reads as selected. */
  .linked-product-swatches__swatch.is-pending,
  .linked-product-swatches__size-pill.is-pending {
    border-color: var(--color-primary, var(--color-foreground));
    pointer-events: none;
  }

  .linked-product-swatches[data-pending] .linked-product-swatches__swatch--active,
  .linked-product-swatches[data-pending] .linked-product-swatches__size-pill--active {
    border-color: transparent;
  }

  /* Scrim, so the spinner stays legible over any swatch color or pill background. */
  .linked-product-swatches__swatch.is-pending::before,
  .linked-product-swatches__size-pill.is-pending::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(0 0 0 / 0.55);
  }

  .linked-product-swatches__swatch.is-pending::after,
  .linked-product-swatches__size-pill.is-pending::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 44%;
    max-width: 20px;
    aspect-ratio: 1;
    margin: auto;
    border: 2px solid rgb(255 255 255 / 0.35);
    border-block-start-color: #fff;
    border-radius: 50%;
    animation: linked-product-swatches-spin 0.6s linear infinite;
  }

  @keyframes linked-product-swatches-spin {
    to {
      transform: rotate(1turn);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .linked-product-swatches__swatch.is-pending::after,
    .linked-product-swatches__size-pill.is-pending::after {
      animation: none;
      border-color: rgb(255 255 255 / 0.85);
      border-block-start-color: transparent;
    }
  }
/* END_SNIPPET:linked-product-swatches */

/* START_SNIPPET:list-filter (INDEX:268) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .facets .variant-option--swatches .variant-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX: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;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

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

  .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-mobile, var(--image-position, cover));
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
      object-fit: var(--image-position, cover);
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, cover);
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:279) */
.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:280) */
.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']):not(.pagination__link--gap):not(
        .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):not(.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):not(.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:282) */
.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:283) */
.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:predictive-search (INDEX:284) */
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:predictive-search */

/* START_SNIPPET:price-filter (INDEX:285) */
/* 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-badges (INDEX:287) */
.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: var(--badge-offset-y, 0%);
    left: var(--badge-offset-x, 0%);
  }

  .product-badges--top-left {
    top: var(--badge-offset-y, 0%);
    left: var(--badge-offset-x, 0%);
  }

  .product-badges--top-right {
    top: var(--badge-offset-y, 0%);
    right: var(--badge-offset-x, 0%);
  }

  .product-badges__badge {
    border: 1px solid transparent;
    border-radius: var(--badge-border-radius);
    display: inline-block;
    font-size: 10px;
    font-family: 'Mada', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
    padding: 0.5rem 0.6rem 0.6rem 0.6rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-foreground);
    background: var(--color-background);
  }
/* END_SNIPPET:product-card-badges */

/* START_SNIPPET:product-card (INDEX:289) */
.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:290) */
.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);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }

  .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-media (INDEX:291) */
.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:quick-add-modal (INDEX:294) */
.quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    height: fit-content;
    overflow: hidden;
    min-height: 500px;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 750px) {
      position: fixed;
      display: block;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 750px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
  }

  .quick-add-modal__close:active {
    transform: scale(0.8);
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    max-width: var(--wide-content-width);
    overflow-y: auto;
    max-height: 100vh;

    @media screen and (max-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
    /* Two column, small first image */
    .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
    .product-media-container:nth-of-type(odd)
    .product-media > *,
    /* Two column, large first image */
    .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
      .product-media-container:is(:first-of-type, :nth-of-type(even))
      .product-media > *,
      /* Carousel */
    .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 750px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 750px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .variant-picker__form {
    display: block;
  }

  .quick-add-modal__content .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 750px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      overflow-y: auto;
      max-height: 100%;
      height: 100%;
    }
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }

  .quick-add-modal__content .product-details .variant-picker {
    --product-swatches-padding-block-end: 0px;

    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    /* Prevent overlap between title and close button */
    padding-inline: 0 calc(var(--minimum-touch-target) / 2);
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: min(var(--gap-2xl), var(--gap));
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }

    .quick-add-modal__content .media-gallery--grid .product-media-container:first-child {
      border-top-right-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media-container:last-child {
      border-bottom-right-radius: var(--style-border-radius-popover, 0);
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding: var(--padding-2xl);
    max-height: 100%;
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 750px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media slideshow-controls {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal */

/* START_SNIPPET:quick-add (INDEX:295) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-top: calc(var(--quick-add-offset) + var(--padding-block-start));
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));
    --quick-add-left: calc(var(--quick-add-offset) + var(--padding-inline-end));

    position: absolute;
    display: var(--quick-add-mobile-display, none);
    flex-direction: column;
    justify-content: flex-end;
    inset: max(var(--quick-add-top), calc((var(--border-radius) + var(--quick-add-top)) * (1 - cos(45deg))))
      max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))))
      max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))))
      max(var(--quick-add-left), calc((var(--border-radius) + var(--quick-add-left)) * (1 - cos(45deg))));
    width: auto;
    height: auto;
    z-index: var(--layer-raised);
    cursor: default;
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);

      display: var(--quick-add-display, flex);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: transparent;
  }

  .quick-add__button {
    display: grid;
    padding: var(--padding-xs);
    align-items: center;
    box-shadow: var(--shadow-popover);
    pointer-events: all;
    position: relative;
    overflow: hidden;
    border-radius: 100px;

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

    .quick-add[stay-visible] & {
      display: grid;
    }
  }

  .quick-add__button .add-to-cart-text {
    gap: 0;
    line-height: 1;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    animation: none;

    @media screen and (min-width: 750px) {
      /* offset button padding to show a round button in a collapsed state */
      margin-inline: calc(var(--padding-sm) * -1);
      padding-inline: var(--padding-xs);
    }
  }

  .quick-add__button .add-to-cart-text--added {
    position: relative;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    justify-self: end;
    line-height: 1;

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

  .quick-add__button .add-to-cart-text__content {
    width: 0;
    opacity: 0;
    transform: translateX(1em);
    transition: width var(--animation-speed) ease-in-out, opacity var(--animation-speed) ease-in-out,
      transform var(--animation-speed) ease-in-out;
    interpolate-size: allow-keywords;
    will-change: width, opacity, transform;
  }

  @container (min-width: 99px) {
    .quick-add[stay-visible] .add-to-cart-text,
    .quick-add__button:is(:focus, :hover) .add-to-cart-text {
      gap: var(--gap-2xs);

      @media screen and (min-width: 750px) {
        /* offset button padding to show a round button in a collapsed state */
        margin-inline: 0;
        padding-inline: 0;
      }
    }

    .quick-add[stay-visible] .add-to-cart-text__content,
    .quick-add__button:is(:focus, :hover) .add-to-cart-text__content {
      width: fit-content;
      opacity: 1;
      transform: translateX(0);
    }
  }

  .quick-add__button.atc-added .add-to-cart-text {
    opacity: 0;
  }

  .quick-add__button.atc-added .add-to-cart-text--added {
    opacity: 1;
    width: auto;

    @supports (width: calc-size(auto, size)) {
      width: calc-size(auto, size);
    }
  }

  .quick-add__button.atc-added .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button.atc-added .add-to-cart-text--added {
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  @keyframes atc-fade-in {
    from {
      opacity: 0;
      transform: translateX(1em);
      position: absolute;
    }

    to {
      opacity: 1;
      transform: translateX(0);
      position: inherit;
    }
  }

  @keyframes atc-fade-out {
    from {
      opacity: 1;
      transform: translateX(0);
      position: inherit;
    }

    to {
      opacity: 0;
      transform: translateX(-1em);
      position: absolute;
    }
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:resource-card (INDEX:308) */
.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;
    }
  }

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

  .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:309) */
.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:314) */
/* 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);
    }
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:315) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
    align-items: center;
  }

  .search-action .search-modal__button {
    display: flex;
    align-items: center;
    justify-content: center;

    /* Mobile: the button is padded out to a full 44px tap target, then the icon
       is tucked toward the cart to land the two glyphs 16px apart — the same
       inset the menu icon keeps from the opposite edge. All of the shift sits
       on this side so the cart icon holds its distance from the screen edge. */
    @media screen and (max-width: 749px) {
      min-width: var(--minimum-touch-target);
      min-height: var(--minimum-touch-target);
      padding-inline-start: var(--padding-lg);
    }
  }

  .search-action .svg-wrapper > svg {
    width: 20px;
    height: 20px;
  }

  @media screen and (min-width: 750px) {
    .search-action .svg-wrapper {
      width: 44px;
      height: 44px;
    }
  }

  .header__column--right .search-action .svg-wrapper {
    margin-top: 1px;
  }

  .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:317) */
/* ── Whole-section link ──────────────────────────────────────────────
     The overlay covers the section and takes the click. The content layers
     opt out of pointer events so the click reaches it, then genuinely
     interactive descendants opt back in — otherwise buttons, form fields
     and nested links inside the section would all become dead. */
  .section__link {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  /* The content must paint ABOVE the overlay, or its buttons and fields sit
     underneath it and `pointer-events: auto` cannot reach them — being
     clickable is not enough if something opaque to hit-testing is on top.
     .custom-section-content already carries z-index: var(--layer-flat), but
     stating it here keeps the behaviour from depending on that token. */
  .section__link ~ .custom-section-content {
    position: relative;
    z-index: 1;
  }

  .section__link ~ :is(.custom-section-content, .custom-section-background) {
    pointer-events: none;
  }

  .section__link
    ~ :is(.custom-section-content, .custom-section-background)
    :is(a, button, input, textarea, select, label, summary, details, video, audio, iframe, [tabindex]) {
    pointer-events: auto;
  }

  /* In the theme editor the overlay would swallow every block click, making
     the section impossible to edit. Stand it down entirely. */
  .section__link--design-mode,
  .section__link--design-mode ~ :is(.custom-section-content, .custom-section-background) {
    pointer-events: auto;
  }

  .section__link--design-mode {
    pointer-events: none;
  }

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

  /* The background and the content share one grid cell — the background sits
     behind, separated by z-index, not by position in the flow. Both need an
     explicit row to do that: with `grid-row: auto` they auto-place into rows 1
     and 2 and the background stacks *above* the content.

     That stayed invisible for a long time because the background has no
     in-flow content of its own — every child of it is absolutely positioned —
     so its row collapses to 0 and the two appear to overlap. It only surfaces
     once the section is given a height greater than its content, as
     `aspect-ratio` does for `section--fit-media`: the surplus is then shared
     out by `align-content: normal`, and the empty background row takes half of
     it and pushes the content down the section.

     The image itself was never affected — it is positioned against `.section`,
     which is `position: relative`, not against this wrapper. */
  .custom-section-background {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .custom-section-content {
    grid-row: 1;
    z-index: var(--layer-flat);
  }

  /* Height "auto" + background image: size the section to the image's aspect
     ratio so it renders full/uncropped at full viewport width. Scoped per
     breakpoint so a Custom mobile height (or vice versa) is left intact.

     The aspect is applied as a *minimum* height rather than `aspect-ratio`.
     `aspect-ratio` fixes the block size outright, so a section whose content
     is taller than width/aspect has that content spill out of the section and
     over whatever follows it (min-height: 0 removed the only floor). Using
     min-height keeps the intended height whenever the content fits — the
     common banner case is unchanged — while letting a content-heavy section
     grow instead of overlapping its neighbour.

     `.section` is always the full viewport width (page-width sections inset
     their children via grid columns, not by narrowing the section), so 100vw
     is the correct basis for the ratio at both breakpoints. */
  @media screen and (min-width: 750px) {
    .section--fit-media {
      min-height: calc(100vw / var(--section-aspect));
    }
  }

  @media screen and (max-width: 749px) {
    .section--fit-media-mobile {
      min-height: calc(100vw / var(--section-aspect-mobile));
    }
  }

  /* Mobile height override - only applies when mobile height is explicitly set */
  @media screen and (max-width: 749px) {
    .section--has-mobile-height {
      min-height: var(--section-min-height-mobile);
    }

    .section--has-mobile-height .section-content-wrapper.section-content-wrapper {
      min-height: calc(var(--section-min-height-mobile) - var(--section-height-offset, 0px));
    }
  }

  /* Mobile slider - horizontal scroll with snap */
  @media screen and (max-width: 749px) {
    .custom-section-content:has(.mobile-slider) {
      overflow: visible;
    }

    .mobile-slider.mobile-slider {
      flex-flow: row nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 4px;
    }

    .mobile-slider.mobile-slider::-webkit-scrollbar {
      display: none;
    }

    .mobile-slider.mobile-slider > * {
      flex: 0 0 var(--mobile-slide-width, 85%) !important;
      min-width: var(--mobile-slide-width, 85%) !important;
      max-width: var(--mobile-slide-width, 85%) !important;
      width: var(--mobile-slide-width, 85%) !important;
      scroll-snap-align: center;
    }
  }
/* END_SNIPPET:section */

/* START_SNIPPET:sorting (INDEX:329) */
.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;
  }

  @media screen and (min-width: 750px) {
    .sorting-filter {
      z-index: var(--facets-upper-z-index);
      position: relative;
    }
  }

  .sorting-filter__options {
    display: flex;
    flex-direction: column;
    gap: var(--margin-3xs);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-background);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: var(--style-border-radius-popover, 8px);

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    min-width: 180px;
    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;
    font-weight: 400;
    letter-spacing: 0.4px;
    line-height: 21px;
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  .sorting-filter__option:hover .sorting-filter__label {
    color: var(--color-foreground);
  }

  .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-mobile-wrapper .sorting-filter__options {
    border-radius: var(--style-border-radius-popover);
    position: absolute;
    top: 0;
    right: 0;
    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;
    padding: var(--padding-sm);
    gap: var(--gap-sm);
  }

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

  .sorting-filter__options {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: content-visibility var(--animation-speed-slow) allow-discrete,
      padding-block var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    block-size: auto;

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

    &:focus-within {
      overflow-y: visible;
    }
  }
/* 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;
  }

  @media screen and (max-width: 749px) {
    [style*='--horizontal-alignment-mobile: flex-start'] .text-block {
      --text-align-default: left;
    }

    [style*='--horizontal-alignment-mobile: center'] .text-block {
      --text-align-default: center;
    }

    [style*='--horizontal-alignment-mobile: flex-end'] .text-block {
      --text-align-default: right;
    }

    [style*='--horizontal-alignment-mobile: flex-start'] > .text-block {
      --text-align-default: left;
    }

    [style*='--horizontal-alignment-mobile: center'] > .text-block {
      --text-align-default: center;
    }

    [style*='--horizontal-alignment-mobile: 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);
  }

  @media screen and (max-width: 749px) {
    /* base.css gives text blocks inside a mobile row
       `flex: 1 1 var(--max-width--display-tight)`, and flex-grow beats
       `width` on a flex item — so Fit content filled the row. flex-basis
       stays `auto` to defer to the width set above. Shrinking is left
       enabled so long words wrap rather than overflow the row. */
    .layout-panel-flex--row:not(.mobile-column) > .text-block.text-block--width-fixed {
      flex-grow: 0;
      flex-basis: auto;
    }
  }

  .text-block > * {
    width: var(--width);
    max-width: var(--max-width, 100%);
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  /* Mobile alignment override. The desktop value is emitted as an inline custom
     property, so redefining --text-align in a stylesheet would lose to it —
     inline always wins. Consume a separate property at the point of use instead,
     falling through to the desktop value when the mobile one is unset. */
  @media screen and (max-width: 749px) {
    .text-block > * {
      text-align: var(--text-align-mobile, var(--text-align, var(--text-align-default)));
    }

    /* text-block--align-* sets the block's own margins from the DESKTOP value, so
       a differing mobile alignment would otherwise be fought by a stale auto
       margin once max-width narrows the block. */
    .text-block[style*='--text-align-mobile: left'],
    .text-block[style*='--text-align-mobile: left'] > * {
      margin-inline: 0 auto;
    }

    .text-block[style*='--text-align-mobile: center'],
    .text-block[style*='--text-align-mobile: center'] > * {
      margin-inline: auto;
    }

    .text-block[style*='--text-align-mobile: right'],
    .text-block[style*='--text-align-mobile: right'] > * {
      margin-inline: auto 0;
    }
  }

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

  /* Underline rule, drawn on the text block itself instead of as a sibling
     divider so that it is sized by the text rather than by a hand-set width —
     one rule then reads correctly at every viewport instead of needing a
     desktop/mobile pair. It sits behind the glyphs, straddling the baseline,
     so only its ends and the gaps between letters show. */
  .text-block--underline {
    /* z-index: -1 below would otherwise paint the rule behind the *section's*
       background — the color schemes set one — and it would disappear. A
       stacking context here keeps it behind the text and nothing else.
       `isolation` does that without disturbing layout or paint order. */
    isolation: isolate;

    --underline-thickness-current: var(--underline-thickness, 4px);
  }

  /* The rule hangs off the text's own box rather than off .text-block, so that
     it is positioned against the text and nothing else. The block carries
     padding — and on mobile can inherit the section's, which is a separate bug
     — so anchoring to it put the rule below the text instead of behind it. The
     paragraph has no padding of its own and `.text-block > *` has already sized
     it to the text, making it the honest reference for both edges. */
  .text-block--underline > *:last-child {
    position: relative;
  }

  .text-block--underline > *:last-child::after {
    content: '';
    position: absolute;
    z-index: -1;
    height: var(--underline-thickness-current);
    background-color: var(--underline-color, currentColor);
    border-radius: 100px;

    /* Absolute rather than a flex item so the overhang cannot feed back into
       the block's own intrinsic width and stop it hugging the text. */
    inset-inline: calc(var(--underline-overhang, 0.2em) * -1);

    /* Measured off the Figma renders: the rule's top edge sits a third of its
       own height above the baseline (desktop 3.5px on a 10px rule, mobile 1.9px
       on a 6px rule), which puts its bottom 2/3 of the way below.

       `bottom` is measured from the bottom of the line box, and the baseline
       sits (line-height / 2 - 0.34)em above that: for a line box of L em the
       baseline lands at L/2 + (ascender - descender)/2 from the top, and the
       Figma frames give this face an ascender-minus-descender of ~0.68em. */
    bottom: calc(
      (var(--line-height, 1.2) / 2 - 0.34) * 1em - var(--underline-thickness-current) * 2 / 3 -
        var(--underline-offset, 0px)
    );
  }

  @media screen and (max-width: 749px) {
    .text-block--underline {
      --underline-thickness-current: var(--underline-thickness-mobile, var(--underline-thickness, 4px));
    }
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:351) */
.variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    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--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 calc(3ch + 1.3em);
    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: calc(3ch + 1.3em);
    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):not(: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: 0.2rem solid rgb(var(--color-foreground-rgb) / 40%);
    outline-offset: 0.2rem;
  }

  .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: 0.1rem solid var(--color-foreground);

    outline: var(--focus-outline);
    outline-offset: 0.2rem;
  }

  /* 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:354) */
.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:warehouse-sale-messaging (INDEX:356) */
.warehouse-sale-messaging {
    display: block;
    font-size: 11.2px;
    font-weight: 600;
    font-family: 'Mada', sans-serif;
    letter-spacing: 0.8px;
    color: #E54E37;
  }

  .product-details .warehouse-sale-messaging {
    font-size: 14px;
  }

  @media screen and (max-width: 749px) {
    .product-details .warehouse-sale-messaging {
      font-size: 15px;
    }
  }
/* END_SNIPPET:warehouse-sale-messaging */