/** Shopify CDN: Minification failed

Line 2833:2 Unexpected "{"
Line 2833:3 Expected identifier but found "%"
Line 2833:68 Expected identifier but found "%"
Line 2853:2 Unexpected "{"
Line 2853:3 Expected identifier but found "%"
Line 2853:76 Expected identifier but found "%"
Line 2858:2 Unexpected "{"
Line 2858:3 Expected identifier but found "%"
Line 2860:31 Unexpected "("
Line 2860:80 Unterminated string token
... and 1 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:blog-article-faq (INDEX:1) */
.blog-article-faq__inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl-plus);
    max-width: var(--normal-content-width);
    margin-inline: auto;
    width: 100%;
    padding-top: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .blog-article-faq__inner {
      padding-top: 40px;
    }
  }

  .blog-article-faq__heading {
    font-size: clamp(1.5rem, calc(1.5rem + 0.5 * ((100vw - 23.4375rem) / 66.5625)), 2rem);
    font-weight: 600;
    color: var(--color-foreground-heading);
    margin: 0;
  }

  .blog-article-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl-plus);
  }

  .blog-article-faq__item {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .blog-article-faq__question {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--md);
    line-height: 22px;
    color: var(--color-foreground);
    margin: 0;
  }

  .blog-article-faq__answer-preview,
  .blog-article-faq__answer-full {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-body-small--size);
    line-height: 20px;
    color: var(--color-black-light, #464646);
    margin: 0;
  }

  .blog-article-faq__answer-full p,
  .blog-article-faq__answer-full ul,
  .blog-article-faq__answer-full ol,
  .blog-article-faq__answer-full h1,
  .blog-article-faq__answer-full h2,
  .blog-article-faq__answer-full h3,
  .blog-article-faq__answer-full h4,
  .blog-article-faq__answer-full h5,
  .blog-article-faq__answer-full h6 {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-weight: inherit;
  }

  .blog-article-faq__answer-full a {
    text-decoration: underline;
    color:var(--color-primary);
    text-decoration-color: var(--color-primary) !important;
  }

  .blog-article-faq__answer-full a:hover {
    color:var(--color-primary) !important;
  }

  .blog-article-faq__toggle {
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-primary-button-background);
    border-radius: 0;
    padding: 0;
    padding-bottom: 1px;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--2xs);
    line-height: 17px;
    color: var(--color-primary-button-background);
    align-self: flex-start;
    display: inline-flex;
  }

  @media screen and (min-width: 750px) {
    .blog-article-faq__toggle {
      font-size: var(--font-body-small--size);
      line-height: 20px;
    }
  }

  .blog-article-faq__toggle:focus-visible {
    outline: 2px solid var(--color-primary-button-background);
    outline-offset: 2px;
  }

  .blog-article-faq__toggle-more {
    font-size: var(--font-label--size);
  }

  @media screen and (min-width: 750px) {
    .blog-article-faq__toggle-more {
      font-size: var(--font-body-small--size);
    }
  }
/* END_SECTION:blog-article-faq */

/* START_SECTION:blog-article-list (INDEX:2) */
.blog-article-list-section {
    overflow: hidden;
  }

  .blog-article-list-section .section {
    position: relative;
    overflow: hidden;
  }

  .blog-article-list__header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }

  .blog-article-list__header-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .blog-article-list__heading {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: 48px;
    line-height: 58px;
    letter-spacing: -0.96px;
    margin: 0;
  }

  .blog-article-list__subheading {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: var(--color-foreground);
    margin: 0;
  }

  .blog-article-list__cta-link {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .blog-article-list__carousel-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .blog-article-list__carousel-wrapper slideshow-container {
    background: transparent;
  }

  .blog-article-card__read-more-link {
    border-block-end: 1px solid currentcolor;
  }

  blog-carousel-nav.blog-article-list__carousel-wrapper slideshow-arrows {
    display: none;
  }

  /* Carousel peek (matches featured-collections-tabs): none on desktop, edge peek on mobile */
  .blog-article-list__carousel-wrapper .resource-list > div {
    --peek-next-slide-size: 0px;
  }

  @media screen and (max-width: 749px) {
    .blog-article-list__carousel-wrapper .resource-list > div {
      --peek-next-slide-size: 16px;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .blog-article-list__carousel-wrapper .resource-list__carousel slideshow-slides {
      gap: var(--resource-list-column-gap);
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .blog-article-list__carousel-wrapper .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (
            100% -
              (var(--resource-list-column-gap-desktop, var(--resource-list-column-gap)) * (var(--column-count) - 1)) -
              var(--peek-next-slide-size)
          ) / var(--column-count)
      );
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }

    .blog-article-list__carousel-wrapper .resource-list__carousel slideshow-slides {
      gap: var(--resource-list-column-gap-desktop, var(--resource-list-column-gap));
    }
  }

  blog-carousel-nav.blog-article-list__carousel-wrapper .swipable-group__arrows,
  swipable-group-component.blog-article-list__carousel-wrapper .swipable-group__arrows {
    display: flex;
    padding-inline: var(--util-page-margin-offset);
    padding-block: var(--swipable-arrows-gap, 16px) 0;
  }

  blog-carousel-nav.blog-article-list__carousel-wrapper .swipable-group__arrows--top-right,
  blog-carousel-nav.blog-article-list__carousel-wrapper .swipable-group__arrows--top-left {
    padding-block: 0 var(--swipable-arrows-gap, 16px);
  }

  blog-carousel-nav.blog-article-list__carousel-wrapper .swipable-group__arrows--bottom-right,
  blog-carousel-nav.blog-article-list__carousel-wrapper .swipable-group__arrows--top-right {
    align-self: flex-end;
  }

  blog-carousel-nav.blog-article-list__carousel-wrapper .swipable-group__arrows--bottom-left,
  blog-carousel-nav.blog-article-list__carousel-wrapper .swipable-group__arrows--top-left {
    align-self: flex-start;
  }

  @media screen and (max-width: 749px) {
    .blog-article-list--icons-desktop_only slideshow-arrows {
      display: none;
    }

    .blog-article-list__header {
      flex-direction: column;
      align-items: flex-start;
    }

    .blog-article-list__header-text {
      gap: 8px;
    }

    .blog-article-list__heading {
      font-size: 32px;
      line-height: 38px;
      letter-spacing: -0.64px;
    }

    .blog-article-list__subheading {
      font-size: 14px;
      line-height: 20px;
    }

    .blog-article-list__cta-link {
      font-size: 14px;
      line-height: 20px;
    }
  }

  @media screen and (min-width: 750px) {
    .blog-article-list--icons-mobile_only slideshow-arrows {
      display: none;
    }
  }
/* END_SECTION:blog-article-list */

/* START_SECTION:blog-article-products (INDEX:3) */
.blog-article-products__inner {
    display: flex;
    flex-direction: column;
    max-width: var(--normal-content-width);
    margin-inline: auto;
    width: 100%;
  }

  .blog-article-products__bottom-description {
    margin-top: 40px;
  }

  .blog-article-products__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
  }

  .blog-article-products__card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
  }

  @media screen and (min-width: 750px) {
    .blog-article-products__card {
      flex-direction: row;
      gap: var(--gap-2xl);
    }
  }

  .blog-article-products__image-wrapper {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    overflow: hidden;
  }

  @media screen and (min-width: 750px) {
    .blog-article-products__image-wrapper {
      width: 300px;
    }

    .blog-article-products__list {
      gap: 56px;
    }
  }

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

  .blog-article-products__image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #D9D9D9;
  }

  .blog-article-products__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }

  .blog-article-products__title-row {
    display: flex;
    flex-direction: row;
    gap: var(--gap-xs);
    align-items: top;
  }

  .blog-article-products__number {
    font-size: var(--font-size--md);
    font-weight: 600;
    line-height: 1.375;
    color: var(--color-primary-button-background);
    flex-shrink: 0;
  }

  .blog-article-products__title-link {
    font-size: var(--font-size--md);
    font-weight: 600;
    line-height: 1.375;
    color: var(--color-primary-button-background);
    text-decoration: underline;
    text-underline-offset: 7px;
  }

  .blog-article-products__title-link:hover {
    text-decoration: none;
  }

  .blog-article-products__text {
    font-size: var(--font-size--md);
    font-weight: 400;
    line-height: 1.375;
    color: var(--color-foreground);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .blog-article-products__price {
    font-size: var(--font-size--sm);
    font-weight: 600;
    line-height: 1.4286;
    color: var(--color-black-light);
    margin: 0;
  }
/* END_SECTION:blog-article-products */

/* START_SECTION:blog-article-tags (INDEX:4) */
.blog-article-tags {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
  }

  .blog-article-tags__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: var(--normal-content-width);
    margin-inline: auto;
    width: 100%;
  }

  .blog-article-tags__title {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 500;
    color: var(--color-black-light);
  }

  .blog-article-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .blog-article-tags__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background-color: var(--color-white);
    color: var(--color-foreground);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--style-border-radius-pills);
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: var(--font-body-small--size);
    line-height: 1.4;
    letter-spacing: 0.12px;
    text-transform: capitalize;
    white-space: nowrap;
  }

  .blog-article-tags {
    padding-block-end: 48px;
  }

  @media screen and (min-width: 750px) {
    .blog-article-tags {
      padding-block-end: 80px;
    }
  }

  @media screen and (min-width: 1024px) {
    .blog-article-tags__badge {
      font-size: var(--font-size--md);
    }
  }
/* END_SECTION:blog-article-tags */

/* START_SECTION:blog-popular-sidebar (INDEX:5) */
.blog-popular-sidebar {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    border-top: 1px solid var(--color-border);
  }

  .blog-popular-sidebar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
  }

  @media screen and (max-width: 749px) {
    .blog-popular-sidebar__inner {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
  }

  /* ── Section heading ── */
  .blog-popular-sidebar__heading {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-foreground-heading);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    margin: 0 0 1.25rem;
  }

  @media screen and (min-width: 750px) {
    .blog-popular-sidebar__heading {
      font-size: 24px;
    }
  }

  /* ── Popular Posts ── */
  .blog-popular-posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .blog-popular-post {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }

  .blog-popular-post__img-link {
    flex-shrink: 0;
  }

  .blog-popular-post__img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
  }

  .blog-popular-post__img-placeholder {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .blog-popular-post__info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: 0.2rem;
  }

  .blog-popular-post__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-foreground-heading);
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 200px;
  }

  .blog-popular-post__title:hover {
    text-decoration: underline;
  }

  @media screen and (min-width: 750px) {
    .blog-popular-post__title {
      font-size: 15px;
    }
  }

  .blog-popular-post__date {
    font-size: 12px;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    font-weight: 400;
  }

  /* ── Popular Categories ── */
  .blog-popular-categories {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .blog-popular-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
  }

  .blog-popular-category:first-child {
    padding-top: 0;
  }

  .blog-popular-category__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .blog-popular-category__name:hover {
    color: var(--color-foreground-heading);
    text-decoration: underline;
  }

  @media screen and (min-width: 750px) {
    .blog-popular-category__name {
      font-size: 15px;
    }
  }

  .blog-popular-category__count {
    font-size: 13px;
    font-weight: 600;
    color: rgb(var(--color-foreground-rgb) / 0.45);
    min-width: 2rem;
    text-align: right;
  }
/* END_SECTION:blog-popular-sidebar */

/* START_SECTION:bv-reviews (INDEX:6) */
.bv-reviews__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
  }

  /* When Bazaarvoice scrolls this section into view (e.g. clicking the review
     count in the rating summary), offset for the always-sticky header so the
     top of the reviews section stays visible below it. */
  #bv-reviews-container,
  .bv-reviews__inner {
    scroll-margin-top: calc(var(--header-height, 100px) + 24px);
  }

  .bv-reviews__heading {
    font-size: var(--font-size--h1);
    font-weight: 600;
    line-height: var(--line-height--display-tight);
    letter-spacing: -0.02em;
    color: var(--color-foreground-heading);
    margin: 0;
  }
/* END_SECTION:bv-reviews */

/* START_SECTION:catering-hero (INDEX:8) */
/* ---- Catering Hero ---- */
  .catering-hero {
    position: relative;
    padding-top: var(--section-padding-top, 0px);
    padding-bottom: var(--section-padding-bottom, 0px);
    margin-bottom: 1.5rem;
  }

  /* Desktop: hidden on mobile */
  .catering-hero__desktop {
    display: none;
    position: relative;
    min-height: 667px;
    overflow: hidden;
  }

  @media screen and (min-width: 1024px) {
    .catering-hero__desktop {
      display: block;
    }
    .catering-hero__mobile {
      display: none;
    }
  }

  /* Background image + gradient */
  .catering-hero__bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .catering-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .catering-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
  }

  /* Desktop content */
  .catering-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 667px;
    padding: 0 64px 0 64px;
    gap: 32px;
    padding-bottom: 48px;
  }

  .catering-hero__text-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 410px;
  }

  /* Text color defers to the block's --color variable, falls back to white */
  .catering-hero__text-block .text-block,
  .catering-hero__text-block .text-block > * {
    color: var(--color, #FFFFFF);
  }

  /* Badges */
  .catering-hero__badges {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
  }

  .catering-hero__badge {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
  }

  .catering-hero__badge-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  .catering-hero__badge-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
  }

  /* ---- Mobile layout ---- */
  .catering-hero__mobile {
    display: flex;
    flex-direction: column;
    background-color: #f5f2ed;
  }

  @media screen and (min-width: 1024px) {
    .catering-hero__mobile {
      display: none;
    }
  }

  .catering-hero__mobile-image-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 568px;
  }

  .catering-hero__mobile-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    min-height: 568px;
  }

  .catering-hero__mobile-gradient {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
  }

  .catering-hero__mobile-content {
    position: absolute;
    top: 104px;
    bottom: 24px;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0 35px;
  }

  .catering-hero__mobile-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .catering-hero__mobile-heading .text-block,
  .catering-hero__mobile-heading .text-block > * {
    color: var(--color, #FFFFFF);
    text-align: center;
    margin: 0;
  }

  .catering-hero__mobile-subtitle .text-block,
  .catering-hero__mobile-subtitle .text-block > * {
    color: var(--color, #FFFFFF);
    text-align: center;
    margin: 0;
  }

  .catering-hero__mobile-badges {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top:16px;
  }

  .catering-hero__mobile-badges .catering-hero__badge-label {
    font-size: 14px;
    line-height: 20px;
  }
/* END_SECTION:catering-hero */

/* START_SECTION:collection-banner (INDEX:10) */
.collection-banner {
    position: relative;
    overflow: hidden;
  }

  .collection-banner__picture {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    z-index: 0;
  }

  .collection-banner__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .collection-banner__overlay {
    position: absolute;
    inset: 0;
    background-color: #000;
    z-index: 1;
  }

  /* compound selector (2 classes) beats .page-width (1 class) in the cascade */
  .collection-banner .collection-banner__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: var(--cb-mobile-height, 200px);
    padding-block-start: var(--cb-content-pt, 24px);
    padding-block-end: var(--cb-content-pb, 24px);
    padding-inline: var(--cb-content-px, var(--page-margin, 20px));
  }

  @media screen and (min-width: 750px) {
    .collection-banner .collection-banner__inner {
      min-height: var(--cb-desktop-height, 300px);
      padding-block-start: var(--cb-content-pt-desk, 40px);
      padding-block-end: var(--cb-content-pb-desk, 40px);
      padding-inline: var(--cb-content-px-desk, var(--page-margin, 40px));
    }
  }

  .collection-banner__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .collection-banner__content--align-left {
    align-items: flex-start;
    text-align: start;
  }

  .collection-banner__content--align-center {
    align-items: center;
    text-align: center;
  }

  .collection-banner__heading {
    margin: 0;
  }

  .collection-banner__description {
    margin: 0;
  }

  .collection-banner__description > * {
    margin: 0;
  }
/* END_SECTION:collection-banner */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:collection-tabs (INDEX:15) */
.collection-tabs-section {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .collection-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
  }

  @media (max-width: 749px) {
    .collection-tabs-section {
      --padding-inline-start: 0px;
      --padding-inline-end: 0px;
      padding-inline: 0;
    }

    .collection-tabs__nav {
      justify-content: flex-start;
      column-gap: 1rem;
      row-gap: 0.25rem;
      padding: 0 1rem;
    }
  }

  collection-tabs-component {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .collection-tabs__tab {
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .collection-tabs__tab[aria-selected='true'] {
    text-decoration: underline;
  }

  .collection-tabs__tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
  }

  collection-tabs-component:not([data-initialized]) .collection-tab-panel ~ .collection-tab-panel {
    display: none;
  }

  .collection-tab-panel[inert] {
    display: none;
  }

  @media (min-width: 750px) {
    .section--page-width.collection-tabs-section collection-tabs-component {
      grid-column: 1 / -1;
    }

    .section--page-width.collection-tabs-section .collection-tabs__nav {
      max-width: var(--full-page-grid-central-column-width);
      margin-inline: auto;
      width: 100%;
    }
  }
/* END_SECTION:collection-tabs */

/* START_SECTION:collection-viewer (INDEX:16) */
/* Collection viewer toolbar (product count + sort + mobile filter button + active chips).
     Scoped CSS replacing the previous tailwind utilities. */
  .cv-toolbar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 45px;
  }

  @media screen and (min-width: 1024px) {
    .cv-toolbar {
      padding-bottom: 20px;
    }
  }

  /* On mobile, keep the toolbar sticky so the "Filter and sort" control stays
     reachable while scrolling the product grid. Sits below the sticky header. */
  @media screen and (max-width: 1023px) {
    .cv-toolbar {
      position: sticky;
      top: var(--header-height, 0px);
      /* Just under the floating header (--layer-sticky: 8) so its drop shadow
         reads over the toolbar, but still above the product grid. */
      z-index: 7;
      padding-bottom: 16px;
      background-color: var(--color-background, #ffffff);
    }

    /* The header floats with padding, so its shadowed bottom edge sits above
       --header-height, leaving a see-through band between it and the sticky
       toolbar. Bridge it by extending the toolbar's background upward; the
       excess tucks behind the opaque header (lower z-index) and the header's
       drop shadow paints over it.

       Only while pinned (.cv-toolbar--stuck, set by the intersection observer) —
       at the top of the page this band would otherwise cover the content
       (e.g. filter pills) sitting directly above the toolbar. */
    .cv-toolbar--stuck::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      bottom: 100%;
      height: 40px;
      background-color: var(--color-background, #ffffff);
    }
  }

  /* Zero-net-height marker for the sticky observer (1px box for reliable
     IntersectionObserver tracking, pulled back so it takes no layout space). */
  .cv-toolbar-sentinel {
    height: 1px;
    margin-bottom: -1px;
  }

  /* Sort-by select: drop the native arrow (it overlaps the selected text on
     longer options) and draw our own chevron with a comfortable gap. The field
     sizes to the selected option's width (field-sizing, where supported) but
     never shrinks below its current widest-option width via min-width. */
  .cv-toolbar select[data-sort-select] {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    min-width: 11.5rem;
    max-width: 100%;
    field-sizing: content;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23464646' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 12px 8px;
  }

  /* Sort wrapper: hidden at mobile breakpoints, flex row on desktop.
     Replaces tw-hidden/lg:tw-flex Tailwind utilities for reliable keyboard reachability. */
  .cv-sort-wrapper {
    display: none;
    align-items: center;
    gap: 8px;
  }

  @media screen and (min-width: 1024px) {
    .cv-sort-wrapper {
      display: flex;
    }
  }

  /* Products the selected store does not carry (store-availability filter).
     Uses !important so it overrides the pagination's inline display toggle. */
  .product-card.cv-unavailable {
    display: none !important;
  }

  /* Empty state — hidden until _updateEmptyState() finds zero eligible cards.
     A class rather than the [hidden] attribute so the two loading states below can
     out-rank it without !important. */
  .cv-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 16px;
    text-align: center;
  }

  .cv-empty.is-visible {
    display: flex;
  }

  /* Never announce "no products" while the grid is still being filtered or
     re-fetched — the answer isn't known yet. Mirrors the [data-grid] / count
     shimmer rules below, which hide the same in-between state. */
  collection-viewer.cv-loading .cv-empty,
  [data-collection-section].cv-nav-loading .cv-empty {
    display: none;
  }

  @media (min-width: 768px) {
    .cv-empty {
      padding: 100px 16px;
    }
  }

  .cv-empty__title {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
    color: var(--color-black);
  }

  @media (min-width: 768px) {
    .cv-empty__title {
      font-size: 32px;
    }
  }

  .cv-empty__text {
    margin: 0;
    max-width: 480px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-black-light);
  }

  .cv-empty__action {
    margin-top: 8px;
  }

  /* Store-availability loading state — dim the grid and overlay a spinner while
     the arrangements API resolves after a store is selected. */
  collection-viewer {
    display: block;
    position: relative;
  }

  /* While the arrangements API resolves, fully hide the (unfiltered) grid and
     footer so no product the store shouldn't show ever flashes. visibility keeps
     the layout height, avoiding a jump when the filtered grid is revealed. */
  collection-viewer.cv-loading [data-grid],
  collection-viewer.cv-loading [data-footer] {
    visibility: hidden;
    pointer-events: none;
  }

  /* The "N products" count lives in the toolbar, OUTSIDE <collection-viewer>, so
     it isn't covered by the rule above. While the arrangements API resolves, swap
     it for a shimmer skeleton bar (via the component's loading state) so the
     unfiltered server count never flashes before filtering. The .cv-nav-loading
     class on the wrapper applies the same shimmer during async filter/sort nav,
     while the grid is being re-fetched and replaced. */
  [data-collection-section]:has(collection-viewer.cv-loading) [data-product-count],
  [data-collection-section].cv-nav-loading [data-product-count] {
    width: 92px;
    max-width: 92px;
    color: transparent;
    border-radius: 4px;
    background-image: linear-gradient(
      -85deg,
      var(--color-gray-light, #ededed) 10%,
      rgb(255 255 255 / 0.75) 50%,
      var(--color-gray-light, #ededed) 90%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    animation: cv-count-shimmer 1.25s infinite linear;
    user-select: none;
    pointer-events: none;
  }

  /* The total is not a number yet (see _totalIsUnknown): a store filter or extra
     price ranges are still collecting their complete set, so the figure would only
     climb under the shopper. Shimmer it in BOTH places it shows — the toolbar count
     above and the footer "Viewing 1-11 of N" — until it is final. Same skeleton
     treatment as the two rules above, so the loading states read as one. */
  [data-collection-section].cv-total-pending [data-product-count],
  [data-collection-section].cv-total-pending [data-counter] {
    width: 92px;
    max-width: 92px;
    color: transparent;
    border-radius: 4px;
    background-image: linear-gradient(
      -85deg,
      var(--color-gray-light, #ededed) 10%,
      rgb(255 255 255 / 0.75) 50%,
      var(--color-gray-light, #ededed) 90%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    animation: cv-count-shimmer 1.25s infinite linear;
    user-select: none;
    pointer-events: none;
  }

  [data-collection-section].cv-total-pending [data-counter] {
    width: 160px;
    max-width: 160px;
    margin-inline: auto;
  }

  @keyframes cv-count-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-collection-section]:has(collection-viewer.cv-loading) [data-product-count],
    [data-collection-section].cv-nav-loading [data-product-count],
    [data-collection-section].cv-total-pending [data-product-count],
    [data-collection-section].cv-total-pending [data-counter] {
      animation: none;
    }
  }

  /* Spinner is rendered in the section markup and shown only in the loading
     state — so the pre-paint guard can reveal it before the component upgrades. */
  .cv-grid-loader {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 6;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
    background-color: rgb(var(--color-background-rgb, 255 255 255) / 0.6);
    pointer-events: none;
  }

  collection-viewer.cv-loading .cv-grid-loader {
    display: flex;
  }

  .cv-grid-loader__spinner {
    position: sticky;
    top: calc(var(--header-height, 0px) + 40px);
    width: 44px;
    height: 44px;
    border: 3px solid var(--color-gray-light, #ededed);
    border-top-color: var(--color-primary-button-background, #e10600);
    border-radius: 50%;
    animation: cv-grid-spin 0.8s linear infinite;
  }

  @keyframes cv-grid-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cv-grid-loader__spinner {
      animation-duration: 2s;
    }
  }
/* END_SECTION:collection-viewer */

/* START_SECTION:contact-form-custom (INDEX:17) */
.contact-form-custom {
    padding-block-start: 24px;
    padding-block-end: 48px;
    padding-inline: 16px;
    background-color: rgb(var(--color-background-rgb));
  }

  @media screen and (min-width: 750px) {
    .contact-form-custom {
      padding-block-start: var(--section-padding-top, 64px);
      padding-block-end: var(--section-padding-bottom, 64px);
      padding-inline: 40px;
    }
  }

  .contact-form-custom__container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 896px;
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .contact-form-custom__container {
      gap: 32px;
    }
  }

  .contact-form-custom__intro {
    font-family: var(--font-body--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-foreground);
    margin: 0;
  }

  .contact-form-custom__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .contact-form-custom__field {
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .contact-form-custom__field {
      max-width: 448px;
    }
  }

  .contact-form-custom__input {
    width: 100%;
    height: 48px;
    font-family: var(--font-body--family);
    font-size: 16px;
    line-height: 22px;
    color: var(--color-foreground);
    background-color: #FFFFFF;
    border: 1px solid #C6C6C6;
    border-radius: 8px;
    padding: 10px 16px;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
  }

  @media screen and (min-width: 750px) {
    .contact-form-custom__input {
      height: 64px;
      font-size: 16px;
      line-height: 22px;
    }
  }

  .contact-form-custom__textarea {
    height: auto;
    min-height: 120px;
    resize: vertical;
  }

  /* Counter + limit alert share one row: alert on the left, counter pinned right. */
  .contact-form-custom__char-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
  }

  .contact-form-custom__char-count {
    margin: 0;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-body--family);
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-foreground-muted);
  }

  /* At the limit: turn the counter red and reveal the inline alert. */
  .contact-form-custom__char-count--error {
    color: var(--color-error, #c11813);
    font-weight: 500;
  }

  .contact-form-custom__char-alert {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-error, #c11813);
  }

  .contact-form-custom__char-alert[hidden] {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .contact-form-custom__char-count,
    .contact-form-custom__char-alert {
      font-size: 14px;
    }
  }

  .contact-form-custom__input::placeholder {
    color: var(--color-foreground);
    opacity: 1;
  }

  .contact-form-custom__input:focus {
    outline: none;
    border-color: var(--color-foreground);
  }

  .contact-form-custom__select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-inline-end: 48px;
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px 20px;
    background-color: #FFFFFF;
  }

  .contact-form-custom__file-label {
    display: block;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--color-foreground);
    margin-bottom: 8px;
  }

  @media screen and (min-width: 750px) {
    .contact-form-custom__file-label {
      font-size: 16px;
      line-height: 23px;
    }
  }

  .contact-form-custom__file-control {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  /* Visually hide the native input; the label acts as the trigger so we control
     the button text and empty-state label ("No files selected") casing ourselves. */
  .contact-form-custom__file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .contact-form-custom__file-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body--family);
    font-size: 14px;
    color: var(--color-foreground);
    padding: var(--padding-2xs) var(--padding-md);
    border: 1px solid var(--color-foreground);
    border-radius: var(--padding-xs);
    background-color: #FFFFFF;
    cursor: pointer;
  }

  @media screen and (min-width: 750px) {
    .contact-form-custom__file-button {
      font-size: 16px;
    }
  }

  .contact-form-custom__file:focus-visible + .contact-form-custom__file-button {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .contact-form-custom__file:disabled + .contact-form-custom__file-button {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .contact-form-custom__file-status {
    font-family: var(--font-body--family);
    font-size: 14px;
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .contact-form-custom__file-status {
      font-size: 16px;
    }
  }

  .contact-form-custom__file-limit {
    margin: 8px 0 0;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-error, #c11813);
  }

  .contact-form-custom__file-limit[hidden] {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .contact-form-custom__file-limit {
      font-size: 16px;
    }
  }

  .contact-form-custom__previews {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .contact-form-custom__previews[hidden] {
    display: none;
  }

  .contact-form-custom__preview {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #C6C6C6;
    background-color: #FFFFFF;
  }

  .contact-form-custom__preview-image {
    width: 100%;
    height: auto;
    display: block;
  }

  .contact-form-custom__preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contact-form-custom__preview-remove:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .contact-form-custom__submit {
    width: 100%;
    height: 40px;
    border-radius: 24px;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px 24px;
  }

  @media screen and (min-width: 750px) {
    .contact-form-custom__submit {
      height: 48px;
      font-size: 16px;
      line-height: 22px;
      padding: 4px 32px;
    }
  }

  /* Disabled until all required fields are filled: grey + not-allowed cursor.
     The button is natively disabled (blocks clicks/submit), so pointer-events
     must stay enabled or the not-allowed cursor would not show. */
  .contact-form-custom__submit:disabled {
    background-color: #AAAAAA;
    color: #FFFFFF;
    cursor: not-allowed;
    opacity: 1;
  }

  .contact-form-custom__submit[data-loading='true'] {
    opacity: 0.6;
    cursor: progress;
  }

  .contact-form-custom__input--error {
    border-color: #cc0000;
  }

  .contact-form-custom__input--error:focus {
    border-color: #cc0000;
  }

  .contact-form-custom__field-error {
    display: block;
    margin-top: 6px;
    font-family: var(--font-body--family);
    font-size: 12px;
    line-height: 16px;
    color: #cc0000;
  }

  @media screen and (min-width: 750px) {
    .contact-form-custom__field-error {
      font-size: 13px;
      line-height: 18px;
    }
  }

  .contact-form-custom__form[hidden],
  .contact-form-custom__message[hidden],
  .contact-form-custom__success[hidden] {
    display: none;
  }

  .contact-form-custom__message {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 448px;
    margin: 0 auto;
    font-family: var(--font-body--family);
    font-size: 14px;
    line-height: 20px;
    color: #cc0000;
  }

  .contact-form-custom__message svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }

  .contact-form-custom__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 100%;
    max-width: 448px;
    margin: 0 auto;
    font-family: var(--font-body--family);
    color: var(--color-foreground);
  }

  .contact-form-custom__success svg {
    width: 48px;
    height: 48px;
    color: #008000;
  }

  .contact-form-custom__success-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    margin: 0;
  }

  .contact-form-custom__success-text {
    font-size: 14px;
    line-height: 20px;
    margin: 0;
  }

  .contact-form-custom__success-button {
    margin-top: 16px;
    height: 40px;
    border-radius: 24px;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 4px 32px;
  }

  @media screen and (min-width: 750px) {
    .contact-form-custom__success-button {
      height: 48px;
      font-size: 16px;
      line-height: 22px;
    }
  }
/* END_SECTION:contact-form-custom */

/* START_SECTION:dynamic-yield-widget (INDEX:20) */
.dynamic-yield-widget {
    position: relative;
  }

  dynamic-yield-widget.dynamic-yield-widget__behavior {
    display: block;
  }

  .dynamic-yield-widget__container {
    width: 100%;
    font-family: var(--font-body--family);
    color: var(--dy-widget-text-color, #1D1D1D);
  }

  /* =============================================
     DY Tabbed Recommendations — Figma Overrides
     ============================================= */

  /* --- Tab container --- */
  .dynamic-yield-widget__container [id^='tab-container-'] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
  }

  /* --- Tab buttons (all states) --- */
  .dynamic-yield-widget__container button[class*='tablinks_'] {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    letter-spacing: -0.48px;
    text-align: center;
    padding: 0 16px 8px 16px;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--dy-widget-muted-color, #464646);
    border-bottom-color: color-mix(in srgb, var(--dy-widget-muted-color, #464646) 45%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--dy-widget-muted-color, #464646);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  /* Active tab */
  .dynamic-yield-widget__container button[class*='tablinks_'].active,
  .dynamic-yield-widget__container button[class*='tablinks_'][class*='active'] {
    color: var(--dy-widget-highlight-color, #e10600);
    border-bottom-color: var(--dy-widget-highlight-color, #e10600);
    border-bottom-width: 2px;
  }

  /* Hover */
  .dynamic-yield-widget__container button[class*='tablinks_']:hover {
    color: var(--dy-widget-highlight-color, #e10600);
    border-bottom-color: var(--dy-widget-highlight-color, #e10600);
  }

  .dynamic-yield-widget__container button[class*='tablinks_']:focus:not(:focus-visible) {
    outline: none;
  }

  .dynamic-yield-widget__container button[class*='tablinks_']:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  /* --- Card rail (tab content container) --- */
  .dynamic-yield-widget__container [class*='tabcontent_'] {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
  }

  .section--page-width.dynamic-yield-widget .dynamic-yield-widget__container [class*='tabcontent_'] {
    --dy-widget-page-offset: max(var(--page-margin), calc((100vw - var(--page-content-width)) / 2));
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-inline: var(--dy-widget-page-offset);
    scroll-padding-inline-start: var(--dy-widget-page-offset);
  }

  .dynamic-yield-widget__container [class*='tabcontent_']::-webkit-scrollbar {
    display: none;
  }

  .dynamic-yield-widget__container [class*='tabcontent_'].is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  /* --- Product cards --- */
  .dynamic-yield-widget__container a[class*='tabbed-recs-card_'] {
    flex: 0 0 336px !important;
    width: 336px !important;
    max-width: 336px !important;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    text-decoration: none;
    border-radius: 24px;
  }

  /* --- Product images --- */
  .dynamic-yield-widget__container a[class*='tabbed-recs-card_'] img {
    aspect-ratio: 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    background: var(--dy-widget-image-background, linear-gradient(180deg, #F2E7DF 0%, #F5F1F1 100%));
  }

  /* Hide missing/broken images so product text moves up naturally. */
  .dynamic-yield-widget__container a[class*='tabbed-recs-card_'] img[src='null'],
  .dynamic-yield-widget__container a[class*='tabbed-recs-card_'] img[src=''],
  .dynamic-yield-widget__container a[class*='tabbed-recs-card_'] img:not([src]),
  .dynamic-yield-widget__container a[class*='tabbed-recs-card_'] img.dy-image-error {
    display: none;
  }

  /* --- Product title --- */
  .dynamic-yield-widget__container [class*='tabbed_recs_product_name_'] {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: var(--dy-widget-text-color, #1D1D1D);
    text-align: left;
    padding: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* --- Product price --- */
  .dynamic-yield-widget__container [class*='tabbed_recs_product_price_'] {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--dy-widget-highlight-color, #e10600);
    text-align: left;
    padding: 0;
  }

  /* =============================================
     Mobile overrides (≤749px)
     ============================================= */
  @media screen and (max-width: 749px) {
    .dynamic-yield-widget__container [id^='tab-container-'] {
      margin-bottom: 32px;
    }

    .dynamic-yield-widget__container button[class*='tablinks_'] {
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0;
    }

    .dynamic-yield-widget__container a[class*='tabbed-recs-card_'] {
      flex: 0 0 208px !important;
      width: 208px !important;
      max-width: 208px !important;
    }

    .dynamic-yield-widget__container [class*='tabbed_recs_product_name_'] {
      font-size: 14px;
      line-height: 20px;
    }

    .dynamic-yield-widget__container [class*='tabbed_recs_product_price_'] {
      font-size: 12px;
      line-height: 17px;
    }
  }

  /* Override DY's mobile display:none on cards 3+ so scroll handles visibility */
  @media screen and (max-width: 600px) {
    .dynamic-yield-widget__container a[class*='tabbed-recs-card_']:nth-of-type(3),
    .dynamic-yield-widget__container a[class*='tabbed-recs-card_']:nth-of-type(4) {
      display: flex !important;
    }
  }

  @media screen and (max-width: 400px) {
    .dynamic-yield-widget__container a[class*='tabbed-recs-card_']:nth-of-type(3),
    .dynamic-yield-widget__container a[class*='tabbed-recs-card_']:nth-of-type(4) {
      display: flex !important;
    }
  }
/* END_SECTION:dynamic-yield-widget */

/* START_SECTION:ea-bundle-builder-drawer (INDEX:21) */
/* ===== Bundle Builder Drawer ===== */

  .bb-section {
    display: contents;
  }

  /* Overlay */
  .bb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 19;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .bb-overlay--open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer panel */
  .bb-drawer {
    position: fixed;
    inset-block-start: 16px;
    inset-block-end: 16px;
    inset-inline-end: 16px;
    max-width: 587px;
    width: 100%;
    z-index: 20;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    transform: translateX(calc(100% + 16px));
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
  }

  .bb-drawer--open {
    transform: translateX(0);
  }

  /* Header + progress share one white block with a single bottom shadow */
  .bb-top {
    background: #ffffff;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    position: relative;
    /* Above the embedded locator (z-index 5) so the pink header + its bottom shadow
       stay visible while the store selector is active (the locator starts BELOW it). */
    z-index: 6;
  }

  /* Header — pink band (Figma 19425:7716, Primary/primary-100). The rounded top corners
     match .bb-top so the pink fills the drawer's rounded top edge; the progress bar below
     stays on the white .bb-top. */
  .bb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    flex-shrink: 0;
    background: #f6b2b0;
    border-radius: 8px 8px 0 0;
  }

  .bb-header__title {
    font-family: var(--font-heading--family);
    font-size: var(--font-size--xl);
    font-weight: 600;
    line-height: 1.2;
    color: #1d1d1d;
  }

  .bb-header__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Progress bar CSS lives in snippets/bundle-progress-bar.liquid (shared with
     the Cart drawer). No BB-specific overrides so the two bars render identically. */

  /* Hide the bundle progress bar until a store/fulfillment is selected (class toggled
     by ea-bundle-builder-drawer.js #reflectStoreSelection). Scoped to the BB drawer so
     the Cart drawer's shared .bundle-progress is unaffected. */
  .bb-drawer--no-store .bundle-progress {
    display: none;
  }

  /* Main scrollable area — white body so the #fbf7f5 accordion cards stand out */
  .bb-main {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
  }

  .bb-content {
    padding: 0 16px 24px;
  }

  .bb-steps {
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Step cards */
  .bb-step {
    background: #fbf7f5;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .bb-step__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    cursor: default;
  }

  .bb-step__header[data-collapsible='true'] {
    cursor: pointer;
  }

  .bb-step__header-left {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .bb-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: #ebdcd0;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1d;
  }

  .bb-step__title {
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    font-weight: 600;
    line-height: 1.375;
    color: #464646;
  }

  .bb-step__title-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .bb-step__subtitle {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 400;
    line-height: 1.4;
    color: #1d1d1d;
  }

  .bb-step__shop-all {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 600;
    line-height: 1.4;
    color: #e10600;
    text-decoration: none;
    border: none;
    border-bottom: 1px solid #e10600;
    padding: 0 0 1px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .bb-step__shop-all:hover {
    border-bottom-color: #c20500;
    color: #c20500;
  }

  .bb-step__chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .bb-step__header[aria-expanded='true'] .bb-step__chevron {
    transform: rotate(180deg);
  }

  .bb-step__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .bb-step__body[hidden] {
    display: none;
  }

  .bb-step__placeholder {
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    color: #838383;
    margin: 0;
    padding: 8px 0;
  }

  /* Tabs */
  .bb-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .bb-tabs::-webkit-scrollbar {
    display: none;
  }

  .bb-tab {
    padding: 0 16px 8px;
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 400;
    line-height: 1.4;
    color: #1d1d1d;
    background: none;
    border: none;
    border-bottom: 1px solid #c6c6c6;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: border-color 0.2s ease, font-weight 0.2s ease;
  }

  .bb-tab--active,
  .bb-tab[data-active='true'] {
    font-weight: 600;
    border-bottom-color: #1d1d1d;
  }

  /* Product grid */
  .bb-products__panel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block-end: 4px;
  }

  .bb-products__panel[hidden] {
    display: none;
  }

  .bb-products__panel::-webkit-scrollbar {
    display: none;
  }

  .bb-products__empty {
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    color: #838383;
    margin: 0;
    padding: 16px 0;
  }

  /* Loading skeleton */
  .bb-products__loading {
    display: flex;
    gap: 16px;
  }

  .bb-card-skeleton {
    min-width: 169px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .bb-card-skeleton__image {
    width: 169px;
    height: 169px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: bb-shimmer 1.5s infinite;
  }

  .bb-card-skeleton__text {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: bb-shimmer 1.5s infinite;
    width: 80%;
  }

  .bb-card-skeleton__text--short {
    width: 50%;
  }

  @keyframes bb-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* Product card */
  .bb-card {
    min-width: 169px;
    max-width: 169px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .bb-card__image-wrapper {
    position: relative;
    width: 169px;
    height: 169px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(180deg, #f2e7df 0%, #f5f1f1 100%);
  }

  .bb-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .bb-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
  }

  .bb-card__callout {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 0;
    padding: 0 8px;
    border-radius: 0 24px 24px 0;
    background: #ffffff;
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 400;
    line-height: 1.67;
    color: #1d1d1d;
  }

  /* Delivery badge (e.g. "1 Hour Delivery") */
  .bb-card__badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
  }

  .bb-card__badge-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-block;
    background-color: #526f1b;
    -webkit-mask: var(--bb-da-icon) center / contain no-repeat;
    mask: var(--bb-da-icon) center / contain no-repeat;
  }

  .bb-card__badge-text {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 500;
    line-height: 1.4;
    color: #526f1b;
  }

  .bb-card__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .bb-card__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .bb-card__title {
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1d;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .bb-card__pricing {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .bb-card__price {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 500;
    line-height: 1.4;
    color: #1d1d1d;
  }

  .bb-card__compare-price {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 500;
    line-height: 1.4;
    color: #1d1d1d;
    text-decoration: line-through;
  }

  /* Card action buttons */
  .bb-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    border-radius: 24px;
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    align-self: flex-start;
    height: 32px;
  }

  .bb-card__action--add {
    background: #e10600;
    color: #ffffff;
  }

  .bb-card__action--add:hover {
    background: #c20500;
  }

  .bb-card__action:disabled {
    background: #ededed;
    color: #8c8c8c;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Loading state for a single-variant direct add (availability check in flight): keep
     the red fill, hide the label, show a spinner. Compound selector + placement AFTER
     :disabled so the brand-red wins over the disabled grey while loading (the button is
     disabled to block re-clicks). Mirrors .bb-footer__atc--loading; reuses bb-atc-spin. */
  .bb-card__action.bb-card__action--loading {
    background: #e10600;
    color: transparent !important;
    position: relative;
    cursor: progress;
  }

  .bb-card__action--loading::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 14px;
    height: 14px;
    margin-block-start: -7px;
    margin-inline-start: -7px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: bb-atc-spin 0.6s linear infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .bb-card__action--loading::after {
      animation-duration: 1.5s;
    }
  }

  /* Store-change re-filter: dim + shimmer the BB cards in the drawer AND cart
     ("Add more, save more") while the arrangements API resolves — mirrors the BB
     page's data-bb-loading shimmer. Driven by assets/bb-secondary-availability.js
     toggling [data-bb-refreshing] on the drawer roots. This stylesheet is global
     (header-group), so it also styles ea-cart-drawer's .bb-card cards. */
  ea-bundle-builder-drawer[data-bb-refreshing] .bb-card,
  ea-bundle-builder-drawer[data-bb-priority-loading] .bb-card,
  ea-cart-drawer[data-bb-refreshing] .bb-card {
    pointer-events: none;
    position: relative;
    overflow: hidden;
    animation: bb-refresh-dim 1.1s ease-in-out infinite;
  }

  ea-bundle-builder-drawer[data-bb-refreshing] .bb-card::after,
  ea-bundle-builder-drawer[data-bb-priority-loading] .bb-card::after,
  ea-cart-drawer[data-bb-refreshing] .bb-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-100%);
    animation: bb-refresh-sweep 1.2s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
  }

  @keyframes bb-refresh-dim {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.45; }
  }

  @keyframes bb-refresh-sweep {
    100% { transform: translateX(100%); }
  }

  @media (prefers-reduced-motion: reduce) {
    ea-bundle-builder-drawer[data-bb-refreshing] .bb-card,
    ea-bundle-builder-drawer[data-bb-priority-loading] .bb-card,
    ea-cart-drawer[data-bb-refreshing] .bb-card {
      animation: none;
      opacity: 0.6;
    }
    ea-bundle-builder-drawer[data-bb-refreshing] .bb-card::after,
    ea-bundle-builder-drawer[data-bb-priority-loading] .bb-card::after,
    ea-cart-drawer[data-bb-refreshing] .bb-card::after {
      animation: none;
    }
  }

  /* One-shot attention shimmer on the FIRST accordion's cards, fired when the shopper taps
     the disabled "Add a product to continue" CTA on a secondary-only bundle. Same dim + sweep
     as the store-change refresh above, but a SINGLE pass (no infinite loop) and no
     pointer-events lock — the cards must stay clickable so the shopper can actually add one.
     Driven by assets/ea-bundle-builder-drawer.js#flashPrimaryAttention toggling
     [data-bb-attention] on .bb-step[data-step="1"]. */
  ea-bundle-builder-drawer .bb-step[data-step='1'][data-bb-attention] .bb-card {
    position: relative;
    overflow: hidden;
    animation: bb-refresh-dim 0.7s ease-in-out 1;
  }

  ea-bundle-builder-drawer .bb-step[data-step='1'][data-bb-attention] .bb-card::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Diagonal light band (120deg) rather than the vertical 90deg used by the refresh sweep. */
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: bb-refresh-sweep 0.7s ease-in-out 1;
    z-index: 2;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    ea-bundle-builder-drawer .bb-step[data-step='1'][data-bb-attention] .bb-card,
    ea-bundle-builder-drawer .bb-step[data-step='1'][data-bb-attention] .bb-card::after {
      animation: none;
    }
  }

  .bb-card__action--remove {
    background: #ffffff;
    color: #1d1d1d;
    border: 1px solid #ededed;
  }

  .bb-card__action--remove:hover {
    background: #f5f5f5;
  }

  /* Variant select view */
  .bb-variant-select {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .bb-variant-select__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1d;
  }

  .bb-variant-select__list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block-end: 4px;
  }

  .bb-variant-select__list::-webkit-scrollbar {
    display: none;
  }

  .bb-variant-tile {
    flex: 0 0 auto;
    min-width: 240px;
    max-width: 280px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid #ededed;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .bb-variant-tile--selected {
    border-color: #1d1d1d;
    box-shadow: inset 0 0 0 1px #1d1d1d;
  }

  .bb-variant-tile:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .bb-variant-tile__image {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(180deg, #f2e7df 0%, #f5f1f1 100%);
  }

  .bb-variant-tile__image--placeholder {
    background: #f0f0f0;
  }

  .bb-variant-tile__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    min-width: 0;
  }

  .bb-variant-tile__title {
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    font-weight: 600;
    line-height: 1.375;
    color: #1d1d1d;
  }

  .bb-variant-tile__pricing {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .bb-variant-tile__price {
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1d;
  }

  .bb-variant-tile__compare {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 400;
    line-height: 1.4;
    color: #838383;
    text-decoration: line-through;
  }

  /* Footer */
  .bb-footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.05);
    border-radius: 0 0 8px 8px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }

  .bb-footer__inputs {
    display: flex;
    gap: 8px;
    cursor: pointer;
  }

  .bb-footer__input-group {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #dbdbdb;
    padding: 8px;
    gap: 6px;
    min-width: 0;
  }

  .bb-footer__inputs:hover .bb-footer__input-group {
    border-color: var(--color-black-light, #464646);
  }

  .bb-footer__input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }

  .bb-footer__zip-input {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 500;
    line-height: 1.4;
    color: #1d1d1d;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  {%- comment -%} Placeholder copy shown until a store is selected {%- endcomment -%}
  .bb-footer__zip-input:empty::before {
    content: 'Zip code';
    color: #838383;
  }

  .bb-footer__input-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
  }

  {%- comment -%} Clear button only appears once a store has been selected {%- endcomment -%}
  .bb-footer__inputs:not([data-store-selected]) .bb-footer__input-clear {
    display: none;
  }

  {%- comment -%}
    Once the cart holds at least one item the selection is committed to the
    chosen store, so the clear (X) icon is hidden — the store can't be cleared
    from the drawer while items depend on it.
  {%- endcomment -%}
  .bb-footer__inputs[data-cart-has-items] .bb-footer__input-clear {
    display: none;
  }

  .bb-footer__delivery-label {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 500;
    line-height: 1.4;
    color: #1d1d1d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .bb-footer__delivery-label:empty::before {
    content: '1-Hour Delivery';
    color: #838383;
  }

  .bb-footer__delivery-chevron {
    flex-shrink: 0;
  }

  .bb-footer__savings {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .bb-footer__savings-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 600;
    line-height: 1.4;
    color: #5f0300;
  }

  .bb-footer__savings-amount {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 600;
    line-height: 1.4;
    color: #5f0300;
  }

  .bb-footer__atc {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    min-height: 40px;
    border-radius: 24px;
    background: #e10600;
    color: #ffffff;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 600;
    line-height: 1.4;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .bb-footer__atc:hover:not(:disabled):not([aria-disabled='true']) {
    background: #c20500;
  }

  /* Disabled state matches the design system (grey bg, white text) — same as the
     Contact form submit + snippets/button.liquid. pointer-events stay enabled so the
     not-allowed cursor shows on a natively-disabled button. The [aria-disabled] variant is
     the "Add a product to continue" prompt: it LOOKS disabled but stays clickable so the tap
     can flash the first accordion (see assets/ea-bundle-builder-drawer.js). */
  .bb-footer__atc:disabled,
  .bb-footer__atc[aria-disabled='true'] {
    background: #aaaaaa;
    color: #ffffff;
    opacity: 1;
    cursor: not-allowed;
  }

  /* Loading state during add-to-cart: hide the label, show a spinner (consistent
     with the product-card / cart CTAs). Compound selector + comes after the :disabled
     rule so the brand-red background wins over the disabled grey while loading. */
  .bb-footer__atc.bb-footer__atc--loading {
    background: #e10600;
    color: transparent !important;
    position: relative;
    cursor: progress;
  }

  .bb-footer__atc--loading::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 18px;
    height: 18px;
    margin-block-start: -9px;
    margin-inline-start: -9px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: bb-atc-spin 0.6s linear infinite;
  }

  @keyframes bb-atc-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .bb-footer__atc--loading::after {
      animation-duration: 1.5s;
    }
  }

  /* ===== Card quantity stepper (shown after a product is added) ===== */
  .bb-card__qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    align-self: flex-start;
    height: 32px;
    padding: 0 8px;
    border-radius: 24px;
    border: 1px solid #dbdbdb;
    background: #ffffff;
  }

  .bb-card__qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    color: #1d1d1d;
    cursor: pointer;
    flex-shrink: 0;
  }

  .bb-card__qty-btn:hover {
    color: #e10600;
  }

  .bb-card__qty-value {
    min-width: 16px;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 500;
    line-height: 1.4;
    color: #1d1d1d;
  }

  /* ===== Secondary drawer (variant + gift wrap) ===== */
  .bb2-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 29;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .bb2-overlay--open {
    opacity: 1;
    pointer-events: auto;
  }

  .bb2-drawer {
    position: fixed;
    inset-block-start: 16px;
    inset-block-end: 16px;
    inset-inline-end: 16px;
    max-width: 587px;
    width: 100%;
    z-index: 30;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    transform: translateX(calc(100% + 16px));
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
  }

  .bb2-drawer--open {
    transform: translateX(0);
  }

  /* ── Embedded store selector ─────────────────────────────────────────────
     The panel reuses every `store-availability-dialog__*` rule loaded site-wide by the
     header pop-up, the card included. It is the same control, so it looks like one.

     A POPUP INSIDE THE PRIMARY DRAWER. Absolutely positioned against `.bb-drawer`,
     which is `position: fixed` and so the containing block. The drawer content stays
     rendered behind the scrim — there is simply little to see yet, which is the point
     of a translucent overlay rather than hiding it. */
  /* Full-height embedded store selector, styled to match the personalization drawer's
     .pd-locator exactly (UI copy — EA-3873). Panel = full-height flex column covering the
     whole primary drawer (its own close is the way out, always shown); card body is the
     cream card that fills the panel when a store list appears, with the "Select Store"
     CTA pinned to the bottom. */
  .bb-locator {
    position: absolute;
    /* Starts BELOW the drawer header (.bb-top), not at top:0 — so the pink header + its
       flipped "Check availability" title stay visible while the selector is active,
       mirroring the personalization drawer. `--bb-top-height` is measured and set by
       ea-bundle-builder-drawer.js #showLocator; the fallback covers the header before
       JS runs (the progress bar is hidden while no store is selected). */
    top: var(--bb-top-height, 64px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding: 16px;
    /* The card scrolls internally, so the panel clips rather than scrolls — otherwise the
       fixed CTA scrolls away. */
    overflow: hidden;
    background: rgba(255, 255, 255, 0.72);
  }

  /* `hidden` has to beat the `display: flex` above — the UA's `[hidden]` rule is a lone
     attribute selector, so any class setting `display` outranks it. Without this the
     panel sits over every variant pick. */
  .bb-locator[hidden] {
    display: none;
  }

  /* The primary drawer's own footer ATC ("Add a product to continue") is a solid pill, so
     it bleeds through the locator's 72%-opaque scrim and overlaps the "Select Store" CTA
     (both pinned bottom). Hide it while the locator is up — the locator owns the CTA then.
     `visibility` keeps the layout so nothing behind the scrim reflows. */
  .bb-drawer:has(.bb-locator:not([hidden])) .bb-footer {
    visibility: hidden;
  }

  /* The component wraps the card; make it fill the panel so the container's flex height
     resolves against the panel below the header. */
  .bb-locator > store-availability-component {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* SCOPED UNDER `.bb-locator` so it deterministically beats the pop-up's base rule (same
     single-class specificity) and stays off the pop-up. In the drawer the CONTAINER is just a
     layout column; the cream card is painted on `.store-availability-dialog__body`. */
  .bb-locator .store-availability-dialog__container--embedded {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  /* The cream card fills the panel (full height) so the card + list occupy the drawer and the
     CTA pins below it. */
  .bb-locator .store-availability-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: #fbf7f5;
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    padding: 16px;
  }

  /* Let the delivery dropdown / calendar escape the card's scroll box when open. */
  .bb-locator .store-availability-dialog__body:has(.store-availability-dialog__dropdown-wrapper.--is-open),
  .bb-locator .store-availability-dialog__body:has(.store-availability-dialog__calendar:not([hidden])) {
    overflow: visible;
  }

  /* With a store list (or loading skeleton) present, the card fills the panel and the LIST is the
     scroll region — full height, cards scroll behind the fixed CTA under the bottom fade. */
  .bb-locator .store-availability-dialog__container--embedded:has([data-store-card]) .store-availability-dialog__body,
  .bb-locator .store-availability-dialog__container--embedded:has(.store-availability-dialog__stores-skeleton:not([hidden])) .store-availability-dialog__body {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .bb-locator .store-availability-dialog__delivery {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
  }

  .bb-locator .store-availability-dialog__stores-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  .bb-locator .store-availability-dialog__stores-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    height: 48px;
  }

  /* Fixed "Select Store" CTA — OUTSIDE the cream card, pinned to the panel bottom on the scrim. */
  .bb-locator .store-availability-dialog__actions {
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
    padding-top: 16px;
    background: transparent;
  }

  .bb-locator .store-availability-dialog__select-btn {
    width: 100%;
  }

  /* Single bottom "Select Store" pill — no secondary "Select automatically" link (matches PD). */
  .bb-locator .store-availability-dialog__auto-btn {
    display: none;
  }

  /* Both actions rows (ref=actions "Continue"/Select Store AND ref=lockedActions "Update Date")
     pin to the bottom (margin-top:auto, same class), so while a store lookup / variant fetch is in
     flight they show prematurely and overlap each other + the resolved CTA. Hide BOTH until the
     results settle — the store component carries [data-busy] during the lookup and the skeleton is
     present until the list renders. The correct CTA reappears once both clear. */
  .bb-locator store-availability-component[data-busy] .store-availability-dialog__actions,
  .bb-locator .store-availability-dialog__container--embedded:has(.store-availability-dialog__stores-skeleton:not([hidden])) .store-availability-dialog__actions {
    display: none !important;
  }

  /* Typography to match the PD embed (Figma 19431:32075). */
  .bb-locator .store-availability-dialog__title-section {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    padding-inline-end: 32px;
    /* Keep the (multi-line) heading at its full height when the store list is long: the body is a
       flex column that goes overflow:hidden with a list, so without this the title-section shrinks
       below its content and the heading clips top/bottom. The scrollable list absorbs the shrink. */
    flex-shrink: 0;
  }

  .bb-locator .store-availability-dialog__title {
    text-align: left;
  }

  .bb-locator .store-availability-dialog__field-label {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-black-secondary, #1d1d1d);
    padding-inline-start: 2px;
  }

  .bb-locator .store-availability-dialog__helper {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-black-secondary, #1d1d1d);
  }

  .bb-locator .store-availability-dialog__delivery-label {
    color: var(--color-black-light, #464646);
    line-height: 1.4;
  }

  /* The close, on the heading's line (matches the PD embed's .pd-locator__close). The container
     is already `position: relative` from the pop-up's own rule; the title-section reserves 32px
     inline-end for it. */
  .bb-locator__close {
    position: absolute;
    top: 16px;
    right: 16px;
    /* Over the card's content, under the delivery dropdown and calendar, which open
       across the card and must not have an icon punched through them. */
    z-index: 1;
  }

  /* `hidden` must beat the base class's `display: flex`, which lives in the pop-up's
     own stylesheet where this file's conventions cannot see it. */
  .bb-locator__close[hidden] {
    display: none;
  }

  /* Busy state — the pop-up carries `data-busy` on its dialog, an embedded panel on the
     component element. Block the pointer over a stale list while a lookup is in flight,
     but never over the zip field, which is where a typo gets fixed, nor over the close,
     which is how a shopper leaves a slow state. The exemptions tie with the rule above
     on specificity, so they must follow it. */
  store-availability-component[data-embedded][data-busy] .store-availability-dialog__container > * {
    pointer-events: none;
  }

  store-availability-component[data-embedded][data-busy] .store-availability-dialog__zip-container {
    pointer-events: auto;
  }

  store-availability-component[data-embedded][data-busy] .bb-locator__close {
    pointer-events: auto;
  }

  .bb2-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-radius: 8px 8px 0 0;
    background: #f6b2b0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }

  .bb2-header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    color: #1d1d1d;
  }

  .bb2-header__title {
    font-family: var(--font-heading--family);
    font-size: var(--font-size--xl);
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1d;
  }

  .bb2-main {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .bb2-product-name {
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1d;
    margin: 0;
  }

  .bb2-variants {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .bb2-variants__empty {
    margin: 0;
    padding: 12px 0;
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs);
    line-height: 1.4;
    color: var(--color-black-light, #464646);
  }

  /* No fulfillable variant → centered message fills the drawer body, CTA hidden. */
  .bb2-variants--unavailable {
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 240px;
    padding: 24px;
  }

  .bb2-unavailable__text {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--font-size--md, 16px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-black-secondary, #1d1d1d);
  }

  /* The way out of the unavailable state (EA-3985) — opens the embedded selector. */
  .bb2-unavailable__change {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    min-height: 40px;
    border-radius: 24px;
    background: #e10600;
    color: #ffffff;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 600;
    line-height: 1.4;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .bb2-unavailable__change:hover {
    background: #c20500;
  }

  /* Unavailable state: "← Back" + select-alternative-store CTAs on ONE row (each on its
     own line on mobile). The container owns the top margin so neither button doubles it. */
  .bb2-unavailable__actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .bb2-unavailable__actions .bb2-unavailable__change {
    margin-top: 0;
  }

  /* "← Back" — #1d1d1d outlined; colours flip on hover. */
  .bb2-unavailable__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    min-height: 40px;
    border-radius: 24px;
    background: transparent;
    color: #1d1d1d;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid #1d1d1d;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .bb2-unavailable__back:hover {
    background: #1d1d1d;
    color: #ffffff;
  }

  @media screen and (max-width: 749px) {
    .bb2-unavailable__actions {
      flex-direction: column;
      align-items: stretch;
    }
  }

  .bb2-variants__loading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
  }

  .bb2-spinner {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid #dbdbdb;
    border-top-color: var(--color-black-secondary, #1d1d1d);
    border-radius: 50%;
    animation: bb2-spin 0.7s linear infinite;
  }

  @keyframes bb2-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .bb2-spinner {
      animation-duration: 1.6s;
    }
  }

  .bb2-variant {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: 1px solid #c6c6c6;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease;
  }

  .bb2-variant--selected {
    border-color: #1d1d1d;
  }

  .bb2-variant--single {
    cursor: default;
  }

  .bb2-variant:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .bb2-variant__image {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(180deg, #f2e7df 0%, #f5f1f1 100%);
  }

  .bb2-variant__image--placeholder {
    background: #f0f0f0;
  }

  /* Secondary drawer loading shimmer (mirrors the real variant card layout) */
  .bb2-variant--shimmer {
    cursor: default;
    pointer-events: none;
  }

  /* Fill the row so the text-line shimmers have a width to size against. */
  .bb2-variant--shimmer .bb2-variant__info {
    flex: 1 1 auto;
    align-self: stretch;
    justify-content: center;
    gap: 8px;
  }

  .bb2-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: bb-shimmer 1.5s infinite;
    border-radius: 4px;
  }

  .bb2-shimmer--line {
    display: block;
    height: 14px;
    border-radius: 4px;
  }

  .bb2-shimmer--title {
    width: 55%;
    height: 16px;
  }

  .bb2-shimmer--price {
    width: 30%;
  }

  .bb2-shimmer--badge {
    width: 48%;
  }

  @media (prefers-reduced-motion: reduce) {
    .bb2-shimmer {
      animation: none;
    }
  }

  .bb2-variant__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-width: 0;
  }

  .bb2-variant__title {
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1d;
  }

  .bb2-variant__pricing {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .bb2-variant__price {
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 400;
    line-height: 1.4;
    color: #1d1d1d;
  }

  .bb2-variant__compare {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 400;
    line-height: 1.4;
    color: #838383;
    text-decoration: line-through;
  }

  /* Gift wrap section */
  .bb2-giftwrap[hidden] {
    display: none;
  }

  .bb2-giftwrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .bb2-giftwrap__divider {
    height: 1px;
    background: #ededed;
    width: 100%;
  }

  .bb2-giftwrap__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .bb2-giftwrap__desc {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 400;
    line-height: 1.4;
    color: #1d1d1d;
    margin: 0;
  }

  .bb2-giftwrap__learn {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1d;
    text-decoration: underline;
    text-underline-offset: 0.08em;
    cursor: pointer;
  }

  .bb2-footer {
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.05);
    border-radius: 0 0 8px 8px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }

  .bb2-footer__add {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    min-height: 40px;
    border-radius: 24px;
    background: #e10600;
    color: #ffffff;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 600;
    line-height: 1.4;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .bb2-footer__add:hover:not(:disabled) {
    background: #c20500;
  }

  /* Disabled state matches the main drawer's Add All to Cart CTA (.bb-footer__atc)
     so both primary footer buttons look identical when disabled. */
  .bb2-footer__add:disabled {
    background: #aaaaaa;
    color: #ffffff;
    opacity: 1;
    cursor: not-allowed;
  }

  /* Mobile responsive */
  @media screen and (max-width: 750px) {
    .bb-drawer,
    .bb2-drawer {
      max-width: calc(100% - 32px);
      inset-block-start: 16px;
      inset-block-end: 16px;
      inset-inline-end: 16px;
    }

    .bb-header__title,
    .bb2-header__title {
      font-size: var(--font-size--md);
      line-height: 1.4;
    }

    .bb-step__title {
      font-size: var(--font-size--sm);
      line-height: 1.4;
    }

    .bb-card {
      min-width: 155px;
      max-width: 155px;
    }

    .bb-card__image-wrapper {
      width: 155px;
      height: 155px;
    }

    .bb-variant-tile {
      min-width: 248px;
      max-width: 88%;
    }
  }
/* END_SECTION:ea-bundle-builder-drawer */

/* START_SECTION:ea-cart-drawer (INDEX:22) */
/* ================================================
     Cart Drawer — cd- prefix
     ================================================ */

  ea-cart-drawer {
    position: fixed;
    z-index: 20;
    pointer-events: none;
  }

  /* ---------- Dialog ---------- */

  .cd-dialog.cd-dialog {
    --cd-muted-opacity: 0.82;
    --cd-color-muted: rgb(var(--color-foreground-rgb) / var(--cd-muted-opacity));
    --cd-color-accent-light: color-mix(in srgb, var(--cd-progress-color) 12%, var(--color-background));
    --cd-color-surface-warm: #fbf7f5;
    --cd-color-gradient-start: #f2e7df;
    --cd-color-gradient-end: #f5f1f1;
    --cd-color-free: #526f1b;

    position: fixed;
    inset-block: 16px;
    inset-inline-start: auto;
    inset-inline-end: 16px;
    width: calc(100vw - 32px);
    max-width: 587px;
    height: calc(100dvh - 32px);
    max-height: calc(100dvh - 32px);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: var(--color-background);
    color: var(--color-foreground);
    box-shadow: 0 5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
    overflow: hidden;
    pointer-events: auto;
  }

  .cd-dialog.cd-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: cd-slide-in var(--animation-speed, 0.2s) ease forwards;
  }

  .cd-dialog.cd-dialog.dialog-closing {
    animation: cd-slide-out var(--animation-speed, 0.2s) ease forwards;
  }

  .cd-dialog.cd-dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--opacity-40));
  }

  @keyframes cd-slide-in {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes cd-slide-out {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }

  /* ---------- Main View ---------- */

  .cd-main-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }

  /* ---------- Recoverable error banner ---------- */

  .cd-error-toast {
    position: absolute;
    inset-inline: 16px;
    top: 16px;
    z-index: 10;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    box-shadow: 0 4px 12px rgb(var(--color-shadow-rgb) / var(--opacity-15));
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s ease;
  }

  .cd-error-toast--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* ---------- Header ---------- */

  .cd-header {
    flex: 0 0 auto;
    background: var(--color-background);
    box-shadow: 0 5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
    border-radius: 8px 8px 0 0;
    z-index: 2;
  }

  .cd-header__title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px;
  }

  .cd-header__title {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: var(--font-size--xl);
    line-height: var(--font-display--line-height);
    color: var(--cd-color-muted);
    margin: 0;
    text-align: start;
    flex: 1;
    min-width: 0;
  }

  .cd-header__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
    flex-shrink: 0;
  }

  .cd-header__close svg {
    width: 24px;
    height: 24px;
  }

  /* ---------- Progress Bar ---------- */

  .cd-progress {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 16px;
  }

  .cd-progress__text {
    position: relative;
    min-height: 18px;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
    margin: 0;
    text-align: start;
  }

  .cd-progress__text--with-confetti {
    padding-inline-start: 26px;
  }

  .cd-progress__confetti {
    position: absolute;
    inset-inline-start: 0;
    top: -12px;
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    line-height: 0;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .cd-progress__text--with-confetti {
      padding-inline-start: 0;
    }

    .cd-progress__confetti {
      display: none;
    }
  }

  .cd-progress__bar {
    position: relative;
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
  }

  .cd-progress__track {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 8px;
    background: var(--cd-color-accent-light);
    overflow: hidden;
  }

  .cd-progress__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--cd-progress, 0%);
    height: 100%;
    border-radius: 8px;
    background: var(--cd-progress-color);
    transition: width 0.3s ease;
  }

  .cd-progress__dot {
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cd-progress-color);
    z-index: 1;
  }

  .cd-progress__truck {
    position: absolute;
    top: 50%;
    inset-inline-start: clamp(16px, var(--cd-progress, 0%), calc(100% - 16px));
    transform: translate(-50%, -50%);
    /* Explicit width + border-box so the truck never shrinks-to-fit against the
       right edge when progress nears 100%. */
    width: 32px;
    height: 24px;
    box-sizing: border-box;
    padding-inline: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* White lane behind the truck so the red progress line does not pass through it */
    background: var(--color-background);
    z-index: 2;
    transition: inset-inline-start 0.3s ease;
  }

  .cd-progress__truck-icon {
    flex-shrink: 0;
    display: block;
    width: 24px;
    height: 24px;
    background: var(--cd-progress-color);
    -webkit-mask: var(--cd-progress-truck-icon) center / contain no-repeat;
    mask: var(--cd-progress-truck-icon) center / contain no-repeat;
  }

  /* Bundle discount progress CSS moved to snippets/bundle-progress-bar.liquid (shared) */

  /* ---------- Loading Skeleton ---------- */

  .cd-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
  }

  .cd-skeleton {
    border-radius: 8px;
    background: linear-gradient(
      90deg,
      rgb(var(--color-foreground-rgb) / var(--opacity-8)) 25%,
      rgb(var(--color-foreground-rgb) / var(--opacity-15)) 50%,
      rgb(var(--color-foreground-rgb) / var(--opacity-8)) 75%
    );
    background-size: 200% 100%;
    animation: cd-shimmer 1.5s infinite;
  }

  .cd-skeleton--item {
    height: 120px;
  }

  .cd-skeleton--variant {
    height: 88px;
  }

  /* Variant fetch loading state — stack skeletons full-width like the main card. */
  .cd-variant-loading {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .cd-variant-loading .cd-skeleton--variant {
    width: 100%;
  }

  @keyframes cd-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* ---------- Scrollable Body ---------- */

  .cd-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .cd-content {
    display: flex;
    flex-direction: column;
  }

  /* ---------- Cart Items ---------- */

  .cd-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
  }

  .cd-line-item {
    position: relative;
  }

  .cd-line-item--loading {
    opacity: 0.5;
    pointer-events: none;
  }

  .cd-line-item__image--icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cd-line-item__image--icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  /* When a cart mutation is in progress, block all cart item actions
     (plus, minus, edit, remove, view gift upgrades). Header and footer
     stay normal. Other line items stay visually normal but non-interactive. */
  .cd-drawer--busy .cd-qty-btn,
  .cd-drawer--busy .cd-action-btn,
  .cd-drawer--busy .cd-upgrades-btn,
  .cd-drawer--busy .cd-personalize__card-btn,
  .cd-drawer--busy .cd-personalize__card-action-btn {
    pointer-events: none;
  }

  /* Processing/wait cursor applied at the cart body level, not per-button. */
  .cd-drawer--busy .cd-body {
    cursor: wait;
  }

  .cd-line-item__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
  }

  .cd-line-item__top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

  .cd-line-item__image {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }

  .cd-line-item__image-bg {
    position: absolute;
    inset: 0;
    background: var(
      --cd-product-media-gradient,
      linear-gradient(180deg, var(--cd-color-gradient-start) 0%, var(--cd-color-gradient-end) 100%)
    );
    border-radius: 4px;
  }

  .cd-line-item__image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  .cd-line-item__image.cd-line-item__image--gift-message img {
    width: 80px;
    height: 80px;
  }

  .cd-line-item__image img.cd-line-item__image-img--contain {
    object-fit: contain;
  }

  .cd-line-item__image-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    border-radius: 4px;
  }

  .cd-line-item__details {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 12px;
  }

  .cd-line-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 96px;
  }

  .cd-line-item__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .cd-line-item__name {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
  }

  a.cd-line-item__name {
    text-decoration: none;
    cursor: pointer;
  }

  .cd-line-item__variant {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--cd-color-muted);
  }

  /* ---------- Quantity Selector ---------- */

  .cd-line-item__qty-selector {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 4px 8px;
    background: var(--color-background);
    width: fit-content;
  }

  .cd-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
  }

  .cd-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .cd-qty-btn svg {
    width: 20px;
    height: 20px;
  }

  .cd-qty-value {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
    min-width: 12px;
    text-align: center;
  }

  /* ---------- Prices ---------- */

  .cd-line-item__price-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 96px;
  }

  .cd-line-item__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .cd-line-item__price {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
    text-align: end;
  }

  .cd-line-item__compare-price {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
    text-align: end;
    text-decoration: line-through;
  }

  .cd-line-item__price.cd-line-item__price--free {
    color: var(--cd-color-free);
  }

  /* ---------- Action Buttons ---------- */

  .cd-line-item__actions {
    display: flex;
    align-items: center;
  }

  .cd-action-btn {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
  }

  .cd-action-btn:hover {
    text-decoration: underline;
  }

  .cd-line-item__actions > .cd-action-btn + .cd-action-btn {
    position: relative;
    margin-left: 25px;
  }

  .cd-line-item__actions > .cd-action-btn + .cd-action-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -13px;
    width: 1px;
    height: 13px;
    background: var(--color-border);
    transform: translateY(-50%);
  }

  /* ---------- Gift Upgrades Button ---------- */

  .cd-upgrades-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px 24px;
    border: 1px solid var(--color-secondary-button-border);
    border-radius: 24px;
    background: var(--color-secondary-button-background);
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-secondary-button-text);
    cursor: pointer;
    height: 40px;
  }

  /* The author `display: flex` above beats the UA `[hidden] { display: none }`,
     so the JS `btn.hidden = true` (used to hide the CTA when a line has no
     available gift upgrades) needs this explicit override to actually hide it.
     JS also sets an inline `display:none` as the primary guard. */
  .cd-upgrades-btn[hidden] {
    display: none !important;
  }

  /* Loading/shimmer state while the availability check runs. Non-interactive so
     the shopper can't click through to the (possibly empty) upgrades panel
     before the verdict is in. Reuses the shared `cd-shimmer` skeleton animation
     and keeps the button's own box (width/height/radius) as the skeleton bar. */
  .cd-upgrades-btn.cd-upgrades-btn--loading,
  .cd-upgrades-btn.cd-upgrades-btn--loading:hover {
    pointer-events: none;
    cursor: default;
    color: transparent;
    border-color: transparent;
    background: linear-gradient(
      90deg,
      rgb(var(--color-foreground-rgb) / var(--opacity-8)) 25%,
      rgb(var(--color-foreground-rgb) / var(--opacity-15)) 50%,
      rgb(var(--color-foreground-rgb) / var(--opacity-8)) 75%
    );
    background-size: 200% 100%;
    animation: cd-shimmer 1.5s infinite;
    opacity: 1;
  }

  .cd-upgrades-btn:hover {
    background: var(--color-secondary-button-hover-background);
    color: var(--color-secondary-button-hover-text);
    border-color: var(--color-secondary-button-hover-border);
  }

  /* ---------- Personalize Your Gift ---------- */

  .cd-personalize {
    padding: 24px 16px 32px;
    background: var(--cd-personal-message-bg);
  }

  .cd-personalize__steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .cd-personalize__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .cd-personalize__header {
    display: flex;
    gap: 8px;
  }

  .cd-personalize__header-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .cd-personalize__title {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--md);
    line-height: var(--font-body-regular--line-height);
    color: var(--color-foreground);
  }

  .cd-personalize__subtitle {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
  }

  .cd-personalize__cards {
    display: flex;
    gap: 16px;
  }

  .cd-personalize__card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    box-shadow: 0 3px 5px rgb(var(--color-shadow-rgb) / var(--opacity-5));
  }

  .cd-personalize__card-icon {
    width: 32px;
    height: 32px;
    overflow: hidden;
  }

  .cd-personalize__card-icon img {
    width: 32px;
    height: 32px;
  }

  .cd-personalize__card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  .cd-personalize__card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 24px;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    cursor: pointer;
    border: none;
    height: 24px;
  }

  .cd-personalize__card-btn--primary {
    background: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .cd-personalize__card-btn--primary:hover {
    background: var(--color-primary-button-hover-background);
    color: var(--color-primary-button-hover-text);
  }

  .cd-personalize__card-btn--secondary {
    background: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
    border: 1px solid var(--color-secondary-button-border);
  }

  .cd-personalize__card-btn--secondary:hover {
    background: var(--color-secondary-button-hover-background);
    color: var(--color-secondary-button-hover-text);
    border-color: var(--color-secondary-button-hover-border);
  }

  /* Processing state — while saving/removing a message option, fade related
     message UI until the cart mutation completes and the drawer refreshes.
     No spinner — just a wait cursor + opacity fade. */
  .cd-personalize--processing {
    opacity: 0.5;
    pointer-events: none;
    cursor: wait;
    transition: opacity 0.2s ease;
  }

  /* ---------- Empty State ---------- */

  .cd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 96px 24px 64px;
    text-align: center;
    flex: 1;
  }

  .cd-empty__heading {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: var(--font-size--3xl);
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--color-foreground-heading);
    margin: 0;
  }

  .cd-empty__subtitle {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--sm);
    line-height: 1.4;
    color: var(--cd-color-muted);
    margin: 8px 0 0;
  }

  .cd-collection-grid {
    display: grid;
    grid-template-columns: repeat(2, 154px);
    column-gap: 24px;
    row-gap: 24px;
    width: auto;
    margin-top: 32px;
    justify-content: center;
  }

  .cd-collection-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }

  .cd-collection-tile__img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgb(0 0 0 / 5%);
  }

  .cd-collection-tile:nth-child(4n + 1) .cd-collection-tile__img-wrap,
  .cd-collection-tile:nth-child(4n + 4) .cd-collection-tile__img-wrap {
    background-color: var(--cd-tile-bg-1, #fbf7f5);
  }

  .cd-collection-tile:nth-child(4n + 2) .cd-collection-tile__img-wrap,
  .cd-collection-tile:nth-child(4n + 3) .cd-collection-tile__img-wrap {
    background-color: var(--cd-tile-bg-2, #f2e7df);
  }

  .cd-collection-tile__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cd-collection-tile__img-placeholder {
    width: 100%;
    height: 100%;
  }

  .cd-collection-tile__title {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: 1.4;
    color: var(--color-foreground-heading);
    text-align: center;
  }

  /* ---------- Footer ---------- */

  .cd-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: var(--color-background);
    box-shadow: 0 -5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
    border-radius: 0 0 8px 8px;
    z-index: 2;
  }

  .cd-footer__delivery {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  /* Needs !important to beat the `display: flex` above, which is on the same
     element rather than a parent. */
  .cd-footer__delivery.is-hidden {
    display: none !important;
  }

  /* The delivery total closes the fee group: a hairline above it says "sum of the
     rows above", which is what it is. Same type as the rows it totals. */
  .cd-footer__delivery--total {
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
  }

  /* Placeholder for the fee row. Reuses .cd-skeleton's shimmer; sized to the row it
     replaces so the footer doesn't jump when the real value lands. */
  .cd-footer__fee-skeleton {
    height: 20px;
    border-radius: 4px;
  }

  .cd-footer__fee-skeleton.is-hidden {
    display: none;
  }

  .cd-footer__delivery-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-foreground-heading);
  }

  /* Lines the surcharge label up with the fee label's TEXT rather than its icon:
     14px of icon plus the 6px gap above. The surcharge row carries no icon — it names
     a charge, not a delivery window — and left flush it would read as a separate
     total instead of part of the same delivery charge. */
  .cd-footer__delivery-label--indent {
    padding-inline-start: 20px;
  }

  .cd-footer__delivery-label svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .cd-footer__delivery-text {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: inherit;
  }

  .cd-footer__delivery-price {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground-heading);
    text-align: end;
  }

  .cd-footer__delivery-original {
    text-decoration: line-through;
    color: var(--color-foreground-muted);
    font-weight: 400;
  }

  .cd-footer__delivery-free {
    color: var(--color-primary-button-background, #e10600);
    font-weight: 600;
    text-transform: uppercase;
  }

  .cd-footer__subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .cd-footer__subtotal-label {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--md);
    line-height: var(--font-body-regular--line-height);
    color: var(--color-foreground-heading);
  }

  .cd-footer__subtotal-price {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--md);
    line-height: var(--font-body-regular--line-height);
    color: var(--color-foreground-heading);
  }

  /* While the cart is loading (skeleton line items via #showLoading, or a busy
     mutation), shimmer the subtotal instead of showing the stale amount. */
  .cd-loading-active .cd-footer__subtotal-price,
  .cd-drawer--busy .cd-footer__subtotal-price {
    color: transparent;
    min-width: 72px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: cd-subtotal-shimmer 1.4s ease infinite;
  }

  @keyframes cd-subtotal-shimmer {
    0% {
      background-position: 100% 0;
    }
    100% {
      background-position: 0 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cd-loading-active .cd-footer__subtotal-price,
    .cd-drawer--busy .cd-footer__subtotal-price {
      animation: none;
    }
  }

  /* Pre-checkout validation error. Sits directly above the checkout button so the
     reason and the blocked action are read together. Same treatment as
     .catering-cart-bar__error and .fulfillment-drawer__error. */
  .cd-footer__error {
    margin: 0 0 8px 0;
    font-size: 12px;
    line-height: 1.4;
    color: #e10600;
    text-align: center;
  }

  .cd-footer__error.is-hidden {
    display: none;
  }

  .cd-footer__checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 4px 24px;
    border-radius: 24px;
    background: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: none;
  }

  /* Held unusable while the delivery fee is still resolving — checking out against a
     total that's about to change is the thing this prevents. `pointer-events: none`
     covers mouse and touch; the JS guard in #handleCheckoutClick covers a keyboard
     activation on an already-focused link, which pointer-events doesn't. */
  .cd-footer__checkout.is-disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
  }

  .cd-footer__checkout:hover {
    background: var(--color-primary-button-hover-background);
  }

  /* Block checkout while the cart is loading / a mutation is in flight.
     Disabled state matches the Bundle Builder footer CTAs (grey bg, white text). */
  .cd-loading-active .cd-footer__checkout,
  .cd-drawer--busy .cd-footer__checkout {
    pointer-events: none;
    background: #aaaaaa;
    color: #ffffff;
    opacity: 1;
  }

  /* ---------- Variant Panel (subview) ---------- */

  .cd-variant-panel {
    position: absolute;
    inset: 0;
    background: var(--color-background);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 3;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.2s ease,
      visibility 0.2s ease;
  }

  .cd-variant-panel[aria-hidden='true'] {
    visibility: hidden;
    transform: translateX(100%);
  }

  .cd-variant-panel[aria-hidden='false'] {
    visibility: visible;
    transform: translateX(0);
  }

  .cd-variant-panel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--color-background);
    box-shadow: 0 5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
  }

  .cd-variant-panel__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
    flex-shrink: 0;
  }

  .cd-variant-panel__back svg {
    width: 24px;
    height: 24px;
  }

  .cd-variant-panel__title {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: var(--font-size--xl);
    line-height: var(--font-display--line-height);
    color: var(--cd-color-muted);
    margin: 0;
    text-align: start;
    flex: 1;
    min-width: 0;
  }

  .cd-variant-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
    flex-shrink: 0;
  }

  .cd-variant-panel__close svg {
    width: 24px;
    height: 24px;
  }

  .cd-variant-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .cd-variant-product-title {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--md);
    line-height: var(--font-body-regular--line-height);
    color: var(--color-foreground);
    margin: 0;
  }

  .cd-variant-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .cd-variant-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    cursor: pointer;
    width: 100%;
    text-align: start;
  }

  .cd-variant-card--selected {
    border-color: var(--color-foreground);
  }

  .cd-variant-card__image {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }

  .cd-variant-card__image-bg {
    position: absolute;
    inset: 0;
    background: var(
      --cd-product-media-gradient,
      linear-gradient(180deg, var(--cd-color-gradient-start) 0%, var(--cd-color-gradient-end) 100%)
    );
    border-radius: 4px;
  }

  .cd-variant-card__image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  .cd-variant-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
  }

  .cd-variant-card__title {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
  }

  .cd-variant-card__prices,
  .cd-addon-card__prices,
  .cd-addon-variant-card__prices {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }

  .cd-variant-card__price,
  .cd-addon-card__price,
  .cd-addon-variant-card__price {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
  }

  .cd-variant-card__compare-price,
  .cd-addon-card__compare-price,
  .cd-addon-variant-card__compare-price {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
  }

  .cd-variant-card__compare-price,
  .cd-addon-card__compare-price,
  .cd-addon-variant-card__compare-price {
    text-decoration: line-through;
  }

  .cd-variant-card__delivery {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
    gap: 4px;
    color: var(--cd-variant-delivery-color);
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
  }

  .cd-variant-card__delivery-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-block-start: 1px;
    background-color: currentColor;
    -webkit-mask: var(--cd-variant-delivery-icon) center / contain no-repeat;
    mask: var(--cd-variant-delivery-icon) center / contain no-repeat;
  }

  .cd-variant-card__delivery-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .cd-variant-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--cd-color-muted);
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    text-align: center;
  }

  .cd-variant-panel__footer {
    flex: 0 0 auto;
    padding: 16px;
    background: var(--color-background);
    box-shadow: 0 -5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
    border-radius: 0 0 8px 8px;
  }

  .cd-variant-panel__update {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 4px 24px;
    border: none;
    border-radius: 24px;
    background: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    cursor: pointer;
  }

  .cd-variant-panel__update:hover {
    background: var(--color-primary-button-hover-background);
  }

  .cd-variant-panel__update:disabled {
    background: #aaaaaa;
    color: #ffffff;
    opacity: 1;
    cursor: not-allowed;
  }

  /* While an item update is processing: fade the panel content and show a
     wait cursor, but keep the variant list visible (do not clear it). */
  .cd-variant-panel__body--processing {
    opacity: 0.5;
    cursor: wait;
  }

  .cd-variant-panel__body--processing * {
    cursor: wait !important;
  }

  .cd-variant-panel__body--processing .cd-variant-list {
    pointer-events: none;
  }

  /* ---------- Grouped child line items ---------- */

  .cd-child-group {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-block-start: 16px;
    margin-inline-start: 50px;
  }

  .cd-child-group__label {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    letter-spacing: 0.12px;
    color: var(--color-foreground);
    text-transform: uppercase;
  }

  /* CYO box contents — collapsible group styled like the child group; the flavour
     children below are read-only (no qty/price/remove), showing only a count. */
  /* CYO box contents live in the parent's info column, right under the box label.
     Top-align the column (instead of space-between) so the toggle sits tight under
     the label with a minimal gap. */
  /* Push the qty control to the bottom (keeps the space-between feel) so the
     accordion packs tight under the label with the gap sitting below it. Sibling
     selector → applies only when the accordion is present, no :has needed. */
  .cd-cyo-groups ~ .cd-line-item__qty-selector {
    margin-block-start: auto;
  }

  /* Wrapper around the CYO dropdowns (combinations + gift wrap). Owns the outer
     spacing and the gap BETWEEN the two, so a single margin sits between them
     (not both groups' margins doubled). On mobile it occupies the one middle grid
     row, so the two dropdowns stack inside it instead of overlapping. */
  .cd-cyo-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-block-start: 4px;
    margin-block-end: 8px;
  }

  /* Spacing between the groups is the wrapper's gap; the groups carry none. */
  .cd-cyo-groups .cd-cyo-group {
    margin-block: 0;
  }

  /* Toggle button (reset native button styling). */
  .cd-cyo-group__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: start;
    color: inherit;
  }

  .cd-cyo-group__label {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    letter-spacing: 0.12px;
    color: var(--color-foreground);
    text-transform: uppercase;
  }

  .cd-cyo-group__chevron {
    flex-shrink: 0;
    color: var(--color-foreground);
    transition: transform 0.2s ease;
  }

  .cd-cyo-group__summary[aria-expanded='true'] .cd-cyo-group__chevron {
    transform: rotate(180deg);
  }

  /* Collapsed by default; animate open/close the same way as Horizon's native
     accordion component (block-size: auto via interpolate-size, no fixed cap). */
  .cd-cyo-group__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    block-size: 0;
    margin-block-start: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition:
      block-size var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing),
      margin-block-start var(--animation-speed-slow) var(--animation-easing);
  }

  .cd-cyo-group__summary[aria-expanded='true'] + .cd-cyo-group__items {
    block-size: auto;
    margin-block-start: 10px;
    opacity: 1;

    @starting-style {
      block-size: 0;
      margin-block-start: 0;
      opacity: 0;
    }
  }

  /* Read-only flavour child: smaller image, no border (the parent card already
     has one), no qty/price/actions — just the name (+ LTO tag) and a "×N" count. */
  .cd-child-item--cyo .cd-child-item__card {
    border: none;
    padding: 0;
    gap: 0;
  }

  .cd-child-item--cyo .cd-child-item__top {
    gap: 10px;
    align-items: center;
  }

  /* No media-gradient background for CYO flavour images (matches the PDP). */
  .cd-child-item--cyo .cd-child-item__image-bg {
    display: none;
  }

  .cd-child-item--cyo .cd-child-item__image {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
  }

  .cd-child-item--cyo .cd-child-item__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
  }

  /* 12px title on desktop too (mobile is already 12px). */
  .cd-child-item--cyo .cd-child-item__name {
    font-size: var(--font-size--2xs);
  }

  /* "Limited Time Only" highlight on CYO child items. Label type (12px) at
     weight 500; color is merchant-controlled via a section setting. */
  .cd-child-item__tag {
    font-size: var(--font-label--size);
    line-height: var(--font-label--line-height);
    font-weight: 500;
    color: var(--cd-cyo-tag-color, #526f1b);
  }

  /* Inline "×N" right after the flavour title. */
  .cd-child-item__count {
    font-weight: 500;
    color: var(--cd-color-muted);
    white-space: nowrap;
  }

  /* Mobile: smaller CYO flavour image; the info column becomes display:contents
     here (dissolves into the details grid), so place the accordion full-width in
     the middle row between the title and the qty control. */
  @media screen and (max-width: 749px) {
    .cd-child-item--cyo .cd-child-item__image {
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
    }

    /* The wrapper (not each group) takes the single middle row, so the two
       dropdowns stack inside it instead of both claiming row 2 and overlapping. */
    .cd-cyo-groups {
      grid-column: 1 / -1;
      grid-row: 2;
      margin-block: 0;
    }
  }

  .cd-child-item {
    position: relative;
  }

  .cd-child-item__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
  }

  .cd-child-item__top {
    display: flex;
    gap: 12px;
    align-items: stretch;
  }

  .cd-child-item__image {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }

  .cd-child-item__image-bg {
    position: absolute;
    inset: 0;
    background: var(
      --cd-product-media-gradient,
      linear-gradient(180deg, var(--cd-color-gradient-start) 0%, var(--cd-color-gradient-end) 100%)
    );
    border-radius: 4px;
  }

  .cd-child-item__image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  .cd-child-item__details {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    gap: 8px;
  }

  .cd-child-item__meta {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* ---- Numbers & Letters cart-line personalization editor ---- */
  /* Sits in the SAME bottom-left cell as the qty selector — only one of the two
     ever renders for a given line (qty stepper for normal add-ons, input for N&L). */
  .cd-nl-field {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  /* Upgrades ("View gift upgrades") panel N&L card ONLY — the field sits in the
     right grid column of row 1 (title is the left column). Scoped via the
     panel-card wrapper so the cart-line N&L edit (which also uses .cd-nl-field)
     is unaffected. */
  .cd-addon-card__info--nl > .cd-nl-field {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    min-width: 0;
    margin-left: 0;
    align-items: flex-end;
    text-align: left;
  }

  .cd-nl-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .cd-nl-input {
    flex: 0 0 auto;
    width: 100px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
    background: var(--color-background);
  }

  .cd-nl-input:focus {
    outline: none;
    border-color: var(--color-foreground);
  }

  .cd-nl-input--locked {
    background: #f7f7f7;
    cursor: pointer;
  }

  .cd-nl-input[data-nl-cart-type='letter'],
  .cd-nl-input[data-nl-panel-type='letter'] {
    text-transform: uppercase;
  }

  .cd-nl-info {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--cd-color-muted);
  }

  .cd-addon-card__info--nl .cd-nl-info {
    text-align: right;
  }

  /* N&L card in the "View gift upgrades" selection panel. Two rows via grid:
     row 1 = title (left column) + input/info field (right column); row 2 =
     price (left) + Add (right), spanning both columns. Compound selector needed
     to beat the base `.cd-addon-card__info { display: grid }` rule that comes
     later in the file (this overrides its columns/rows). */
  .cd-addon-card__info.cd-addon-card__info--nl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 12px;
    row-gap: 12px;
  }

  .cd-addon-card__info--nl > .cd-addon-card__title {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    align-self: start;
  }

  .cd-addon-card__nl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .cd-addon-card__info--nl > .cd-addon-card__nl-foot {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .cd-addon-card__btn:disabled {
    background: #aaaaaa;
    border-color: #aaaaaa;
    color: #fff;
    cursor: not-allowed;
  }

  .cd-nl-edit {
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    color: var(--color-primary-button-background, #e10600);
    text-decoration: underline;
    cursor: pointer;
  }

  /* iOS zooms the viewport when a focused input is < 16px. Keep the real
     font-size at 16px to suppress the zoom, then scale it down so it renders at
     its 14px (--font-size--sm) desktop size (transforms don't affect layout, so
     the field keeps its width; left origin keeps the text left-aligned). */
  @media screen and (max-width: 749px) {
    .cd-nl-input {
      font-size: 16px;
      transform: scale(0.875);
      transform-origin: left center;
    }
  }

  .cd-child-item__qty-selector {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 4px 8px;
    background: var(--color-background);
    width: fit-content;
    flex: 0 0 auto;
  }

  .cd-child-item__name {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
  }

  .cd-child-item__prices {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .cd-child-item__price {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
  }

  .cd-child-item__price--free {
    color: var(--cd-color-free);
  }

  .cd-child-item__compare-price {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
    text-decoration: line-through;
  }

  .cd-child-item__price-breakdown {
    margin-top: 2px;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--cd-color-muted);
    white-space: nowrap;
  }

  .cd-child-item__actions {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    display: flex;
    justify-content: flex-end;
  }

  /* Busy state for child items */
  .cd-drawer--busy .cd-child-item .cd-action-btn,
  .cd-drawer--busy .cd-child-item .cd-qty-btn {
    pointer-events: none;
  }

  /* ---------- Gift Wrap Subheading (in Edit Panel, above variants) ---------- */

  .cd-gift-wrap-header {
    /* Sit close under the title; the body's 16px flex gap handles the space below. */
    margin-block-start: -8px;
  }

  .cd-gift-wrap-header__subtitle {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
  }

  .cd-gift-wrap-learn-more-link {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .cd-gift-wrap-learn-more-link:hover {
    color: var(--color-foreground);
  }

  /* ---------- Gift Wrap Learn More Subview ---------- */

  .cd-gift-wrap-learn-more {
    position: absolute;
    inset: 0;
    background: var(--color-background);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 4;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.2s ease,
      visibility 0.2s ease;
  }

  .cd-gift-wrap-learn-more[aria-hidden='true'] {
    visibility: hidden;
    transform: translateX(100%);
  }

  .cd-gift-wrap-learn-more[aria-hidden='false'] {
    visibility: visible;
    transform: translateX(0);
  }

  .cd-gift-wrap-learn-more__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 20px 16px;
    background: var(--color-background);
    box-shadow: 0 5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
    position: relative;
    flex: 0 0 auto;
  }

  .cd-gift-wrap-learn-more__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
  }

  .cd-gift-wrap-learn-more__back svg {
    width: 24px;
    height: 24px;
  }

  .cd-gift-wrap-learn-more__title {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: var(--font-size--xl);
    line-height: var(--font-display--line-height);
    color: var(--cd-color-muted);
    margin: 0;
    text-align: start;
    flex: 1;
  }

  .cd-gift-wrap-learn-more__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
  }

  .cd-gift-wrap-learn-more__close svg {
    width: 24px;
    height: 24px;
  }

  .cd-gift-wrap-learn-more__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
  }

  /* ---------- Add-On Variant Label (child item) ---------- */

  .cd-child-item__variant-label,
  .cd-child-item__qty-label {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--cd-color-muted);
  }

  /* Add-on group name shown as a small eyebrow above the child name. */
  .cd-child-item__category {
    display: block;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--cd-color-muted);
  }

  /* ---------- Add-Ons Panel (subview) ---------- */

  .cd-addons-panel {
    position: absolute;
    inset: 0;
    background: var(--color-background);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 3;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.2s ease,
      visibility 0.2s ease;
  }

  .cd-addons-panel[aria-hidden='true'] {
    visibility: hidden;
    transform: translateX(100%);
  }

  .cd-addons-panel[aria-hidden='false'] {
    visibility: visible;
    transform: translateX(0);
  }

  .cd-addons-panel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--color-background);
    box-shadow: 0 5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
    flex: 0 0 auto;
  }

  .cd-addons-panel__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
    flex-shrink: 0;
  }

  .cd-addons-panel__back svg {
    width: 24px;
    height: 24px;
  }

  .cd-addons-panel__title {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: var(--font-size--xl);
    line-height: var(--font-display--line-height);
    color: var(--cd-color-muted);
    margin: 0;
    text-align: start;
    flex: 1;
    min-width: 0;
  }

  .cd-addons-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
    flex-shrink: 0;
  }

  .cd-addons-panel__close svg {
    width: 24px;
    height: 24px;
  }

  .cd-addons-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .cd-addons-loading {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .cd-skeleton--addon {
    height: 100px;
  }

  /* ---- Group tabs (add-ons) — styled to match the personalization drawer ---- */
  .cd-addon-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 0 0 auto;
  }

  .cd-addon-tabs::-webkit-scrollbar {
    display: none;
  }

  .cd-addon-tab {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: 0 16px 8px;
    border: none;
    background: none;
    border-bottom: 1px solid #c6c6c6;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #1d1d1d;
    white-space: nowrap;
    cursor: pointer;
    transition:
      border-color 0.15s ease,
      font-weight 0.15s ease;
  }

  .cd-addon-tab--active {
    border-bottom-color: #1d1d1d;
    font-weight: 600;
  }

  .cd-addons-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .cd-addons-hint {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--cd-color-muted);
  }

  /* EA-4309: a pick-one upgrade group in the Upgrades tab — name + hint, then its cards slightly indented; extra space around each group. */
  .cd-upgrade-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .cd-addons-list > .cd-upgrade-group + *,
  .cd-addons-list > * + .cd-upgrade-group {
    margin-block-start: 12px;
  }

  .cd-upgrade-group__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-inline-start: 12px;
  }

  .cd-upgrade-group__label {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6px;
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
  }

  .cd-upgrade-group__name {
    font-weight: 600;
    color: var(--color-foreground);
  }

  .cd-upgrade-group__hint {
    font-weight: 400;
    color: var(--cd-color-muted);
  }

  .cd-addon-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    align-items: flex-start;
  }

  .cd-addon-card__image {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }

  .cd-addon-card__image-bg {
    position: absolute;
    inset: 0;
    background: var(
      --cd-product-media-gradient,
      linear-gradient(180deg, var(--cd-color-gradient-start) 0%, var(--cd-color-gradient-end) 100%)
    );
    border-radius: 4px;
  }

  .cd-addon-card__image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  .cd-addon-card__info {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 4px;
    align-self: stretch;
  }

  .cd-addon-card__meta {
    display: contents;
  }

  .cd-addon-card__prices {
    grid-column: 1;
    align-self: end;
    margin-top: 4px;
  }

  .cd-addon-card__title {
    grid-column: 1;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
  }

  .cd-addon-card__desc {
    grid-column: 1;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--cd-color-muted);
  }

  .cd-addon-card__readmore {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 500;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    cursor: pointer;
  }

  /* Add / Select Options = primary button; Added = secondary/outlined button */
  .cd-addon-card__btn {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid var(--color-primary-button-border);
    border-radius: 24px;
    background: var(--color-primary-button-background);
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--color-primary-button-text);
    cursor: pointer;
    height: 24px;
    white-space: nowrap;
  }

  .cd-addon-card__btn--added {
    background: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
    border-color: var(--color-secondary-button-border);
  }

  @media (hover: hover) {
    /* :not(:disabled) — a disabled CTA (e.g. N&L Add before text is entered)
       must keep its grey disabled color on hover; without the guard this rule
       wins over `:disabled` (same specificity, later in source). */
    .cd-addon-card__btn:hover:not(:disabled) {
      background: var(--color-primary-button-hover-background);
      color: var(--color-primary-button-hover-text);
      border-color: var(--color-primary-button-hover-border);
    }

    .cd-addon-card__btn--added:hover:not(:disabled) {
      background: var(--color-secondary-button-hover-background);
      color: var(--color-secondary-button-hover-text);
      border-color: var(--color-secondary-button-hover-border);
    }
  }

  .cd-addons-panel__footer {
    flex: 0 0 auto;
    padding: 16px;
    background: var(--color-background);
    box-shadow: 0 -5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
    border-radius: 0 0 8px 8px;
  }

  .cd-addons-panel__update {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 4px 24px;
    border: none;
    border-radius: 24px;
    background: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    cursor: pointer;
  }

  .cd-addons-panel__update:hover {
    background: var(--color-primary-button-hover-background);
  }

  .cd-addons-panel__update:disabled {
    background: #aaaaaa;
    color: #ffffff;
    opacity: 1;
    cursor: not-allowed;
  }

  /* ---------- Add-On Variant Sub-Panel ---------- */

  .cd-addon-variant-panel {
    position: absolute;
    inset: 0;
    background: var(--color-background);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 4;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.2s ease,
      visibility 0.2s ease;
  }

  .cd-addon-variant-panel[aria-hidden='true'] {
    visibility: hidden;
    transform: translateX(100%);
  }

  .cd-addon-variant-panel[aria-hidden='false'] {
    visibility: visible;
    transform: translateX(0);
  }

  .cd-addon-variant-panel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--color-background);
    box-shadow: 0 5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
    flex: 0 0 auto;
  }

  .cd-addon-variant-panel__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
    flex-shrink: 0;
  }

  .cd-addon-variant-panel__back svg {
    width: 24px;
    height: 24px;
  }

  .cd-addon-variant-panel__title {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: var(--font-size--xl);
    line-height: var(--font-display--line-height);
    color: var(--cd-color-muted);
    margin: 0;
    text-align: start;
    flex: 1;
    min-width: 0;
  }

  .cd-addon-variant-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
    flex-shrink: 0;
  }

  .cd-addon-variant-panel__close svg {
    width: 24px;
    height: 24px;
  }

  .cd-addon-variant-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .cd-addon-variant-panel__product-title {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--md);
    line-height: var(--font-body-regular--line-height);
    color: var(--color-foreground);
    margin: 0;
  }

  .cd-addon-variant-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .cd-addon-variant-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    cursor: pointer;
    width: 100%;
    text-align: start;
  }

  .cd-addon-variant-card--selected {
    border-color: var(--color-foreground);
  }

  .cd-addon-variant-card__image {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }

  .cd-addon-variant-card__image-bg {
    position: absolute;
    inset: 0;
    background: var(
      --cd-product-media-gradient,
      linear-gradient(180deg, var(--cd-color-gradient-start) 0%, var(--cd-color-gradient-end) 100%)
    );
    border-radius: 4px;
  }

  .cd-addon-variant-card__image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  .cd-addon-variant-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cd-addon-variant-card__title {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
  }

  .cd-addon-variant-panel__footer {
    flex: 0 0 auto;
    padding: 16px;
    background: var(--color-background);
    box-shadow: 0 -5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
    border-radius: 0 0 8px 8px;
  }

  .cd-addon-variant-panel__confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 4px 24px;
    border: none;
    border-radius: 24px;
    background: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    cursor: pointer;
  }

  .cd-addon-variant-panel__confirm:hover {
    background: var(--color-primary-button-hover-background);
  }

  .cd-addon-variant-panel__confirm:disabled {
    background: #aaaaaa;
    color: #ffffff;
    opacity: 1;
    cursor: not-allowed;
  }

  /* Busy state for add-on panels */
  .cd-addons-panel__body--processing {
    opacity: 0.5;
    cursor: wait;
  }

  .cd-addons-panel__body--processing * {
    cursor: wait !important;
  }

  .cd-addons-panel__body--processing .cd-addons-list {
    pointer-events: none;
  }

  /* ---------- Mobile Responsive ---------- */

  @media screen and (max-width: 749px) {
    .cd-header__title-row,
    .cd-variant-panel__header,
    .cd-addons-panel__header,
    .cd-addon-variant-panel__header,
    .cd-message-panel__header,
    .cd-gc-panel__header {
      padding: 16px;
    }

    .cd-header__title {
      font-size: var(--font-size--md);
      line-height: var(--font-body-regular--line-height);
    }

    .cd-items {
      padding: 16px 16px 24px;
    }

    .cd-child-group {
      margin-inline-start: 24px;
    }

    .cd-child-item__image {
      flex: 0 0 79px;
      width: 79px;
      height: 79px;
    }

    .cd-child-item__details {
      min-height: 79px;
    }

    .cd-child-item__name,
    .cd-child-item__variant-label,
    .cd-child-item__price,
    .cd-child-item__compare-price {
      font-size: var(--font-size--2xs);
      line-height: var(--font-body-small--line-height);
    }

    .cd-child-item__actions {
      grid-column: 1 / -1;
      justify-self: end;
    }

    .cd-line-item__image {
      flex: 0 0 79px;
      width: 79px;
      height: 79px;
    }

    .cd-line-item__name {
      font-size: var(--font-size--2xs);
      line-height: var(--font-body-small--line-height);
    }

    .cd-line-item__variant {
      font-size: var(--font-size--2xs);
      line-height: var(--font-body-small--line-height);
    }

    .cd-line-item__details {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto 1fr auto;
      align-items: start;
      gap: 8px;
      min-height: 79px;
    }

    .cd-line-item__info {
      display: contents;
      min-height: 0;
    }

    .cd-line-item__meta {
      grid-column: 1;
      grid-row: 1;
    }

    .cd-line-item__qty-selector {
      grid-column: 1;
      grid-row: 3;
      align-self: end;
    }

    .cd-line-item__price-actions {
      display: contents;
      min-height: 0;
    }

    .cd-line-item__prices {
      grid-column: 2;
      grid-row: 1;
    }

    .cd-line-item__actions {
      grid-column: 1 / -1;
      grid-row: 3;
      align-self: end;
      justify-self: end;
      justify-content: flex-end;
    }

    .cd-line-item__price {
      font-size: var(--font-size--2xs);
      line-height: var(--font-body-small--line-height);
    }

    .cd-line-item__compare-price {
      font-size: var(--font-size--2xs);
      line-height: var(--font-body-small--line-height);
    }

    .cd-action-btn {
      font-size: var(--font-size--2xs);
      line-height: var(--font-body-small--line-height);
    }

    .cd-personalize__title {
      font-size: var(--font-size--sm);
      line-height: var(--font-body-small--line-height);
    }

    .cd-personalize__cards {
      gap: 8px;
    }

    .cd-personalize__card {
      gap: 12px;
    }

    .cd-personalize__card-info {
      gap: 8px;
    }

    .cd-personalize {
      padding: 24px 16px;
    }

    .cd-empty {
      padding: 71px 16px 56px;
    }

    .cd-empty__heading {
      font-size: var(--font-size--2xl);
      line-height: 1.2;
    }

    .cd-empty__subtitle {
      font-size: var(--font-size--sm);
      line-height: 1.4;
      margin-top: 6px;
    }

    .cd-collection-grid {
      column-gap: 18px;
      row-gap: 16px;
      margin-top: 32px;
    }

    .cd-collection-tile {
      gap: 8px;
    }

    /* Add-ons panel mobile overrides */
    .cd-addons-panel__body {
      padding: 16px;
    }

    .cd-addon-card__image {
      flex: 0 0 64px;
      width: 64px;
      height: 64px;
    }

    .cd-addon-card__info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-self: flex-start;
    }

    .cd-addon-card__meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 4px;
    }

    .cd-addon-card__btn {
      align-self: auto;
    }

    .cd-addon-card__desc {
      font-size: var(--font-size--2xs);
      line-height: var(--font-body-small--line-height);
    }

    .cd-addon-card__title {
      font-size: var(--font-size--2xs);
      line-height: var(--font-body-small--line-height);
    }

    .cd-variant-panel__title,
    .cd-addons-panel__title {
      font-size: var(--font-size--md);
      line-height: var(--font-body-regular--line-height);
    }

    .cd-addon-variant-panel__title {
      font-size: var(--font-size--md);
      line-height: var(--font-body-regular--line-height);
    }

    .cd-addon-variant-panel__body {
      padding: 16px;
    }

    .cd-addon-variant-card__image {
      flex: 0 0 64px;
      width: 64px;
      height: 64px;
    }

    .cd-message-panel__title {
      font-size: var(--font-size--md);
      line-height: var(--font-body-regular--line-height);
    }

    .cd-gc-panel__title {
      font-size: var(--font-size--md);
      line-height: var(--font-body-regular--line-height);
    }

    .cd-gm-content {
      padding: 16px;
      gap: 16px;
    }
  }

  /* ---------- Gift Message Panel (subview) ---------- */

  .cd-message-panel {
    position: absolute;
    inset: 0;
    background: var(--color-background);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 5;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.2s ease,
      visibility 0.2s ease;
  }

  .cd-message-panel[aria-hidden='true'] {
    visibility: hidden;
    transform: translateX(100%);
  }

  .cd-message-panel[aria-hidden='false'] {
    visibility: visible;
    transform: translateX(0);
  }

  .cd-message-panel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--color-background);
    box-shadow: 0 5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
    flex: 0 0 auto;
    z-index: 2;
  }

  .cd-message-panel__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
    flex-shrink: 0;
  }

  .cd-message-panel__back svg {
    width: 24px;
    height: 24px;
  }

  .cd-message-panel__title {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: var(--font-size--xl);
    line-height: var(--font-display--line-height);
    color: var(--cd-color-muted);
    margin: 0;
    text-align: start;
    flex: 1;
    min-width: 0;
  }

  .cd-message-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
    flex-shrink: 0;
  }

  .cd-message-panel__close svg {
    width: 24px;
    height: 24px;
  }

  .cd-message-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    box-shadow: inset 0 5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
  }

  .cd-gm-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px;
  }

  .cd-gm-description {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    color: #464646;
    margin: 0;
  }

  /* Tabs */
  .cd-gm-tabs {
    display: flex;
    overflow: hidden;
    align-items: center;
    gap: 0;
  }

  .cd-gm-tab {
    display: flex;
    justify-content: center;
    padding: 0 16px 8px;
    border: none;
    background: none;
    border-bottom: 1px solid #c6c6c6;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    text-align: center;
    color: #1d1d1d;
    cursor: pointer;
    white-space: nowrap;
    transition:
      border-color 0.15s ease,
      font-weight 0.15s ease;
  }

  .cd-gm-tab--active {
    border-bottom-color: #1d1d1d;
    font-weight: 600;
  }

  /* Panels */
  .cd-gm-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Textarea */
  .cd-gm-textarea-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .cd-gm-textarea {
    width: 100%;
    min-height: 169px;
    padding: 15.5px 16px 28px;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
    background: #ffffff;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--md);
    line-height: var(--font-body-regular--line-height);
    color: #1d1d1d;
    resize: none;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
  }

  .cd-gm-textarea::placeholder {
    color: #6b6b6b;
  }

  .cd-gm-textarea:focus {
    border-color: #464646;
  }

  .cd-gm-textarea--filled {
    border-color: #464646;
  }

  .cd-gm-textarea--error {
    border-color: #e10600;
  }

  .cd-gm-counter {
    position: absolute;
    bottom: 10px;
    right: 16px;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: #6b6b6b;
    pointer-events: none;
  }

  .cd-gm-counter--error {
    color: #e10600;
  }

  .cd-gm-error {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: #e10600;
  }

  /* Submit button */
  .cd-gm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px 24px;
    min-height: 40px;
    border-radius: 24px;
    border: none;
    background: #e10600;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .cd-gm-btn--disabled,
  .cd-gm-btn:disabled {
    background: #aaaaaa;
    cursor: not-allowed;
  }

  /* Regenerate link */
  .cd-gm-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .cd-gm-regenerate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    text-align: center;
    color: #e10600;
    text-decoration: underline;
    cursor: pointer;
  }

  /* Field (dropdown / input) */
  .cd-gm-field {
    position: relative;
  }

  .cd-gm-field__select {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    min-height: 48px;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
  }

  .cd-gm-field__select--filled,
  .cd-gm-field__select--open {
    border-color: #464646;
  }

  .cd-gm-field__label-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0;
  }

  .cd-gm-field__label {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: #6b6b6b;
    transition: font-size 0.15s ease;
  }

  .cd-gm-field__value {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: #1d1d1d;
  }

  .cd-gm-field__chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .cd-gm-field__select--open .cd-gm-field__chevron {
    transform: rotate(180deg);
  }

  .cd-gm-dropdown-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 5;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
  }

  .cd-gm-dropdown-item {
    padding: 10px 16px;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: #1d1d1d;
    cursor: pointer;
    transition: background-color 0.1s ease;
  }

  .cd-gm-dropdown-item:hover {
    background: #f5f1f1;
  }

  .cd-gm-dropdown-item--selected {
    font-weight: 600;
    background: #f5f1f1;
  }

  /* Name input */
  .cd-gm-field__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
    background: #ffffff;
    padding: 10px 16px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
  }

  .cd-gm-field__input-wrap--filled,
  .cd-gm-field__input-wrap--focused {
    border-color: #464646;
  }

  .cd-gm-field__floating-label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: #6b6b6b;
    pointer-events: none;
    transition:
      transform 0.15s ease,
      font-size 0.15s ease,
      top 0.15s ease;
  }

  .cd-gm-field__input-wrap--active .cd-gm-field__floating-label {
    top: 10px;
    transform: translateY(0);
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
  }

  .cd-gm-field__input {
    width: 100%;
    border: none;
    outline: none;
    background: none;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--md);
    line-height: var(--font-body-regular--line-height);
    color: #1d1d1d;
    padding: 0;
    margin: 0;
  }

  .cd-gm-field__input-wrap--active .cd-gm-field__input {
    padding-top: 14px;
  }

  /* Generated wrap */
  .cd-gm-generated-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Personalize card state styles */
  .cd-personalize__card-text {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    color: var(--color-foreground);
    text-align: center;
    display: block;
    overflow-wrap: anywhere;
  }

  .cd-personalize__card-added-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .cd-personalize__card-action-btn {
    font-family: var(--font-body--family);
    cursor: pointer;
  }

  /* Remove — small white (secondary) button */
  .cd-personalize__card-action-btn--remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 24px;
    background: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
    border: 1px solid var(--color-secondary-button-border);
    font-weight: 600;
    font-size: var(--font-size--2xs);
    line-height: var(--font-body-small--line-height);
    white-space: nowrap;
  }

  .cd-personalize__card-action-btn--remove:hover {
    background: var(--color-secondary-button-hover-background);
    color: var(--color-secondary-button-hover-text);
    border-color: var(--color-secondary-button-hover-border);
  }

  /* Edit / Change — red underlined link */
  .cd-personalize__card-action-btn--link {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary-button-background);
    text-decoration: underline;
    font-weight: 600;
    font-size: var(--font-size--sm);
    line-height: var(--font-body-small--line-height);
    white-space: nowrap;
  }

  @media screen and (max-width: 749px) {
    .cd-personalize__card {
      justify-content: space-between;
      min-height: 160px;
    }

    .cd-personalize__card-info {
      flex: 1;
      justify-content: space-between;
    }

    .cd-personalize__card-added-actions {
      gap: 8px;
    }

    .cd-personalize__card-action-btn--link {
      font-size: var(--font-size--2xs);
      line-height: var(--font-body-small--line-height);
    }

    .cd-personalize__card-action-btn--remove {
      min-width: 0;
      padding-inline: 12px;
    }
  }

  /* ---------- Greeting Card Panel (subview) ---------- */

  .cd-gc-panel {
    position: absolute;
    inset: 0;
    background: var(--color-background);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 5;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.2s ease,
      visibility 0.2s ease;
  }

  .cd-gc-panel[aria-hidden='true'] {
    visibility: hidden;
    transform: translateX(100%);
  }

  .cd-gc-panel[aria-hidden='false'] {
    visibility: visible;
    transform: translateX(0);
  }

  .cd-gc-panel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--color-background);
    box-shadow: 0 5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
    flex: 0 0 auto;
    z-index: 2;
  }

  .cd-gc-panel__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
    flex-shrink: 0;
  }

  .cd-gc-panel__back svg {
    width: 24px;
    height: 24px;
  }

  .cd-gc-panel__title {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: var(--font-size--xl);
    line-height: var(--font-display--line-height);
    color: var(--cd-color-muted);
    margin: 0;
    text-align: start;
    flex: 1;
    min-width: 0;
  }

  .cd-gc-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
    flex-shrink: 0;
  }

  .cd-gc-panel__close svg {
    width: 24px;
    height: 24px;
  }

  /* Body is a flex column: the occasion picker sits above a full-bleed iframe. */
  .cd-gc-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 5px 10px rgb(var(--color-shadow-rgb) / var(--opacity-5));
  }

  .cd-gc-iframe {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border: none;
    display: block;
  }

  @media screen and (max-width: 749px) {
    .cd-message-panel__header,
    .cd-gc-panel__header,
    .cd-gift-wrap-learn-more__header {
      padding: 16px;
    }

    .cd-message-panel__title,
    .cd-gc-panel__title,
    .cd-gift-wrap-learn-more__title {
      font-size: var(--font-size--md);
      line-height: var(--font-body-regular--line-height);
    }
  }

  /* ===== Add more, save more (Bundle Builder upsell) =====
     Shares the same #fbf7f5 "Personalize your gift" surface as the message section
     that follows it (Figma 7748:123273): 16px side padding, 24px top/bottom, with a
     divider line separating it from "Add a personal message" below. */
  .cd-add-more {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 16px;
    background: var(--cd-personal-message-bg);
    border-bottom: 1px solid #e2ccbb;
  }

  .cd-add-more__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .cd-add-more__title {
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-black-light, #464646);
  }

  .cd-add-more__subtitle {
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-black-secondary, #1d1d1d);
  }

  /* Remove state (toggled by bb-product-card-cta.js): white pill, matching Figma. */
  .cd-add-more .bb-card__action.bb-cta--remove {
    background: #ffffff;
    color: #1d1d1d;
    border: 1px solid #ededed;
  }

  .cd-add-more .bb-card__action.bb-cta--remove:hover {
    background: #f5f5f5;
  }

  /* Loading state while an add/remove request is in flight: hide the label, show a
     spinner, and a not-allowed cursor (mirrors the bundle-builder page CTA). Clicks
     are already ignored in JS via the data-cd-loading guard, so pointer-events stay
     enabled to keep the not-allowed cursor visible. */
  .cd-add-more .bb-card__action.bb-cta--loading {
    color: transparent;
    position: relative;
    cursor: not-allowed;
  }

  .cd-add-more .bb-card__action.bb-cta--loading::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 16px;
    height: 16px;
    margin-block-start: -8px;
    margin-inline-start: -8px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: cd-add-more-spin 0.6s linear infinite;
  }

  /* Remove state = white button, so the spinner needs a dark color. */
  .cd-add-more .bb-card__action.bb-cta--remove.bb-cta--loading::after {
    border-color: rgba(29, 29, 29, 0.35);
    border-top-color: #1d1d1d;
  }

  @keyframes cd-add-more-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cd-add-more .bb-card__action.bb-cta--loading::after {
      animation-duration: 1.5s;
    }
  }
/* END_SECTION:ea-cart-drawer */

/* START_SECTION:ea-mission-values (INDEX:25) */
/* .section handles horizontal gutters via --page-margin (16px→40px→64px) */
.ea-mission-values {
  padding-block-start: var(--ea-mv-pt, 64px);
  padding-block-end: var(--ea-mv-pb, 80px);
}

.ea-mission-values__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  width: 100%;
}

/* ── Header ─────────────────────────────────────────────── */
.ea-mission-values__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  max-width: 838px;
  width: 100%;
}

.ea-mission-values__heading {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.96px;
  color: var(--color-foreground-heading);
  margin: 0;
  max-width: 596px;
}

.ea-mission-values__subtext {
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-foreground);
  margin: 0;
  width: 100%;
}

/* ── Cards row (desktop) ─────────────────────────────────── */
.ea-mission-values__cards {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  align-items: stretch;
}

/* Card: COLUMN on desktop — icon top, text bottom */
.ea-mission-values__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1 0 0;
  min-width: 0;
  padding: 24px;
  background-color: var(--ea-mv-card-bg, #fbf7f5);
  border-radius: 16px;
  align-items: flex-start;
}

.ea-mission-values__card-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.ea-mission-values__card-icon-img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  display: block;
}

.ea-mission-values__card-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.ea-mission-values__card-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--color-foreground-heading);
  margin: 0;
}

.ea-mission-values__card-desc {
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-foreground-heading);
  margin: 0;
}

/* ── Tablet only: horizontal scroll, full-bleed ─────────── */
@media screen and (min-width: 750px) and (max-width: 989px) {
  /* let cards visually overflow the grid column */
  .ea-mission-values,
  .ea-mission-values__inner {
    overflow: visible;
  }

  .ea-mission-values__cards {
    /* break out of the section's 40px page margins */
    width: calc(100% + 80px);
    margin-inline: -40px;
    padding-inline: 40px;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .ea-mission-values__cards::-webkit-scrollbar {
    display: none;
  }

  .ea-mission-values__card {
    flex: 0 0 264px;
    min-width: 264px;
  }
}

/* ── Mobile: vertical stacked cards ─────────────────────── */
@media screen and (max-width: 749px) {
  .ea-mission-values {
    padding-block-start: 48px;
    padding-block-end: 40px;
  }

  .ea-mission-values__inner {
    gap: 0;
    align-items: flex-start;
  }

  .ea-mission-values__header {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
    padding-block-end: 40px;
    padding-inline: 0;
  }

  .ea-mission-values__heading {
    font-size: 32px;
    letter-spacing: -0.64px;
    max-width: 100%;
  }

  .ea-mission-values__cards {
    flex-direction: column;
    gap: 12px;
  }

  /* Card: ROW on mobile — icon left, text right */
  .ea-mission-values__card {
    flex-direction: row;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    align-items: flex-start;
  }

  .ea-mission-values__card-icon {
    width: 48px;
    height: 48px;
  }

  .ea-mission-values__card-icon-img {
    width: 48px !important;
    height: 48px !important;
  }

  .ea-mission-values__card-text {
    gap: 4px;
  }

  .ea-mission-values__card-title {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.4;
  }

  .ea-mission-values__card-desc {
    font-size: 14px;
  }
}
/* END_SECTION:ea-mission-values */

/* START_SECTION:ea-rewards-perks-chart (INDEX:26) */
.ea-perks-chart {
  padding-block-start: var(--ea-pc-pt, 80px);
  padding-block-end: var(--ea-pc-pb, 80px);
}

.ea-perks-chart__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  width: 100%;
}

.ea-perks-chart__heading {
  font-size: 48px;
  font-weight: 600;
  line-height: 58px;
  letter-spacing: -0.96px;
  text-align: center;
  color: var(--color-foreground-heading);
  margin: 0;
}

/* ── Card ─────────────────────────────────────────────────── */
.ea-perks-chart__card {
  max-width: 810px;
  width: 100%;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.05);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: #000000;
}

/* ── Grid rows (shared) ───────────────────────────────────── */
.ea-perks-chart__header-row,
.ea-perks-chart__row {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  align-items: center;
  padding-inline: 24px;
}

/* ── Header row ───────────────────────────────────────────── */
.ea-perks-chart__cell--label {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.ea-perks-chart__cell--tier-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.ea-perks-chart__cell--tier-1 { color: #E10600; }
.ea-perks-chart__cell--tier-2 { color: #8E4403; }
.ea-perks-chart__cell--tier-3 { color: #696969; }
.ea-perks-chart__cell--tier-4 { color: #A97000; }

/* ── Body ─────────────────────────────────────────────────── */
.ea-perks-chart__body {
  padding-inline: 24px;
}

.ea-perks-chart__row {
  padding-block: 12px;
  padding-inline: 0;
  border-bottom: 1px solid #E9E9E9;
}

.ea-perks-chart__row--last {
  border-bottom: none;
}

.ea-perks-chart__cell--perk-name {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.ea-perks-chart__cell--value {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Rosette icon ─────────────────────────────────────────── */
.ea-perks-chart__icon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media screen and (max-width: 749px) {
  .ea-perks-chart {
    padding-block-start: 48px;
    padding-block-end: 48px;
  }

  .ea-perks-chart__heading {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }

  .ea-perks-chart__card {
    padding: 8px 0;
    gap: 9px;
  }

  .ea-perks-chart__header-row {
    padding-inline: 4px 0;
  }

  .ea-perks-chart__cell--label {
    font-size: 12px;
    line-height: 18px;
    padding-inline-start: 5px;
  }

  .ea-perks-chart__cell--tier-name {
    font-size: 12px;
    line-height: 18px;
  }

  .ea-perks-chart__body {
    padding-inline: 8px;
  }

  .ea-perks-chart__row {
    padding-block: 8px;
  }

  .ea-perks-chart__cell--perk-name {
    font-size: 12px;
    line-height: 17px;
  }

  .ea-perks-chart__cell--value {
    font-size: 12px;
    line-height: 17px;
  }
}
/* END_SECTION:ea-rewards-perks-chart */

/* START_SECTION:ea-rewards-steps (INDEX:27) */
.ea-rewards-steps {
  padding-block-start: var(--ea-rs-pt, 64px);
  padding-block-end: var(--ea-rs-pb, 80px);
}

.ea-rewards-steps__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  width: 100%;
}

/* ── Text Section ────────────────────────────────────────── */
.ea-rewards-steps__text-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  max-width: 838px;
  text-align: center;
}

.ea-rewards-steps__heading {
  font-size: 48px;
  font-weight: 600;
  line-height: 58px;
  letter-spacing: -0.96px;
  text-align: center;
  color: var(--color-foreground-heading);
  margin: 0;
}

.ea-rewards-steps__subheading {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  color: #464646;
  margin: 0;
}

/* ── Card ────────────────────────────────────────────────── */
.ea-rewards-steps__card {
  width: 100%;
  background-color: var(--ea-rs-card-bg, #FBF7F5);
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  padding: 48px 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: center;
}

/* ── Steps Row ───────────────────────────────────────────── */
.ea-rewards-steps__steps {
  display: flex;
  flex-direction: row;
  gap: 32px;
  justify-content: center;
  width: 100%;
}

/* ── Individual Step ─────────────────────────────────────── */
.ea-rewards-steps__step {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  flex: 1;
}

.ea-rewards-steps__step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--ea-rs-step-num-bg, #EBDCD0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ea-rewards-steps__step-number span {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: #1D1D1D;
}

.ea-rewards-steps__step-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.ea-rewards-steps__step-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: -0.64px;
  text-align: center;
  color: #464646;
  margin: 0;
}

.ea-rewards-steps__step-desc {
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  text-align: center;
  color: #1D1D1D;
  margin: 0;
}

/* ── CTA Button ──────────────────────────────────────────── */
.ea-rewards-steps__cta {
  display: flex;
  justify-content: center;
  width: 100%;
}

.ea-rewards-steps__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 24px;
  border-radius: 24px;
  background-color: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  min-height: 40px;
  transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
}

.ea-rewards-steps__button:hover {
  background-color: var(--color-primary-button-hover-background);
  color: var(--color-primary-button-hover-text);
}

/* ── Mobile ──────────────────────────────────────────────── */
@media screen and (max-width: 749px) {
  .ea-rewards-steps {
    padding-block-start: 32px;
    padding-block-end: 32px;
  }

  .ea-rewards-steps__inner {
    gap: 32px;
  }

  .ea-rewards-steps__heading {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }

  .ea-rewards-steps__card {
    padding: 32px 24px;
  }

  .ea-rewards-steps__steps {
    flex-direction: column;
  }

  .ea-rewards-steps__step {
    gap: 8px;
  }

  .ea-rewards-steps__step-number {
    width: 24px;
    height: 24px;
  }

  .ea-rewards-steps__step-number span {
    font-size: 14px;
    line-height: 20px;
  }

  .ea-rewards-steps__step-title {
    font-size: 20px;
    line-height: 24px;
  }

  .ea-rewards-steps__button {
    width: 100%;
  }
}
/* END_SECTION:ea-rewards-steps */

/* START_SECTION:faq-tabbed (INDEX:28) */
.faq-tabbed-section {
    position: relative;
    /* Keep Horizon's .section grid (margin columns + center column) so
       page-width/full-width get their horizontal padding. Do NOT set
       display:flex here — that would collapse the grid and full-bleed content. */
    /* Chocolate-100 divider tint — no global brand var exists for it, so scope
       it here and reuse below. */
    --faq-divider-color: #f2e7df;
  }

  /* Summary header layout (moved off Tailwind utilities:
     tw-flex/items-center/justify-between/gap-4/p-0/mb-0/cursor-pointer/list-none). */
  .faq-tabbed-section .details--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    list-style: none;
  }

  .faq-tabbed-section .details--header::-webkit-details-marker {
    display: none;
  }

  /* Open FAQ: gap between question (summary) and answer, on all viewports. */
  .faq-tabbed-section details[open] .details--header {
    margin-bottom: 16px;
  }

  /* Accordion row — 16px vertical padding on all viewports. */
  .faq-tabbed-section .details {
    padding-block: 16px;
  }

  /* Optional divider (moved off tw-border-b / tw-border-chocolate-100). */
  .faq-tabbed-section .details--divider {
    border-bottom: 1px solid var(--faq-divider-color);
  }

  /* Question label (moved off tw-min-w-0 / tw-flex-1 / tw-font-semibold / tw-text-brand-black
     plus the inline font-size:16px / line-height:22px). */
  .faq-tabbed-section .details--question {
    min-width: 0;
    flex: 1 1 0%;
    font-weight: 600;
    font-size: var(--font-size--md);
    line-height: var(--line-height--body);
    color: var(--color-black-secondary);
  }

  /* Toggle icon (moved off tw-flex / tw-h-6 / tw-w-6 / tw-shrink-0 / tw-items-center / tw-justify-center / tw-text-brand-black). */
  .faq-tabbed-section .details--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-black-secondary);
  }

  /* Answer body (moved off tw-leading-[1.4] / tw-text-secondary-500 plus the
     inline font-size:14px / line-height:20px). */
  .faq-tabbed-section .details--answer {
    font-size: var(--font-size--sm);
    line-height: var(--line-height--body);
    color: var(--color-black-light);
  }

  faq-tabs-component {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .faq-tabbed__nav {
    position: sticky;
    /* The header's white wrapper is inset by the header's ~16px padding, so its
       drop shadow falls inside that bottom band. Pin the tab bar up into that
       band so it sits flush under the header wrapper, blends with it, and the
       header drop shadow casts onto the tab bar instead of onto scrolling
       content. --header-height is measured at runtime (mobile + desktop). */
    top: calc(var(--header-height, 0px) - 16px);
    /* Sit in the header's sticky layer, just below it so the header drop shadow
       renders on top of the tab bar. */
    z-index: calc(var(--layer-sticky, 8) - 1);
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: auto;
    width: 100%;
    /* Room for the header drop shadow above the tab labels, and matching space
       below them before the combined bottom line. */
    padding-block-start: 24px;
    margin-block-end: 24px;
    background: var(--color-background);
    /* One combined bottom line under all tabs (per Figma) */
    border-bottom: 1px solid #bbb2aa;
  }

  .faq-tabbed__nav::-webkit-scrollbar {
    display: none;
  }

  .faq-tabbed__accordion-wrapper {
    margin-inline: auto;
    width: 100%;
  }

  /* Compact width: cap the tab nav + accordion content to 896px on desktop
     (page/full width let them fill the Horizon container). */
  .faq-tabbed-section--compact .faq-tabbed__nav,
  .faq-tabbed-section--compact .faq-tabbed__accordion-wrapper {
    max-width: 896px;
  }

  .faq-tabbed__tab {
    background: none;
    border: none;
    /* No per-tab line; transparent keeps the label baseline aligned with the
       active tab. The nav carries the combined line; the active tab's colored
       border sits directly on top of it. */
    border-bottom: 2px solid transparent;
    cursor: pointer;
    padding: 0 16px 8px 16px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #464646;
    white-space: nowrap;
    transition: border-color 0.2s ease;
  }

  .faq-tabbed__tab[aria-selected='true'] {
    border-bottom-color: var(--color-foreground, #464646);
    font-weight: 600;
  }

  .faq-tabbed__tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
  }

  faq-tabs-component:not([data-initialized]) .faq-tabbed__panel ~ .faq-tabbed__panel {
    display: none;
  }

  .faq-tabbed__panel[inert] {
    display: none;
  }

  /* Plus -> minus on open is handled by the base theme (assets/base.css).
     Do not override .icon-plus strokes here, or both strokes get hidden. */
  .faq-tabbed-section details[open] .icon-caret {
    transform: rotate(180deg);
  }

  .faq-tabbed-section .icon-caret {
    transition: transform 0.3s ease;
  }

  @media screen and (max-width: 749px) {
    .faq-tabbed-section {
      --padding-inline-start: 0px;
      --padding-inline-end: 0px;
      padding-inline: 0;
    }

    .faq-tabbed__tab {
      font-size: 14px;
      line-height: 20px;
    }
  }

  /* Question/icon color (#464646) and answer-link styling are applied per page
     via the section's "custom_css" (see template JSON), so the section defaults
     to the theme's brand-black and un-restyled links when reused elsewhere. */

  /* Safari/iOS open animation fallback.
     The shared accordion snippet animates height via interpolate-size +
     ::details-content + @starting-style, none of which run in Safari/iOS — so
     the panel snaps open there with no height animation. grid-template-rows
     0fr -> 1fr animates to content height and is supported in Safari 16+,
     Firefox and Chrome. Gated to browsers WITHOUT interpolate-size so Chrome
     keeps its existing path, and scoped to FAQ so filter/footer accordions are
     untouched. */
  @supports not (interpolate-size: allow-keywords) {
    .faq-tabbed-section accordion-custom .details-content {
      display: grid;
      grid-template-rows: 0fr;
      block-size: auto;
      overflow: clip;
      transition: grid-template-rows var(--animation-speed-slow, 0.3s) var(--animation-easing, ease),
        opacity var(--animation-speed-slow, 0.3s) var(--animation-easing, ease),
        padding-block var(--animation-speed-slow, 0.3s) var(--animation-easing, ease);
    }

    .faq-tabbed-section accordion-custom .details-content > * {
      min-height: 0;
      overflow: hidden;
    }

    .faq-tabbed-section accordion-custom details[open] .details-content {
      grid-template-rows: 1fr;
      block-size: auto;
    }
  }
/* END_SECTION:faq-tabbed */

/* START_SECTION:faq (INDEX:29) */
.faq__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    max-width: 928px;
    margin-inline: auto;
  }
/* END_SECTION:faq */

/* START_SECTION:featured-collections-tabs (INDEX:31) */
.section-featured-collections-tabs {
    position: relative;
  }

  .section--page-width.section-featured-collections-tabs featured-collections-tabs {
    grid-column: 1 / -1;
  }

  featured-collections-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* ── Header (heading blocks only) ── */
  .featured-collections-tabs__header:is(
      :empty,
      :has(.group-block-content:empty),
      :has(.featured-collections-tabs__heading:empty),
      :not(:has(.featured-collections-tabs__heading *))
    ) {
    display: none;
  }

  .featured-collections-tabs__header {
    padding-block-end: 20px;
  }

  .section--page-width .featured-collections-tabs__header {
    max-width: var(--full-page-grid-central-column-width);
    margin-inline: auto;
    width: 100%;
    padding-inline: 0;
  }

  @media screen and (max-width: 749px) {
    .featured-collections-tabs__header {
      padding-block-end: 1rem;
    }
  }

  .featured-collections-tabs__heading {
    min-width: 0;
  }

  .featured-collections-tabs__heading h1,
  .featured-collections-tabs__heading h2,
  .featured-collections-tabs__heading h3 {
    margin: 0;
  }

  /* ── Tabs bar: pills + view-all on same row ── */
  .featured-collections-tabs__tabs-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 1rem;
  }

  .section--page-width .featured-collections-tabs__tabs-bar {
    max-width: var(--full-page-grid-central-column-width);
    margin-inline: auto;
    width: 100%;
  }

  /* ── View All CTA ── */
  .featured-collections-tabs__view-all {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 600;
    text-decoration: none;
    color: var(--fct-accent);
    border-bottom: 1px solid var(--fct-accent);
    white-space: nowrap;
    transition: opacity 0.2s ease;
    padding-block-end: 3px;
    margin-block-end: 1px;
  }

  @media screen and (max-width: 749px) {
    .featured-collections-tabs__view-all {
      order: -1;
      font-size: 0.875rem;
      padding-block-end: 2px;
      margin-block-end: 2rem;
    }

    .featured-collections-tabs__tabs-bar {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
    }

    .section--page-width .featured-collections-tabs__tabs-bar {
      padding-inline: 0;
    }
  }

  .featured-collections-tabs__view-all:hover {
    opacity: 0.75;
  }

  /* ── Tab nav ── */
  .featured-collections-tabs__nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-width: 0;
  }

  .featured-collections-tabs__nav::-webkit-scrollbar {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .featured-collections-tabs__nav {
      padding-block: 4px;
    }
  }

  /* ── Tab button (pill style) ── */
  .featured-collections-tabs__tab {
    background: transparent;
    border: 1px solid var(--color-gray-light);
    color: var(--color-black-light);
    border-radius: 100px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    font-family: inherit;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-decoration: none;
    padding: 6px 12px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .featured-collections-tabs__tab:hover {
    border-color: #ccc;
    border-color: color-mix(in srgb, var(--fct-accent) 40%, #ccc);
  }

  .featured-collections-tabs__tab--active,
  .featured-collections-tabs__tab[aria-selected='true'] {
    background: color-mix(in srgb, var(--fct-accent) 8%, transparent);
    border-color: var(--fct-accent);
    color: var(--fct-accent);
    font-weight: 600;
  }

  .featured-collections-tabs__tab:focus-visible {
    outline: 2px solid var(--fct-accent);
    outline-offset: 2px;
    border-radius: 100px;
  }

  @media screen and (max-width: 749px) {
    .featured-collections-tabs__nav {
      gap: 8px;
      padding-block: 0;
      padding-block-end: 1rem;
      scroll-padding-inline: 4px;
    }

    .section--page-width .featured-collections-tabs__nav {
      width: calc(100% + 2 * var(--page-margin));
      max-width: none;
      margin-inline: calc(-1 * var(--page-margin));
      padding-inline: var(--page-margin);
    }

    .featured-collections-tabs__tab {
      padding: 6px 12px;
    }

    .featured-collections-tabs__tab:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--fct-accent);
    }
  }

  /* ── Panels ── */
  .featured-collections-tabs__panel[hidden] {
    display: none;
  }

  .featured-collections-tabs__panel {
    display: block;
    width: 100%;
  }

  /* ── Carousel wrapper (mirrors product-list__carousel-wrapper) ── */
  .featured-collections-tabs__carousel-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .featured-collections-tabs__carousel-wrapper slideshow-arrows {
    display: none;
  }

  .featured-collections-tabs__carousel-wrapper .swipable-group__arrows {
    display: flex;
    padding-inline: var(--util-page-margin-offset);
    padding-block: var(--swipable-arrows-gap, 24px) 0;
  }

  .featured-collections-tabs__carousel-wrapper .swipable-group__arrows--bottom-right {
    align-self: flex-end;
  }

  /* ── Single-collection: right-align View All when no tab nav ── */
  .featured-collections-tabs__tabs-bar:not(:has(.featured-collections-tabs__nav)) {
    justify-content: flex-end;
  }

  /* ── Tab panel crossfade animation ── */
  .featured-collections-tabs__panel--entering {
    animation: fct-fadeIn 0.3s ease;
  }

  @keyframes fct-fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .featured-collections-tabs__panel--entering {
      animation: none;
    }
  }

  /* ── Scroll snap for touch swipe ── */
  .featured-collections-tabs__carousel-wrapper [data-scroller] {
    scroll-snap-type: x proximity;
  }

  .featured-collections-tabs__carousel-wrapper slideshow-slide {
    scroll-snap-align: start;
  }

  /* ── Mobile peek: reveal edge of next card ── */
  .featured-collections-tabs__carousel-wrapper > div {
    --peek-next-slide-size: 0px;
  }

  @media screen and (max-width: 749px) {
    .featured-collections-tabs__carousel-wrapper > div {
      --peek-next-slide-size: 16px;
    }
  }

  /* ── Carousel slide widths (resource-list-carousel rules) ── */
  .featured-collections-tabs__carousel-wrapper .resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;
  }

  .featured-collections-tabs__carousel-wrapper .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  @container resource-list-carousel (max-width: 749px) {
    .featured-collections-tabs__carousel-wrapper .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 79cqw), var(--slide-width-max));
    }

    .featured-collections-tabs__carousel-wrapper .resource-list__carousel slideshow-slides {
      gap: var(--resource-list-column-gap);
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .featured-collections-tabs__carousel-wrapper .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (
            100% -
              (var(--resource-list-column-gap-desktop, var(--resource-list-column-gap)) * (var(--column-count) - 1)) -
              var(--peek-next-slide-size)
          ) / var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 79cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
      min-width: 264px;
    }

    .featured-collections-tabs__carousel-wrapper .resource-list__carousel slideshow-slides {
      gap: var(--resource-list-column-gap-desktop, var(--resource-list-column-gap));
    }
  }

  .featured-collections-tabs__carousel-wrapper .resource-list__carousel slideshow-slides {
    margin-block: -16px;
    padding-block: 16px;
  }

  /* ── Promotional banner: mobile above carousel ── */
  .featured-collections-tabs__promo--mobile {
    display: block;
    margin-inline-start: 16px;
    margin-inline-end: 16px;
    margin-block-end: 16px;
  }

  .featured-collections-tabs__promo--mobile .group-block {
    width: 100%;
    min-height: 248px;
    border-radius: 8px;
    overflow: hidden;
  }

  /* Hide empty promotional group (no nested blocks, no background image/video) */
  .featured-collections-tabs__promo-slot
    .group-block:has(> .group-block-content:empty):not(
      :has(> .group-block__media-wrapper img, video-background-component)
    ) {
    display: none;
  }

  .featured-collections-tabs__promo-slot:not(:has(.group-block-content > *, img, video-background-component)) {
    display: none;
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .featured-collections-tabs__promo--mobile {
      display: none;
    }
  }

  /* ── Promotional banner: desktop first carousel slide ── */
  .featured-collections-tabs__promo-slide {
    display: none;
  }

  .featured-collections-tabs__promo-slide:has(
      .group-block:has(> .group-block-content:empty):not(
          :has(> .group-block__media-wrapper img, video-background-component)
        )
    ) {
    display: none;
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    flex: 0 0 0;
  }

  @media screen and (min-width: 750px) {
    .featured-collections-tabs__promo-slide {
      display: block;
      align-self: stretch;
    }

    .featured-collections-tabs__promo-slide:has(
        .group-block:has(> .group-block-content:empty):not(
            :has(> .group-block__media-wrapper img, video-background-component)
          )
      ) {
      display: none;
    }

    .featured-collections-tabs__promo-slide .featured-collections-tabs__promo-item,
    .featured-collections-tabs__promo-slide .group-block {
      height: 100%;
      min-height: 100%;
      border-radius: 8px;
      overflow: hidden;
    }
  }

  featured-collections-tabs .product-card [data-add-to-cart] {
    background-color: transparent !important;
  }

  /* ── Product card Shop Now: hover BG/color on focus, no outline ── */
  featured-collections-tabs .product-card [data-add-to-cart] .button:focus-visible {
    outline: none;
    --button-color: var(--color-primary-button-hover-text);
    --button-background-color: var(--color-primary-button-hover-background);
    --button-border-color: var(--color-primary-button-hover-border);
  }

  featured-collections-tabs .product-card [data-add-to-cart] .button-secondary:focus-visible {
    outline: none;
    --button-color: var(--color-secondary-button-hover-text);
    --button-background-color: var(--color-secondary-button-hover-background);
    --button-border-color: var(--color-secondary-button-hover-border);
  }

  @supports not selector(:focus-visible) {
    featured-collections-tabs .product-card [data-add-to-cart] .button:focus {
      outline: none;
      --button-color: var(--color-primary-button-hover-text);
      --button-background-color: var(--color-primary-button-hover-background);
      --button-border-color: var(--color-primary-button-hover-border);
    }

    featured-collections-tabs .product-card [data-add-to-cart] .button-secondary:focus {
      outline: none;
      --button-color: var(--color-secondary-button-hover-text);
      --button-background-color: var(--color-secondary-button-hover-background);
      --button-border-color: var(--color-secondary-button-hover-border);
    }
  }

  /* ── Empty state ── */
  .featured-collections-tabs__empty-msg {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-foreground);
    opacity: 0.6;
    font-size: 0.875rem;
  }

  /* ── Store-availability loading shimmer (BB page) ── */
  .featured-collections-tabs__shimmer {
    display: none;
  }

  /* Match the cards' horizontal inset: constrain to the same central column
     the header/tabs-bar (and the carousel cards) use in page-width. */
  .section--page-width .featured-collections-tabs__shimmer {
    max-width: var(--full-page-grid-central-column-width);
    margin-inline: auto;
    width: 100%;
  }

  .featured-collections-tabs__panel[data-bb-loading] .featured-collections-tabs__carousel-wrapper,
  .featured-collections-tabs__panel[data-bb-loading] .featured-collections-tabs__promo--mobile,
  .featured-collections-tabs__panel[data-bb-loading] .featured-collections-tabs__empty-msg {
    display: none;
  }

  .featured-collections-tabs__panel[data-bb-loading] .featured-collections-tabs__shimmer {
    display: grid;
    grid-template-columns: repeat(var(--fct-columns, 4), 1fr);
    gap: var(--fct-gap-desktop, 32px);
  }

  @media screen and (max-width: 749px) {
    .featured-collections-tabs__panel[data-bb-loading] .featured-collections-tabs__shimmer {
      grid-template-columns: 1fr;
      gap: var(--fct-gap-mobile, 16px);
    }
  }

  .fct-shimmer-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .fct-shimmer-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }

  .fct-shimmer-card__line {
    height: 14px;
    border-radius: 4px;
  }

  .fct-shimmer-card__line--title {
    width: 80%;
  }

  .fct-shimmer-card__line--price {
    width: 40%;
  }

  .fct-shimmer-card__btn {
    height: 40px;
    border-radius: 24px;
    margin-block-start: 8px;
  }

  .fct-shimmer-card__img,
  .fct-shimmer-card__line,
  .fct-shimmer-card__btn {
    background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: fct-shimmer 1.4s ease infinite;
  }

  @keyframes fct-shimmer {
    0% {
      background-position: 100% 0;
    }
    100% {
      background-position: 0 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .fct-shimmer-card__img,
    .fct-shimmer-card__line,
    .fct-shimmer-card__btn {
      animation: none;
    }
  }
/* END_SECTION:featured-collections-tabs */

/* START_SECTION:featured-product (INDEX:33) */
.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:34) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-foreground);

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

  .utilities--footer-legal {
    text-wrap: wrap;
  }

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

  .utilities .text-block.rte,
  .utilities .footer-utilities__group-copyright .rte {
    color: var(--color-foreground);
    max-width: 100%;
  }

  .utilities .text-block.rte a,
  .utilities .footer-utilities__group-copyright .rte a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    color: inherit;
  }

  .utilities .text-block.rte :is(p, ul, ol) {
    margin: 0;
  }

  .utilities > * {
    text-align: center;
    max-width: 100%;

    @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 columns (2fr 1fr), start and end aligned */
    .utilities--blocks-2 {
      grid-template-columns: 2fr 1fr;
    }

    .utilities--blocks-2 > *:nth-child(1) {
      justify-self: start;
    }

    .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:35) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

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

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

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

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

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

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

  /* EA Design Alignment Optimizations */

  .footer-content .ea-footer-menu-group .menu__heading {
    padding-block: 1.25rem;
  }

  .footer-content .ea-footer-menu-group .menu.menu--accordion .details-content {
    margin-block-start: 0;
  }

  .footer-content .ea-footer-menu-group .menu--dividers .details-content {
    padding-block-end: 1.5rem;
  }

  @media (min-width: 750px) {
    .footer-content .ea-footer-menu-group .menu__heading {
      padding-block-start: 0;
    }

    .footer-content .ea-footer-menu-group .menu--dividers .details-content {
      padding-block-end: 0;
    }
  }

  @media (max-width: 749px) {
    .footer-content .ea-footer-menu-group > .group-block-content.layout-panel-flex--row {
      gap: 0;
    }
  }

  @media (max-width: 1279px) {
    .footer-content .ea-footer-group > .group-block-content.layout-panel-flex--row {
      flex-wrap: wrap;
    }

    .footer-content .ea-footer-menu-group {
      flex: 1 1 100%;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header-announcements (INDEX:37) */
.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 {
    --button-size: 20px;
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .announcement-bar__slider slideshow-arrows {
    pointer-events: none;
  }

  .announcement-bar__slider .slideshow-control {
    pointer-events: auto;
    position: relative;
    z-index: 11;
  }
.announcement-bar__links {
  margin-right: max(20px, calc(var(--spacing-scale) * 76px))
}
  .announcement-bar__links .links-block {
    padding-right:0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:38) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
  }

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

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

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

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

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

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

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

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

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

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

  .header-section:has(.silent-header-container > #header-component[sticky='always']) {
    position: sticky;

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

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

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

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

    position: relative;

    background-color: transparent;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Store availability: mobile trigger bar */
  .store-availability-bar-mobile {
    border-top: 1px solid var(--color-gray-light, #EDEDED);
  }

  /* Desktop header row: fixed 64px bar height with everything vertically centered
     (overrides lg:tw-py-2 padding). Doubled class raises specificity so
     bundle.theme.css load order can't win. */
  @media screen and (min-width: 1024px) {
    .header-inner-wrapper.header-inner-wrapper {
      padding-top: 0;
      padding-bottom: 0;
    }

    .header-inner-wrapper .header__item-wrapper {
      min-height: 64px;
      align-items: center;
    }

    /* Logo is centered within its (vertically centered) container, nudged up
       by a 5px bottom margin. */
    .header-logo {
      margin-bottom: 5px;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:39) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(> #header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

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

    min-height: 600px;
  }

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

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

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

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

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

  .hero__media-grid {
    position: absolute;
    inset: var(--hero-margin-block-start, 0px) var(--hero-margin-inline-end, 0px) var(--hero-margin-block-end, 0px)
      var(--hero-margin-inline-start, 0px);
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
    border-radius: var(--hero-media-border-radius, 0);
    overflow: hidden;
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

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

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

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

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

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

    .hero__media-wrapper--mobile {
      display: block;
    }

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

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

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

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

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

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

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

  .hero__blurred-image--mobile {
    display: block;

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

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX:40) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

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

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

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

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

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX: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: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:43) */
.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);
  }

  .blog-post-section > header {
    max-width: var(--normal-content-width);
    margin-inline: auto;
    width: 100%;
  }

  .blog-post-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin-bottom:16px ;
  }

  .blog-post-categories__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--padding-2xs) var(--padding-xs);
    background-color: var(--color-foreground-heading);
    color: var(--color-white);
    border-radius: 4px;
    font-size: var(--font-size--2xs);
    font-weight: 500;
    white-space: nowrap;
    text-transform: uppercase;
  }

  .blog-post-section .blog-post-featured-image {
    max-width: 928px;
    margin-inline: auto;
  }

  @media screen and (max-width: 749px) {
    .blog-post-section .blog-post-featured-image {
      max-width: 100%;
    }
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:44) */
/* ─── Header ─── */
  .blog-posts__header {
    padding-bottom: 30px;
  }

  .blog-posts__header h1 {
    color: var(--color-foreground-heading);
  }

  .blog-posts__header > .spacing-style {
    padding-bottom: 10px;
  }

  /* ─── Layout ─── */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 32px;
    padding-top: 15px;
  }

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

  /* ─── Grid Items ─── */
  .blog-post-item {
    grid-column: 1 / -1;
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

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

  .blog-post-item:not(:has(.blog-post-card__image-container)) {
    padding-block-start: 1rem;
  }

  /* ─── Blog Description ─── */
  .blog-description {
    color: rgb(var(--color-foreground-rgb));
    max-width: 480px;
  }

  .blog-description p {
    margin: 0;
  }

  /* ─── Card Image ─── */
  .blog-posts-container .blog-post-card__image-container {
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    aspect-ratio: 3 / 2;
  }

  .blog-posts-container .blog-post-item--hero .blog-post-card__image-container {
    aspect-ratio: 7 / 4;
  }

  .blog-posts-container .blog-post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .blog-posts-container .blog-post-item:hover .blog-post-card__image {
    transform: scale(1.04);
  }

  /* ─── Card Layout ─── */
  .blog-posts-container .blog-post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

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

  .blog-posts-container .blog-post-card__content > a {
    padding-block-start: 0;
  }

  /* Hero card — mobile stacks image above content */
  .blog-posts-container .blog-post-item--horizontal .blog-post-card__content {
    padding: 1rem 0 0;
  }

  /* ─── Card Typography ─── */
  .blog-posts-container .blog-post-card__content > a .text-block {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--font-h3--size);
    font-weight: 600;
    color: var(--color-foreground-heading);
    line-height: 1.3;
  }

  .blog-posts-container .blog-post-card__content-text {
    font-size: var(--font-body-small--size);
    color: var(--color-foreground);
    font-weight: 400;
    line-height: 1.6;
  }

  .blog-posts-container .blog-post-details {
    font-size: var(--font-body-small--size);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .blog-posts-container .blog-post-card__content-text a {
    display: block;
    margin-block-start: 0.5rem;
    padding-top: 0;
    font-size: var(--font-body-regular--size);
    font-weight: 600;
    color: var(--color-foreground-heading);
    text-decoration: underline;
    text-underline-offset: 3.5px;
  }

  .blog-posts-container .blog-post-card__content-text a:hover {
    color: var(--color-primary-button-background);
  }

  /* ─── Load More ─── */
  .blog-posts-load-more {
    display: flex;
    justify-content: center;
    padding-block-start: 3rem;
  }

  .blog-posts-load-more__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-padding-block) var(--button-padding-inline);
    font-size: var(--font-body-regular--size);
    font-weight: 600;
    font-family: inherit;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
    transition: background var(--hover-transition-duration) var(--hover-transition-timing), color var(--hover-transition-duration) var(--hover-transition-timing);
    letter-spacing: 0.03em;
  }

  .blog-posts-load-more__btn:hover:not(:disabled) {
    background: var(--color-border);
  }

  .blog-posts-load-more__btn:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
  }

  /* ─── Desktop ─── */
  @media screen and (min-width: 750px) {
    .blog-posts__header {
      padding-bottom: 40px;
    }

    .blog-posts__header > .spacing-style {
      /* padding-top: 33px; */
      padding-bottom: 15px;
    }

    .blog-posts {
      --rows-gap: 48px;
    }

    .blog-post-item {
      grid-column: span var(--col-span);
      position: relative;
    }

    .blog-posts-container .blog-post-item--horizontal .blog-post-card__content {
      padding-left: 0;
      padding-top: 20px;
      justify-content: flex-start;
    }

    .blog-posts-container .blog-post-item--hero .blog-post-card__content > a .text-block {
      font-size: var(--font-h1--size);
      line-height: 1.19;
      -webkit-line-clamp: 4;
      line-clamp: 4;
    }

    .blog-posts-container .blog-post-item--compact .blog-post-card__content > a .text-block {
      font-size: var(--font-h4--size);
      line-height: 1.25;
    }

    .blog-posts-container .blog-post-card__content-text {
      padding-bottom: 32px;
    }

    .blog-posts-container .blog-post-item:not(.blog-post-item--hero) .blog-post-card__content-text a {
      position: absolute;
      bottom: 0;
      margin-top: 12px;
      text-underline-offset: 6px;
    }

    .blog-posts-container .blog-post-card__image {
      height: auto;
    }

    .blog-posts { 
      padding-top: 50px;
    }
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:45) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:password-footer (INDEX:51) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

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

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

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

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

/* START_SECTION:people-bio (INDEX:53) */
.people-bio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .people-bio__heading {
    text-align: center;
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: 48px;
    line-height: 58px;
    letter-spacing: -0.96px;
    color: var(--color-primary);
    margin: 0;
  }

  .people-bio__entries {
    display: flex;
    flex-direction: column;
    gap: var(--people-bio-entries-gap, 48px);
    width: 100%;
    max-width: 1120px;
  }

  .people-bio__entry {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
  }

  .people-bio__entry--image-right {
    flex-direction: row-reverse;
  }

  .people-bio__profile-card {
    flex-shrink: 0;
    width: 342px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #FBF7F5;
  }

  .people-bio__profile-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 336 / 337;
    object-fit: cover;
  }

  .people-bio__profile-details {
    background-color: #FBF7F5;
    padding: 8px;
    text-align: center;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
  }

  .people-bio__profile-name {
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #1D1D1D;
    margin: 0;
  }

  .people-bio__profile-title {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #464646;
    margin: 0;
  }

  .people-bio__bio {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-block-start: 80px;
    min-width: 0;
  }

  .people-bio__bio-heading {
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    letter-spacing: -0.48px;
    color: #1D1D1D;
  }

  .people-bio__bio-body {
    display: flex;
    flex-direction: column;
  }

  .people-bio__bio-body p {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #464646;
    margin-block: 6px;
  }

  .people-bio__bio-body p:first-child {
    margin-block-start: 0;
  }

  .people-bio__bio-body p:last-child {
    margin-block-end: 0;
  }

  .people-bio__toggle {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    width: fit-content;
    padding-block: 3px;
    padding-inline: 0;
    border: 0;
    border-block-end: 1px solid currentcolor;
    border-radius: 0;
    appearance: none;
    background: transparent;
    color: #E10600;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
  }

  @media screen and (max-width: 59.999em) {
    .people-bio {
      gap: 32px;
    }

    .people-bio__heading {
      font-size: 32px;
      line-height: 38px;
      letter-spacing: -0.64px;
    }

    .people-bio__entry,
    .people-bio__entry--image-right {
      flex-direction: column;
      gap: 24px;
      align-items: center;
    }

    .people-bio__profile-card {
      width: 100%;
      max-width: 342px;
    }

    .people-bio__bio {
      padding-block-start: 0;
    }

    .people-bio__bio-heading {
      font-size: 20px;
      line-height: 24px;
      letter-spacing: 0;
    }

    .people-bio__entries {
      gap: var(--people-bio-entries-gap, 48px);
    }
  }
/* END_SECTION:people-bio */

/* START_SECTION:personalization-drawer (INDEX:54) */
/* =====================================================
     Personalization Drawer - Section Styles
     ===================================================== */

  /* ── Embedded store selector ─────────────────────────────────────────────
     The panel reuses every `store-availability-dialog__*` rule loaded site-wide by
     the header pop-up, and that INCLUDES the container's own card — its background,
     padding, radius and shadow. It is the same control, so it should look like it.

     Only two things about the container are wrong inside a drawer, and this overrides
     exactly those: how wide it is, and how tall. Everything else is left alone. */
  /* A POPUP INSIDE THE DRAWER. Absolutely positioned against `.pd-drawer`, which is
     `position: fixed` and so the containing block — none of the elements between them
     is positioned, so this resolves against the drawer itself.

     The drawer keeps loading behind the scrim: its steps and footer stay rendered and
     visible, there is simply little to see yet because no availability call has been
     made. That is the point of a translucent scrim rather than hiding them — the
     shopper can see the drawer they are on their way into. */
  .pd-locator {
    position: absolute;
    /* Starts BELOW the drawer header, not at top:0 — otherwise the card's heading
       scrolls up behind the opaque header (z-index 4 > 3). `--pd-header-height` is
       measured and set by personalization-drawer.js #showLocator; the 64px fallback
       covers the single-line "Check Availability" header before JS runs. State C
       pins the selector directly under the header. */
    top: var(--pd-header-height, 64px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    /* Flex column so the card fills the area below the header and its action row
       can pin to the bottom (fixed "Select Store" CTA — Figma State A/C). */
    display: flex;
    flex-direction: column;
    padding: 16px;
    /* The card scrolls internally now (see the container override below), so the
       panel itself must clip rather than scroll — otherwise the CTA scrolls away. */
    overflow: hidden;
    /* Transparent — the drawer's own content fades behind through the
       sibling opacity rule below, matching the design where the PD steps
       are invisible (opacity: 0 + inert) rather than dimmed. */
    background: transparent;
  }

  /* The component wraps the card; make it fill the panel so the container's flex
     height resolves against the panel below the header. */
  .pd-locator > store-availability-component {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* `hidden` has to beat the `display` above. The UA's `[hidden] { display: none }` is
     a lone attribute selector, so ANY class rule setting `display` outranks it — which
     is why the panel stayed on screen after Continue, and why it sat over every drawer
     open. Same companion rule `.pd-context` already carries; every
     display-setting class in this file that JS toggles with `hidden` needs one. */
  .pd-locator[hidden] {
    display: none;
  }

  /* When the locator is active (.pd-locator--active on the drawer), the main
     content and footer fade to invisible + inert so the store selector is the
     only interactive surface. Matches State A/C Figma: PD content behind at
     opacity 0. The `:has()` form is intentionally avoided — toggling a class
     on the drawer is cheaper and avoids the subtree-traversal perf caveat. */
  .pd-drawer.pd-locator--active > .pd-main,
  .pd-drawer.pd-locator--active > .pd-footer,
  .pd-drawer.pd-locator--active > .pd-info-banner {
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  /* SCOPED UNDER `.pd-locator`, and that is the point of this selector rather than a
     nicety. The base rule is a single class too, so the two tie on specificity and
     whichever section's stylesheet Shopify concatenated last wins — which was the
     pop-up's, so the panel kept its 555px card width inside the drawer. The ancestor
     makes the override deterministic and keeps it off the pop-up at the same time. */
  /* In the drawer the CONTAINER is just a layout column, not the visual card: it fills
     the panel below the header and lets the card body sit at the top and the CTA pin to
     the bottom (Figma 19431:32075 — card content-height, CTA on white at the drawer
     bottom). The cream card itself is painted on `.store-availability-dialog__body`. */
  .pd-locator .store-availability-dialog__container--embedded {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  /* The cream card — content-height at the top of the panel by default (State C), so it
     hugs its content with white below. When a store list appears it switches to fill the
     panel (see the :has rule below) and the list scrolls full-height. */
  .pd-locator .store-availability-dialog__body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: #fbf7f5;
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    padding: 16px;
    /* Heading, dividers and delivery keep the 16px column rhythm from the base rule. */
  }

  /* Let the delivery dropdown / calendar escape the card's scroll box when open. */
  .pd-locator .store-availability-dialog__body:has(.store-availability-dialog__dropdown-wrapper.--is-open),
  .pd-locator .store-availability-dialog__body:has(.store-availability-dialog__calendar:not([hidden])) {
    overflow: visible;
  }

  /* When a store list (or the loading skeleton) is present, the card fills the whole
     panel and the LIST becomes the scroll region — full height, no max-height cap — so
     cards scroll off behind the fixed CTA under the bottom fade, on desktop as on mobile.
     Empty / helper states keep the card content-height (State C). */
  .pd-locator .store-availability-dialog__container--embedded:has([data-store-card]) .store-availability-dialog__body,
  .pd-locator
    .store-availability-dialog__container--embedded:has(.store-availability-dialog__stores-skeleton:not([hidden]))
    .store-availability-dialog__body {
    flex: 1 1 auto;
    overflow: hidden;
  }

  /* The delivery section fills the card and the store list fills the section, so the
     list is the single scroll region (the inputs above it stay put). `position:relative`
     anchors the bottom-pinned fade below. */
  .pd-locator .store-availability-dialog__delivery {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
  }

  .pd-locator .store-availability-dialog__stores-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  /* Fade is PINNED to the bottom of the list viewport (like the CTA), not scrolling in
     the list flow — so it never lands over a short list. It's anchored to `.delivery`
     (an ancestor of the scroll box), so the scroll box's overflow doesn't clip it and it
     doesn't move with the cards. JS toggles it hidden unless the list overflows, so a
     1–2-card list that fits shows no fade; its only job is to signal more cards below. */
  .pd-locator .store-availability-dialog__stores-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    height: 48px;
  }

  /* Fixed "Select Store" CTA — sits OUTSIDE the cream card, on the drawer's white
     background, pinned to the bottom of the panel. `margin-top:auto` drops it to the
     bottom (16px gap under the card via the white space it absorbs). Full-width pink
     pill; the muted-pink disabled variant lives in store-availability-modal.liquid. */
  .pd-locator .store-availability-dialog__actions {
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
    padding-top: 16px;
    background: transparent;
  }

  .pd-locator .store-availability-dialog__select-btn {
    width: 100%;
  }

  /* The drawer's bottom action is a single "Select Store" pill — no secondary
     "Select automatically" link (auto-selection still happens via the auto-notice +
     "Change store" flow). Hidden only in the PD embed; the header pop-up keeps it. */
  .pd-locator .store-availability-dialog__auto-btn {
    display: none;
  }

  /* ---- Figma 19431:32075 typography (PD embedded selector) ---- */

  /* Heading "First, enter your delivery information." is LEFT-aligned in the drawer
     (the pop-up centres it). 20px/1.2 semibold #464646 already matches.
     EA-3873: the heading and the close × share ONE line — the title-section is a row with the
     title on the left, and room reserved on the right for the absolutely-positioned close (below);
     min-height matches the 24px close so the row height is stable before the title paints. */
  .pd-locator .store-availability-dialog__title-section {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    padding-inline-end: 32px;
  }

  .pd-locator .store-availability-dialog__title {
    text-align: left;
  }

  /* Field labels ("Enter Delivery Zip Code", "Select Delivery Time"): 10px Regular
     #1d1d1d, indented 2px past the input edge. */
  .pd-locator .store-availability-dialog__field-label {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-black-secondary, #1d1d1d);
    padding-inline-start: 2px;
  }

  /* Helper line "Based on your inputs…": 12px #1d1d1d (the pop-up uses 14px/#464646). */
  .pd-locator .store-availability-dialog__helper {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-black-secondary, #1d1d1d);
  }

  /* Delivery-method label reads #464646 in this frame. */
  .pd-locator .store-availability-dialog__delivery-label {
    color: var(--color-black-light, #464646);
    line-height: 1.4;
  }

  /* Busy state — the dialog carries `data-busy` on itself, the embedded panel on the
     component element (see #applyBusyState). Same two rules, same reasons: block
     pointer events over a stale list while a lookup is in flight, but never over the
     zip field, which is where a typo gets fixed. */
  store-availability-component[data-embedded][data-busy] .store-availability-dialog__container > * {
    pointer-events: none;
  }

  store-availability-component[data-embedded][data-busy] .store-availability-dialog__zip-container {
    pointer-events: auto;
  }

  /* And the close, for the same reason: a control that exists to get the shopper OUT
     of a slow state cannot be part of what that state disables. Ties with the rule
     above on specificity, so it has to come after it — which is why both exemptions
     live here rather than beside their own components' styles. */
  store-availability-component[data-embedded][data-busy] .pd-locator__close {
    pointer-events: auto;
  }

  /* Nothing is hidden while the selector is up. The scrim above separates it visually
     and blocks the pointer; `inert` on the content and the footer (see #showLocator)
     is what takes them out of the tab order and off the accessibility tree, which a
     translucent overlay on its own does not do. */

  /* Drawer — native <dialog>, floating with margin on top/right/bottom */
  .pd-drawer {
    position: fixed;
    top: 16px;
    right: 16px;
    bottom: 16px;
    left: auto;
    width: calc(100% - 32px);
    max-width: 587px;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    flex-direction: column;
    background: #ffffff;
    color: inherit;
    border-radius: 12px;
    transform: translateX(calc(100% + 16px));
    transition: transform 0.3s ease;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

  /* The dialog only takes flex layout while open; hidden otherwise */
  .pd-drawer[open] {
    display: flex;
  }

  .pd-drawer:not([open]) {
    display: none;
  }

  /* Native modal backdrop replaces the old overlay div */
  .pd-drawer::backdrop {
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .pd-drawer--open {
    transform: translateX(0);
  }

  .pd-drawer--open::backdrop {
    opacity: 1;
  }

  /* Header */
  .pd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #ffffff;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    /* Above the store-selector scrim (3) so the close button stays visible and
       clickable while the selector is up — otherwise it shows through a translucent
       overlay looking pressable and isn't. Below the sub-views (5), which are
       full-drawer takeovers with their own back arrow and must cover this. */
    z-index: 4;
  }

  .pd-header__title {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #464646;
  }

  /* Back chevron — shown in locked-cart mode when the locator opens as a
     "Change Delivery Info" panel. Same size as the close button so the header
     layout stays balanced (back on the left, close on the right). */
  .pd-header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
  }

  .pd-header__back[hidden] {
    display: none;
  }

  .pd-header__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
  }

  /* While the ATC requests are in flight the drawer must stay open */
  .pd-drawer--busy .pd-header__close {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Main content area */
  .pd-main {
    flex: 1;
    overflow-y: auto;
    background: #ffffff;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.05);
  }

  .pd-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px;
  }

  /* Cart-conflict panel (shipment-only product + store-locked cart). Same warm
     error surface as .pd-context, because it stands in the same slot and states the
     same kind of problem — but it carries no selector: the only way out is the
     inline Clear Cart control. */
  .pd-cart-lock {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    border-radius: 8px;
    background: #fbf7f5;
    border: 1px solid var(--color-primary-button-background, #e10600);
  }

  .pd-cart-lock[hidden] {
    display: none;
  }

  .pd-cart-lock__icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-primary-button-background, #e10600);
  }

  .pd-cart-lock__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .pd-cart-lock__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black-secondary, #1d1d1d);
  }

  .pd-cart-lock__text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-black-light, #464646);
  }

  /* Inline with the sentence that explains it, matching the PDP's cart-lock link —
     the action belongs to the explanation, not beside it as a rival CTA. */
  .pd-cart-lock__clear {
    padding: 0;
    background: none;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary-button-background, #e10600);
    text-decoration: underline;
    cursor: pointer;
  }

  .pd-cart-lock__clear[disabled] {
    opacity: 0.5;
    cursor: default;
  }

  /* Contextual delivery-speed selector (shown only when the selected store/time
     leaves no size available). Warm error surface + speed pills. */
  .pd-context {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    background: #fbf7f5;
    border: 1px solid var(--color-primary-button-background, #e10600);
  }

  .pd-context[hidden] {
    display: none;
  }

  /* EA-3873: the top "Delivery time" block is HIDDEN. Editing the delivery time now happens in
     the embedded store-locator popup, opened from the footer "Same Day Delivery" pill (see
     #onEditSelection / #showLocator). The block's markup is kept for the EA-3808 recovery copy.
     !important beats the base display:flex + any JS-set `hidden=false`. Delete to restore it. */
  .pd-context {
    display: none !important;
  }

  /* Resolved: the chosen delivery time now has stock — drop the red "error"
     border for a neutral surface (the head is hidden, the neutral label shown). */
  .pd-context--resolved {
    border-color: var(--color-gray-light, #ededed);
  }

  .pd-context__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .pd-context__head[hidden] {
    display: none;
  }

  .pd-context__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black-secondary, #1d1d1d);
  }

  .pd-context__label[hidden] {
    display: none;
  }

  .pd-context__icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-primary-button-background, #e10600);
  }

  .pd-context__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .pd-context__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black-secondary, #1d1d1d);
  }

  .pd-context__text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-black-light, #464646);
  }

  /* EA-3807: the filtered-PLP escape from the terminal state. Underlined text
     rather than a second button — the panel's primary affordance is still the
     delivery-time selector below it, and two competing buttons in one small warm
     box reads as a choice between equals when it is not. */
  .pd-context__cta {
    align-self: flex-start;
    margin-top: 6px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary-button-background, #e10600);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .pd-context__cta[hidden] {
    display: none;
  }

  /* Delivery-time dropdown: the control itself reuses the global
     `store-availability-dialog__dropdown-*` styles (from the header store modal)
     for exact parity with the "Select your store" flow. Only the wrapper's flow
     inside the warm panel is owned here. */
  .pd-context__dropdown {
    width: 100%;
  }

  /* EA-3808: a delivery window the availability check resolved as dead. The
     shared `:disabled` rule in the store modal already dims it and sets the
     not-allowed cursor; this only adds the words, because dimming alone reads as
     "still loading" just as easily as "unavailable" — and this panel shows both
     states within a second of each other. A window that is merely unresolved
     carries no note, so it dims without making a claim. */
  .pd-context .store-availability-dialog__dropdown-option[data-pd-window-note]::after {
    content: attr(data-pd-window-note);
    margin-left: auto;
    padding-left: 8px;
    flex-shrink: 0;
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-gray-dark, #6b6b6b);
  }

  /* Step cards */
  .pd-step {
    background: #fbf7f5;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }

  .pd-step__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
  }

  .pd-step__header-left {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
  }

  .pd-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 48px;
    background: #f2e7df;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #1d1d1d;
  }

  .pd-step__title-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
  }

  .pd-step__title {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #464646;
  }

  .pd-step__subtitle {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #1d1d1d;
  }

  .pd-step__link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: var(--font-size--2xs);
    line-height: 17px;
    text-decoration: underline;
    color: #1d1d1d;
  }

  .pd-step__learn-more {
    padding-inline-start: 32px;
    margin-block-start: 4px;
  }

  .pd-giftwrap-subheading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-block-start: 16px;
  }

  .pd-step__chevron {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .pd-step__header[aria-expanded='false'] .pd-step__chevron {
    transform: rotate(180deg);
  }

  /* ---- Variant Selector ---- */
  .pd-variant-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-block-start: 16px;
    scrollbar-width: none;
  }

  .pd-variant-carousel::-webkit-scrollbar {
    display: none;
  }

  .pd-variant-card {
    display: flex;
    gap: 8px;
    min-width: 240px;
    padding: 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #ededed;
    cursor: pointer;
    transition: border-color 0.15s ease;
    flex-shrink: 0;
  }

  .pd-variant-card--selected {
    border-color: #1d1d1d;
  }

  .pd-variant-card--unavailable {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .pd-variant-card__image-wrap {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(242, 231, 223, 1) 0%, rgba(245, 241, 241, 1) 100%);
    overflow: hidden;
  }

  .pd-variant-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  .pd-variant-card__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .pd-variant-card__title {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #1d1d1d;
  }

  .pd-variant-card__price {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #1d1d1d;
  }

  /* ---- Skeleton loading state ---- */
  .pd-variant-card--skeleton {
    cursor: default;
    pointer-events: none;
    border-color: #ededed;
  }

  .pd-variant-card--skeleton .pd-variant-card__image-wrap {
    background: #f2e7df;
  }

  .pd-variant-card--skeleton .pd-variant-card__content {
    flex: 1;
    gap: 8px;
  }

  .pd-skeleton-line {
    display: block;
    height: 12px;
    border-radius: 4px;
    background: #ededed;
  }

  .pd-skeleton-line--title {
    width: 70%;
    height: 14px;
  }

  .pd-skeleton-line--price {
    width: 40%;
  }

  .pd-skeleton-line--badge {
    width: 55%;
    height: 10px;
    margin-block-start: 4px;
  }

  /* Inline shimmer used to replace a step title while its data loads. */
  .pd-skeleton-line--step-title {
    display: inline-block;
    width: 100px;
    height: 14px;
    vertical-align: middle;
  }

  /* Inline shimmer used to replace a step subtitle while its data loads. */
  .pd-skeleton-line--step-subtitle {
    display: inline-block;
    width: 160px;
    height: 12px;
    vertical-align: middle;
  }

  .pd-skeleton-shimmer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .pd-skeleton-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    animation: pd-skeleton-shimmer 1.2s ease-in-out infinite;
  }

  @keyframes pd-skeleton-shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pd-skeleton-shimmer::after {
      animation: none;
    }
  }

  /* ---- Message & Digital-Card loading shimmers ---- */
  .pd-msg-shimmer {
    display: flex;
    gap: 16px;
    padding-block-start: 16px;
  }

  .pd-msg-shimmer__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-width: 0;
    padding: 12px 8px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #ededed;
  }

  .pd-dc-shimmer {
    padding-block-start: 16px;
  }

  .pd-dc-shimmer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #ededed;
  }

  .pd-dc-shimmer__left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Delivery badge */
  .pd-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
  }

  .pd-badge__icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    background-color: #526f1b;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }

  .pd-badge__icon[style*='--mask-image-url'] {
    mask-image: var(--mask-image-url);
    -webkit-mask-image: var(--mask-image-url);
  }

  .pd-badge__text {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    color: #526f1b;
  }

  /* ---- Tabs (Add-on) ---- */
  .pd-tabs {
    display: flex;
    overflow-x: auto;
    padding-block-start: 16px;
    scrollbar-width: none;
  }

  .pd-tabs::-webkit-scrollbar {
    display: none;
  }

  .pd-tab {
    display: flex;
    justify-content: center;
    padding: 0 16px 8px;
    border: none;
    background: none;
    border-bottom: 1px solid #c6c6c6;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    color: #1d1d1d;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, font-weight 0.15s ease;
  }

  .pd-tab--active {
    border-bottom-color: #1d1d1d;
    font-weight: 600;
  }

  /* Add-on carousel */
  .pd-addon-panel {
    padding-block-start: 16px;
  }

  .pd-addon-hint {
    margin: 0 0 12px;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #6b6b6b;
  }

  /* Numbers & Letters hint renders BELOW the cards — flip the margin. */
  .pd-addon-hint.pd-addon-hint--below {
    margin: 12px 0 0;
  }

  .pd-addon-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pd-addon-carousel::-webkit-scrollbar {
    display: none;
  }

  /*
    EA-4309: pick-one upgrade groups in the Upgrades carousel. The row becomes a
    two-row grid: group labels (name + hint + thin rule) in the top row, every
    card in the bottom row. Labels can wrap to any length while all cards stay
    on one line at the same height; groups get a slightly wider gap.
  */
  .pd-addon-carousel--grouped {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-rows: auto auto;
    justify-content: start;
    column-gap: 16px;
    row-gap: 8px;
  }

  .pd-addon-carousel--grouped > .pd-addon-card {
    grid-row: 2;
  }

  .pd-addon-carousel--grouped > .pd-upgrade-group + *,
  .pd-addon-carousel--grouped > * + .pd-upgrade-group {
    margin-inline-start: 8px;
  }

  .pd-upgrade-group {
    display: grid;
    grid-row: 1 / span 2;
    grid-template-rows: subgrid;
    row-gap: 8px;
  }

  /* Browsers without subgrid: same layout, label + cards stacked in the group. */
  @supports not (grid-template-rows: subgrid) {
    .pd-upgrade-group {
      grid-template-rows: auto 1fr;
    }
  }

  .pd-upgrade-group__label {
    /* Wraps within the cards' width, so the label never widens the group. */
    width: 0;
    min-width: 100%;
    align-self: end;
    margin: 0;
    padding-block-end: 6px;
    border-block-end: 1px solid var(--color-border);
    box-sizing: border-box;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-size: 12px;
    line-height: 17px;
  }

  .pd-upgrade-group__name {
    margin-inline-end: 6px;
    font-weight: 600;
    color: #1d1d1d;
  }

  .pd-upgrade-group__hint {
    font-weight: 400;
    color: #6b6b6b;
  }

  .pd-upgrade-group__cards {
    display: flex;
    gap: 16px;
  }

  .pd-addon-card {
    display: flex;
    gap: 12px;
    width: 240px;
    padding: 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #ededed;
    flex-shrink: 0;
  }

  .pd-addon-card__image-wrap {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(242, 231, 223, 1) 0%, rgba(245, 241, 241, 1) 100%);
    overflow: hidden;
  }

  .pd-addon-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  .pd-addon-card__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
  }

  .pd-addon-card__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pd-addon-card__title {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 12px;
    line-height: 16.8px;
    color: #1d1d1d;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pd-addon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 24px;
    border: none;
    background: #e10600;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: auto;
    transition: background-color 0.15s ease;
  }

  .pd-addon-btn--added {
    background: #1d1d1d;
  }

  .pd-addon-btn:focus-visible,
  .pd-message-btn:focus-visible,
  .pd-footer__atc-btn:focus-visible {
    outline-color: #1d1d1d;
  }

  .pd-addon-btn:disabled {
    background: #aaaaaa;
    cursor: not-allowed;
  }

  /* ---- Numbers & Letters personalization input ---- */
  .pd-nl-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pd-nl-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pd-nl-input {
    flex: 0 0 auto;
    width: 100px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #ededed;
    border-radius: 4px;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #1d1d1d;
    background: #ffffff;
  }

  .pd-nl-input:focus {
    outline: none;
    border-color: #1d1d1d;
  }

  .pd-nl-input--locked {
    background: #f7f7f7;
    cursor: pointer;
  }

  .pd-nl-input[data-nl-type='letter'] {
    text-transform: uppercase;
  }

  .pd-nl-input::placeholder {
    color: #aaaaaa;
  }

  .pd-nl-edit {
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 12px;
    line-height: 17px;
    color: #e10600;
    text-decoration: underline;
    cursor: pointer;
  }

  .pd-nl-info {
    margin: 0;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 11px;
    line-height: 15px;
    color: #6b6b6b;
  }

  /* iOS zooms the viewport when a focused input is < 16px. Keep the real
     font-size at 16px to suppress the zoom, then scale it down so it renders at
     its 12px desktop size (transforms don't affect layout, so the field keeps
     its width; left origin keeps the text/placeholder left-aligned). */
  @media screen and (max-width: 749px) {
    .pd-nl-input {
      font-size: 16px;
      transform: scale(0.75);
      transform-origin: left center;
    }
  }

  .pd-empty-state {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-size: 12px;
    color: #464646;
    padding: 8px 0;
  }

  /* ---- Message Options ---- */
  .pd-message-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-block-start: 16px;
    scrollbar-width: none;
  }

  .pd-message-carousel::-webkit-scrollbar {
    display: none;
  }

  .pd-message-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 240px;
    flex: 1;
    padding: 12px 8px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #ededed;
    cursor: pointer;
    transition: border-color 0.15s ease;
  }

  .pd-message-card--selected {
    border-color: #1d1d1d;
  }

  .pd-message-card--added {
    border-color: #ededed;
  }

  .pd-message-card__icon {
    width: 32px;
    height: 32px;
    overflow: hidden;
  }

  .pd-message-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .pd-message-card__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .pd-message-card__title {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #1d1d1d;
    text-align: center;
  }

  .pd-message-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 24px;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .pd-message-btn--paid {
    background: #e10600;
    color: #ffffff;
    border: none;
  }

  .pd-message-btn--free {
    background: #ffffff;
    color: #1d1d1d;
    border: 1px solid #ededed;
  }

  .pd-message-card__action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

  .pd-message-card__action--added {
    gap: 16px;
  }

  .pd-message-btn--remove {
    background: #ffffff;
    color: #1d1d1d;
    border: 1px solid #ededed;
    padding: 6px 16px;
  }

  .pd-message-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #e10600;
    text-decoration: underline;
    cursor: pointer;
  }

  /* ---- Digital Card ---- */
  .pd-dc-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-block-start: 16px;
  }

  .pd-dc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #ededed;
  }

  .pd-dc-row__main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .pd-dc-row__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .pd-dc-row__label {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #1d1d1d;
  }

  .pd-dc-row__actions {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
  }

  .pd-dc-expanded {
    display: none;
    flex-direction: column;
    gap: 12px;
  }

  .pd-dc-expanded--visible {
    display: flex;
  }

  .pd-dc-expanded__heading-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pd-dc-expanded__title {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #464646;
  }

  .pd-dc-expanded__description {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #1d1d1d;
    margin: 0;
  }

  .pd-dc-tabs {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .pd-dc-tab {
    display: flex;
    justify-content: center;
    padding: 0 16px 8px;
    border: none;
    background: none;
    border-bottom: 1px solid #c6c6c6;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    color: #1d1d1d;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, font-weight 0.15s ease;
  }

  .pd-dc-tab--active {
    border-bottom-color: #1d1d1d;
    font-weight: 600;
  }

  .pd-dc-input {
    width: 100%;
    padding: 13.5px 16px;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
    background: #ffffff;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #1d1d1d;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
  }

  .pd-dc-input::placeholder {
    color: #6b6b6b;
    font-size: 12px;
  }

  .pd-dc-input:focus,
  .pd-dc-input--filled {
    border-color: #464646;
  }

  .pd-dc-input--error {
    border-color: #e10600;
  }

  .pd-dc-error {
    display: block;
    margin-block-start: 6px;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #e10600;
  }

  .pd-dc-error[hidden] {
    display: none;
  }

  /* ---- Sticky Footer ---- */
  .pd-footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    z-index: 2;
  }

  .pd-info-banner {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 16px 12px;
    padding: 12px;
    border-radius: 8px;
    background: #fbf7f5;
    flex-shrink: 0;
  }

  .pd-info-banner__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .pd-info-banner__text {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #464646;
  }

  .pd-info-banner--hidden {
    display: none;
  }

  .pd-footer__error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdf1f1;
    color: #a00400;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
  }

  .pd-footer__error[hidden] {
    display: none;
  }

  .pd-footer__inputs {
    display: flex;
    gap: 8px;
  }

  .pd-footer__input-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #dbdbdb;
    justify-content: space-between;
  }

  .pd-footer__input-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  /* Editable field: a button that keeps the bordered-input look, with the pencil
     pushed to the trailing edge and the value taking the space between. */
  .pd-footer__input-group--edit {
    appearance: none;
    background: #ffffff;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    justify-content: flex-start;
  }

  .pd-footer__input-group--edit:hover {
    border-color: #464646;
  }

  .pd-footer__input-group--edit:focus-visible {
    outline: 2px solid #1d1d1d;
    outline-offset: 2px;
  }

  .pd-footer__edit-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-left: auto;
    color: #6b6b6b;
  }

  .pd-footer__input-group--edit:hover .pd-footer__edit-icon {
    color: #1d1d1d;
  }

  /* EA-3873: a store-locked cart freezes zip + delivery date. The footer fields become
     read-only — no pointer, no hover border-change, and the pencil is removed so nothing
     invites an edit that can't happen. Set by #reflectStoreSelection (isCartStoreActive). */
  .pd-footer__input-group--locked {
    cursor: default;
  }

  .pd-footer__input-group--locked:hover {
    border-color: #dbdbdb;
  }

  .pd-footer__input-group--locked .pd-footer__edit-icon {
    display: none;
  }

  /* Close ×, on the SAME line as the heading (EA-3873). Absolutely positioned to overlay the
     right end of the title-section row: top:16px = the card's 16px inner padding (so it centres on
     the 24px heading row), right:16px = the card's inner right edge (the title reserves 32px on its
     right for it — see .title-section above). The container is position:relative, so this resolves
     against the card. */
  .pd-locator__close {
    position: absolute;
    top: 16px;
    right: 16px;
    /* Over the card's own content, under the delivery dropdown and the calendar, which
       open across the card and must not have an icon punched through them. */
    z-index: 1;
  }

  /* `hidden` has to beat the base class's `display: flex`, which lives in the pop-up's
     stylesheet — so the drawer's own [hidden]-companion scan cannot see it and this one
     has to be written by hand. */
  .pd-locator__close[hidden] {
    display: none;
  }

  /* EA-3873: the close × now shares the heading's line (see .title-section + .pd-locator__close),
     so the card no longer reserves a full row above the heading — the title-section's
     padding-inline-end holds the corner clear instead. */

  .store-availability-dialog__close-btn:focus-visible {
    outline: 2px solid #1d1d1d;
    outline-offset: 2px;
  }

  .pd-footer__location-text {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #1d1d1d;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pd-footer__delivery-text {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #1d1d1d;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pd-footer__atc-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px 24px;
    min-height: 40px;
    border-radius: 24px;
    border: none;
    background: #e10600;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  .pd-footer__atc-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .pd-footer__atc-btn:hover:not(:disabled) {
    opacity: 0.9;
  }

  .pd-footer__atc-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: pd-atc-spin 0.7s linear infinite;
  }

  .pd-footer__atc-btn--loading .pd-footer__atc-text {
    visibility: hidden;
  }

  .pd-footer__atc-btn--loading .pd-footer__atc-spinner {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
  }

  @keyframes pd-atc-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ---- Learn More sub-view ---- */
  .pd-subview {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    /* Include visibility so it stays visible through the slide-out on close (matches the cart drawer). */
    transition: transform 0.3s ease, visibility 0.3s ease;
    /* Above the drawer header (4), which was raised over the store-selector scrim (3).
       A sub-view replaces the whole drawer, header included. */
    z-index: 5;
    border-radius: 12px;
    overflow: hidden;
  }

  .pd-subview[aria-hidden='false'] {
    transform: translateX(0);
    visibility: visible;
  }

  .pd-subview__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    flex-shrink: 0;
    background: #ffffff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    z-index: 2;
  }

  .pd-subview__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }

  .pd-subview__title-bar {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #464646;
    flex: 1;
    min-width: 0;
  }

  .pd-subview__scroll {
    flex: 1;
    overflow-y: auto;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.05);
  }

  .pd-subview__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
  }

  .pd-subview__hero {
    width: 100%;
    aspect-ratio: 555 / 370;
    object-fit: cover;
    border-radius: 8px;
    display: block;
  }

  .pd-subview__info {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .pd-subview__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pd-subview__title {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #1d1d1d;
    margin: 0;
  }

  .pd-subview__description {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #464646;
    margin: 0;
  }

  .pd-subview__features {
    display: flex;
    flex-direction: column;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .pd-subview__feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .pd-subview__feature-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
  }

  .pd-subview__feature-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .pd-subview__feature-title {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #464646;
  }

  .pd-subview__feature-desc {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #464646;
  }

  /* ---- Gift Message sub-view ---- */
  .pd-gm-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px;
  }

  .pd-gm-description {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #464646;
    margin: 0;
  }

  /* Tabs */
  .pd-gm-tabs {
    display: flex;
    overflow: hidden;
    align-items: center;
    gap: 0;
  }

  .pd-gm-tab {
    display: flex;
    justify-content: center;
    padding: 0 16px 8px;
    border: none;
    background: none;
    border-bottom: 1px solid #c6c6c6;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    color: #1d1d1d;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, font-weight 0.15s ease;
  }

  .pd-gm-tab--active {
    border-bottom-color: #1d1d1d;
    font-weight: 600;
  }

  /* Panels */
  .pd-gm-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Textarea */
  .pd-gm-textarea-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 15.5px 16px 28px;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
    background: #ffffff;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
  }

  .pd-gm-textarea-wrap:focus-within {
    border-color: #464646;
  }

  .pd-gm-textarea-wrap:has(.pd-gm-textarea--filled) {
    border-color: #464646;
  }

  .pd-gm-textarea-wrap:has(.pd-gm-textarea--error) {
    border-color: #e10600;
  }

  .pd-gm-textarea {
    width: 100%;
    min-height: 169px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #1d1d1d;
    resize: none;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
  }

  .pd-gm-textarea:focus,
  .pd-gm-textarea:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .pd-gm-textarea::placeholder {
    color: #6b6b6b;
    font-size: 12px;
  }

  .pd-gm-counter {
    position: absolute;
    bottom: 10px;
    right: 16px;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #6b6b6b;
    pointer-events: none;
  }

  .pd-gm-counter--error {
    color: #e10600;
  }

  .pd-gm-error {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #e10600;
  }

  /* Submit button */
  .pd-gm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px 24px;
    min-height: 40px;
    border-radius: 24px;
    border: none;
    background: #e10600;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .pd-gm-btn--disabled {
    background: #aaaaaa;
    cursor: not-allowed;
  }

  /* Regenerate link */
  .pd-gm-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .pd-gm-regenerate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    color: #e10600;
    text-decoration: underline;
    cursor: pointer;
  }

  /* Field (dropdown / input) */
  .pd-gm-field {
    position: relative;
  }

  .pd-gm-field__select {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    min-height: 48px;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
  }

  .pd-gm-field__select--filled {
    border-color: #464646;
  }

  .pd-gm-field__select--open {
    border-color: #464646;
  }

  .pd-gm-field__label-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0;
  }

  .pd-gm-field__label {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #6b6b6b;
    transition: font-size 0.15s ease;
  }

  .pd-gm-field__value {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #1d1d1d;
  }

  .pd-gm-field__chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .pd-gm-field__select--open .pd-gm-field__chevron {
    transform: rotate(180deg);
  }

  .pd-gm-dropdown-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 5;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
  }

  .pd-gm-dropdown-item {
    padding: 10px 16px;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #1d1d1d;
    cursor: pointer;
    transition: background-color 0.1s ease;
  }

  .pd-gm-dropdown-item:hover {
    background: #f5f1f1;
  }

  .pd-gm-dropdown-item--selected {
    font-weight: 600;
    background: #f5f1f1;
  }

  /* Name input */
  .pd-gm-field__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
    background: #ffffff;
    padding: 10px 16px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
  }

  .pd-gm-field__input-wrap--filled {
    border-color: #464646;
  }

  .pd-gm-field__input-wrap--focused {
    border-color: #464646;
  }

  .pd-gm-field__floating-label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #6b6b6b;
    pointer-events: none;
    transition: transform 0.15s ease, font-size 0.15s ease, top 0.15s ease;
  }

  .pd-gm-field__input-wrap--active .pd-gm-field__floating-label {
    top: 10px;
    transform: translateY(0);
    font-size: 12px;
    line-height: 17px;
  }

  .pd-gm-field__input {
    width: 100%;
    border: none;
    outline: none;
    background: none;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #1d1d1d;
    padding: 0;
    margin: 0;
  }

  .pd-gm-field__input-wrap--active .pd-gm-field__input {
    padding-top: 14px;
  }

  /* Generated wrap */
  .pd-gm-generated-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* ---- Greeting Card iframe sub-view ---- */
  .pd-subview--greeting-card .pd-subview__scroll {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .pd-gc-occasion {
    padding: 20px;
    flex-shrink: 0;
  }

  .pd-gc-iframe {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border: none;
    display: block;
  }

  /* Greeting card embed loading shimmer */
  .pd-gc-loading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    flex: 1 1 auto;
    min-height: 0;
  }

  .pd-gc-loading__preview {
    flex: 1 1 auto;
    min-height: 160px;
    height: auto;
    border-radius: 8px;
  }

  /* ---- Digital Card Selection & Compose sub-view ---- */
  .pd-subview--digital-card {
    display: flex;
    flex-direction: column;
  }

  .pd-dcv-select,
  .pd-dcv-compose {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .pd-dcv-select .pd-subview__scroll,
  .pd-dcv-compose .pd-subview__scroll {
    flex: 1;
    overflow-y: auto;
  }

  .pd-dcv-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px;
  }

  /* Card tile grid */
  .pd-dcv-grid__tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .pd-dc-card-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 126px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
  }

  .pd-dc-card-tile:hover {
    border-color: #999999;
  }

  .pd-dc-card-tile--selected {
    border-color: #e10600;
  }

  .pd-dc-card-tile__image {
    width: 108px;
    height: 169px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #fce6e6;
    display: block;
  }

  .pd-dc-card-tile__label {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    color: #1d1d1d;
  }

  /* Loading skeleton tiles */
  .pd-dcv-grid__loading {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .pd-dcv-skeleton-tile {
    width: 126px;
    height: 210px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: pd-dcv-shimmer 1.4s ease-in-out infinite;
  }

  @keyframes pd-dcv-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* Compose form */
  .pd-dcv-compose-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 16px;
  }

  .pd-dcv-card-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .pd-dcv-card-preview__image {
    width: 198px;
    height: 311px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #fce6e6;
    display: block;
    background: #f5f5f5;
  }

  .pd-dcv-card-preview__change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e10600;
    border-width: 0 0 1px 0;
    background: none;
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 12px;
    line-height: 17px;
    color: #e10600;
    cursor: pointer;
  }

  .pd-dcv-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pd-dcv-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .pd-dcv-form__label {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #464646;
  }

  .pd-dcv-textarea {
    min-height: 140px;
  }

  /* ---- Mobile adjustments (<= 768px) ----
     Matches Figma "Personalization Drawer - Mobile" frame (3453:2360):
     drawer keeps a 16px gutter on every side (358px wide on a 390px
     viewport), NOT full-screen. Internal element sizes are tuned for
     the narrower content area. */
  @media screen and (max-width: 768px) {
    /* Tighter content padding and section gap */
    .pd-content {
      gap: 16px;
      padding: 16px;
    }

    /* Smaller heading on mobile */
    .pd-header {
      padding: 12px 16px;
    }

    .pd-header__title {
      font-size: 16px;
      line-height: 22px;
    }

    /* Variant cards — Figma shows 240px wide; keep min-width but allow
       cards to shrink to fit narrower viewports without overflow */
    .pd-variant-carousel,
    .pd-addon-carousel,
    .pd-message-carousel {
      gap: 8px;
    }

    .pd-variant-card {
      min-width: 220px;
    }

    .pd-addon-card {
      width: 220px;
    }

    .pd-message-card {
      min-width: 168px;
    }

    /* Footer: stack input row above ATC, but keep zipcode + delivery
       side-by-side per Figma */
    .pd-footer {
      padding: 12px 16px;
      gap: 12px;
    }

    .pd-footer__input-group {
      padding: 6px 8px;
    }

    /* Sub-view (Learn More / Gift Message) — tighter padding */
    .pd-subview__content,
    .pd-gm-content {
      padding: 16px;
      gap: 16px;
    }

    .pd-subview__header {
      padding: 12px 16px;
    }

    .pd-subview__title-bar {
      font-size: 16px;
      line-height: 22px;
    }

    /* Info banner — smaller text */
    .pd-info-banner__text {
      font-size: 12px;
      line-height: 17px;
    }

    /* Step title — 14px on mobile per Figma */
    .pd-step__title {
      font-size: 14px;
      line-height: 1.4;
    }

    .pd-step__title-group {
      gap: 4px;
    }

    /* Digital card product-card row — compact on mobile */
    .pd-dc-row {
      padding: 8px;
      gap: 12px;
    }

    /* Digital card subview — card selection grid */
    .pd-dcv-content {
      gap: 24px;
      padding: 16px;
      overflow: hidden;
    }

    .pd-dcv-grid__tiles {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pd-dc-card-tile {
      width: auto;
      min-width: 0;
    }

    .pd-dc-card-tile__image {
      width: 100%;
      height: auto;
      aspect-ratio: 82 / 129;
    }

    .pd-dcv-grid__loading {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pd-dcv-skeleton-tile {
      width: auto;
      height: 170px;
    }

    /* Digital card subview — compose form */
    .pd-dcv-compose-content {
      padding: 24px 16px;
    }

    .pd-dcv-card-preview {
      gap: 16px;
    }

    .pd-dcv-card-preview__image {
      width: 156px;
      height: 246px;
    }

    .pd-dcv-form__label {
      display: none;
    }

    .pd-dcv-form__field {
      gap: 0;
    }
  }

  /* ---- Narrow phones (<= 420px) ----
     The drawer is 16px-inset from both sides, so on a 360px viewport
     content area is only 328px. Variant cards need to squeeze further. */
  @media screen and (max-width: 420px) {
    .pd-variant-card {
      min-width: 200px;
    }

    .pd-addon-card {
      width: 200px;
    }
  }

  /* No-store alert overlay — sits on top of all drawer content */
  .pd-no-store-alert {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    padding: 24px;
  }

  .pd-no-store-alert[hidden] {
    display: none;
  }

  .pd-no-store-alert__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 340px;
    padding: 32px 24px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--color-gray-light, #ededed);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }

  .pd-no-store-alert__icon {
    color: var(--color-primary-button-background, #e10600);
    flex-shrink: 0;
  }

  .pd-no-store-alert__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black-secondary, #1d1d1d);
    margin: 0;
    line-height: 1.3;
  }

  .pd-no-store-alert__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-black-light, #464646);
    margin: 0;
  }

  .pd-no-store-alert__btn {
    margin-top: 8px;
    padding: 10px 40px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: var(--color-primary-button-background, #e10600);
    border: none;
    border-radius: 24px;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  .pd-no-store-alert__btn:hover {
    opacity: 0.9;
  }
/* END_SECTION:personalization-drawer */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:product-list (INDEX:61) */
.product-list__carousel-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  product-list-carousel.product-list__carousel-wrapper slideshow-arrows {
    display: none;
  }

  product-list-carousel.product-list__carousel-wrapper .swipable-group__arrows {
    display: flex;
    padding-inline: var(--util-page-margin-offset);
    padding-block: var(--swipable-arrows-gap, 24px) 0;
  }

  product-list-carousel.product-list__carousel-wrapper .swipable-group__arrows--top-right,
  product-list-carousel.product-list__carousel-wrapper .swipable-group__arrows--top-left {
    padding-block: 0 var(--swipable-arrows-gap, 24px);
  }

  product-list-carousel.product-list__carousel-wrapper .swipable-group__arrows--bottom-right,
  product-list-carousel.product-list__carousel-wrapper .swipable-group__arrows--top-right {
    align-self: flex-end;
  }

  product-list-carousel.product-list__carousel-wrapper .swipable-group__arrows--bottom-left,
  product-list-carousel.product-list__carousel-wrapper .swipable-group__arrows--top-left {
    align-self: flex-start;
  }
/* END_SECTION:product-list */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:search-drawer (INDEX:64) */
.search-drawer-results {
    width: 100%;
  }

  .search-drawer-results__layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* Desktop: 2-column grid with fixed sidebar track, so products stays in the
     right column even when Pages/Blogs are empty (no layout shift). */
  @media screen and (min-width: 1025px) {
    .search-drawer-results__layout {
      display: grid;
      grid-template-columns: 240px 1fr;
      column-gap: 112px;
      align-items: start;
    }
  }

  .search-drawer-results__sidebar {
    display: flex;
    flex-direction: column;
    gap: 40px;
    order: 2;
  }

  @media screen and (min-width: 1025px) {
    .search-drawer-results__sidebar {
      grid-column: 1;
      order: 0;
      gap: 32px;
    }
  }

  .search-drawer-results__products-area {
    display: flex;
    flex-direction: column;
    gap: 24px;
    order: 1;
  }

  /* Mobile: border below products when more sections follow (Pages/Blogs) */
  .search-drawer-results__layout:has(.search-drawer-results__sidebar) .search-drawer-results__products-area {
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
  }

  @media screen and (min-width: 1025px) {
    .search-drawer-results__products-area {
      grid-column: 2;
      order: 0;
    }

    .search-drawer-results__layout:has(.search-drawer-results__sidebar) .search-drawer-results__products-area {
      padding-bottom: 0;
      border-bottom: none;
    }
  }

  .search-drawer-results__heading {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.12px;
    text-transform: uppercase;
    color: var(--color-black-light);
    margin: 0;
  }

  .search-drawer-results__products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .search-drawer-results__view-all {
    flex-shrink: 0;
    font-family: var(--font-body--family);
    font-weight: 600;
    font-size: 12px;
    line-height: 17px;
    color: var(--color-primary-button-background, #e10600);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .search-drawer-results__view-all:hover,
  .search-drawer-results__view-all:focus-visible {
    color: var(--color-primary-button-background, #e10600);
    text-decoration: none;
  }

  .search-drawer-results__section {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .search-drawer-results__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .search-drawer-results__link {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black-secondary);
    text-decoration: none;
  }

  .search-drawer-results__link:hover {
    text-decoration: underline;
  }

  .search-drawer-results__link mark {
    background: none;
    color: inherit;
    font-weight: 600;
  }

  .search-drawer-results__products-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 53%;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    padding-bottom: 4px;
    margin-right: -16px;
    padding-right: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .search-drawer-results__products-grid::-webkit-scrollbar {
    display: none;
  }

  .search-drawer-results__products-grid > * {
    scroll-snap-align: start;
    min-width: 0;
  }

  @media screen and (min-width: 1025px) {
    .search-drawer-results__products-grid {
      grid-auto-flow: row;
      grid-auto-columns: auto;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      overflow-x: visible;
      scroll-snap-type: none;
      padding-bottom: 0;
      margin-right: 0;
      padding-right: 0;
    }
  }

  .search-drawer-results__no-results {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black-light);
    margin: 0;
    padding: 24px 0;
  }
/* END_SECTION:search-drawer */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:store-directory (INDEX:70) */
/* ── Store Directory ── */

  store-directory {
    display: block;
    width: 100%;
  }

  /* Merchant-editable header (theme blocks) */
  .store-directory__intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
  }

  /* Loading skeleton */
  .store-directory__loading {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .store-directory__loading-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .store-directory__loading-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  @media screen and (min-width: 750px) {
    .store-directory__loading-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .store-directory__skeleton {
    background: var(--color-gray-light, #EDEDED);
    border-radius: 8px;
    animation: store-directory-pulse 1.5s ease-in-out infinite;
  }

  .store-directory__skeleton--title {
    height: 36px;
    width: 60%;
    max-width: 400px;
  }

  .store-directory__skeleton--text {
    height: 20px;
    width: 40%;
    max-width: 280px;
  }

  .store-directory__skeleton--card {
    height: 80px;
  }

  @keyframes store-directory-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* Content wrapper */
  .store-directory__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Header */
  .store-directory__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .store-directory__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: var(--font-size--h2, 1.75rem);
    line-height: 1.2;
    color: var(--color-foreground-heading, var(--color-black));
  }

  .store-directory__description {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-black-light, #464646);
  }

  .store-directory__count {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-black-light, #464646);
  }

  /* Breadcrumb mount (top of section) */
  .store-directory__breadcrumb-mount:not(:empty) {
    margin-bottom: 24px;
  }

  /* Breadcrumb */
  .store-directory__breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    line-height: 1.4;
    flex-wrap: wrap;
  }

  .store-directory__breadcrumb-link {
    color: var(--color-black-light, #464646);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.875rem;
  }

  .store-directory__breadcrumb-link:hover {
    color: var(--color-black, #000);
  }

  .store-directory__breadcrumb-sep {
    display: flex;
    align-items: center;
    color: var(--color-black-light, #464646);
  }

  .store-directory__breadcrumb-current {
    color: var(--color-black, #000);
    font-weight: 500;
  }

  /* Back link */
  .store-directory__back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-black-light, #464646);
    cursor: pointer;
    transition: color 0.15s ease;
  }

  .store-directory__back-link:hover {
    color: var(--color-black, #000);
  }

  /* Country group (states grid grouped by country) */
  .store-directory__country-group + .store-directory__country-group {
    margin-top: 40px;
  }

  .store-directory__country-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-gray-light, #EDEDED);
  }

  .store-directory__country-name {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: var(--font-size--h3, 1.375rem);
    line-height: 1.2;
    color: var(--color-foreground-heading, var(--color-black));
  }

  /* Country eyebrow (state detail view) */
  .store-directory__country-eyebrow {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary-button-background, #e10600);
  }

  /* Grids */
  .store-directory__grid {
    display: grid;
    gap: 16px;
  }

  .store-directory__grid--states {
    grid-template-columns: repeat(2, 1fr);
  }

  @media screen and (min-width: 750px) {
    .store-directory__grid--states {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .store-directory__grid--stores {
    grid-template-columns: 1fr;
  }

  @media screen and (min-width: 750px) {
    .store-directory__grid--stores {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
  }

  /* State card */
  .store-directory__state-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--color-gray-light, #EDEDED);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    text-align: start;
    font: inherit;
  }

  .store-directory__state-card:hover {
    border-color: var(--color-black-light, #464646);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .store-directory__state-name {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--color-black, #000);
  }

  .store-directory__state-count {
    font-size: 0.8125rem;
    color: var(--color-black-light, #464646);
  }

  /* Store card */
  .store-directory__store-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--color-gray-light, #EDEDED);
    border-radius: 8px;
  }

  .store-directory__store-card--clickable {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .store-directory__store-card--clickable:hover,
  .store-directory__store-card--clickable:focus-visible {
    border-color: var(--color-black-light, #464646);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    outline: none;
  }

  .store-directory__store-name {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--color-black, #000);
  }

  .store-directory__store-address {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-black-light, #464646);
  }

  /* Hours */
  .store-directory__hours-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-black-light, #464646);
  }

  /* Phone */
  .store-directory__phone {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-black, #000);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .store-directory__phone:hover {
    color: var(--color-black-light, #464646);
  }

  /* Tags */
  .store-directory__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .store-directory__tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 500;
    border: 1px solid var(--color-gray-light, #EDEDED);
    border-radius: 16px;
    color: var(--color-black-light, #464646);
    background: transparent;
    white-space: nowrap;
  }

  /* Error state */
  .store-directory__error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
    text-align: center;
    font-size: 1rem;
    color: var(--color-black-light, #464646);
  }

  .store-directory__error p {
    margin: 0;
  }
/* END_SECTION:store-directory */

/* START_SECTION:store-locator (INDEX:71) */
.store-locator__header {
    width: 100%;
  }

  .store-locator__widget {
    margin-top: 24px;
    width: 100%;
  }

  /* The market-country filter has no UI; keep its wrapper out of the search bar. */
  .store-locator__widget #storepoint-filter-custom-ea-market-country {
    display: none;
  }
/* END_SECTION:store-locator */

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

  .accordion-row__content .text-block a:where(:not(.button, .button-secondary)) {
    color: var(--color-primary);
  }

  .accordion-row__content .text-block a:where(:not(.button, .button-secondary)):hover {
    color: var(--color-primary-hover);
  }

  /* Hide an accordion row when it has no visible content — every child block renders nothing or is [hidden]. General to any blocks in the row; re-evaluates automatically (e.g. on variant change) because [hidden] toggles live. Scoped via .accordion-row__content so filter/cart/drawer accordion-custom elements are unaffected. */
  accordion-custom:not(.accordion-row--editor):has(> .details > .accordion-row__content):not(
    :has(> .details > .accordion-row__content > *:not([hidden]))
  ) {
    display: none;
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:73) */
.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-article-card (INDEX:74) */
.blog-article-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .blog-article-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .blog-article-card__media {
    position: relative;
  }

  .blog-article-card__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 12px;
    padding-block: 24px;
  }

  .blog-article-card__content {
    flex: 1;
  }

  .blog-article-card__content,
  .blog-article-card__read-more {
    padding-inline: 24px;
  }
/* END_BLOCK:_blog-article-card */

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

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

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

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

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

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

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

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

  .blog-post-card__content > a .text-block {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-block-end: 0;
    margin-block-end: 0;
  }


  .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:76) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-content :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 600;
    color: var(--color-foreground-heading);
  }

  .blog-post-content h1 {
    font-family: var(--font-h1--family);
    font-size: var(--font-h1--size);
    line-height: var(--font-h1--line-height);
    letter-spacing: var(--font-h1--letter-spacing);
    text-transform: var(--font-h1--case);
  }

  .blog-post-content h2 {
    font-family: var(--font-h2--family);
    font-size: var(--font-h2--size);
    line-height: var(--font-h2--line-height);
    letter-spacing: var(--font-h2--letter-spacing);
    text-transform: var(--font-h2--case);
  }

  .blog-post-content h3 {
    font-family: var(--font-h3--family);
    font-size: var(--font-h3--size);
    line-height: var(--font-h3--line-height);
    letter-spacing: var(--font-h3--letter-spacing);
    text-transform: var(--font-h3--case);
  }

  .blog-post-content h4 {
    font-family: var(--font-h4--family);
    font-size: var(--font-h4--size);
    line-height: var(--font-h4--line-height);
    letter-spacing: var(--font-h4--letter-spacing);
    text-transform: var(--font-h4--case);
  }

  .blog-post-content h5 {
    font-family: var(--font-h5--family);
    font-size: var(--font-h5--size);
    line-height: var(--font-h5--line-height);
    letter-spacing: var(--font-h5--letter-spacing);
    text-transform: var(--font-h5--case);
  }

  .blog-post-content h6 {
    font-family: var(--font-h6--family);
    font-size: var(--font-h6--size);
    line-height: var(--font-h6--line-height);
    letter-spacing: var(--font-h6--letter-spacing);
    text-transform: var(--font-h6--case);
  }

  .blog-post-content a {
    color: var(--color-primary-button-background);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .blog-post-content a:hover {
    color: var(--color-primary-button-background);
  }

  .blog-post-content ul {
    list-style: disc;
  }

  .blog-post-content ol {
    list-style: auto;
  }

  .blog-post-content iframe {
    width: 100%;
  }

  .blog-post-content table {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10)); 
  }

  .blog-post-content img {
    border-radius: 8px;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:77) */
.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);
  }

  @media screen and (min-width: 750px) {
    .blog-post-card__description-inner {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:78) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    display: block;
    position: relative;
    width: var(--width);
    aspect-ratio: 7 / 4;
    border-radius: 8px;
    overflow: hidden;
  }

  .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 {
    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:79) */
.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:80) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-size--2xs);
    color: var(--color-black-light);
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }

  @media screen and (min-width: 1024px) {
    .blog-post-details {
      font-size: var(--font-size--sm);
    }
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_bundle-builder-button (INDEX:81) */
/* Product-card bundle CTA: grid overlap so the button and qty selector
     share the same cell — zero layout shift when switching states. */
  [data-bb-product-cta] {
    display: grid;
    width: 100%;
  }

  [data-bb-product-cta] > .button,
  [data-bb-product-cta] > .bb-cta-qty {
    grid-area: 1 / 1;
    width: 100%;
  }

  [data-bb-product-cta] .button {
    width: 100%;
  }

  /* ── Qty selector (visible when data-bb-state="qty") ─────────────── */
  .bb-cta-qty {
    visibility: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 14px;
    border: 1px solid #dbdbdb;
    border-radius: 24px;
    background: #ffffff;
    box-sizing: border-box;
  }

  .bb-cta-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #1d1d1d;
    flex-shrink: 0;
  }

  .bb-cta-qty__value {
    min-width: 20px;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    font-weight: 500;
    line-height: 1;
    color: #1d1d1d;
  }

  /* Loading: the qty request is in flight — show a wait cursor across the whole
     control and freeze the buttons (they keep full color but ignore clicks). */
  .bb-cta-qty--loading {
    opacity: 0.6;
    cursor: wait;
  }

  .bb-cta-qty--loading .bb-cta-qty__btn {
    pointer-events: none;
    cursor: wait;
  }

  /* State: qty — hide the main button, show the qty selector. */
  [data-bb-state="qty"] > .button {
    visibility: hidden;
    pointer-events: none;
  }

  [data-bb-state="qty"] > .bb-cta-qty {
    visibility: visible;
    pointer-events: auto;
  }

  /* ── Remove state ──────────────────────────────────────────────────
     White background, light border, dark text (matches design).
     Overrides the primary-button color vars consumed by base.css .button. */
  [data-bb-product-cta] .button.bb-cta--remove {
    --button-background-color: #ffffff;
    --button-color: #1d1d1d;
    --button-border-color: #ededed;
    --button-border-width: 1px;
  }

  [data-bb-product-cta] .button.bb-cta--remove:hover {
    --button-background-color: #f5f5f5;
    --button-color: #1d1d1d;
    --button-border-color: #ededed;
  }

  /* ── Unavailable state ─────────────────────────────────────────────
     The BB drawer's availability check found no fulfillable variant for
     the current store/delivery, so the product can't be added (see
     bb-product-card-cta.js). Greyed at ≥4.5:1 contrast; clicks ignored. */
  [data-bb-product-cta] .button.bb-cta--unavailable,
  [data-bb-product-cta] .button.bb-cta--unavailable:hover {
    --button-background-color: #6f6f6f;
    --button-color: #ffffff;
    --button-border-color: #6f6f6f;
    cursor: not-allowed;
  }

  /* ── Loading state (button spinner) ────────────────────────────────
     Hide the label and show a CSS spinner while the remove request runs.
     The spinner inherits the button's text color (--button-color). */
  [data-bb-product-cta] .button.bb-cta--loading {
    color: transparent !important;
    position: relative;
    cursor: not-allowed;
  }

  [data-bb-product-cta] .button.bb-cta--loading::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 16px;
    height: 16px;
    margin-block-start: -8px;
    margin-inline-start: -8px;
    border: 2px solid color-mix(in srgb, var(--button-color) 30%, transparent);
    border-top-color: var(--button-color);
    border-radius: 50%;
    animation: bb-cta-spin 0.6s linear infinite;
  }

  @keyframes bb-cta-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-bb-product-cta] .button.bb-cta--loading::after {
      animation-duration: 1.5s;
    }
  }
/* END_BLOCK:_bundle-builder-button */

/* START_BLOCK:_card (INDEX:83) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

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

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:84) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

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

/* START_BLOCK:_cart-summary (INDEX:86) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(> #header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:87) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

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

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

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

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

/* START_BLOCK:_collection-image (INDEX:90) */
.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:92) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_collection-tab (INDEX:93) */
.collection-tab-panel__cards {
    z-index: 1;
    display: flex;
    gap: 1.375rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block-start: 3.5rem;
    padding-block-end: 1.5rem;
  }

  .collection-tab-panel__cards::-webkit-scrollbar {
    display: none;
  }

  .collection-tab-card {
    flex: 0 0 264px;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .collection-tab-card:hover,
  .collection-tab-card:focus-visible {
    outline: none;
  }

  .collection-tab-card:hover *,
  .collection-tab-card:focus-visible * {
    text-decoration: underline;
  }

  /* Zoom only the image inside the card (clipped by the wrapper's overflow:hidden),
     not the entire card. */
  .collection-tab-card:hover .collection-tab-card__image,
  .collection-tab-card:focus-visible .collection-tab-card__image {
    transform: scale(1.05);
  }

  .collection-tab-card__image-wrapper {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    width: 264px;
    height: 264px;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);
  }

  .collection-tab-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }

  .collection-tab-card__placeholder {
    width: 100%;
    height: 100%;
  }

  .collection-tab-card__highlight {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background-color: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    pointer-events: none;
  }

  .collection-tab-card__title {
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  @media (min-width: 750px) {
    .section--page-width .collection-tab-panel__cards {
      padding-inline: var(--util-page-margin-offset);
      scroll-padding-inline-start: var(--util-page-margin-offset);
    }
  }

  @media (max-width: 749px) {
    .collection-tab-panel__cards {
      padding-block-start: 2.5rem;
      gap: 1rem;
      scroll-padding-inline-start: 1rem;
    }

    .collection-tab-card {
      flex: 0 0 138px;
      gap: 0.375rem;
      text-align: left;
    }

    .collection-tab-card__image-wrapper {
      width: 138px;
      height: 138px;
    }

    .collection-tab-card:first-child {
      margin-inline-start: 1rem;
    }

    .collection-tab-card:last-child {
      margin-inline-end: 1rem;
    }
  }
/* END_BLOCK:_collection-tab */

/* START_BLOCK:_cyo-builder (INDEX:96) */
cyo-builder {
    display: block;
  }

  /* Faded / wait-cursor state during a variant change, matching the variant
     picker and Add to Cart button. The wait cursor is forced on the builder AND
     its controls (which set their own pointer cursor); note pointer-events:none
     would suppress the cursor, so it's intentionally not used here. */
  cyo-builder[data-variant-updating='true'] {
    opacity: 0.65;
  }

  cyo-builder[data-variant-updating='true'],
  cyo-builder[data-variant-updating='true'] * {
    cursor: wait;
  }

  /* Non-English locales: the English cyo_selection_type is still loading
     (@theme/logic-metafields). Steps are inert in markup; shimmer them so the neutral
     server render never reads as the final state. */
  cyo-builder[data-logic-loading] .cyo-builder__step {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
  }

  cyo-builder[data-logic-loading='true'] .cyo-builder__step::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    animation: pd-skeleton-shimmer 1.2s ease-in-out infinite;
  }

  /* Lookup failed after its retry: steps stay inert and read as unavailable. */
  cyo-builder[data-logic-loading='error'] .cyo-builder__step {
    opacity: 0.5;
  }

  @keyframes pd-skeleton-shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    cyo-builder[data-logic-loading='true'] .cyo-builder__step::after {
      animation: none;
    }
  }

  /* Typography from the theme .h4 class (scales 24px desktop / 20px mobile);
     pinned to semibold per Figma and using the scheme text color. */
  .cyo-builder__heading {
    --color: var(--color-foreground);
    --font-h4--weight: 600;
    margin: 0 0 8px;
  }

  /* While Add to Cart is disabled for the CYO "no selection yet" state, it uses the
     theme's normal grey disabled state (per client) — signalling the shopper still
     needs to make a selection. No colour override here. */

  /* No dividers between steps (none in the design). First step's header has no
     extra top gap so it sits tight under the label. */
  .cyo-builder__step:first-of-type .cyo-builder__step-header {
    padding-block-start: 0;
  }

  .cyo-builder__step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 0;
    cursor: pointer;
    text-align: start;
    background: none;
    border: none;
    color: var(--color-foreground);
  }

  /* Title + subtitle typography come from .body-small / .label classes. */
  .cyo-builder__step-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }

  .cyo-builder__step-chevron {
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  /* Rotate the caret on expand (this uses aria-expanded, not <details open>,
     so the theme's icon-animated rule doesn't apply). */
  .cyo-builder__step-header[aria-expanded="true"] .cyo-builder__step-chevron svg {
    transform: rotate(180deg);
  }

  /* Same open/close technique as Horizon's native accordion component
     (block-size: auto via interpolate-size, no fixed cap). */
  .cyo-builder__step-content {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: block-size var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  .cyo-builder__step-content:not([aria-hidden="true"]) {
    block-size: auto;
    opacity: 1;

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

    &:focus-within {
      overflow-y: visible;
    }
  }

  .cyo-builder__step-content[aria-hidden="true"] {
    pointer-events: none;
  }

  .cyo-builder__scroller {
    position: relative;
  }

  .cyo-builder__cards {
    /* Space to keep a focused card's outline from being clipped by the scroll
       container (mirrors the variant picker's --variant-card-focus-space). */
    --cyo-card-focus-space: calc(var(--focus-outline-width) + var(--focus-outline-offset));
    display: grid;
    /* Two fixed rows filled ROW-MAJOR across a dynamic column count (= half the
       options, set via --cyo-card-cols in Liquid): cards read 1,2,3… along the top
       row then continue 4,5,6… on the second row — not the column-major zig-zag. */
    grid-auto-flow: row;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(var(--cyo-card-cols, 2), 220px);
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    /* scroll-padding keeps the leading/trailing focus-space visible when a card
       snaps to the edge — without it, snapping scrolls the padding out of view and
       clips the first card's outline. */
    scroll-padding-inline: var(--cyo-card-focus-space);
    /* Padding is the focus outline's breathing room so the scroll container can't
       clip it (top/bottom/sides). Kept as pure padding — no negative margins — so
       it never pulls the cards up into the step header (overlap) or past the
       builder's left edge (clip). Extra 16px block-end preserves scroll spacing. */
    padding-block: var(--cyo-card-focus-space) calc(var(--cyo-card-focus-space) + 16px);
    padding-inline: var(--cyo-card-focus-space);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cyo-builder__cards::-webkit-scrollbar {
    display: none;
  }

  /* Combination products show flavors as a full-width vertical list (per the
     cookie-box design) instead of the horizontal scroll row used for single. */
  cyo-builder[data-selection-type="combination"] .cyo-builder__cards {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    /* Full-width list doesn't scroll, so no inline scroll padding needed — but
       keep block padding so a focused card's outline doesn't overlap the step
       header above / next step below. Same extra block-end as single so the gap
       between steps matches across all box types (desktop + mobile). */
    overflow: visible;
    scroll-snap-type: none;
    margin: 0;
    padding-block: var(--cyo-card-focus-space) calc(var(--cyo-card-focus-space) + 16px);
    padding-inline: 0;
  }

  cyo-builder[data-selection-type="combination"] :is(.cyo-builder__scroll-next, .cyo-builder__scroll-prev) {
    display: none;
  }

  .cyo-builder__scroll-next,
  .cyo-builder__scroll-prev {
    position: absolute;
    top: calc(50% - 8px);
    right: 16px;
    /* Keep arrows above the cards. Disabled cards use opacity, which creates a
       stacking context and would otherwise paint over the (unlayered) arrows. */
    z-index: var(--layer-raised);
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .cyo-builder__scroll-prev {
    right: auto;
    left: 16px;
    /* Only the left arrow rests over the cards, so keep it light by default and
       go fully opaque on hover/focus. The right arrow sits at the edge (not a
       blocker), so it stays solid for visibility. */
    opacity: 0.45;
    transition: opacity 0.2s ease;
  }

  .cyo-builder__scroll-next.is-visible,
  .cyo-builder__scroll-prev.is-visible {
    display: inline-flex;
  }

  .cyo-builder__scroll-prev:hover,
  .cyo-builder__scroll-prev:focus-visible {
    opacity: 1;
  }

  .cyo-builder__scroll-next svg,
  .cyo-builder__scroll-prev svg {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.18));
  }

  /* Reuse the right-arrow icon, flipped, for the previous control. */
  .cyo-builder__scroll-prev svg {
    transform: scaleX(-1);
  }

  /* Match the theme variant-card look: scheme variant colors + a single border
     width that only changes color when selected (no width jump / thick border). */
  .cyo-builder__card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: var(--options-border-width, 1px) solid var(--color-variant-border);
    border-radius: var(--options-border-radius, 8px);
    cursor: pointer;
    background: var(--color-variant-background);
    transition: border-color 0.15s ease, opacity 0.15s ease;
    text-align: start;
    box-sizing: border-box;
    scroll-snap-align: start;
  }

  /* Hover only on devices that truly hover (mouse). On touch, tapping a card
     leaves a sticky :hover that keeps the border looking active after unselect. */
  @media (hover: hover) {
    .cyo-builder__card:hover {
      border-color: var(--color-variant-hover-border);
    }
  }

  .cyo-builder__card[aria-pressed="true"],
  .cyo-builder__card[aria-pressed="true"]:hover {
    border-color: var(--color-selected-variant-border);
  }

  .cyo-builder__card[data-cyo-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
  }

  .cyo-builder__card-media {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    overflow: hidden;
  }

  .cyo-builder__card-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .cyo-builder__card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }

  /* "Limited Time Only" highlight above the title for seasonal options.
     Uses the theme's label type (12px) at weight 500. */
  .cyo-builder__card-tag {
    font-size: var(--font-label--size);
    line-height: var(--font-label--line-height);
    font-weight: 500;
    color: var(--cyo-label-color, #526f1b);
  }

  /* Typography from the .label class (12px). Medium by default, semibold when
     the card is selected (per Figma). */
  .cyo-builder__card-title {
    --font-weight: 500;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-width: 0;
  }

  .cyo-builder__card[aria-pressed="true"] .cyo-builder__card-title {
    --font-weight: 600;
  }

  /* Gift wrap uses the same 2-row scrollable grid as the steps. On a combination
     product the combination rules above would force its cards into a full-width
     single column and hide the scroll arrows — these overrides (scoped under the
     element so they outrank + follow that rule) keep gift wrap on the grid in
     every mode. */
  cyo-builder .cyo-builder__step--gift-wrap .cyo-builder__cards {
    grid-auto-flow: row;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(var(--cyo-card-cols, 2), 220px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-inline: var(--cyo-card-focus-space);
  }

  /* Re-show the scroll arrows on desktop for a combination product's gift wrap
     (the combination rule hides them). Desktop-only, so it never fights the
     below-1280px mobile hide. */
  @media screen and (min-width: 1280px) {
    cyo-builder .cyo-builder__step--gift-wrap :is(.cyo-builder__scroll-next, .cyo-builder__scroll-prev).is-visible {
      display: inline-flex;
    }
  }

  @media screen and (max-width: 749px) {
    .cyo-builder__step-header {
      padding: 12px 0;
    }
  }

  /* Scroll arrows are desktop-only (matches the media gallery). Below 1280px is
     tablet/mobile territory - touch/drag handles scrolling, so no arrows. */
  @media screen and (max-width: 1279px) {
    .cyo-builder__scroll-next,
    .cyo-builder__scroll-next.is-visible,
    .cyo-builder__scroll-prev,
    .cyo-builder__scroll-prev.is-visible {
      display: none;
    }
  }
/* END_BLOCK:_cyo-builder */

/* START_BLOCK:_faq-accordion (INDEX:99) */
.faq-accordion {
    color: var(--color-foreground);
  }

  .faq-accordion .details {
    border-color: var(--color-border);
  }

  .faq-accordion .details--header {
    color: var(--faq-heading-color);
  }

  .faq-accordion__content {
    padding-block-start: var(--padding-xs);
  }

  .faq-accordion .faq-accordion__answer a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: currentcolor;
  }

  .faq-accordion .faq-accordion__answer a:hover {
    color: var(--color-primary-hover);
    text-decoration-color: currentcolor;
  }
/* END_BLOCK:_faq-accordion */

/* START_BLOCK:_featured-blog-posts-card (INDEX:100) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:101) */
.featured-blog-posts-card__image {
    width: 100%;
  }

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

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

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

/* START_BLOCK:_footer-social-icons (INDEX:107) */
.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:_goody-brand-upsell (INDEX:108) */
goody-brand-upsell {
    display: none;
    width: 100%;
  }

  goody-brand-upsell[data-has-products] {
    display: block;
  }

  .gbu__heading {
    font-family: var(--font-heading--family);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-foreground-heading);
    margin: 0 0 16px;
    line-height: 1.3;
  }

  /* Mobile: 2 columns, 16px gap (→ 20px on wider phones) */
  .gbu__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  @media screen and (min-width: 480px) and (max-width: 749px) {
    .gbu__grid {
      gap: 20px;
    }
  }

  /* Mobile: cap at 2 cards (one row). JS renders up to 3 (desktop cap);
     hide the 3rd here so mobile shows only 2. */
  @media screen and (max-width: 749px) {
    .gbu__grid > .gbu__card:nth-child(n + 3) {
      display: none;
    }
  }

  .gbu__card {
    display: flex;
    flex-direction: column;
  }

  .gbu__card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    flex: 1 0 auto;
  }

  .gbu__card-link:hover {
    color: inherit;
  }

  .gbu__image {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-background, #f5f5f5);
  }

  .gbu__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .gbu__image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-background, #eee);
  }

  .gbu__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1d1d1d;
    margin: 12px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
  }

  .gbu__prices {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
  }

  .gbu__price {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-foreground);
  }

  .gbu__compare-price {
    text-decoration: line-through;
    color: var(--color-foreground-muted, #757575);
    font-size: 0.875rem;
  }

  .gbu__promo {
    color: #a00400;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 4px 0 0;
    line-height: 1.3;
  }

  .gbu__atc {
    width: 100%;
    margin-top: 12px;
    padding: 8px 20px;
    font-size: 0.875rem;
    font-family: var(--font-body--family);
    font-weight: 600;
    border-radius: 24px;
    background: var(--color-primary-button-background, #e10600);
    color: var(--color-primary-button-text, #fff);
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
    line-height: 1.4;
  }

  .gbu__atc:hover {
    opacity: 0.85;
  }

  .gbu__atc:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Skeleton loading state */
  .gbu__skeleton .gbu__image,
  .gbu__skeleton-line {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: gbu-shimmer 1.5s ease-in-out infinite;
  }

  .gbu__skeleton-line {
    border-radius: 4px;
  }

  @keyframes gbu-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Desktop: 3 columns, 16px gap. Top spacing 0 on mobile (template
     padding-block-start: 0), 16px on desktop — override .spacing-style's
     var-driven padding-block (specificity: element + class beats .spacing-style). */
  @media screen and (min-width: 750px) {
    goody-brand-upsell.gbu {
      padding-block-start: 16px;
    }

    .gbu__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .gbu__atc {
      width: auto;
      align-self: flex-start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gbu__skeleton .gbu__image,
    .gbu__skeleton-line {
      animation: none;
    }
  }
/* END_BLOCK:_goody-brand-upsell */

/* START_BLOCK:_header-logo (INDEX:109) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_header-nav (INDEX:111) */
/* Mobile menu height cap. The old Tailwind arbitrary class
     (tw-max-h-[calc(75dvh+...)]) is not in the prebuilt bundle.theme.css,
     so without this rule the menu has no max-height and overflow-auto
     never scrolls while the page scroll is locked. */
  @media screen and (max-width: 1023px) {
    .header-wrapper .js-mobile-nav {
      max-height: calc(75dvh + var(--height-exclude-top-bar, 0px));
      overscroll-behavior: contain;
    }
  }

  /* Underlined like the menu links below them, which get it from `.text-block a`
     (snippets/text.liquid). The base `a` rule (assets/base.css) makes the underline
     transparent, so the colour has to be set back too. */
  .header-nav__account-link {
    text-decoration: underline;
    text-decoration-color: currentcolor;
  }
/* END_BLOCK:_header-nav */

/* START_BLOCK:_header-navigation-item (INDEX:112) */
/* Mega-menu promo banners: every banner (incl. a second one) stretches to the row height. */
  .header-nav-promo-banners {
    align-items: stretch;
  }

  .header-nav-promo-banners > .header-nav-promo-banner {
    display: flex;
    flex-direction: column;
    height: auto;
    align-self: stretch;
  }

  /* Image wrapper grows to fill the stretched banner; the cover image follows. */
  .header-nav-promo-banners > .header-nav-promo-banner > :first-child {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  .header-nav-promo-banners .header-nav-promo-banner img {
    flex: 1 1 auto;
    object-fit: cover;
  }
/* END_BLOCK:_header-navigation-item */

/* START_BLOCK:_image (INDEX:115) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

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

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:119) */
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:_mobile-menu-carousel (INDEX:122) */
.carousel-wrapper::after {
  content: '';
  flex: 0 0 var(--carousel-gap);
}
/* END_BLOCK:_mobile-menu-carousel */

/* START_BLOCK:_product-details (INDEX:127) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

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

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

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

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

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

/* START_BLOCK:_product-price-info (INDEX:135) */
/* Promotional message below the price on product cards (PLP / Search / Homepage /
     Bundle Builder page). Mirrors the PDP promo styling: brand red, Poppins Medium,
     14px, sitting 6px under the price. */
  .product-card-price-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .product-card-price-info__promo {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: #a00400;
  }

  @media screen and (max-width: 749px) {
    .product-card-price-info__promo {
      font-size: 0.75rem;
    }
  }
/* END_BLOCK:_product-price-info */

/* START_BLOCK:_search-drawer (INDEX:136) */
.search-drawer {
    display: none;
  }

  /* When drawer is open, flatten the header-wrapper's bottom corners AND
     suppress its downward box-shadow at the seam so the drawer + header
     look like one continuous floating box. The drawer carries its own
     matching shadow below. */
  .header-wrapper:has(.js-search-drawer.--is-open) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
  }

  .search-drawer.--is-open {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--color-gray-light);
    border-radius: 0 0 8px 8px;
    z-index: var(--layer-overlay);
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    /* Fallback for browsers without dvh; iOS treats `vh` as the largest viewport
       (address bar hidden), which pushes the drawer bottom behind the browser
       chrome so the last results can't be scrolled to. */
    max-height: 80vh;
    /* The drawer is anchored below the sticky header (top: 100%), so size it to
       the space between the header bottom and the visible viewport bottom. `dvh`
       tracks the viewport as the address bar shows/hides. */
    max-height: calc(100dvh - var(--header-height, 60px) - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  @media screen and (min-width: 750px) {
    .search-drawer.--is-open {
      padding: 48px 64px 32px;
      max-height: 80vh;
    }
  }

  /* Input */
  .search-drawer__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .search-drawer__input {
    width: 100%;
    height: 48px;
    border: 1px solid #C6C6C6;
    border-radius: 8px;
    padding: 10px 48px 10px 16px;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: 16px;
    line-height: 17px;
    color: var(--color-black-secondary);
    background: #fff;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }

  .search-drawer__input::placeholder {
    color: #6B6B6B;
  }

  .search-drawer__input:focus {
    border-color: var(--color-black-light);
  }

  /* Hide WebKit's native clear button */
  .search-drawer__input::-webkit-search-cancel-button,
  .search-drawer__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
  }

  .search-drawer__clear-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-black-secondary);
  }

  .search-drawer__clear-btn svg {
    width: 20px;
    height: 20px;
  }

  /* Empty state */
  .search-drawer__empty-state {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .search-drawer__empty-state.--hidden {
    display: none;
  }

  /* Section headings */
  .search-drawer__section-heading {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.12px;
    text-transform: uppercase;
    color: var(--color-black-light);
    margin: 0 0 24px;
  }

  /* Products grid */
  .search-drawer__bestsellers {
    display: flex;
    flex-direction: column;
  }

  .search-drawer__products-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 53%;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    margin-right: -16px;
    padding-right: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .search-drawer__products-grid::-webkit-scrollbar {
    display: none;
  }

  .search-drawer__products-grid > * {
    scroll-snap-align: start;
    min-width: 0;
  }

  /* Keep the product-card CTA full-width in the drawer (bestsellers empty state
     and predictive results both use the static product-card snippet, whose
     button defaults to content width on mobile). */
  .search-drawer .product-card__atc .button {
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .search-drawer__products-grid {
      grid-auto-flow: row;
      grid-auto-columns: auto;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      overflow-x: visible;
      scroll-snap-type: none;
      padding-bottom: 0;
      margin-right: 0;
      padding-right: 0;
    }
  }

  /* Top searches chips */
  .search-drawer__top-searches {
    display: flex;
    flex-direction: column;
  }

  .search-drawer__chips {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .search-drawer__chips::-webkit-scrollbar {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .search-drawer__chips {
      flex-wrap: wrap;
      overflow-x: visible;
    }
  }

  .search-drawer__chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black-secondary);
    text-decoration: none;
    white-space: nowrap;
    background: #fff;
    flex-shrink: 0;
  }

  .search-drawer__chip:hover {
    border-color: var(--color-black-light);
  }

  /* Loading */
  .search-drawer__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
    width: 100%;
  }

  .search-drawer__loading.--hidden {
    display: none;
  }

  .search-drawer__spinner {
    display: block;
    width: 28px;
    height: 28px;
    border: 2px solid var(--color-gray-light);
    border-top-color: var(--color-black);
    border-radius: 50%;
    animation: search-drawer-spin 0.7s linear infinite;
  }

  @keyframes search-drawer-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .search-drawer__spinner {
      animation-duration: 2s;
    }
  }

  /* Results */
  .search-drawer__results {
    width: 100%;
  }

  .search-drawer__results.--hidden {
    display: none;
  }
/* END_BLOCK:_search-drawer */

/* START_BLOCK:_search-input (INDEX:137) */
.search-page-input {
    width: 100%;
    font-size: 16px;
    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::-webkit-search-cancel-button,
  .search-page-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
  }

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

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:139) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

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

  .social-icons__icon {
    display: none;
  }

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

    .social-icons__icon {
      display: block;
    }

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

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

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

/* START_BLOCK:_ugc-group (INDEX:141) */
.ugc-group {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--ugc-radius, 8px);
  }

  /* Fill the card with the nested image/video block */
  .ugc-group__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .ugc-group__media > * {
    width: 100%;
    height: 100%;
  }

  /* Shopify theme blocks cannot limit nested blocks as a group. Render only
     the first media child if an extra Image or Video is added accidentally. */
  .ugc-group__media > :not(:first-child) {
    display: none;
  }

  .ugc-group__media .image-block {
    display: block;
    height: 100%;
  }

  .ugc-group__media .image-block__image,
  .ugc-group__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
  }

  .ugc-group__media deferred-media,
  .ugc-group__media .deferred-media__poster-button,
  .ugc-group__media .video-placeholder-wrapper {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ugc-group__media video,
  .ugc-group__media iframe,
  .ugc-group__media .deferred-media__poster-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Fullscreen: fit the whole (vertical/reel) video instead of cropping it.
     The <video> element itself enters native fullscreen, so target it globally
     with !important to beat the object-fit:cover above. Prefixed selectors are
     split into their own rules so an unknown pseudo-class doesn't invalidate
     the standard rule. */
  video:fullscreen {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    background: #000;
  }

  video:-webkit-full-screen {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    background: #000;
  }

  video:-moz-full-screen {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    background: #000;
  }

  /* Gradient/solid overlay behind the text, never blocks clicks */
  .ugc-group__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .ugc-group--bottom .ugc-group__overlay {
    background: linear-gradient(to top, var(--ugc-overlay-color) 0%, transparent 60%);
  }

  .ugc-group--top .ugc-group__overlay {
    background: linear-gradient(to bottom, var(--ugc-overlay-color) 0%, transparent 60%);
  }

  .ugc-group--center .ugc-group__overlay {
    background: var(--ugc-overlay-color);
  }

  .ugc-group__content {
    position: absolute;
    inset-inline: 0;
    z-index: 2;
    padding: 16px;
    pointer-events: none;
    --color: var(--ugc-text-color, #ffffff);
  }

  .ugc-group--bottom .ugc-group__content {
    bottom: 0;
  }

  .ugc-group--top .ugc-group__content {
    top: 0;
  }

  .ugc-group--center .ugc-group__content {
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
  }

  /* Base: overlay hidden by default (image-only groups) */
  .ugc-group__overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  /* Show overlay on video groups (when not playing) */
  .ugc-group:has(deferred-media) .ugc-group__overlay {
    opacity: 1;
  }

  /* Show overlay when text content is present */
  .ugc-group:has(.ugc-group__content) .ugc-group__overlay {
    opacity: 1;
  }

  /* Hide overlay + text during video playback */
  .ugc-group:has(deferred-media[data-playing]) .ugc-group__overlay,
  .ugc-group:has(deferred-media[data-playing]) .ugc-group__content {
    opacity: 0;
    pointer-events: none;
  }

  .ugc-group__text {
    margin: 0;
  }

  @media screen and (max-width: 749px) {
    .ugc-group__content {
      padding: 12px;
    }
  }
/* END_BLOCK:_ugc-group */

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

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  /* Bottom divider.
     A row can be hidden when its content is empty (see _accordion-row), and CSS :last-child still
     counts a hidden row — and CSS can't select the "last visible" row. So:
     - Fallback (before/without JS): a bottom line on the container. Always present, so the accordion
       is never left without a closing line. With custom container bottom padding it sits at the
       container edge — accordion-dividers.js removes that nuance.
     - JS mode (accordion-dividers.js marked the last visible row): the line moves onto that row so
       it hugs the content in every case, and the container fallback is switched off (no double).
     Both stay off in custom-border mode (--show-fallback-borders: 0). */
  .accordion--dividers:not([data-js-dividers]) {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers[data-js-dividers] .accordion-row--last-visible .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-lg);
  }

  .accordion .details-content > *:not(:last-child) {
    margin-block-end: var(--padding-lg);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    color: var(--color-foreground-heading);
    padding-block: var(--padding-lg);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:brand-about (INDEX:145) */
.brand-about {
    width: 100%;
    color: var(--color-foreground);
  }

  .brand-about[hidden] {
    display: none;
  }

  .brand-about__content,
  .brand-about__content > * {
    margin-block: 0;
  }
/* END_BLOCK:brand-about */

/* START_BLOCK:breadcrumb (INDEX:146) */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-block-end: var(--margin-lg);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .breadcrumb::-webkit-scrollbar {
    display: none;
  }

  .breadcrumb__link,
  .breadcrumb__current,
  .breadcrumb__separator {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .breadcrumb__link {
    text-decoration: underline;
  }

  .breadcrumb__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
  }

  .breadcrumb__icon {
    width: 16px;
    height: 16px;
    transform: rotate(-90deg);
  }

  @media screen and (min-width: 750px) {
    .breadcrumb {
      margin-block-end: var(--margin-xs);
    }
  }
/* END_BLOCK:breadcrumb */

/* START_BLOCK:comparison-slider (INDEX:153) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:154) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

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

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

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

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

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

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

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

    min-width: fit-content;

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

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

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

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

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

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

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

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

  .cordial-email-signup__input {
    flex: 1;
    min-width: 0;
    color: var(--color-input-text);
    font-size: var(--email-signup-input-font-size);
    line-height: var(--font-body-regular--line-height);
    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%;
    }
  }

  .cordial-email-signup__input:focus-visible {
    outline: none;
  }

  .cordial-email-signup__input-group--integrated .cordial-email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding-block: 0;
    padding-inline: var(--padding-2xl) var(--padding-md);
  }

  .cordial-email-signup__button {
    white-space: nowrap;
    font-weight: 600;

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

  .cordial-email-signup__input {
    padding: var(--padding-lg) var(--padding-2xl);
  }

  .cordial-email-signup__button--text {
    padding-block: var(--email-signup-button-padding-block);
    padding-inline: var(--email-signup-button-padding-inline);
    font-size: var(--email-signup-button-font-size);
  }

  .cordial-email-signup__button--size-small {
    --email-signup-button-padding-block: var(--button-padding-block-sm);
    --email-signup-button-padding-inline: var(--button-padding-inline-sm);
    --email-signup-button-font-size: var(--button-font-size-sm);
  }

  .cordial-email-signup__button--size-medium {
    --email-signup-button-padding-block: var(--button-padding-block-md);
    --email-signup-button-padding-inline: var(--button-padding-inline-md);
    --email-signup-button-font-size: var(--button-font-size-md);
  }

  .cordial-email-signup__button--size-large {
    --email-signup-button-padding-block: var(--button-padding-block-lg);
    --email-signup-button-padding-inline: var(--button-padding-inline-lg);
    --email-signup-button-font-size: var(--button-font-size-lg);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &.cordial-email-signup__button--text.button-unstyled {
      min-width: 44px;
      min-height: 44px;
    }

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

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

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

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

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

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

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

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

  .cordial-email-signup-block .is-hidden {
    display: none;
  }

  .cordial-email-signup__success-icon {
    flex-shrink: 0;
    align-self: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-inline-end: var(--padding-2xl);
    color: var(--color-input-text);
  }

  .cordial-email-signup__message-text {
    margin: 0;
  }

  .cordial-email-signup__consent {
    margin-block-start: var(--gap-xs);
    max-width: 100%;
  }

  .cordial-email-signup__consent .cordial-email-signup__consent-label:has(.cordial-email-signup__consent-input) {
    display: flex;
    align-items: flex-start;
    gap: var(--padding-xs);
    cursor: pointer;
    color: var(--color-foreground);
    text-wrap: pretty;
  }

  .cordial-email-signup__consent-input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-inline-end: 0;
    border: 1px solid var(--color-input-border);
    border-radius: 4px;
    background-color: var(--color-input-background);
  }

  .cordial-email-signup__consent-input:not(:disabled):not(:checked):hover {
    border-color: var(--color-input-border);
    background-color: var(--color-input-hover-background);
  }

  .cordial-email-signup__consent-input:checked {
    border-color: var(--color-primary-button-background);
    background-color: var(--color-primary-button-background);
  }

  .cordial-email-signup__consent-input:not(:disabled):hover:checked {
    border-color: var(--color-primary-button-background);
    background-color: var(--color-primary-button-background);
  }

  .cordial-email-signup__consent-input:checked::after {
    background-color: var(--color-input-background);
  }

  .cordial-email-signup__consent-text {
    margin: 0;
  }

  .cordial-email-signup__consent-text :is(p, ul, ol) {
    margin: 0;
  }

  .cordial-email-signup__consent-text a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-underline-offset: 0.12em;
  }

  .cordial-email-signup__consent-text a:hover {
    color: var(--color-primary-hover);
    text-decoration-color: transparent;
  }
/* END_BLOCK:cordial-email-signup */

/* START_BLOCK:country-selector (INDEX:157) */
.country-selector {
    display: flex;
    align-items: center;
    position: relative;
  }

  @media screen and (max-width: 749px) {
    .country-selector[data-enable-on="desktop"] {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .country-selector[data-enable-on="mobile"] {
      display: none;
    }
  }

  .country-selector__trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--animation-speed) var(--animation-easing);
  }

  .country-selector__trigger:hover,
  .country-selector__trigger[aria-expanded='true'] {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .country-selector__globe {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .country-selector__trigger-text {
    font-size: 13px;
  }

  /* Flag-only trigger */
  .country-selector__trigger-flag {
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .country-selector__caret {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .country-selector__trigger[aria-expanded='true'] .country-selector__caret {
    transform: rotate(180deg);
  }

  /* Panel */
  .country-selector__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: var(--layer-heightened);
    min-width: 280px;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 0.08), 0 1px 4px rgb(0 0 0 / 0.04);
  }

  .country-selector__panel::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 24px;
    width: 10px;
    height: 10px;
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    transform: rotate(45deg);
  }

  .country-selector__panel[hidden] {
    display: none;
  }

  .country-selector__form {
    width: 100%;
  }

  .country-selector__panel localization-form-component {
    display: block;
    width: 100%;
  }

  /* List */
  .country-selector__list {
    list-style: none;
    margin: 0;
    padding: 8px;
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .country-selector__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed) var(--animation-easing);
  }

  .country-selector__item:hover {
    background-color: rgb(var(--color-foreground-rgb) / 0.04);
  }

  .country-selector__item[aria-current='true'] {
    font-weight: 600;
  }

  /* Checkmark */
  .country-selector__item-check {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    visibility: hidden;
    color: var(--color-foreground);
  }

  .country-selector__item[aria-current='true'] .country-selector__item-check {
    visibility: visible;
  }

  /* Flag */
  .country-selector__item-flag {
    font-size: 20px;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Country name */
  .country-selector__item-name {
    white-space: nowrap;
  }

  /* Language selector */
  .country-selector__language {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
  }

  .country-selector__language-label {
    font-size: 13px;
    font-weight: 500;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    flex-shrink: 0;
  }

  .country-selector__language-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .country-selector__language-select {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    padding: 4px 22px 4px 8px;
    cursor: pointer;
    text-align: right;
  }

  .country-selector__language-select:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 2px;
    border-radius: 4px;
  }

  .country-selector__language-select:focus {
    outline: none;
  }

  .country-selector__language-caret {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    pointer-events: none;
    color: var(--color-foreground);
  }

  /* Footer context: panel opens upward (desktop only — mobile uses bottom sheet) */
  @media screen and (min-width: 750px) {
    footer .country-selector__panel,
    .footer .country-selector__panel {
      top: auto;
      bottom: calc(100% + 12px);
    }

    footer .country-selector__panel::before,
    .footer .country-selector__panel::before {
      top: auto;
      bottom: -6px;
      transform: rotate(225deg);
    }
  }

  /* Fix footer-utilities grid when this block is hidden on desktop */
  @media screen and (min-width: 750px) {
    .utilities--blocks-3:has(> .country-selector[data-enable-on="mobile"]) {
      grid-template-columns: 2fr 1fr;
    }
  }

  /* Mobile bottom sheet */
  @media screen and (max-width: 749px) {
    .country-selector__panel {
      position: fixed;
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      max-height: 70vh;
      border-radius: 16px 16px 0 0;
    }

    .country-selector__panel::before {
      display: none;
    }

    .country-selector__list {
      max-height: calc(70vh - 16px);
    }
  }
/* END_BLOCK:country-selector */

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

    min-width: fit-content;

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

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

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

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

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

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

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

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

  .email-signup__input {
    flex: 1;
    min-width: 0;
    color: var(--color-input-text);
    font-size: var(--email-signup-input-font-size);
    line-height: var(--font-body-regular--line-height);
    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:focus-visible {
    outline: none;
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding-block: 0;
    padding-inline: var(--padding-2xl) var(--padding-md);
  }

  .email-signup__button {
    white-space: nowrap;
    font-weight: 600;

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

  .email-signup__input {
    padding: var(--padding-lg) var(--padding-2xl);
  }

  .email-signup__button--text {
    padding-block: var(--email-signup-button-padding-block);
    padding-inline: var(--email-signup-button-padding-inline);
    font-size: var(--email-signup-button-font-size);
  }

  .email-signup__button--size-small {
    --email-signup-button-padding-block: var(--button-padding-block-sm);
    --email-signup-button-padding-inline: var(--button-padding-inline-sm);
    --email-signup-button-font-size: var(--button-font-size-sm);
  }

  .email-signup__button--size-medium {
    --email-signup-button-padding-block: var(--button-padding-block-md);
    --email-signup-button-padding-inline: var(--button-padding-inline-md);
    --email-signup-button-font-size: var(--button-font-size-md);
  }

  .email-signup__button--size-large {
    --email-signup-button-padding-block: var(--button-padding-block-lg);
    --email-signup-button-padding-inline: var(--button-padding-inline-lg);
    --email-signup-button-font-size: var(--button-font-size-lg);
  }

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

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

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

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

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

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

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

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

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

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

    &.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.button-unstyled {
      min-width: 44px;
      min-height: 44px;
    }

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

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

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

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

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

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

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

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

  .email-signup__message-text {
    margin: 0;
  }

  .email-signup__consent {
    margin-block-start: var(--gap-xs);
    max-width: 100%;
  }

  .email-signup__consent .email-signup__consent-label:has(.email-signup__consent-input) {
    display: flex;
    align-items: flex-start;
    gap: var(--padding-xs);
    cursor: pointer;
    color: var(--color-foreground);
    text-wrap: pretty;
  }

  .email-signup__consent-input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-inline-end: 0;
    border: 1px solid var(--color-input-border);
    border-radius: 4px;
    background-color: var(--color-input-background);
  }

  .email-signup__consent-input:not(:disabled):not(:checked):hover {
    border-color: var(--color-input-border);
    background-color: var(--color-input-hover-background);
  }

  .email-signup__consent-input:checked {
    border-color: var(--color-primary-button-background);
    background-color: var(--color-primary-button-background);
  }

  .email-signup__consent-input:not(:disabled):hover:checked {
    border-color: var(--color-primary-button-background);
    background-color: var(--color-primary-button-background);
  }

  .email-signup__consent-input:checked::after {
    background-color: var(--color-input-background);
  }

  .email-signup__consent-text {
    margin: 0;
  }

  .email-signup__consent-text :is(p, ul, ol) {
    margin: 0;
  }

  .email-signup__consent-text a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-underline-offset: 0.12em;
  }

  .email-signup__consent-text a:hover {
    color: var(--color-primary-hover);
    text-decoration-color: transparent;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:161) */
@media screen and (min-width: 1024px) {
  collection-filters.tw-fixed {
    position: sticky;
    top: calc(var(--sticky-header-offset, 0px) + 18px);
    align-self: start;
    max-height: calc(100vh - var(--sticky-header-offset, 0px) - 36px);
    overflow-y: auto;
  }
}

/* Mobile sort radio — matches Figma (white circle, black ring, black center dot) */
/* Override the global `label:has(input[type=radio])` gap (var(--padding-2xs), 4px)
   with higher specificity so the radio-to-text gap matches Figma's 8px. */
label.filters-sort:has(input[type='radio']) {
  gap: var(--padding-xs);
}

.filters-sort__radio {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-black-secondary, #1d1d1d);
  border-radius: 9999px;
  background-color: #ffffff;
  cursor: pointer;
  display: grid;
  place-content: center;
}

.filters-sort__radio::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--color-black-secondary, #1d1d1d);
  transform: scale(0);
  transition: transform 0.1s ease-in-out;
}

.filters-sort__radio:checked::before {
  transform: scale(1);
}

.filters-sort__radio:focus-visible {
  outline: 2px solid var(--color-black-secondary, #1d1d1d);
  outline-offset: 2px;
}

.filters-sort__radio:checked + .filters-sort__label {
  font-weight: 600;
  color: var(--color-black-secondary, #1d1d1d);
}
/* END_BLOCK:filters */

/* START_BLOCK:footer-legal-links (INDEX:164) */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
  }

  .footer-legal li {
    display: flex;
  }

  .footer-legal a {
    color: inherit;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }
/* END_BLOCK:footer-legal-links */

/* START_BLOCK:footer-policy-list (INDEX:165) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:gift-wrap (INDEX:166) */
.gift-wrap-block-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
  }

  .gift-wrap-block {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }

  .gift-wrap-block__image {
    display: block;
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 8px;
  }

  .gift-wrap-block__content {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .gift-wrap-block__heading {
    margin: 0;
  }

  .gift-wrap-block__trigger {
    display: inline;
    width: auto;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  .gift-wrap-block__text,
  .gift-wrap-block__link {
    display: inline;
  }

  .gift-wrap-block__link {
    text-decoration: underline;
    text-underline-offset: 0.08em;
  }

  @media screen and (max-width: 749px) {
    .gift-wrap-block__text,
    .gift-wrap-block__link {
      display: block;
    }
  }
/* END_BLOCK:gift-wrap */

/* START_BLOCK:icon (INDEX:168) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

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

/* START_BLOCK:image (INDEX:169) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  @media screen and (max-width: 749px) {
    .placeholder-image {
      aspect-ratio: var(--ratio-mobile, var(--ratio));
    }
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  @media screen and (max-width: 749px) {
    .image-block__image {
      aspect-ratio: var(--ratio-mobile, var(--ratio));
    }
  }

  .image-block--background {
    position: absolute;
    inset: 0;
    padding: 0;
    pointer-events: none;
  }

  .image-block--background .image-block__image {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
  }

  /* Parallax: a transform drifts the image on scroll from its natural resting
     position (resting offset is 0, set by assets/image-parallax.js). Two modes:

     • Contain — the image stays fully in flow at its configured Size, so the
       section grows to show the whole image (no crop). Nothing extra needed
       beyond the base rules below.
     • Cover — the image is taken out of the section's height flow (block-size:0)
       so the section stays content-sized; the image overflows and is clipped at
       the section border (crop from the bottom) via the clip-path rules below,
       bleeding into the adjacent section, and scroll drift reveals the hidden
       portion. The Size HEIGHT option does not apply in this mode (the crop
       window is the section itself); width/aspect-ratio still apply.

     The wrapper is display:contents so it adds no layout box. */
  .image-block__parallax {
    display: contents;
  }

  .image-block.image-block--parallax {
    overflow: visible;
  }

  .image-block--parallax .image-block__image {
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }

  .image-block--parallax-style-cover {
    block-size: 0;
    min-block-size: 0;
    /* The slot is 0-height; without this the flex default (align-items:stretch)
       squashes the image to 0 and nothing renders. flex-start keeps the image's
       top at its natural slot position, extending downward. */
    align-items: flex-start;
  }

  .image-block--parallax-style-cover.image-block--height-fill .image-block__image,
  .image-block--parallax-style-cover .image-block__image {
    height: auto;
  }

  /* Lift the section above its neighbours so the overflowing image paints over
     the adjacent section instead of being covered/blended by it. The image is
     made non-interactive so it doesn't intercept clicks on the section it now
     floats over. */
  .shopify-section:has(.image-block--parallax) {
    position: relative;
    z-index: 1;
  }

  .image-block--parallax .image-block__image {
    pointer-events: none;
  }

  .shopify-section:has(.image-block--parallax-style-cover.image-block--parallax-top) {
    clip-path: inset(-100vh 0 0 0);
  }

  .shopify-section:has(.image-block--parallax-style-cover.image-block--parallax-bottom) {
    clip-path: inset(0 0 -100vh 0);
  }

  .shopify-section:has(.image-block--parallax-style-cover.image-block--parallax-both) {
    clip-path: inset(-100vh 0 -100vh 0);
  }

  @media (prefers-reduced-motion: reduce) {
    .image-block--parallax .image-block__image {
      transform: translate3d(0, 0, 0) !important;
    }
  }
/* END_BLOCK:image */

/* START_BLOCK:links (INDEX:171) */
.links-block {
    width: 100%;
  }

  .links-block__list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: var(--links-direction, column);
    gap: var(--links-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .links-block a {
    --button-color: var(--color-foreground);
    color: var(--color-foreground);
    font-weight: var(--links-font-weight, inherit);
    text-decoration-color: currentcolor;
  }

  .links-block a:hover {
    text-decoration-color: transparent;
    color: var(--color-primary-hover);
  }

  /* EA-4021 — mobile drawer accordion (only rendered when the call site passes enable_accordions).
     The open/close animation comes from accordion-custom. The arrow is the theme's dropdown
     chevron (chevron-down.svg, as on the desktop Help and the drawer's own nav items) at the
     large icon size; base.css flips it for an open panel (`details[open] > summary
     .icon-animated > svg`). */
  .links-accordion__summary {
    gap: 0.5em;
    padding-block: 0;
    color: var(--color-foreground);
    font-weight: var(--links-font-weight, inherit);
  }

  .links-accordion__summary:hover {
    color: var(--color-primary-hover);
  }

  .links-accordion__icon > svg {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  /* Underlined like the sibling links, which get it from `.text-block a` (snippets/text.liquid). */
  .links-accordion__label {
    text-decoration: underline;
    text-underline-offset: 0.125em;
  }

  .links-accordion__list {
    display: flex;
    flex-direction: column;
    gap: var(--links-gap);
    margin: 0;
    padding-inline-start: 1rem;
  }

  .links-accordion__details[open] > .links-accordion__list {
    padding-block-start: var(--links-gap);
  }

  /* EA-4021 — disclosure dropdown (only rendered when the call site passes enable_dropdowns). */
  .links-dropdown {
    display: block;
  }

  .links-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-foreground);
    font: inherit;
    font-weight: var(--links-font-weight, inherit);
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
  }

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

  /* Underlined exactly like its sibling links, which get `text-decoration: underline` from
     `.text-block a` (snippets/text.liquid) and their offset from the base `a` rule
     (assets/base.css). On hover they keep the underline and only change colour, which the
     trigger's hover colour already does. Only the label — not the chevron. */
  .links-dropdown__label {
    text-decoration: underline;
    text-underline-offset: 0.125em;
  }

  .links-dropdown__icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }

  .links-dropdown__icon svg {
    width: 100%;
    height: 100%;
  }

  .links-dropdown__trigger[aria-expanded='true'] .links-dropdown__icon {
    rotate: 180deg;
  }

  /* Popovers render in the top layer, so the absolutely positioned top bar can't clip
     them and the sticky header can't stack over them. Right-aligned to the trigger
     because the top-bar links sit at the right edge; flips if it would overflow. */
  .links-dropdown__panel {
    inset: auto;
    top: calc(anchor(bottom) + 8px);
    right: anchor(right);
    position-try-fallbacks: flip-inline;
    margin: 0;
    padding: 8px;
    min-width: 13rem;
    max-width: calc(100vw - 32px);
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
    border-radius: var(--style-border-radius-popover);
    background: var(--color-background);
    box-shadow: var(--shadow-popover);
    color: var(--color-foreground);
  }

  @supports not (position-anchor: --links-dropdown) {
    .links-dropdown__panel {
      top: calc((var(--anchor-top, 0) + var(--anchor-height, 0)) * 1px + 8px);
      right: max(16px, calc(var(--anchor-right, 16) * 1px));
    }
  }

  .links-dropdown__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .links-dropdown__link {
    display: block;
    padding: 8px 12px;
    border-radius: calc(var(--style-border-radius-popover) / 2);
    text-decoration: none;
  }

  .links-dropdown__link:is(:hover, :focus-visible) {
    background: rgb(var(--color-foreground-rgb) / 0.08);
  }
/* END_BLOCK:links */

/* START_BLOCK:logo (INDEX:172) */
.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:173) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu__item a {
    color: inherit;
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:175) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

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

/* START_BLOCK:parallax-image (INDEX:176) */
.parallax-image {
    position: absolute;
    top: var(--parallax-top, 10%);
    left: var(--parallax-left, 5%);
    width: var(--parallax-w, 150px);
    z-index: var(--parallax-z, -1);
    pointer-events: none;
    display: block;
    grid-column: 1 / -1;
  }

  .parallax-image__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }

  .parallax-image__img--placeholder {
    background: rgba(0, 0, 0, 0.05);
    aspect-ratio: 1;
  }

  /* Section overflow toggle.
     The JS makes the closest .shopify-section the positioned containing block,
     so overflow set here reliably clips (or releases) the absolute image.
     "Bleed" lets the image spill into the next section; "crop" clips it at the
     section edge as it scrolls. */
  .shopify-section:has(.parallax-image--bleed) {
    overflow: visible;
  }

  .shopify-section:has(.parallax-image--crop) {
    overflow: hidden;
  }

  @media (prefers-reduced-motion: reduce) {
    .parallax-image__img {
      animation: none !important;
      transform: translate3d(0, 0, 0) !important;
    }
  }
/* END_BLOCK:parallax-image */

/* START_BLOCK:payment-icons (INDEX:177) */
.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:pdp-availability (INDEX:178) */
/* Inline container — the controls/cards reuse the header's global
     `store-availability-dialog__*` styles (present site-wide via the header)
     for visual parity; this stylesheet only owns the inline layout + gating. */
  .pdp-availability {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  /* The block takes programmatic focus when the header trigger scrolls here
     (skip-link style target), so the container itself shows no focus ring. */
  .pdp-availability:focus {
    outline: none;
  }

  /* Scrollable lists inside the buy box. The header modal sets
     `overscroll-behavior: contain` on its store list, which is right for a modal
     but traps the wheel here — the page stops moving once the pointer is over the
     list. `auto` restores chaining: the list scrolls to its end, then the page
     continues. Selectors are scoped through `.pdp-availability` so they outrank
     the header's own rules (including its mobile override) regardless of the
     order Shopify concatenates the stylesheets in. */
  .pdp-availability .store-availability-dialog__stores {
    max-height: min(42vh, 360px);
    overflow-y: auto;
    overscroll-behavior: auto;
    flex: none;
    min-height: 0;
    /* Room for the scrollbar so row borders aren't clipped. */
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #c6c6c6 transparent;
  }

  /* The shared dropdown panel (z-index 10) and calendar (11/12) are layered for
     the header's top-layer <dialog>, where nothing competes. Here they sit in the
     page's root stacking context, so those values paint OVER the sticky header
     (--layer-sticky: 8) when the shopper scrolls. Cap both below the header but
     above the surrounding buy-box content (which is flat/static). The calendar
     gets one step more so it stays above the panel if both ever show. */
  .pdp-availability .store-availability-dialog__dropdown-panel {
    z-index: var(--layer-heightened, 4);
  }

  .pdp-availability .store-availability-dialog__calendar {
    z-index: calc(var(--layer-heightened, 4) + 1);
  }

  /* Mobile calendar: the header modal's global rule fixes the calendar to the
     viewport center (right for the short modal, wrong here — the PDP block lives
     in the normal page flow). Keep it anchored below the dropdown like desktop
     and cap the width instead. Scoped selector outranks the global mobile rule. */
  @media screen and (max-width: 749px) {
    .pdp-availability .store-availability-dialog__calendar {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: auto;
      transform: none;
      width: min(100%, 390px);
      max-width: none;
      z-index: calc(var(--layer-heightened, 4) + 1);
    }
  }

  /* Non-English locales: English logic metafields still loading (@theme/logic-metafields).
     The neutral server render must not be acted on or read as an answer, so the whole
     block is inert (set in markup), shimmered, and the labels that depend on the
     shipment-only answer are hidden so no Delivery/Shipment wording flashes. */
  .pdp-availability[data-logic-loading='true'] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
    min-height: 96px;
  }

  .pdp-availability[data-logic-loading='true']::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    animation: pd-skeleton-shimmer 1.2s ease-in-out infinite;
  }

  .pdp-availability[data-logic-loading] .store-availability-dialog__delivery-label-text,
  .pdp-availability[data-logic-loading] .store-availability-dialog__delivery-value,
  .pdp-availability[data-logic-loading='true'] .store-availability-dialog__toggle-btn,
  .pdp-availability[data-logic-loading] .store-availability-dialog__dropdown-text {
    visibility: hidden;
  }

  /* The English lookup failed even after its retry: the existing check-failed message
     (with its "try again") is the only live element; the rest stays inert and dimmed. */
  .pdp-availability[data-logic-loading='error'] > [data-logic-inert] {
    opacity: 0.6;
    pointer-events: none;
  }

  .pdp-availability[data-logic-loading='true'] .store-availability-dialog__zip-input-wrapper,
  .pdp-availability[data-logic-loading='true'] .store-availability-dialog__dropdown-trigger {
    background-color: var(--color-gray-light, #ededed);
  }

  @keyframes pd-skeleton-shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-availability[data-logic-loading='true']::after {
      animation: none;
    }
  }

  /* Loading state — dim + block interaction while a check is in flight. Includes the
     delivery/pickup toggle, which sits ABOVE the inputs (its own row) so it isn't
     covered by the delivery-inputs rule and was staying clickable mid-check. */
  /* Block interaction across the whole delivery-inputs row during a check… */
  .pdp-availability[data-loading='true'] .store-availability-dialog__delivery-inputs {
    pointer-events: none;
  }
  /* …but only DIM the editable controls. EA-3874: opacity cascades to children, so dimming the
     whole row also faded the transient green zip-validation badge/spinner (which appear for 3s
     right as the cold store fetch flips data-loading on) — dim the input + dropdown instead so the
     badge stays crisp. */
  .pdp-availability[data-loading='true'] .store-availability-dialog__toggle-btn,
  .pdp-availability[data-loading='true'] .store-availability-dialog__zip-input,
  .pdp-availability[data-loading='true'] .store-availability-dialog__dropdown-wrapper,
  .pdp-availability[data-loading='true'] .pdp-availability__stores {
    opacity: 0.6;
    pointer-events: none;
  }

  /* While a check is in flight the previous answer is stale, so hide every result
     row — notices and the availability message. The status line
     ("Checking availability…") is the only thing that should speak. Done in CSS so
     it reverts on its own when `data-loading` flips back. */
  .pdp-availability[data-loading='true'] .pdp-availability__notice,
  .pdp-availability[data-loading='true'] .pdp-availability__unavailable,
  .pdp-availability[data-loading='true'] .pdp-availability__cart-lock {
    display: none;
  }

  /* Cart lock: informational, not an error — the shopper isn't blocked, their
     store is simply already decided. Sits where "Change store" would be, so it
     reads as part of the same row rather than a warning bolted on. */
  /* EA-3808: a delivery window the availability check ruled out. The shared
     `store-availability-dialog__dropdown-option:disabled` rule (from the header
     store modal) already dims it and sets the not-allowed cursor; this adds the
     words, because dimming alone reads as "still loading" just as easily as
     "unavailable" — and both states show here within a second of each other. A
     window that is merely still being probed carries no note, so it dims without
     making a claim. */
  .store-availability-dialog__dropdown-option[data-window-note]::after {
    content: attr(data-window-note);
    margin-left: auto;
    padding-left: 8px;
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-gray-dark, #6b6b6b);
  }

  /* Delivery fee next to each speed option (Figma 18327:2383). The label is flex:1, so the
     fee sits at the right. Hidden whenever a window-note is shown (an unavailable option
     speaks through the note's ::after instead — the two share the right edge). */
  .store-availability-dialog__dropdown-option-fee {
    flex-shrink: 0;
    padding-left: 8px;
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-black-light, #464646);
    white-space: nowrap;
  }
  .store-availability-dialog__dropdown-option-fee:empty {
    display: none;
  }
  .store-availability-dialog__dropdown-option[data-window-note] .store-availability-dialog__dropdown-option-fee {
    display: none;
  }
  /* Speed-dropdown fees (1-Hour, Same Day, Next Day & every other option, incl. the flat
     "Free" label) are hidden on purpose. The fee is still calculated and filled in by JS
     (store-availability.js / pdp-availability.js / delivery-fee.js). Delete this rule to
     show them again. */
  .store-availability-dialog__dropdown-option .store-availability-dialog__dropdown-option-fee {
    display: none;
  }

  /* 1-Hour selected but closed right now (store hours): the chosen option is called out
     with a red border + red note, the shopper's cue to switch to Same Day. Disabled so it
     can't be re-picked; the --error border overrides the dimmed :disabled look because the
     error IS the explanation (mirrors the global selector's slot-unavailable red). */
  .store-availability-dialog__dropdown-option--error {
    border: 1px solid var(--color-brand-red, #e10600);
    border-radius: 6px;
    opacity: 1;
  }
  .store-availability-dialog__dropdown-option--error .store-availability-dialog__dropdown-option-label {
    color: var(--color-brand-red, #e10600);
  }
  .store-availability-dialog__dropdown-option--error[data-window-note]::after {
    color: var(--color-brand-red, #e10600);
  }

  /* Two lines (Figma 19436:38234): red message on line 1, underlined "Clear Cart" CTA on line 2.
     Explicit type overrides the .body-small preset on the element; --color is kept for anything
     in the preset that still reads it. */
  .pdp-availability__cart-lock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-brand-red, #e10600);
    --color: var(--color-brand-red, #e10600);
  }
  /* The `display: flex` above is an author rule and beats the UA `[hidden] { display: none }`,
     so the JS-set `hidden` attribute stopped hiding the note — it rendered on every load,
     empty cart included. Restore hiding for the hidden state (both cartLock + cartConflict
     share this class). */
  .pdp-availability__cart-lock[hidden] {
    display: none;
  }

  /* EA-3873: locked delivery/pickup DATE selector while the cart is store-locked. Locked ≠ muted
     — keep the full primary colour (opacity:1 overrides the global busy 0.4), just show the
     not-allowed cursor and hide the arrow so it doesn't invite a tap. The disabled attribute +
     the #toggleDropdown guard already block interaction; pointer-events:auto only lets the cursor
     render. Matches the store selector's locked treatment. */
  .pdp-availability--cart-locked .store-availability-dialog__dropdown-trigger[aria-disabled='true'] {
    opacity: 1;
    /* EA-3874: stays clickable (aria-disabled, not the `disabled` attr) so the click reveals the
       cart-lock message — a normal pointer cursor, not the "blocked" not-allowed one. */
    cursor: pointer;
    pointer-events: auto;
  }

  .pdp-availability--cart-locked
    .store-availability-dialog__dropdown-trigger[aria-disabled='true']
    .store-availability-dialog__dropdown-chevron {
    display: none;
  }

  /* EA-4350: the delivery dropdown's loading state while a typed zip's options are looked
     up — the header modal's spinner, restated here so the PDP does not depend on the modal's
     stylesheet being on the page. */
  .pdp-availability__dropdown-spinner {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid #dbdbdb;
    border-top-color: var(--color-black-secondary, #1d1d1d);
    border-radius: 50%;
    animation: pdp-availability-dropdown-spin 0.7s linear infinite;
  }

  .pdp-availability [data-delivery-loading] .store-availability-dialog__dropdown-chevron {
    display: none;
  }

  .pdp-availability [data-delivery-loading] .pdp-availability__dropdown-spinner {
    display: block;
  }

  @keyframes pdp-availability-dropdown-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* EA-3873: hide the explicit delivery-value text on the PDP — the dropdown trigger already
     shows the chosen value, so it's redundant (matches the store selector, which dropped it). */
  .pdp-availability .store-availability-dialog__delivery-value {
    display: none;
  }

  /* Same treatment as the header modal's link: text-decoration rather than a
     border, so the underline sits on the text instead of the line box. */
  .pdp-availability__cart-lock-link {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .pdp-availability__cart-lock-link:disabled {
    opacity: 0.5;
    cursor: default;
  }

  /* EA-3874: the availability-check-FAILED message — red, with only "try again" rendered as the
     clickable retry control (underlined). Matches the neutral status line's typography. */
  .pdp-availability__check-failed {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #e10600;
    text-align: left;
    margin: 0;
    padding: 4px 0;
  }

  .pdp-availability__check-failed[hidden] {
    display: none;
  }

  .pdp-availability__retry-link {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .pdp-availability__retry-link:hover {
    opacity: 0.8;
  }

  /* "No options for this delivery time" message. Type comes from the `.body-small`
     typography preset; `--color` is the hook that preset reads, so setting it
     recolours the text without fighting the preset's specificity. */
  .pdp-availability__unavailable {
    margin: 0;
    --color: var(--color-error, #e10600);
  }

  .pdp-availability__unavailable[hidden] {
    display: none;
  }

  /* Shipment notice doubles as the error line when the picked date won't work.
     The checkout zip-mismatch box is always an error, so it takes the same red
     text permanently rather than through a modifier class. */
  .pdp-availability__notice--error .store-availability-dialog__auto-notice-text,
  .pdp-availability__zip-mismatch .store-availability-dialog__auto-notice-text {
    color: var(--color-error, #e10600);
  }

  /* The selected store that can't fulfil this product: shown for context only —
     greyed, not selectable, with a "Not available" tag in place of the distance. */
  .pdp-availability__store-card--unavailable {
    opacity: 0.6;
    cursor: default;
  }

  .pdp-availability__store-card--unavailable:hover {
    border-color: var(--color-gray-light, #ededed);
  }

  .pdp-availability__store-tag {
    --color: var(--color-error, #e10600);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Heading above the stores that CAN fulfil the product. */
  .pdp-availability__store-list-heading {
    margin: 4px 0 0;
  }

  /* Keyboard focus on a store card. The card only carries the black border once
     SELECTED, so focus needs its own visible marker — otherwise tabbing through
     the list looks like nothing is happening. Matched to the selected border so
     "focused" and "chosen" read as the same visual language. `:focus` is included
     alongside `:focus-visible` because focus is also moved programmatically by the
     arrow keys, where `:focus-visible` isn't guaranteed to match. */
  .pdp-availability .store-availability-dialog__store-card:is(:focus, :focus-visible) {
    outline: 2px solid var(--color-black-secondary, #1d1d1d);
    outline-offset: 2px;
    border-color: var(--color-black-secondary, #1d1d1d);
  }

  /* The details button keeps its own ring, not the card's. */
  .pdp-availability .store-availability-dialog__details-toggle:focus-visible {
    outline: 2px solid var(--color-black-secondary, #1d1d1d);
    outline-offset: 2px;
  }

  /* Pickup toggle stays visible but inert when the zip has no pickup service. */
  .pdp-availability .store-availability-dialog__toggle-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  /* Availability-unavailable VARIANTS stay selectable and reuse the theme's
     diagonal strikethrough (injected by JS as `.variant-option__strikethrough`),
     exactly like the native sold-out visual — no separate styling needed. */

  /* When WE disable Add to Cart for an availability reason, it uses the theme's
     normal grey disabled state (per client) — the shopper can see it's blocked and
     needs to adjust their selection. No colour override here. */
/* END_BLOCK:pdp-availability */

/* START_BLOCK:popup-link (INDEX:179) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-callouts (INDEX:182) */
.product-callouts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 0.5rem;
    width: 100%;
  }

  .product-callouts__item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2rem;
    max-width: 100%;
    padding: 0.375rem 0.75rem;
    border: 1px solid #ededed;
    border-radius: 1.5rem;
    background: var(--color-background);
    color: inherit;
  }

  .product-callouts__icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
  }

  .product-callouts__icon {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
  }

  .product-callouts__text {
    min-width: 0;
    color: inherit;
  }
/* END_BLOCK:product-callouts */

/* START_BLOCK:product-custom-property (INDEX:185) */
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:188) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

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

/* START_BLOCK:product-message-highlights (INDEX:189) */
.product-message-highlights-block {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
  }

  .product-message-highlights {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
  }

  .product-message-highlights-block[hidden],
  .product-message-highlight[hidden] {
    display: none;
  }

  .product-message-highlight {
    display: flex;
    flex: 1 1 calc(50% - 0.75rem);
    align-items: center;
    gap: 1rem;
    min-width: 0;
  }

  .product-message-highlight__icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: 2.5rem;
    background: var(--product-message-highlight-icon-background);
  }

  .product-message-highlight__icon {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
  }

  .product-message-highlight__text {
    flex: 1 1 auto;
    min-width: 0;
  }
/* END_BLOCK:product-message-highlights */

/* START_BLOCK:product-messaging (INDEX:190) */
.product-messaging {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--color, var(--color-foreground));
    text-align: center;
  }

  .product-messaging__row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    white-space: normal;
  }

  .product-messaging__icon {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    object-fit: contain;
  }
/* END_BLOCK:product-messaging */

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

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

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

/* START_BLOCK:promotional-card (INDEX:193) */
.promotional-card {
    padding: var(--pc-padding, 16px);
  }

  @media screen and (min-width: 750px) {
    .promotional-card {
      padding: var(--pc-padding-desktop, 24px);
    }
  }
/* END_BLOCK:promotional-card */

/* START_BLOCK:review (INDEX:195) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:197) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-xl-plus);
    flex-wrap: wrap;
    justify-content: center;

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

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

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

  .social-icons__icon path,
  .social-icons__icon circle {
    fill: none;
  }

  .social-icons__icon {
    display: none;
  }

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

    .social-icons__icon {
      display: block;
    }

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

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

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

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

/* START_BLOCK:variant-ingredients (INDEX:202) */
.variant-rich-text-metafield {
    width: 100%;
    color: var(--color-foreground);
  }

  .variant-rich-text-metafield[hidden] {
    display: none;
  }

  .variant-rich-text-metafield__content,
  .variant-rich-text-metafield__content > * {
    margin-block: 0;
  }
/* END_BLOCK:variant-ingredients */

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

  /* Play button size (block setting, --play-icon-size). Applies to BOTH the
     custom merchant icon and the theme's default SVG icon. */
  .deferred-media__poster-icon--custom {
    border-radius: 0;
    width: var(--play-icon-size, 56px);
    height: var(--play-icon-size, 56px);
  }

  .deferred-media__poster-icon--custom .deferred-media__poster-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Size the default (theme) play icon SVG from the same setting. */
  .deferred-media__poster-icon--sized svg {
    width: var(--play-icon-size, 56px) !important;
    height: var(--play-icon-size, 56px) !important;
  }

  /* Bring the play button + poster back (in front of the video) when a loaded
     video is paused, so the idle play state returns. Scoped to video blocks. */
  deferred-media.deferred-media--replay[data-media-loaded]:not([data-playing]) .deferred-media__poster-button.deferred-media__playing {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 2;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:205) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

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

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  /* Disable transitions when the content toggle is not caused by direct user interaction, e.g. opening the filters on mobile. Scoped to filter accordions only. */
  accordion-custom[data-filter-param-name] details:not(:focus-within)::details-content,
  accordion-custom[data-filter-param-name] details:not(:focus-within) .details-content {
    transition: none;
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:background-media (INDEX:210) */
@media screen and (max-width: 749px) {
    .background-image__img--desktop {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .background-image__img--mobile,
    .background-image__img--mobile-only {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:214) */
.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:215) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:bundle-progress-bar (INDEX:219) */
/* ===== Unified bundle discount progress bar ===== */

  .bundle-progress {
    padding: 16px;
    flex-shrink: 0;
  }

  .bundle-progress__text {
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 400;
    line-height: 1.42;
    /* Fixed brand grey (not scheme-aware) so the bar renders identically in the
       Bundle Builder drawer (no color scheme) and the Cart drawer (color-scheme-1). */
    color: var(--color-black-light, #464646);
    text-align: center;
  }

  .bundle-progress__text strong {
    font-weight: 600;
  }

  .bundle-progress__bar {
    position: relative;
    height: 12px;
    margin-block-start: 12px;
    margin-block-end: 12px;
    /* Inset the track so the edge marker (strawberry) and its centered label
       stay within the 16px horizontal padding instead of bleeding off the edge. */
    margin-inline: 16px;
  }

  .bundle-progress__track {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 2px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--bundle-progress-color, #e10600) 15%, #ffffff);
    transform: translateY(-50%);
  }

  .bundle-progress__fill {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    height: 2px;
    background: var(--bundle-progress-color, #e10600);
    border-radius: 100px;
    transform: translateY(-50%);
    transition: width 0.3s ease;
  }

  .bundle-progress__dot {
    position: absolute;
    inset-block-start: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--bundle-progress-color, #e10600);
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  .bundle-progress__dot--active,
  .bundle-progress__dot--start {
    background: var(--bundle-progress-color, #e10600);
    border-color: var(--bundle-progress-color, #e10600);
  }

  .bundle-progress__icon {
    position: absolute;
    inset-block-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 2px 4px;
    box-sizing: border-box;
  }

  .bundle-progress__icon-glyph {
    display: block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: var(--bundle-progress-color, #e10600);
    -webkit-mask: var(--bundle-progress-icon) center / contain no-repeat;
    mask: var(--bundle-progress-icon) center / contain no-repeat;
  }

  .bundle-progress__labels {
    position: relative;
    height: 17px;
    /* Match the track inset so each label stays centered under its marker. */
    margin-inline: 16px;
  }

  .bundle-progress__label {
    position: absolute;
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs);
    font-weight: 400;
    line-height: 1.42;
    color: var(--color-black-light, #464646);
    transform: translateX(-50%);
    white-space: nowrap;
  }
/* END_SNIPPET:bundle-progress-bar */

/* START_SNIPPET:button (INDEX:220) */
.button,
  .button-secondary,
  button.shopify-payment-button__button--unbranded,
  .link {
    font-weight: 600;
  }

  .button[aria-disabled='true'],
  .button:disabled,
  button.shopify-payment-button__button--unbranded[aria-disabled='true'],
  button.shopify-payment-button__button--unbranded:disabled {
    background-color: #aaaaaa !important;
    border-color: #aaaaaa !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .button-secondary[aria-disabled='true'],
  .button-secondary:disabled {
    background-color: #ffffff !important;
    border-color: #ededed !important;
    color: #aaaaaa !important;
    opacity: 1 !important;
  }
  .link[aria-disabled='true'],
  .link:disabled {
    color: #aaaaaa !important;
    opacity: 1 !important;
  }

  .button:disabled,
  .button[aria-disabled='true'],
  .button-secondary:disabled,
  .button-secondary[aria-disabled='true'],
  button.shopify-payment-button__button--unbranded:disabled,
  button.shopify-payment-button__button--unbranded[aria-disabled='true'],
  .link:disabled,
  .link[aria-disabled='true'] {
    cursor: not-allowed;
  }

  .link {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-underline-offset: 3.5px;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:buy-buttons-styles (INDEX:221) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

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

  /* Design (EA-1895): 16px under Add to Cart. */
  .buy-buttons-block__paypal {
    margin-block-start: 16px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  product-form-component[data-variant-updating='true'] add-to-cart-component {
    cursor: wait;
    opacity: 0.65;
  }

  product-form-component[data-variant-updating='true'] .add-to-cart-button {
    pointer-events: none;
  }

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

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

  .product__pickup-availabilities {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

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

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

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

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

  .volume-pricing__table {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:222) */
.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--font-display);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:carousel-arrows-styles (INDEX:223) */
/* ── External carousel-arrows snippet ── */
  .carousel-arrows {
    gap: var(--carousel-arrow-gap, 24px);
  }

  .carousel-arrows .swipable-group__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--carousel-arrow-size, 32px);
    height: var(--carousel-arrow-size, 32px);
    min-width: var(--carousel-arrow-size, 32px);
    min-height: var(--carousel-arrow-size, 32px);
    border-radius: 50%;
    background-color: #ffffff !important;
    color: #1d1d1d !important;
    box-shadow: var(--carousel-arrow-shadow, 0 5px 20px rgba(0, 0, 0, 0.1)) !important;
    transition: opacity 0.2s ease;
    pointer-events: auto;
    border: none !important;
    padding: 0 !important;
    overflow: visible;
    appearance: none;
    cursor: pointer;
    box-sizing: border-box;
    font: inherit;
    margin: 0;
  }

  .carousel-arrows .swipable-group__arrow:disabled,
  .carousel-arrows .swipable-group__arrow:disabled:hover {
    opacity: 0.5 !important;
    cursor: not-allowed;
  }

  .carousel-arrows .swipable-group__arrow:not(:disabled):hover {
    opacity: 0.8;
  }

  .carousel-arrows .svg-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--carousel-arrow-icon-size, 24px);
    height: var(--carousel-arrow-icon-size, 24px);
    color: #1d1d1d;
  }

  .carousel-arrows .svg-wrapper svg {
    width: 100%;
    height: 100%;
  }

  .carousel-arrows--icon-caret .icon-caret {
    rotate: -90deg;
  }

  .carousel-arrows--icon-caret .icon-caret.flip-x {
    rotate: 90deg;
  }

  /* ── Resource-list carousel (separated-centered slideshow-arrows) ── */
  .resource-list__carousel slideshow-arrows {
    mix-blend-mode: normal !important;
    align-items: center;
    gap: var(--carousel-arrow-gap, 24px);
  }

  .resource-list__carousel slideshow-arrows .slideshow-control {
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1;
    min-width: var(--carousel-arrow-size, 32px);
    min-height: var(--carousel-arrow-size, 32px);
    width: var(--carousel-arrow-size, 32px);
    height: var(--carousel-arrow-size, 32px);
    padding: 0 !important;
    border-radius: 50%;
    background-color: #ffffff !important;
    color: #1d1d1d !important;
    box-shadow: var(--carousel-arrow-shadow, 0 5px 20px rgba(0, 0, 0, 0.1)) !important;
    transition: opacity 0.2s ease;
    pointer-events: auto;
    border: none !important;
    overflow: visible;
    box-sizing: border-box;
  }

  .resource-list__carousel slideshow-arrows .slideshow-control[disabled],
  .resource-list__carousel slideshow-arrows .slideshow-control[disabled]:hover,
  .resource-list__carousel .slideshow-control[disabled],
  .resource-list__carousel .slideshow-control[disabled]:hover {
    display: flex !important;
    opacity: 0.5 !important;
    cursor: not-allowed;
    animation: none;
    translate: 0;
  }

  .resource-list__carousel:is(slideshow-component:hover, slideshow-component:focus-within):not(
      :has(slideshow-controls:hover)
    )
    > slideshow-container
    > slideshow-arrows
    .slideshow-control[disabled] {
    opacity: 0.5 !important;
    animation: none;
    translate: 0;
  }

  .resource-list__carousel slideshow-arrows .slideshow-control:not([disabled]):hover {
    opacity: 0.8;
  }

  .resource-list__carousel slideshow-arrows .slideshow-control .svg-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--carousel-arrow-icon-size, 24px);
    height: var(--carousel-arrow-icon-size, 24px);
    color: #1d1d1d;
  }

  .resource-list__carousel slideshow-arrows .slideshow-control .svg-wrapper svg {
    width: 100%;
    height: 100%;
  }

  .resource-list__carousel slideshow-arrows .slideshow-control--previous:has(.icon-arrow).flip-x {
    scale: none;
  }

  .resource-list__carousel slideshow-arrows .slideshow-control--previous .svg-wrapper.icon-arrow,
  .resource-list__carousel slideshow-arrows .slideshow-control--previous[disabled] .svg-wrapper.icon-arrow,
  .resource-list__carousel slideshow-arrows .slideshow-control--previous[disabled]:hover .svg-wrapper.icon-arrow {
    rotate: 180deg;
  }

  .resource-list__carousel .slideshow-control--previous:has(.icon-caret).flip-x {
    scale: none;
  }

  .resource-list__carousel .slideshow-control--next.slideshow-control--style-chevron .icon-caret,
  .resource-list__carousel .slideshow-control--next.slideshow-control--style-chevron_large .icon-caret,
  .resource-list__carousel slideshow-arrows .slideshow-control--next.slideshow-control--style-chevron .icon-caret,
  .resource-list__carousel
    slideshow-arrows
    .slideshow-control--next.slideshow-control--style-chevron_large
    .icon-caret {
    rotate: -90deg;
  }

  .resource-list__carousel .slideshow-control--previous.slideshow-control--style-chevron .icon-caret,
  .resource-list__carousel .slideshow-control--previous.slideshow-control--style-chevron_large .icon-caret,
  .resource-list__carousel .slideshow-control--previous[disabled].slideshow-control--style-chevron .icon-caret,
  .resource-list__carousel .slideshow-control--previous[disabled].slideshow-control--style-chevron_large .icon-caret,
  .resource-list__carousel .slideshow-control--previous[disabled]:hover.slideshow-control--style-chevron .icon-caret,
  .resource-list__carousel
    .slideshow-control--previous[disabled]:hover.slideshow-control--style-chevron_large
    .icon-caret,
  .resource-list__carousel slideshow-arrows .slideshow-control--previous.slideshow-control--style-chevron .icon-caret,
  .resource-list__carousel
    slideshow-arrows
    .slideshow-control--previous.slideshow-control--style-chevron_large
    .icon-caret,
  .resource-list__carousel
    slideshow-arrows
    .slideshow-control--previous[disabled].slideshow-control--style-chevron
    .icon-caret,
  .resource-list__carousel
    slideshow-arrows
    .slideshow-control--previous[disabled].slideshow-control--style-chevron_large
    .icon-caret {
    rotate: 90deg;
  }
/* END_SNIPPET:carousel-arrows-styles */

/* START_SNIPPET:cart-bubble (INDEX:226) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-button-text);
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--color-primary-button-background);
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-items-component (INDEX:229) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

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

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

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

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:231) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
  }

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

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

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }


  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

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

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:232) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }

  /* BB + 1-Hour checkout block */
  .bb-checkout-error {
    color: rgb(var(--color-error, 200 30 30));
    font-size: var(--font-size--2xs);
    line-height: 1.4;
    margin: 0;
    padding-block-end: var(--padding-2xs);
  }

  .bb-checkout-error.is-hidden {
    display: none;
  }

  .cart__checkout-button.is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:catering-fulfillment-gate (INDEX:236) */
/* Products stay out of sight until the fulfillment is valid. display:none also
     keeps lazy-loaded product images from being fetched. */
  .catering-fulfillment-gated [data-collection-section] {
    display: none;
  }

  .catering-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    max-width: 520px;
    margin: 48px auto 64px;
    padding: 0 24px;
  }

  .catering-gate[hidden] {
    display: none;
  }

  .catering-gate__heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #1D1D1D;
    margin: 0;
  }

  .catering-gate__message {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #464646;
    margin: 0 0 8px;
  }

  .catering-gate__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 24px;
    border: none;
    border-radius: 24px;
    background: #E10600;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
  }

  .catering-gate__btn:hover {
    opacity: 0.9;
  }
/* END_SNIPPET:catering-fulfillment-gate */

/* START_SNIPPET:collection-card (INDEX:244) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: 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--zoom-on-hover .collection-card__image {
    overflow: hidden;
  }

  .collection-card--zoom-on-hover .collection-card__image .resource-image__image {
    transition: transform 0.4s ease;
  }

  .collection-card--zoom-on-hover:hover .collection-card__image .resource-image__image,
  .collection-card--zoom-on-hover .collection-card__link:focus-visible ~ .collection-card__inner .collection-card__image .resource-image__image {
    transform: scale(1.05);
  }

  .collection-card--zoom-on-hover:hover .collection-card__content *,
  .collection-card--zoom-on-hover .collection-card__link:focus-visible ~ .collection-card__inner .collection-card__content * {
    text-decoration: underline;
  }

  .collection-card--zoom-on-hover .collection-card__link:focus-visible {
    outline: none;
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:cyo-board-preview-slide (INDEX:250) */
.cyo-board-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* Left/right space between the board and the slide edge. 11.5% ~= the 85px
       margin in the desktop design (85/736), and scales with the frame instead
       of being a fixed px that drifts at other widths. */
    padding-inline: 11.5%;
    box-sizing: border-box;
  }

  /* Wraps tightly around the board image. container-type makes it a size query
     container so the grid + gap can be expressed in cqw (1cqw = 1% of the board
     image width) and scale uniformly with the board. */
  .cyo-board-preview__frame {
    position: relative;
    width: 100%;
    container-type: inline-size;
  }

  .cyo-board-preview__img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* 5x4 grid overlaid on the tray's inner surface. The inset percentages map the
     grid onto the plate area of the illustration; tune the --board-pad-* vars if
     the plates don't sit inside the tray precisely. */
  .cyo-board-preview__grid {
    position: absolute;
    inset: var(--board-pad-y, 5%) var(--board-pad-x, 12%);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    /* Gap in cqw so it scales with the board. 1.9cqw ~= the 10.8px gap in the
       desktop design; the mobile override below matches the ~6px design gap. */
    --board-gap: 1.9cqw;
    gap: var(--board-gap);
  }

  .cyo-board-preview__slot {
    position: relative;
    aspect-ratio: 1;
  }

  /* Plate + icon fill more of the cell than the standard box (the 5-wide grid
     makes each cell small), matching the fuller look in the design. */
  .cyo-board-preview .cyo-preview__slot-empty,
  .cyo-board-preview .cyo-preview__slot-item {
    width: 78%;
    height: 78%;
  }

  /* Clear Selected uses the shared .cyo-preview__clear styling (position, colour,
     type, bottom offset) from the standard preview — the board deliberately has
     no clear-button overrides, so it stays identical to the other CYO types. */

  @media screen and (max-width: 1023px) {
    .cyo-board-preview {
      /* ~18px margin in the mobile design (18/390). */
      padding-inline: 4.6%;
    }

    .cyo-board-preview__grid {
      /* ~6px gap in the mobile design. */
      --board-gap: 1.7cqw;
    }
  }
/* END_SNIPPET:cyo-board-preview-slide */

/* START_SNIPPET:cyo-preview-slide (INDEX:251) */
.cyo-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center the box vertically in the media frame so the top/bottom space is
       equal and adapts to the box height automatically (a taller 12-slot box
       gets smaller margins, a shorter 6-slot box larger). No fixed top/bottom
       padding — only inline padding (matches Figma). */
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding-inline: 32px;
    box-sizing: border-box;
  }

  .cyo-preview__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 680px;
  }

  /* Dense boxes (>12 slots, e.g. 16 = 4x4): cap the box so the plates scale down
     and the extra row fits the slide. Slots are square, so a 4x4 box is ~as tall
     as it is wide; a fixed px cap overflows when the slide (square) is shorter
     than the box — which happens in the mid desktop range (~1024–1535px) where
     the gallery column is narrower. The 78% keeps the box proportionally shorter
     than the slide there (leaving room for Clear); the 540px still caps wide
     screens so plates don't get oversized. Crossover ~1536px, so 1536+ is
     unchanged. Mobile uses its own cap below. */
  .cyo-preview__box--dense {
    max-width: min(540px, 78%);
  }

  /* Wider red banner sitting above the box: square top, rounded bottom, white
     border, separated from the body by a small gap (the T silhouette). */
  .cyo-preview__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
    padding-inline: 16px;
    border: 2px solid #fff;
    border-radius: 0 0 14px 14px;
    background-color: var(--cyo-highlight, #e10600);
    box-sizing: border-box;
  }

  .cyo-preview__emblem {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .cyo-preview__wordmark {
    width: 98px;
    height: auto;
    object-fit: contain;
  }

  /* Narrower red frame; pulled up so the header banner overlaps it slightly
     (no gap), with the header painting on top via its z-index. */
  .cyo-preview__body {
    width: 91.5%;
    margin-block-start: -10px;
    padding: 8px;
    border-radius: 14px;
    background-color: var(--cyo-highlight, #e10600);
    box-sizing: border-box;
  }

  .cyo-preview__panel {
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
  }

  .cyo-preview__grid {
    display: grid;
    grid-template-columns: repeat(var(--cyo-cols, 4), 1fr);
    gap: 18px;
  }

  .cyo-preview__slot {
    position: relative;
    aspect-ratio: 1;
  }

  .cyo-preview__slot-bg,
  .cyo-preview__slot-empty,
  .cyo-preview__slot-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
  }

  .cyo-preview__slot-bg {
    width: 100%;
    height: 100%;
  }

  .cyo-preview__slot-empty {
    width: 58%;
    height: 58%;
  }

  .cyo-preview__slot-item {
    width: 58%;
    height: 58%;
    display: none;
    filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.25));
    /* Keeps the title fallback (shown when a selected product has no image)
       small and contained instead of rendering at the default large size. */
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    color: var(--color-foreground);
    overflow: hidden;
  }

  /* Single: only the bottom (primary) image is used, centered. */
  .cyo-preview__slot[data-filled="true"] .cyo-preview__slot-item--bottom {
    display: block;
  }

  /* Combination: a second image sits on top, shown only when present. */
  .cyo-preview__slot[data-has-top="true"] .cyo-preview__slot-item--top {
    display: block;
  }

  .cyo-preview__slot[data-filled="true"] .cyo-preview__slot-empty {
    display: none;
  }

  /* Combination stacking: the two cookies sit on a diagonal (per Figma) — bottom
     cookie lower-left, top cookie upper-right, overlapping in the middle. */
  .cyo-preview[data-selection-type="combination"] .cyo-preview__slot-item {
    width: 72%;
    height: 72%;
  }

  .cyo-preview[data-selection-type="combination"] .cyo-preview__slot-item--bottom {
    transform: translate(-62%, -38%);
  }

  .cyo-preview[data-selection-type="combination"] .cyo-preview__slot-item--top {
    transform: translate(-38%, -62%);
    z-index: 1;
  }

  /* Pinned toward the bottom of the slide (out of flow) so it never affects the
     box's vertical centering — revealing it on selection can't shift the box. It
     sits within the empty space below the centered box, so it doesn't overlap.
     Desktop keeps it a little higher (easier to read); mobile sits near the
     bottom (matches Figma). Type pulls the theme's body-small font variables
     (exact theme sizing, responsive) while keeping the CYO red + semibold. */
  .cyo-preview__clear {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    font-size: var(--font-body-small--size);
    line-height: var(--font-body-small--line-height);
    font-weight: 600;
    color: var(--cyo-highlight, #e10600);
    background: none;
    border: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    padding: 2px 4px;
  }

  .cyo-preview__clear.is-visible {
    visibility: visible;
  }

  .cyo-preview__clear:hover {
    opacity: 0.7;
  }

  /* Compact sizing runs up to 1023px: below the desktop breakpoint the gallery
     sits in the narrow two-column column (~340–460px), so the box uses the same
     compact scale as mobile. Full desktop sizing kicks in at 1024px, where the
     gallery column is finally wide enough for it. */
  @media screen and (max-width: 1023px) {
    .cyo-preview {
      padding-inline: 14px;
    }

    .cyo-preview__header {
      height: 23px;
      padding-inline: 8px;
      border-width: 1.5px;
      border-radius: 0 0 10px 10px;
    }

    .cyo-preview__emblem {
      width: 14px;
      height: 14px;
    }

    .cyo-preview__wordmark {
      width: 44px;
    }

    .cyo-preview__body {
      margin-block-start: -6px;
      padding: 4px;
      border-radius: 10px;
    }

    .cyo-preview__panel {
      padding: 10px;
    }

    .cyo-preview__grid {
      gap: 8px;
    }

    /* Dense boxes (>12 slots) on mobile: the desktop px cap doesn't constrain a
       narrow column, so a 4x4 grid (slots are square) grows as tall as it is
       wide and overlaps the Clear button. Cap the width proportionally so it
       stays compact and clears the button. */
    .cyo-preview__box--dense {
      max-width: 76%;
    }

    /* Mobile: label type (12 / ~17) + sits nearer the bottom (matches Figma).
       Desktop keeps body-small (14 / 20) from the base rule. */
    .cyo-preview__clear {
      bottom: 16px;
      font-size: var(--font-label--size);
      line-height: var(--font-label--line-height);
    }
  }
/* END_SNIPPET:cyo-preview-slide */

/* START_SNIPPET:divider (INDEX:252) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:260) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:261) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:262) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:263) */
/* 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:fulfillment-details-drawer (INDEX:267) */
.fulfillment-drawer-overlay {
    z-index: 999;
  }

  .fulfillment-drawer {
    z-index: 1000;
    top: 16px;
    right: 16px;
    bottom: 16px;
    width: calc(100% - 32px);
    max-width: 587px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
  }

  .fulfillment-drawer.tw-translate-x-full {
    transform: translateX(calc(100% + 16px));
  }

  .fulfillment-drawer__title,
  .fulfillment-drawer__label {
    color: #464646;
  }

  .fulfillment-drawer__input {
    height: 48px;
    font-size: 12px;
    border-color: #DBDBDB;
    color: #464646;
    padding: 1rem;
  }

  .fulfillment-drawer__input::placeholder {
    color: #464646;
  }

  /* Stands in for the time select while the availability request is in flight.
     Matches the select's box exactly so the section doesn't reflow when the real
     field replaces it. */
  .fulfillment-drawer__skeleton {
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(90deg, #EDEDED 25%, #F7F7F7 50%, #EDEDED 75%);
    background-size: 200% 100%;
    animation: fulfillment-drawer-shimmer 1.4s ease-in-out infinite;
  }

  @keyframes fulfillment-drawer-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }

  /* Respect a reduced-motion preference — the placeholder still reads as "loading"
     from its tone alone. */
  @media (prefers-reduced-motion: reduce) {
    .fulfillment-drawer__skeleton {
      animation: none;
    }
  }

  /* Required marker — only the star is red (the field text stays default). */
  .fulfillment-drawer__req-star {
    color: #E10600;
  }

  /* Field rows. Self-contained rather than composed from tw- utilities: the
     Tailwind bundle is purged, and `tw-grid-cols-1` isn't in it. One column
     until the desktop breakpoint below widens it to two. */
  .fulfillment-drawer__row-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Overlay that mimics a required field's placeholder so the star can be a
     separate red element. Shown only while the input is empty (placeholder
     visible); the input carries a blank placeholder to drive :placeholder-shown. */
  .fulfillment-drawer__req-wrap {
    position: relative;
  }
  .fulfillment-drawer__req-ph {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #464646;
    pointer-events: none;
  }
  .fulfillment-drawer__req-wrap input:not(:placeholder-shown) + .fulfillment-drawer__req-ph {
    display: none;
  }

  .fulfillment-drawer__input:focus {
    outline: none;
    border-color: #1D1D1D;
  }

  /* Visible keyboard focus on EVERY interactive control (WCAG 2.4.7 Focus Visible).
     :focus-visible so a mouse click doesn't draw the ring but a keyboard Tab does.
     These rules sit after the `outline: none` above and share its specificity, so
     for a keyboard focus they win on source order and restore a clear ring. Without
     them the fields showed only a subtle border-colour change and the buttons/select
     showed nothing at all — which reads as "not keyboard accessible". */
  .fulfillment-drawer__input:focus-visible,
  .fulfillment-drawer__close-btn:focus-visible,
  .fulfillment-drawer__back-btn:focus-visible,
  .fulfillment-drawer__btn-primary:focus-visible,
  .fulfillment-drawer__change-store:focus-visible {
    outline: 2px solid #1D1D1D;
    outline-offset: 2px;
    border-color: #1D1D1D;
  }

  select.fulfillment-drawer__input {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%231D1D1D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px 20px;
    padding-right: 44px;
  }

  /* iOS zooms any form control whose font-size is < 16px when it takes focus, so
     every focusable field here goes to 16px on iOS only (this feature query matches
     Safari/iOS).

     The time select matters most: openFulfillmentDetails focuses it as the drawer
     opens, so leaving it at 12px zoomed the page on open with no tap involved. It
     must stay in this list alongside the text fields — a select zooms exactly like
     an input does. */
  @supports (-webkit-touch-callout: none) {
    [data-fulfillment-time],
    [data-fulfillment-first-name],
    [data-fulfillment-last-name],
    [data-fulfillment-phone],
    [data-fulfillment-email],
    [data-fulfillment-instruction] {
      font-size: 16px;
    }
  }

  .fulfillment-drawer__close-btn {
    font-size: 20px;
  }

  /* Back arrow — the JS swaps tw-hidden for tw-flex when opened with `showBack`. */
  .fulfillment-drawer__back-btn {
    padding: 0;
    line-height: 0;
  }

  .fulfillment-drawer__btn-primary {
    background-color: #E10600;
    height: 40px;
    color: #fff;
  }
  .fulfillment-drawer__btn-primary:disabled {
    background-color: #EDEDED;
    color: #999;
    cursor: not-allowed;
    opacity: 1;
  }
  /* Busy state while the cart attributes are being written. */
  .fulfillment-drawer__btn-primary.is-loading {
    opacity: 0.75;
  }

  /* Per-field validation message, directly under its input. An aria-live region,
     so it stays rendered while empty (display:none regions don't announce) —
     the :empty rule zeroes its margin so the empty state adds no layout space. */
  .fulfillment-drawer__field-error {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #E10600;
  }
  .fulfillment-drawer__field-error:empty {
    margin: 0;
  }

  /* Invalid field gets a red border to match its message. */
  .fulfillment-drawer__input[aria-invalid='true'] {
    border-color: #E10600;
  }

  /* Save / availability failure message above the footer button. */
  .fulfillment-drawer__error {
    margin: 0 0 8px 0;
    font-size: 12px;
    line-height: 1.4;
    color: #E10600;
    text-align: center;
  }

  /* Stacks the message and its action, centred. Column rather than row so a long
     message doesn't squeeze the button onto two lines on narrow screens. */
  .fulfillment-drawer__error-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  /* Underlined text button — deliberately not a second primary button competing with
     Checkout below it. */
  .fulfillment-drawer__change-store {
    margin: 0 0 8px 0;
    padding: 0;
    border: none;
    background: none;
    color: #1D1D1D;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
    cursor: pointer;
  }

  .fulfillment-drawer__change-store:hover {
    color: #E10600;
  }

  .fulfillment-drawer__section {
    padding-bottom: 1.5rem;
  }

  .fulfillment-drawer__section:first-child {
    padding-top: 1.5rem;
  }

  /* Instruction textarea — override the fixed 48px height from __input */
  .fulfillment-drawer__textarea {
    height: auto;
    min-height: 96px;
    padding: 12px 16px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
  }

  /* Helper text under the instruction textarea */
  .fulfillment-drawer__field-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #6B6B6B;
  }

  /* Character counter under the instruction textarea */
  .fulfillment-drawer__char-count {
    align-self: flex-end;
    font-size: 10px;
    color: #6B6B6B;
  }

  @media screen and (min-width: 1024px) {
    .fulfillment-drawer {
      width: 587px;
    }
    .fulfillment-drawer__row-grid {
      grid-template-columns: 1fr 1fr;
    }
    /* Set by the JS on the contact row for pickup, where there is no email field
       to pair the phone with. Wins on specificity — no !important needed. */
    .fulfillment-drawer__row-grid.--single-column {
      grid-template-columns: 1fr;
    }
    .fulfillment-drawer__btn-primary {
      width: 280px;
    }
    .fulfillment-drawer__section {
      gap: 24px;
    }
  }
/* END_SNIPPET:fulfillment-details-drawer */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:270) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:gift-wrap-drawer-content (INDEX:272) */
.gift-wrap-drawer-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .gift-wrap-drawer-content__image-frame {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    overflow: hidden;
  }

  .gift-wrap-drawer-content__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gift-wrap-drawer-content__info,
  .gift-wrap-drawer-content__features {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .gift-wrap-drawer-content__intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .gift-wrap-drawer-content__heading,
  .gift-wrap-drawer-content__description {
    margin: 0;
  }

  .gift-wrap-drawer-content__heading.gift-wrap-drawer-content__heading {
    color: #1d1d1d;
  }

  .gift-wrap-drawer-content__description.gift-wrap-drawer-content__description {
    color: #464646;
  }

  .gift-wrap-drawer-content__feature-title.gift-wrap-drawer-content__feature-title {
    color: #464646;
  }

  .gift-wrap-drawer-content__feature-text.gift-wrap-drawer-content__feature-text {
    color: #464646;
  }

  .gift-wrap-drawer-content__feature-icon {
    color: #1d1d1d;
  }

  .gift-wrap-drawer-content__feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  .gift-wrap-drawer-content__feature-icon {
    display: inline-flex;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    color: #1d1d1d;
  }

  .gift-wrap-drawer-content__feature-icon-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .gift-wrap-drawer-content__feature-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
  }
/* END_SNIPPET:gift-wrap-drawer-content */

/* START_SNIPPET:global-drawer (INDEX:273) */
.global-drawer__dialog.global-drawer__dialog {
    position: fixed;
    inset-block: 16px;
    inset-inline-start: auto;
    inset-inline-end: 16px;
    width: min(var(--drawer-width, 358px), calc(100vw - 32px));
    max-width: min(var(--drawer-width, 358px), calc(100vw - 32px));
    height: calc(100dvh - 32px);
    max-height: calc(100dvh - 32px);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    color: var(--color-foreground);
    box-shadow: var(--shadow-popover);
    flex-direction: column;
    overflow: hidden;
  }

  .global-drawer__dialog.global-drawer__dialog[open] {
    display: flex;
    border-radius: 8px;
  }

  .global-drawer__dialog.global-drawer__dialog:modal {
    max-height: calc(100dvh - 32px);
  }

  .global-drawer__dialog.global-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  .global-drawer__dialog.global-drawer__dialog[open] {
    animation: global-drawer-slide-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .global-drawer__dialog.global-drawer__dialog.dialog-closing {
    animation: global-drawer-slide-out 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .global-drawer__header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 0;
    margin-block-end: 24px;
  }

  /* Back arrow + title group (arrow is hidden unless the drawer is opened with showBack) */
  .global-drawer__heading {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

  .global-drawer__back {
    display: inline-flex;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-foreground);
    line-height: 0;
    cursor: pointer;
  }

  .global-drawer__back[hidden] {
    display: none;
  }

  .global-drawer__back svg {
    width: 20px;
    height: 20px;
  }

  .global-drawer__title.global-drawer__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--color, #464646);
    font-weight: var(--font-weight, 600);
    word-break: break-word;
  }

  /* Variant-selector drawer (opened with showBack): header divider shadow + bolder close icon. */
  .global-drawer__dialog--with-back .global-drawer__header {
    padding-block-end: 16px;
    margin-block-end: 16px;
    box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.15);
  }

  .global-drawer__dialog--with-back .global-drawer__close svg path {
    stroke-width: 2;
  }

  .global-drawer__close {
    display: inline-flex;
    flex: 0 0 var(--drawer-close-icon-size, 24px);
    width: var(--drawer-close-icon-size, 24px);
    height: var(--drawer-close-icon-size, 24px);
    align-items: center;
    justify-content: center;
    color: var(--color-foreground);
    line-height: 0;
  }

  .global-drawer__close svg {
    width: var(--drawer-close-icon-size, 24px);
    height: var(--drawer-close-icon-size, 24px);
  }

  .global-drawer__content {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 24px 24px;
    overflow-y: auto;
  }

  @media screen and (min-width: 750px) {
    .global-drawer__dialog.global-drawer__dialog {
      width: min(var(--drawer-width-desktop, 512px), calc(100vw - 32px));
      max-width: min(var(--drawer-width-desktop, 512px), calc(100vw - 32px));
    }

    .global-drawer__close {
      flex-basis: var(--drawer-close-icon-size-desktop, var(--drawer-close-icon-size, 24px));
      width: var(--drawer-close-icon-size-desktop, var(--drawer-close-icon-size, 24px));
      height: var(--drawer-close-icon-size-desktop, var(--drawer-close-icon-size, 24px));
    }

    .global-drawer__close svg {
      width: var(--drawer-close-icon-size-desktop, var(--drawer-close-icon-size, 24px));
      height: var(--drawer-close-icon-size-desktop, var(--drawer-close-icon-size, 24px));
    }
  }

  @keyframes global-drawer-slide-in {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes global-drawer-slide-out {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }
/* END_SNIPPET:global-drawer */

/* START_SNIPPET:goody-upsell (INDEX:275) */
/* ------------------------------------------------------------------ */
  /*  Goody Upsell — shared carousel styles                             */
  /* ------------------------------------------------------------------ */

  goody-upsell {
    display: none;
  }

  goody-upsell[data-has-products] {
    display: block;
  }

  .goody-upsell__heading {
    font-family: var(--font-heading--family);
    font-size: var(--font-size--base, 1rem);
    font-weight: 600;
    margin: 0 0 12px;
    line-height: 1.3;
  }

  .goody-upsell__carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    cursor: grab;
  }

  .goody-upsell__carousel.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
  }

  .goody-upsell__carousel.is-dragging a,
  .goody-upsell__carousel.is-dragging button {
    pointer-events: none;
  }

  .goody-upsell__carousel::-webkit-scrollbar {
    display: none;
  }

  .goody-upsell__card {
    flex: 0 0 auto;
    width: 160px;
    scroll-snap-align: start;
    /* Column layout so the Add CTA pins to the card bottom regardless of
       title/vendor line count — keeps all CTAs on one baseline */
    display: flex;
    flex-direction: column;
  }

  .goody-upsell__card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    flex: 1 0 auto;
    padding-bottom: 8px;
  }

  .goody-upsell__card > .goody-upsell__atc,
  .goody-upsell__card > [data-add-to-cart] {
    margin-top: auto;
  }

  .goody-upsell__card > [data-add-to-cart] .goody-upsell__atc {
    margin-top: 0;
  }

  .goody-upsell__image {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-background, #f5f5f5);
  }

  .goody-upsell__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .goody-upsell__image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-background, #eee);
  }

  .goody-upsell__title {
    font-size: var(--font-size--sm, 0.875rem);
    margin: 8px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
  }

  .goody-upsell__vendor {
    font-size: var(--font-size--2xs, 0.75rem);
    color: var(--color-foreground-muted, #757575);
    margin: 2px 0 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .goody-upsell__prices {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
  }

  .goody-upsell__price {
    font-weight: 600;
    font-size: var(--font-size--sm, 0.875rem);
  }

  .goody-upsell__compare-price {
    text-decoration: line-through;
    color: var(--color-foreground-secondary, #999);
    font-size: var(--font-size--2xs, 0.75rem);
  }

  .goody-upsell__atc {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    font-size: var(--font-size--2xs, 0.75rem);
    font-family: var(--font-body--family);
    font-weight: 600;
    border-radius: 24px;
    background: var(--color-primary-button-background, #e10600);
    color: var(--color-primary-button-text, #fff);
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
    line-height: 1.4;
  }

  .goody-upsell__atc:hover {
    opacity: 0.85;
  }

  .goody-upsell__atc:disabled {
    opacity: 0.6;
    cursor: wait;
  }

  /* Skeleton loading state */
  .goody-upsell__skeleton .goody-upsell__image {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: goody-upsell-shimmer 1.5s ease-in-out infinite;
  }

  .goody-upsell__skeleton-line {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: goody-upsell-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
  }

  @keyframes goody-upsell-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Cart drawer context overrides */
  .cd-body > goody-upsell[data-has-products] {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border, #ededed);
  }

  @media screen and (min-width: 750px) {
    .goody-upsell__card {
      width: 180px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .goody-upsell__skeleton .goody-upsell__image,
    .goody-upsell__skeleton-line {
      animation: none;
    }
  }
/* END_SNIPPET:goody-upsell */

/* START_SNIPPET:grid-density-controls (INDEX:276) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

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

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:277) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

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

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:278) */
.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-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

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

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-cart-button {
    position: relative;
  }

  .header-cart-count {
    position: absolute;
    top: -6px;
    inset-inline-end: -8px;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--cart-count-bg, #e10600);
    color: var(--cart-count-color, #fff);
    font-family: var(--font-paragraph--family);
    font-weight: 600;
    font-size: var(--font-size--3xs);
    line-height: 1;
    pointer-events: none;
  }

  /* Shrink the count only when it overflows to "99+" so the circle never grows.
     No theme token exists below --font-size--3xs (10px), so this small step-down
     stays a custom rem value. */
  .header-cart-count--overflow {
    font-size: 0.5rem;
  }

  .header-cart-count.hidden {
    display: none;
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }

  .user-dropdown {
    position: relative;
  }

  .user-dropdown__trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .user-dropdown__trigger::after {
    content: '';
    position: absolute;
    top: 100%;
    inset-inline-end: -16px;
    width: calc(100% + 32px);
    height: 18px;
    display: none;
  }

  .user-dropdown:hover .user-dropdown__trigger::after {
    display: block;
  }

  .user-dropdown__menu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: -8px;
    min-width: 160px;
    background-color: var(--color-background, #fff);
    border: 1px solid var(--color-border, #f2e7df);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 0.08), 0 1px 4px rgb(0 0 0 / 0.04);
    padding: 4px 0;
    z-index: 100;
    display: none;
  }

  .user-dropdown__menu::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
  }

  .user-dropdown__menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 14px;
    width: 10px;
    height: 10px;
    background: var(--color-background, #fff);
    border-top: 1px solid var(--color-border, #f2e7df);
    border-left: 1px solid var(--color-border, #f2e7df);
    transform: rotate(45deg);
  }

  .user-dropdown:hover .user-dropdown__menu,
  .user-dropdown:focus-within .user-dropdown__menu {
    display: flex;
    flex-direction: column;
  }

  .user-dropdown__item {
    display: block;
    padding: 10px 16px;
    font-family: var(--font-body-regular--family, inherit);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-foreground, #1d1d1d);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
  }

  .user-dropdown__item:hover {
    background: var(--color-border, #f2e7df);
    border-radius: 6px;
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:279) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

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

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition:
      transform var(--drawer-animation-speed) ease,
      visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--childlist {
    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);
  }

  /* Primary nav from `_header-nav` + `header-navigation-item-mobile` (no per-item --divider class). */
  .menu-drawer__menu--nav-dividers > .menu-drawer__list-item {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

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

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

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

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

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

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

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

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

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

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

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

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

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:286) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:289) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:290) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:298) */
.media-block {
    overflow: hidden;
    position: relative;

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

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:305) */
.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) 0%, var(--overlay-color--end) var(--overlay-gradient-position, 100%));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:306) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

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

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:307) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:paypal-pay-later-message (INDEX:308) */
/* Design (EA-1895): one line under Add to Cart, 16px below it — the gap is the caller's. */
  .paypal-message {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .paypal-message__icon {
    flex: none;
    width: 16px;
    height: 16px;
  }

  /* PayPal's iframe fills this; its own text-align places the words inside it. */
  .paypal-message__text {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Hidden for sold-out variants, and while PayPal hasn't rendered into it (embed off,
     ineligible buyer) so the empty row — icon included — leaves no gap under Add to Cart. */
  .paypal-message[hidden],
  .paypal-message:has(> .paypal-message__text:empty) {
    display: none;
  }
/* END_SNIPPET:paypal-pay-later-message */

/* START_SNIPPET:predictive-search-styles (INDEX:316) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

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

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition:
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

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

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition:
      transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition:
      max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition:
      max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:317) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:321) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card-image-gallery (INDEX:322) */
/* Fill the square card media area (the wrapper carries tw-aspect-1). */
  .product-card-image-gallery {
    height: 100%;
  }

  .product-card-image-gallery slideshow-container,
  .product-card-image-gallery slideshow-slides,
  .product-card-image-gallery slideshow-slide {
    height: 100%;
  }

  /* snippets/slideshow-styles.liquid paints slideshow-container with
     background-color: var(--color-background) (white). Inside a card that is wrong: the card's
     media area carries the product gradient on <product-image-gallery>, and an opaque container
     hid it — so multi-image cards looked white while single-image cards (which render no
     slideshow at all) showed the gradient. Keep the container transparent so the gradient shows
     through for both. Class + element beats the bare element selector. */
  .product-card-image-gallery slideshow-container {
    background-color: transparent;
  }

  /* When the card itself is a slide of an outer carousel (resource-list-carousel,
     featured-collections-tabs), the outer slide sets --slide-width to its column
     width and that custom property INHERITS into this nested slideshow — each
     image slide then renders at the column width instead of 100%. Reset it here. */
  .product-card-image-gallery slideshow-slide {
    --slide-width: 100%;
  }

  /* Those outer carousels also style descendant slideshow-slides (column gap,
     margin-block: -16px / padding-block: 16px shadow trick) which leaks into this
     nested scroller. Tripled class beats their 2-class descendant selectors. */
  .product-card-image-gallery.product-card-image-gallery.product-card-image-gallery slideshow-slides {
    gap: 0;
    margin-block: 0;
    padding-block: 0;
  }

  /* Dots: match the previous card design — fixed grey/black, no blend mode.
     Doubled selector so it beats slideshow-controls:has(.slideshow-controls__dots)
     (mix-blend-mode: difference) regardless of stylesheet aggregation order. */
  .product-card-image-gallery slideshow-controls.product-card-image-gallery__dots {
    mix-blend-mode: normal;
    min-height: 0;
    /* Let clicks on the strip fall through to the image link; only dots are interactive. */
    pointer-events: none;
    /* slideshow-controls[controls-on-media] pins the strip to bottom: 0, and the dots strip
       carries no padding, so the dots sat flush against the bottom edge of the card gradient.
       Lift the strip so there is a 16px gap under the dots (8px on mobile). */
    bottom: 16px;
  }

  @media screen and (max-width: 749px) {
    .product-card-image-gallery slideshow-controls.product-card-image-gallery__dots {
      bottom: 8px;
    }
  }

  .product-card-image-gallery .slideshow-controls__dots {
    gap: 8px;
    padding: 0;
  }

  .product-card-image-gallery .slideshow-controls__dots button {
    --size: 6px;
    --color: #c6c6c6;
    --color-active: #1d1d1d;
    --color-hover: #1d1d1d;

    pointer-events: auto;
  }

  .product-card-image-gallery .slideshow-controls__dots button::after {
    box-shadow: none;
  }

  /* Hover fade gallery type: primary image by default, secondary crossfades in on hover.
     Opacity-only transition (no transform). */
  .product-card-image-gallery--hover-fade {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
  }

  /* Primary sits in flow; secondary stacks exactly over it. On hover the primary
     fades OUT while the secondary fades IN, so the second image REPLACES the first
     rather than layering on top of it. */
  .product-card-image-gallery--hover-fade .product-card-image-gallery__img--primary {
    transition: opacity 0.3s ease;
  }

  .product-card-image-gallery--hover-fade .product-card-image-gallery__img--secondary {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  @media (hover: hover) {
    .product-card:hover .product-card-image-gallery--hover-fade .product-card-image-gallery__img--primary,
    .product-card-image-gallery--hover-fade:hover .product-card-image-gallery__img--primary {
      opacity: 0;
    }

    .product-card:hover .product-card-image-gallery--hover-fade .product-card-image-gallery__img--secondary,
    .product-card-image-gallery--hover-fade:hover .product-card-image-gallery__img--secondary {
      opacity: 1;
    }
  }

  .product-card-image-gallery--hover-fade:focus-visible .product-card-image-gallery__img--primary {
    opacity: 0;
  }

  .product-card-image-gallery--hover-fade:focus-visible .product-card-image-gallery__img--secondary {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-card-image-gallery--hover-fade .product-card-image-gallery__img--primary,
    .product-card-image-gallery--hover-fade .product-card-image-gallery__img--secondary {
      transition: none;
    }
  }
/* END_SNIPPET:product-card-image-gallery */

/* START_SNIPPET:product-grid (INDEX:324) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

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

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

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

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

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

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:325) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Cap the PDP at the 1536px design width so it stops stretching on very wide
     screens — otherwise the media column (1fr) balloons while the buy box stays
     fixed at 512px. Overriding --page-width is the Horizon-standard lever: the
     page grid's min() keeps everything responsive below 1536px. Scoped to the
     centered layout; full-width sections are left as-is. */
  .product-information.section--page-width {
    --page-width: 1536px;
  }

  .product-information__breadcrumb {
    grid-column: 2;
    margin-block-end: calc(1rem - var(--gap));
  }

  .product-information__breadcrumb .breadcrumb {
    margin-block-end: 0;
  }

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

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

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

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

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

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
      column-gap: var(--gap);
      row-gap: 0;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side - Flexible layout */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side - Flexible layout */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          order: 1;
        }

        .product-details {
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        /* Product details width maintained at 512px for full-width sections */

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

  /* Old-Safari fallback (iOS <= 16.4 / pre-nesting browsers).
     Those engines can't parse the native CSS nesting (`&`) used above, so the
     two-column `grid-template-columns` rules get dropped and the grid falls
     back to `subgrid` — the media column takes the full row and the buy box
     collapses. `@supports not selector(&)` scopes this to non-nesting browsers
     only, so it's a guaranteed no-op on modern devices. Re-declares the same
     track values flat, using only features old iOS supports (min(), var(),
     single-arg :not()). Mobile (<750px) is single-column and unaffected. */
  @supports not selector(&) {
    @media screen and (min-width: 750px) {
      .product-information__grid:not(.product-information--media-none):not(
          .product-information__grid--half
        ).product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      }

      .product-information__grid:not(.product-information--media-none):not(
          .product-information__grid--half
        ).product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;
      }

      /* media-right swaps the column order (details left, media right); mirror
         that flat too, else old iOS keeps the base order and puts media in the
         narrow track. Applies to the equal-columns layout as well, like the
         nested rule. */
      .product-information__grid:not(.product-information--media-none).product-information--media-right .product-information__media {
        order: 1;
      }

      .product-information__grid:not(.product-information--media-none).product-information--media-right .product-details {
        order: 0;
      }

      /* Extended gallery spans into the page margin; restore its grid-column so
         old iOS matches (half keeps its own placement, so it's excluded). */
      .product-information__grid:not(.product-information--media-none):not(
          .product-information__grid--half
        ).product-information--media-left:has(.media-gallery--extend) {
        grid-column: 1 / 3;
      }

      .product-information__grid:not(.product-information--media-none):not(
          .product-information__grid--half
        ).product-information--media-right:has(.media-gallery--extend) {
        grid-column: 2 / -1;
      }
    }

    @media screen and (min-width: 1280px) {
      .product-information__grid:not(.product-information--media-none):not(
          .product-information__grid--half
        ).product-information--media-left {
        grid-template-columns: 1fr 512px;
      }

      .product-information__grid:not(.product-information--media-none):not(
          .product-information__grid--half
        ).product-information--media-right {
        grid-template-columns: 512px 1fr;
      }
    }
  }

  /* Fixed 512px layout for large screens (1280px+) */
  @media screen and (min-width: 1280px) {
    .product-information__grid:not(.product-information--media-none, .product-information__grid--half) {
      /* Fixed layout - Media on the left */
      &.product-information--media-left {
        grid-template-columns: 1fr 512px;

        .product-details {
          width: 512px;
          max-width: 512px;
        }
      }

      /* Fixed layout - Media on the right */
      &.product-information--media-right {
        grid-template-columns: 512px 1fr;

        .product-details {
          width: 512px;
          max-width: 512px;
        }
      }
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:326) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:327) */
.product-media-gallery__stage {
    position: relative;
  }

  media-gallery .product-media-container,
  media-gallery .slideshow-controls__thumbnail,
  .dialog-thumbnails-list__thumbnail {
    background: var(--product-media-gallery-gradient);
  }

  .product-media-gallery__no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--gallery-aspect-ratio, 1);
    background: var(--product-media-gallery-gradient);
    border-radius: var(--media-radius, 4px);
    width: 100%;
  }

  .product-media-gallery__no-image-text {
    font-size: var(--font-size--lg);
    font-weight: 500;
    color: var(--color-foreground-muted, rgba(0, 0, 0, 0.6));
  }

  media-gallery .slideshow-controls__thumbnail,
  .dialog-thumbnails-list__thumbnail {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  media-gallery .slideshow-controls__thumbnails .slideshow-control,
  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    min-width: var(--thumbnail-width);
    max-width: var(--thumbnail-width);
  }

  media-gallery .slideshow-controls__thumbnail img,
  .dialog-thumbnails-list__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
  }

  media-gallery .slideshow-controls__thumbnail-badge--play {
    top: 50%;
    right: auto;
    left: 50%;
    width: 55px;
    height: 55px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transform: translate(-50%, -39%);
  }

  media-gallery .slideshow-controls__thumbnail-badge--play svg {
    width: 100%;
    height: 100%;
    fill: none;
    opacity: 1;
  }

  media-gallery .slideshow-controls__thumbnails .slideshow-control[aria-selected='true'],
  .dialog-thumbnails-list__thumbnail[aria-selected='true'] {
    outline: none;
    border: none;
    box-shadow: none;
  }

  media-gallery .slideshow-controls__thumbnails .slideshow-control[aria-selected='true']::after,
  .dialog-thumbnails-list__thumbnail[aria-selected='true']::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--active-thumbnail-border-color);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
  }

  .product-media-gallery__badge {
    position: absolute;
    top: 1rem;
    left: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    padding: 0.125rem 0.75rem;
    background: #fff;
    border-radius: 0 1.5rem 1.5rem 0;
    color: #1d1d1d;
  }

  .product-media-gallery__brand-logo {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 3;
    width: 5.5rem;
    height: 5.5rem;
    pointer-events: none;
  }

  .product-media-gallery__brand-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  @media screen and (max-width: 1279px) {
    .product-media-gallery__brand-logo {
      top: 1rem;
      right: 1rem;
      width: 3.5rem;
      height: 3.5rem;
    }
  }

  media-gallery
    slideshow-controls[thumbnails]:is([pagination-position='left'], [pagination-position='right'])
    .slideshow-controls__thumbnails {
    padding-block-start: 0;
  }

  @media screen and (max-width: 749px) {
    media-gallery .product-media-gallery__stage slideshow-slide.product-media-container {
      border-radius: var(--media-radius, 0);
    }

    media-gallery .product-media-gallery__stage slideshow-slides {
      --slideshow-gap: 16px;

      padding-inline: var(--page-margin);
      scroll-padding-inline-start: var(--page-margin);
    }

    media-gallery .product-media-gallery__stage slideshow-slide.product-media-container {
      --slide-width: min(320px, calc(100vw - (var(--page-margin) * 2)));

      flex-basis: var(--slide-width);
      width: var(--slide-width);
      scroll-snap-align: start;
    }

    /* A lone slide has nothing to peek to, so fill the width instead of sitting
       at the 320px peek size. Only overrides the slide width for the single-slide
       case; multi-slide galleries keep the peek. */
    media-gallery.media-gallery--single-slide .product-media-gallery__stage slideshow-slide.product-media-container {
      --slide-width: calc(100vw - (var(--page-margin) * 2));
    }

    media-gallery slideshow-controls[thumbnails],
    media-gallery .media-gallery__mobile-controls[thumbnails] {
      padding-inline: var(--page-margin);
      box-sizing: border-box;
    }

    media-gallery slideshow-controls[thumbnails] .slideshow-controls__thumbnails,
    media-gallery .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnails {
      margin-inline: 0;
    }
  }

  .dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

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

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 1280px) {
    media-gallery .slideshow-controls__thumbnail-badge--play {
      width: 92px;
      height: 92px;
    }

    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
        column-gap: 16px;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
        column-gap: 16px;
      }

      slideshow-controls[pagination-position='left'],
      slideshow-controls[pagination-position='right'] {
        order: -1;
      }
    }
  }

  /* Below desktop: stack media and thumbnails with a consistent gap */
  @media screen and (max-width: 1279px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) slideshow-container {
      order: 0;
    }

    .media-gallery--carousel
      slideshow-component:has(slideshow-controls[thumbnails])
      slideshow-controls:is([pagination-position='left'], [pagination-position='right'], [pagination-position='center']) {
      order: 1;
      width: 100%;
      margin-top: 0;
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0;
    opacity: 1;
  }

  .media-gallery--carousel .product-media-gallery__arrows:has(.slideshow-control--style-arrow) {
    mix-blend-mode: normal;
    padding-inline: 16px;
  }

  .media-gallery--carousel .product-media-gallery__arrows .slideshow-control:disabled {
    visibility: hidden;
    pointer-events: none;
  }

  .media-gallery--carousel .product-media-gallery__arrows .slideshow-control--custom-arrow {
    color: #1d1d1d;
    filter: drop-shadow(0 5px 10px rgb(0 0 0 / 0.1));
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
  }

  .media-gallery--carousel .product-media-gallery__arrows .slideshow-control--custom-arrow .svg-wrapper {
    width: 32px;
    height: 32px;
  }

  .media-gallery--carousel .product-media-gallery__arrows .slideshow-control--custom-arrow svg {
    width: 100%;
    height: 100%;
  }

  @media screen and (max-width: 1279px) {
    .media-gallery--carousel .product-media-gallery__arrows {
      display: none;
    }
  }

  /* Old iOS (e.g. iOS 16) can compute a carousel slide's `width: 100%` against
     the flex content rather than the container, so slides shrink and the next one
     peeks in (visible on all products; on CYO it looks like the box sits over the
     next image). Pin the slide to the full container width so each slide fills and
     nothing bleeds through. `@supports not selector(&)` scopes this to old,
     pre-nesting browsers only (guaranteed no-op on modern devices), so it can
     safely cover every width from tablet up — including landscape/desktop, where
     old iOS breaks the same way. Mobile (<750px) intentionally peeks; grid mode
     is unaffected. */
  @supports not selector(&) {
    @media screen and (min-width: 750px) {
      .media-gallery--carousel slideshow-slide {
        min-width: 100%;
      }
    }
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:329) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:333) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

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

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal-styles (INDEX:334) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .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-styles */

/* START_SNIPPET:quick-add-styles (INDEX:336) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:339) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--font-display);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: 1.4;
    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:340) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:341) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 79cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 79cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
      min-width: 264px;
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

    /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */
    margin-block: -16px;
    padding-block: 16px;
  }

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:search-modal (INDEX:346) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

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

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results)) .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

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

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition:
      opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition:
      background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition:
      transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:347) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:348) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }

  @media screen and (max-width: 749px) {
    .layout-panel-flex--column.mobile-column-reverse,
    .layout-panel-flex.mobile-column.mobile-column-reverse {
      flex-direction: column-reverse;
    }
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:350) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:352) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:353) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:354) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 1280px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }
  }

  /* Mobile-specific thumbnail layout */
  @media screen and (max-width: 749px) {
    slideshow-controls[thumbnails] .slideshow-controls__thumbnails {
      flex-direction: row;
      justify-content: flex-start;
    }
  }

  /* Tablet/flexible layout (750px - 1279px) remains horizontal by default */
  @media screen and (min-width: 750px) and (max-width: 1279px) {
    slideshow-controls[thumbnails]:is([pagination-position='center'], [pagination-position='bottom'])
      .slideshow-controls__thumbnails {
      flex-direction: row;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--thumbnail-gap, var(--gap-xs));
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  /* CYO "Your Box" thumbnail: red label tile with a white inset frame. Sizing
     (width/aspect-ratio) is inherited from the thumbnail rules above. Double
     class so the white background beats `media-gallery .slideshow-controls__thumbnail`
     (which otherwise paints the product-media gradient — "Your Box" isn't a product). */
  .slideshow-controls__thumbnail.slideshow-controls__thumbnail--cyo {
    background: #fff;
    padding: 12px;
  }

  .slideshow-controls__thumbnail-cyo-label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: var(--cyo-thumb-color, var(--color-primary-button-background, #e10600));
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
  }

  .slideshow-controls__thumbnail-cyo-label span {
    max-inline-size: 4ch;
  }

  /* Keep the compact inner padding until 1280px, where thumbnails move into the
     wider vertical-left column. Below that they stay small and horizontal, so
     the larger 12px padding would shrink the label and clip "Your Box". */
  @media screen and (max-width: 1279px) {
    .slideshow-controls__thumbnail.slideshow-controls__thumbnail--cyo {
      padding: 4px;
    }

    /* Slightly smaller label to suit the compact horizontal thumbnails. */
    .slideshow-controls__thumbnail-cyo-label {
      font-size: 12px;
    }
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge:not(.slideshow-controls__thumbnail-badge--play) svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  .slideshow-controls__thumbnail-badge--play svg {
    width: 100%;
    height: 100%;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

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

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:356) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

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

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

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

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:358) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:store-availability-modal (INDEX:363) */
/* Dialog UA reset */
  .store-availability-dialog {
    margin: 0;
    padding: 0;
    border: 0;
    max-width: none;
    max-height: none;
    background: transparent;
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
  }

  .store-availability-dialog::backdrop {
    background: transparent;
  }

  .store-availability-dialog:not([open]) {
    display: none;
  }

  .store-availability-dialog[open] {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Backdrop overlay */
  .store-availability-dialog__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
  }

  /* Modal container */
  .store-availability-dialog__container {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px);
    max-width: 580px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background-color: #fbf7f5;
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    padding: 24px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  /* While the delivery dropdown OR the calendar popover is open, stop the modal
     from clipping it — otherwise it's cut off at the modal's bottom edge when the
     store list is empty (the list has its own internal scroll, so the modal
     rarely needs to scroll itself). The calendar opens after the dropdown closes,
     so it needs its own trigger here. */
  .store-availability-dialog__container:has(.store-availability-dialog__dropdown-wrapper.--is-open),
  .store-availability-dialog__container:has(.store-availability-dialog__calendar:not([hidden])) {
    overflow: visible;
  }

  @media screen and (max-width: 749px) {
    .store-availability-dialog__container {
      padding: 16px 16px 24px;
      /* Fixed height so the frame (header + pinned CTAs) never exceeds the
         viewport; only the store list scrolls inside it. */
      height: calc(100vh - 32px);
      height: calc(100dvh - 32px);
      max-height: calc(100vh - 32px);
      max-height: calc(100dvh - 32px);
      overflow: hidden;
    }

    /* Delivery section grows to fill the space between the header and the
       pinned action buttons; the store list inside it is the scroll region. */
    .store-availability-dialog__delivery {
      flex: 1 1 auto;
      min-height: 0;
    }
  }

  /* Card body — groups heading + dividers + delivery so the action row can be split
     out (see snippets/store-availability-fields.liquid). Transparent here: the modal's
     own container is the visual card, and this wrapper just re-creates the 16px column
     rhythm the container used to apply directly. The PD host restyles it as the card. */
  .store-availability-dialog__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  @media screen and (max-width: 749px) {
    /* Mobile modal: the container is a fixed-height frame with the CTAs pinned; the
       body fills the space between header and CTAs so the store list scrolls inside
       it (the list itself is the flex:1 scroll region within .delivery). */
    .store-availability-dialog__body {
      flex: 1 1 auto;
      min-height: 0;
    }
  }

  /* Close button row */
  .store-availability-dialog__close-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    gap: 8px;
  }

  .store-availability-dialog__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Title section */
  .store-availability-dialog__title-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 100%;
  }

  .store-availability-dialog__title {
    font-family: var(--font-heading--family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: var(--color-black-light, #464646);
    text-align: center;
    margin: 0;
  }

  /* Store-list heading. Lives in the delivery column now (see the markup), so it
     reads as a section label over the cards rather than as dialog subtitle copy. */
  .store-availability-dialog__subtitle {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black-secondary, #1d1d1d);
    margin: 0;
  }

  .store-availability-dialog__subtitle[hidden] {
    display: none;
  }

  /* Delivery section */
  .store-availability-dialog__delivery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  /* Thin divider lines (Figma 19431:32075): one under the heading, one under the inputs.
     Light red — Primary/primary-100 (#f6b2b0) at 50% opacity, per the Figma stroke. */
  .store-availability-dialog__divider {
    width: 100%;
    height: 1px;
    background: rgba(246, 178, 176, 0.5);
    flex-shrink: 0;
  }

  /* Helper line under the inputs ("Based on your inputs, we will find the right store for you."). */
  .store-availability-dialog__helper {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black-light, #464646);
    margin: 0;
  }

  .store-availability-dialog__delivery-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
  }

  @media screen and (max-width: 749px) {
    .store-availability-dialog__delivery-heading {
      align-items: flex-start;
    }
  }

  .store-availability-dialog__delivery-label {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black-secondary, #1d1d1d);
  }

  .store-availability-dialog__delivery-label-text {
    font-weight: 600;
  }

  .store-availability-dialog__delivery-value {
    font-weight: 400;
  }

  /* Only the selected delivery method is shown here; when nothing is selected the
     value is emptied (SSR default + store-availability.js), so hide it entirely
     rather than leaving a dangling "Select an option" beside the "Delivery" label. */
  .store-availability-dialog__delivery-value:empty {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .store-availability-dialog__delivery-label {
      flex-direction: column;
      column-gap: 0;
    }
  }

  .store-availability-dialog__toggle-btn {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 12px;
    line-height: 17px;
    color: var(--color-black-secondary, #1d1d1d);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-black-secondary, #1d1d1d);
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .store-availability-dialog__toggle-btn:hover {
    opacity: 0.7;
  }

  .store-availability-dialog__toggle-btn:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }

  /* Cart-lock muted state — softer than the busy-state 0.4 opacity, matching the
     zip input's readonly treatment (opacity 0.65 + not-allowed cursor). The
     data-cart-locked attribute is set by #applyCartLock when isCartNonEmpty().
     pointer-events:auto overrides the base :disabled rule's pointer-events:none
     so the cursor declaration actually renders (disabled + JS guard already
     prevent interaction; pointer-events:none is belt-and-braces for the busy
     state, which cart-lock supersedes). */
  store-availability-component[data-cart-locked] .store-availability-dialog__dropdown-trigger[aria-disabled='true'] {
    /* EA-3873/EA-3874: a locked field is NOT muted — it keeps its full primary colour. It stays
       clickable (aria-disabled, not the `disabled` attribute) so the click reveals the cart-lock
       message, so it shows a normal pointer cursor rather than the "blocked" not-allowed one. */
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
  }

  /* Locked: hide the dropdown arrow so the field doesn't invite a tap it won't answer (EA-3873). */
  store-availability-component[data-cart-locked]
    .store-availability-dialog__dropdown-trigger[aria-disabled='true']
    .store-availability-dialog__dropdown-chevron {
    display: none;
  }

  store-availability-component[data-cart-locked] .store-availability-dialog__toggle-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: auto;
  }

  /* Busy state — a store lookup is in flight (data-busy is set by #applyBusyState).
     Every control that would start a SECOND lookup is genuinely `disabled` in JS;
     these rules are the visible half of that, plus a guard for everything else in
     the panel. */
  .store-availability-dialog__dropdown-trigger:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }

  /* Blocks clicks across the panel — chiefly a stale store card that hasn't been
     replaced yet, and the delivery block holding the toggle and the speed dropdown
     (both also `disabled` in JS, which is what stops keyboard activation). */
  .store-availability-dialog[data-busy] .store-availability-dialog__container > * {
    pointer-events: none;
  }

  /* Two exceptions, re-enabled on the descendants themselves since the rule above
     blocks their parents:

     Close — a shopper must never be trapped by a slow request.
     Zip — it is where a typo gets fixed, and re-entering a zip is already safe: the
     newer request supersedes the older one and the stale response is discarded. */
  .store-availability-dialog[data-busy] .store-availability-dialog__close-row,
  .store-availability-dialog[data-busy] .store-availability-dialog__zip-container {
    pointer-events: auto;
  }

  /* Zip + delivery dropdown row */
  .store-availability-dialog__delivery-inputs {
    display: flex;
    gap: 16px;
    width: 100%;
    align-items: flex-start;
  }

  @media screen and (max-width: 749px) {
    .store-availability-dialog__delivery-inputs {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
    }
  }

  /* Small description above each field. Sits inside the zip container and the
     dropdown wrapper, so the two columns stay the same width and the panel /
     calendar (positioned at `top: 100%` of the wrapper) still open under the
     control rather than under the label. */
  .store-availability-dialog__field-label {
    display: block;
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    color: var(--color-black-light, #464646);
    margin: 0 0 4px;
    padding-inline-start: 4px;
    cursor: pointer;
  }

  /* Zip code input */
  .store-availability-dialog__zip-container {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Desktop row only: the delivery-time dropdown takes its CONTENT width (so "Same Day
     Delivery (Sep 23)" never wraps to two lines), and the zip takes the REST of the row —
     but never more than half, so it stays flexible without a rigid narrow width cropping its
     placeholder. Scoped to ≥750px because on mobile the fields stack in a COLUMN, where these
     row-axis rules (and max-width) don't apply the same way; the base rule handles that. */
  @media screen and (min-width: 750px) {
    .store-availability-dialog__dropdown-wrapper {
      flex: 0 1 auto;
      width: fit-content;
    }

    .store-availability-dialog__dropdown-trigger {
      width: max-content;
    }

    .store-availability-dialog__zip-container {
      max-width: 50%;
      min-width: 0;
    }
  }

  .store-availability-dialog__zip-input-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    /* 36px field (Figma 19431:36339). min-height keeps it 36px even when the tallest child (the
       24px clear ×) is hidden under a cart lock — otherwise 5px padding alone shrinks it. Icons
       are 20×20 (location/verified) and 24×24 (clear ×); the input is 12px. */
    min-height: 36px;
    padding: 5px 8px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #dbdbdb;
    background: #ffffff;
    /* Floor for the whole field (input + verified badge + clear ×) so it never
       collapses too narrow once the status icons are present. */
    min-width: 148px;
  }

  /* Verified/loading status icon, shown left of the clear button. */
  .store-availability-dialog__zip-verified {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .store-availability-dialog__zip-verified[hidden] {
    display: none;
  }

  /* Spinner shown in the same slot while the availability lookup is in flight. */
  .store-availability-dialog__zip-loading {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid #dbdbdb;
    border-top-color: #1b873d;
    border-radius: 50%;
    animation: sa-zip-spin 0.7s linear infinite;
  }

  .store-availability-dialog__zip-loading[hidden] {
    display: none;
  }

  @keyframes sa-zip-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .store-availability-dialog__zip-input {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-black-secondary, #1d1d1d);
    border: 0;
    outline: none;
    background: transparent;
    width: 100%;
    padding: 0;
  }

  .store-availability-dialog__zip-input::placeholder {
    color: #6b6b6b;
  }

  /* iOS zooms the viewport when a focused input's font-size is < 16px. Keep the
     real font-size at 16px to suppress the zoom, then scale it down so it renders
     at ~12px to match the delivery dropdown beside it. The box keeps its full
     layout width (transforms don't affect layout), so the clear button and row
     stay put; left origin keeps the shrunk text/placeholder left-aligned. */
  @media screen and (max-width: 749px) {
    .store-availability-dialog__zip-input {
      font-size: 16px;
      line-height: 24px;
      transform: scale(0.75);
      transform-origin: left center;
    }
  }

  .store-availability-dialog__zip-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Empty-state message below the zip input */
  .store-availability-dialog__zip-error {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    color: #e10600;
    margin: 4px 0 0;
    padding-inline-start: 4px;
  }

  .store-availability-dialog__zip-error[hidden] {
    display: none;
  }

  /* Delivery-method message (e.g. catering's scheduled-date-only prompt) */
  .store-availability-dialog__delivery-error {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    color: #e10600;
    margin: 4px 0 0;
    padding-inline-start: 4px;
  }

  .store-availability-dialog__delivery-error[hidden] {
    display: none;
  }

  /* Delivery dropdown */
  .store-availability-dialog__dropdown-wrapper {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
  }

  .store-availability-dialog__dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    /* 36px field to match the zip beside it (Figma 19431:36339). min-height holds it at 36px even
       when the 24px chevron is hidden under a cart lock (locked/disabled) — 5px padding alone would
       shrink the trigger to the text height and mismatch the zip. */
    min-height: 36px;
    padding: 5px 8px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #dbdbdb;
    background: #ffffff;
    cursor: pointer;
    width: 100%;
  }

  .store-availability-dialog__dropdown-trigger:hover {
    border-color: var(--color-black-light, #464646);
  }

  /* Unclickable (locked/disabled) — it keeps pointer-events:auto so the not-allowed cursor shows,
     which would otherwise let the hover recolour the border. Keep the resting border on hover so a
     field that can't be used doesn't look interactive (EA-3873). */
  .store-availability-dialog__dropdown-trigger:disabled:hover {
    border-color: #dbdbdb;
  }

  /* Outstanding required date — set by #setDeliveryRequired in store-availability.js when
     a same-day selection is cleared on a no-same-day page (catering). The red border and
     the asterisk mark the field the accompanying delivery error is asking about, so the
     message and the field agree. Cleared as soon as a valid method is chosen. */
  .store-availability-dialog__dropdown-wrapper.--is-required .store-availability-dialog__dropdown-trigger {
    border-color: #e10600;
  }

  .store-availability-dialog__dropdown-wrapper.--is-required .store-availability-dialog__dropdown-text::after {
    content: none;
  }

  .store-availability-dialog__dropdown-left {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .store-availability-dialog__dropdown-text {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-black-secondary, #1d1d1d);
  }

  /* Delivery-time refusal (Figma 19431:34159): the selected slot the product can't be
     made for turns red. Set on the host (data-slot-unavailable) only when the results
     gate blames the TIME — the header pop-up has no product gate, so it never triggers. */
  store-availability-component[data-slot-unavailable] .store-availability-dialog__dropdown-text {
    color: var(--color-brand-red, #e10600);
  }

  /* The helper is hidden (JS sets [hidden]) while a time refusal is shown, so the red
     message under the divider stands alone rather than beneath contradictory copy. */
  .store-availability-dialog__helper[hidden] {
    display: none;
  }

  .store-availability-dialog__dropdown-chevron {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .store-availability-dialog__dropdown-wrapper.--is-open .store-availability-dialog__dropdown-chevron {
    transform: rotate(180deg);
  }

  /* EA-3874: while the store-location(-fast) lookup for the entered zip is in flight, swap the
     chevron for a spinner. Same size as the zip spinner (16px), but coloured like the dropdown
     text — the trigger is `:disabled` during the lookup (opacity 0.4), so it renders in the same
     muted tone as the disabled "Select an option" text next to it. */
  .store-availability-dialog__dropdown-spinner {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid #dbdbdb;
    border-top-color: var(--color-black-secondary, #1d1d1d);
    border-radius: 50%;
    animation: sa-zip-spin 0.7s linear infinite;
  }

  .store-availability-dialog__dropdown-wrapper[data-delivery-loading] .store-availability-dialog__dropdown-chevron {
    display: none;
  }

  .store-availability-dialog__dropdown-wrapper[data-delivery-loading] .store-availability-dialog__dropdown-spinner {
    display: block;
  }

  .store-availability-dialog__dropdown-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #dbdbdb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 10;
  }

  .store-availability-dialog__dropdown-wrapper.--is-open .store-availability-dialog__dropdown-panel {
    display: block;
  }

  .store-availability-dialog__dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: start;
  }

  .store-availability-dialog__dropdown-option:hover {
    background: #f5f0ed;
  }

  /* Listed but not offered on this page (catering: 1-Hour / Same Day). Kept
     visible so the shopper can see the method exists and isn't available here,
     rather than wondering where it went. */
  .store-availability-dialog__dropdown-option--disabled,
  .store-availability-dialog__dropdown-option:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .store-availability-dialog__dropdown-option--disabled:hover,
  .store-availability-dialog__dropdown-option:disabled:hover {
    background: transparent;
  }

  /* EA-3566: an option greyed for a reason worth saying ("Not available now" on a
     1-Hour outside store hours). Dimming alone reads as "still loading" as easily as
     "unavailable". Same rule the PDP block uses for EA-3808's dead windows. */
  .store-availability-dialog__dropdown-option[data-window-note]::after {
    content: attr(data-window-note);
    margin-left: auto;
    padding-left: 8px;
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-gray-dark, #6b6b6b);
  }

  /* Delivery fee next to each speed option (shown only when opened from a product page —
     the JS fills it only when it has the product's external ids). The label is flex:1, so
     the fee sits at the right. Hidden when empty, and when a window-note already occupies
     the right edge. Mirrors the PDP block's fee styling. */
  .store-availability-dialog__dropdown-option-fee {
    flex-shrink: 0;
    padding-left: 8px;
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-black-light, #464646);
    white-space: nowrap;
  }
  .store-availability-dialog__dropdown-option-fee:empty {
    display: none;
  }
  .store-availability-dialog__dropdown-option[data-window-note] .store-availability-dialog__dropdown-option-fee {
    display: none;
  }
  /* Speed-dropdown fees (1-Hour, Same Day, Next Day & every other option, incl. the flat
     "Free" label) are hidden on purpose. The fee is still calculated and filled in by JS
     (store-availability.js / pdp-availability.js / delivery-fee.js). Delete this rule to
     show them again. */
  .store-availability-dialog__dropdown-option .store-availability-dialog__dropdown-option-fee {
    display: none;
  }

  .store-availability-dialog__dropdown-option-label {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-black, #1d1d1d);
  }

  /* Radio indicator */
  .store-availability-dialog__radio {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-black, #1d1d1d);
    border-radius: 9999px;
    background: #ffffff;
  }

  .store-availability-dialog__dropdown-option--selected .store-availability-dialog__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 9999px;
    background: var(--color-black, #1d1d1d);
  }

  /* Date-picker popover — an inline Air Datepicker instance (see
     assets/air-datepicker-adapter.js) that replaces the native <input type="date">
     (which auto-commits on iOS taps and refuses showPicker() in several
     browsers). The picker renders into this container; the container provides
     the frame and Air Datepicker is themed via the --adp-* vars below. */
  .store-availability-dialog__calendar {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 11;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #dbdbdb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 12px;

    --adp-font-family: var(--font-body--family, 'Poppins', sans-serif);
    --adp-font-size: 12px;
    --adp-width: 100%;
    --adp-padding: 0;
    --adp-color: var(--color-black-secondary, #1d1d1d);
    --adp-color-secondary: var(--color-black-light, #464646);
    --adp-accent-color: var(--color-primary-button-background, #E10600);
    --adp-color-current-date: var(--color-primary-button-background, #E10600);
    --adp-color-disabled: #C4C4C4;
    --adp-color-other-month: #C4C4C4;
    --adp-day-name-color: var(--color-primary-button-background, #E10600);
    --adp-cell-border-radius: 9999px;
    --adp-cell-background-color-hover: color-mix(in srgb, var(--color-primary-button-background, #E10600) 10%, #ffffff);
    --adp-cell-background-color-selected: var(--color-primary-button-background, #E10600);
    --adp-cell-background-color-selected-hover: var(--color-primary-button-background, #E10600);
    --adp-border-color-inline: transparent;
    --adp-nav-arrow-color: var(--color-black-secondary, #1d1d1d);
    --adp-nav-color-secondary: var(--color-black-light, #464646);
  }

  .store-availability-dialog__calendar[hidden] {
    display: none;
  }

  /* Let the container own the frame — strip Air Datepicker's own border/shadow. */
  .store-availability-dialog__calendar .air-datepicker {
    width: 100%;
    border: none;
    box-shadow: none;
  }

  .store-availability-dialog__calendar .air-datepicker-nav--title {
    font-weight: 600;
  }

  /* Saturday delivery-fee pill (see StoreCalendar's getDateBadge in
     assets/air-datepicker-adapter.js). Global on purpose — the PDP block and
     the personalization drawer render the same Air Datepicker cells outside
     `.store-availability-dialog`. Absolutely positioned at the cell's bottom
     edge so the day number stays centered and row heights are unchanged. */
  .air-datepicker-cell.-day- {
    position: relative;
  }

  /* When fee pills are rendered, open up the rows so a pill hanging below its
     cell never collides with the next row's day number or hover circle. */
  .air-datepicker-body--cells.-days-:has(.store-calendar__fee) {
    row-gap: 4px;
  }

  .store-calendar__fee {
    position: absolute;
    bottom: -3px;
    /* Paint above neighboring cells (later DOM siblings otherwise cover the
       pill with their hover/selected background). */
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary-button-background, #e10600);
    color: #ffffff;
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 999px;
    pointer-events: none;
    white-space: nowrap;
    /* Keeps the red pill legible on the (also red) selected-cell circle. */
    box-shadow: 0 0 0 1.5px #ffffff;
  }

  /* No fee pill on unavailable or spill-over days. */
  .air-datepicker-cell.-disabled- .store-calendar__fee,
  .air-datepicker-cell.-other-month- .store-calendar__fee {
    display: none;
  }

  /* On mobile, center the calendar in the viewport instead of anchoring it
     below the dropdown — avoids it being cramped/cut off in the short modal. */
  @media screen and (max-width: 749px) {
    .store-availability-dialog__calendar {
      position: fixed;
      top: 50%;
      left: 50%;
      right: auto;
      transform: translate(-50%, -50%);
      width: calc(100% - 48px);
      max-width: 360px;
      z-index: 12;
    }
  }

  /* Status message (loading / no results) */
  .store-availability-dialog__stores-status {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black-light, #464646);
    text-align: left;
    margin: 0;
    padding: 4px 0;
  }

  .store-availability-dialog__stores-status[hidden] {
    display: none;
  }

  /* The way out of a refusal — "Shop Available Items" under the message that refused.
     `display: block` puts it on its own line: it is an alternative to the whole
     sentence, not a correction to part of it, so it must not read as its continuation.
     Inherits the status line's colour deliberately — including the error red — so the
     pair reads as one block rather than a warning with an unrelated link stapled on. */
  .store-availability-dialog__status-link {
    display: block;
    margin-top: 6px;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .store-availability-dialog__status-link:hover {
    opacity: 0.8;
  }

  /* The same line, refusing something rather than reporting it — an unserviceable zip,
     a speed no store offers, a product the host's check turned down. Same red as
     `__zip-error` and `__delivery-error`, which are the other two ways the selector
     tells a shopper their input cannot be honoured; there is no reason for the third
     to be the quiet one. Toggled from #setStoreStatus, never rendered server-side. */
  .store-availability-dialog__stores-status--error {
    color: #e10600;
    font-weight: 500;
  }

  /* Auto-selection notice (shown when the default store is auto-picked) */
  .store-availability-dialog__auto-notice {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--color-gray-light, #ededed);
    background: #ffffff;
  }

  .store-availability-dialog__auto-notice[hidden] {
    display: none;
  }

  .store-availability-dialog__auto-notice-text {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black-light, #464646);
    margin: 0;
  }

  /* `[hidden]` only sets `display: none` in the UA stylesheet, so any author rule
     with `display: flex` silently beats it — which is why hiding these from JS
     appeared to do nothing. Restore the intent for the controls we toggle.
     Class-based (not descendant-scoped) on purpose: the PDP block reuses these
     same classes outside `.store-availability-dialog`. */
  .store-availability-dialog__select-btn[hidden],
  .store-availability-dialog__auto-btn[hidden],
  .store-availability-dialog__change-store[hidden],
  .store-availability-dialog__stores[hidden],
  .store-availability-dialog__store-card[hidden],
  .store-availability-dialog__auto-notice[hidden] {
    display: none;
  }

  /* Cart lock: informational, not an error — the shopper isn't blocked, their
     store is simply already decided by what's in the cart. Matches the auto-notice
     type so it reads as the same kind of row. */
  /* Two lines (Figma 19436:38234): red message on line 1, underlined "Clear Cart" CTA on line 2. */
  .store-availability-dialog__cart-lock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-brand-red, #e10600);
    margin: 0;
  }
  /* `display: flex` beats the UA `[hidden] { display: none }`, so restore hiding for the
     hidden state — the JS toggles this note via `cartLock.hidden = !zipLocked`, and without
     this it rendered on an empty cart too. */
  .store-availability-dialog__cart-lock[hidden] {
    display: none;
  }

  /* CTA on its own line: 14px Semibold, underlined via text-decoration (a border sits at the
     bottom of the whole line box, which reads as a big gap under the text). */
  .store-availability-dialog__cart-lock-link {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .store-availability-dialog__cart-lock-link:disabled {
    opacity: 0.5;
    cursor: default;
  }

  /* The clear cross is a flex item that gives the zip row its height (its icon is
     28px, matching the dropdown's chevron). Removing it from the layout made the
     zip field shorter than the time field next to it — so keep it in flow for its
     HEIGHT, but collapse its WIDTH to zero and cancel the flex gap so it takes no
     horizontal room. That lets the verified badge float flush to the right edge
     instead of leaving the cross's empty slot beside it (zip-lock state). */
  .store-availability-dialog__zip-clear[hidden] {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    margin-inline-start: -6px;
  }

  /* The zip still says where you're ordering to. Locked ≠ muted (EA-3873): keep the full
     primary colour. EA-3874: show the normal text cursor (not the "blocked" not-allowed) — a click
     on the locked field reveals the cart-lock message; readOnly (set with the lock) blocks typing. */
  .store-availability-dialog__zip-input[readonly] {
    color: var(--color-black-secondary, #1d1d1d);
    cursor: text;
  }

  /* The whole zip field (not just the input) shows the normal text cursor when locked. */
  store-availability-component[data-cart-locked] .store-availability-dialog__zip-input-wrapper {
    cursor: text;
  }

  /* Locked: the remaining card is context, not a choice. Selection is blocked in
     #selectStoreCard — the "View details" toggle deliberately still works. */
  .store-availability-dialog__store-card[data-store-locked] {
    cursor: default;
  }

  .store-availability-dialog__change-store {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 12px;
    line-height: 17px;
    color: var(--color-black-secondary, #1d1d1d);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-black-secondary, #1d1d1d);
    padding: 0;
    cursor: pointer;
  }

  .store-availability-dialog__change-store:hover {
    opacity: 0.7;
  }

  /* Store cards — scroll internally when the list is long so the
     action buttons + inputs stay visible */
  /* Hidden explicitly, or empty (no zip entered yet / no results) — an empty list
     must not render, or its mobile `flex: 1 1 auto` stretches a blank box full-height. */
  .store-availability-dialog__stores[hidden],
  .store-availability-dialog__stores:empty {
    display: none;
  }

  /* Scroll properties now live on __stores-scroll (the wrapper). This element
     is layout-only: it sizes the cards and lets the wrapper handle overflow. */
  /* Scroll properties now live on __stores-scroll (the wrapper). This element
     is layout-only: it sizes the cards and lets the wrapper handle overflow. */
  .store-availability-dialog__stores {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Scroll wrapper — groups skeleton + store cards so height constraint and
     overflow live on the wrapper, keeping the gradient fade inside the
     scrollport. The stores div itself is now layout-only (no overflow). */
  .store-availability-dialog__stores-scroll {
    display: flex;
    flex-direction: column;
    max-height: min(42vh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #c6c6c6 transparent;
  }

  .store-availability-dialog__stores-scroll::-webkit-scrollbar { width: 6px; }
  .store-availability-dialog__stores-scroll::-webkit-scrollbar-track { background: transparent; }
  .store-availability-dialog__stores-scroll::-webkit-scrollbar-thumb {
    background: #c6c6c6;
    border-radius: 9999px;
  }
  .store-availability-dialog__stores-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-black-light, #464646);
  }

  @media screen and (max-width: 749px) {
    .store-availability-dialog__stores-scroll {
      flex: 1 1 auto;
      min-height: 0;
      max-height: 400px;
    }
  }

  /* Bottom gradient fade — sticky at the scroll wrapper's bottom edge.
     Negative top margin pulls it over the last card so it fades into the
     background rather than adding height. pointer-events: none keeps
     click-through to the cards beneath. */
  .store-availability-dialog__stores-fade {
    position: sticky;
    bottom: 0;
    height: 64px;
    margin-top: -64px;
    background: linear-gradient(180deg, rgba(251, 247, 245, 0) 0%, #fbf7f5 66.15%);
    pointer-events: none;
    flex-shrink: 0;
  }

  .store-availability-dialog__stores-fade[hidden] {
    display: none;
  }

  /* Inside the PD drawer the card background is #fbf7f5, so the fade must
     match. Scoped to `.pd-locator` to avoid leaking into the header pop-up. */
  .pd-locator .store-availability-dialog__stores-fade {
    background: linear-gradient(to bottom, rgba(251, 247, 245, 0) 0%, rgba(251, 247, 245, 1) 100%);
  }

  /* PD-scoped disabled CTA — pink instead of faded. The pop-up uses the
     generic 0.4-opacity rule; the drawer needs a solid pink pill so the
     button reads as "not yet" rather than broken. */
  .pd-locator .store-availability-dialog__select-btn:disabled {
    background-color: #f6b2b0;
    opacity: 1;
    color: #ffffff;
  }

  /* Loading skeleton
     Every box metric below is copied from .store-availability-dialog__store-card
     and its heading (12px padding, 8px radius, 1px border, 8px/12px gaps) so the
     real cards drop straight into the space the skeleton was holding — no reflow
     when the response lands. Shimmer colours and timing match
     .store-availability-trigger__skeleton in snippets/store-availability-trigger.liquid,
     so the header and the modal read as one loading state; the keyframes are
     named separately rather than shared, since neither snippet may assume the
     other is on the page. */
  .store-availability-dialog__stores-skeleton {
    display: flex;
    flex-direction: column;
    /* Matches the live list's scrollbar gutter so the two align exactly. */
    padding-right: 4px;
  }

  .store-availability-dialog__stores-skeleton[hidden] {
    display: none;
  }

  /* Announced to screen readers; invisible to everyone else. */
  .store-availability-dialog__skeleton-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .store-availability-dialog__skeleton-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .store-availability-dialog__skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--color-gray-light, #ededed);
    background: #ffffff;
  }

  .store-availability-dialog__skeleton-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  .store-availability-dialog__skeleton-line {
    display: block;
    /* 14px/20px body text, so a 14px bar sits on the same rhythm as the real row. */
    height: 14px;
    border-radius: 4px;
    background-color: #ededed;
    background-image: linear-gradient(90deg, #ededed 0, #f6f6f6 40px, #ededed 80px);
    background-size: 300px 100%;
    background-repeat: no-repeat;
    animation: store-availability-dialog-shimmer 1.2s ease-in-out infinite;
  }

  /* Widths approximate the real content (store name + distance, address, hours)
     so the placeholder reads as a store card rather than as generic bars. */
  .store-availability-dialog__skeleton-line--name {
    width: 55%;
  }

  .store-availability-dialog__skeleton-line--distance {
    width: 64px;
    flex-shrink: 0;
  }

  .store-availability-dialog__skeleton-line--address {
    width: 80%;
  }

  .store-availability-dialog__skeleton-line--hours {
    width: 45%;
  }

  /* Slight per-card offset — three rows pulsing in lockstep reads as a glitch. */
  .store-availability-dialog__skeleton-card:nth-child(2) .store-availability-dialog__skeleton-line {
    animation-delay: 0.12s;
  }

  .store-availability-dialog__skeleton-card:nth-child(3) .store-availability-dialog__skeleton-line {
    animation-delay: 0.24s;
  }

  @keyframes store-availability-dialog-shimmer {
    0% {
      background-position: -80px 0;
    }
    100% {
      background-position: 280px 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .store-availability-dialog__skeleton-line {
      animation: none;
    }
  }

  .store-availability-dialog__store-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--color-gray-light, #ededed);
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease;
  }

  .store-availability-dialog__store-card--selected {
    border-color: var(--color-black-secondary, #1d1d1d);
  }

  .store-availability-dialog__store-card:focus-visible {
    outline: 2px solid var(--color-black-secondary, #1d1d1d);
    outline-offset: 2px;
  }

  .store-availability-dialog__store-card:hover:not(.store-availability-dialog__store-card--selected) {
    border-color: #c6c6c6;
  }

  .store-availability-dialog__store-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  .store-availability-dialog__store-name {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black-secondary, #1d1d1d);
  }

  .store-availability-dialog__store-distance {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black-secondary, #1d1d1d);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Hide distance when Delivery is active — only relevant for Pickup */
  store-availability-component[data-fulfillment-type='delivery'] .store-availability-dialog__store-distance {
    display: none;
  }

  .store-availability-dialog__store-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .store-availability-dialog__store-info-row {
    display: flex;
    gap: 8px;
  }

  @media screen and (max-width: 749px) {
    .store-availability-dialog__store-info-row {
      flex-direction: column;
      gap: 0;
    }
  }

  .store-availability-dialog__store-info-col {
    flex: 1;
  }

  .store-availability-dialog__store-text {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black-light, #464646);
    margin: 0;
  }

  /* Phone number rendered as a tel: link */
  a.store-availability-dialog__store-phone {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
  }

  a.store-availability-dialog__store-phone:hover {
    color: var(--color-black-secondary, #1d1d1d);
  }

  /* Details toggle (mobile only) */
  .store-availability-dialog__details-toggle {
    display: none;
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 12px;
    line-height: 17px;
    color: var(--color-black-secondary, #1d1d1d);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-black-secondary, #1d1d1d);
    padding: 0;
    cursor: pointer;
    align-self: flex-start;
  }

  @media screen and (max-width: 749px) {
    .store-availability-dialog__details-toggle {
      display: inline-flex;
    }

    .store-availability-dialog__store-card:not(.store-availability-dialog__store-card--details-visible)
      .store-availability-dialog__store-details {
      display: none;
    }

    /* EA-3873: every card (incl. the selected one) starts FOLDED with a "View Details" toggle.
       Details show only after the shopper taps the toggle (adds --details-visible). The old
       auto-expand of the selected card was removed so the default state is consistently folded. */
  }

  /* Action buttons */
  .store-availability-dialog__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    width: 100%;
    padding-block-start: 8px;
  }

  .store-availability-dialog__actions[hidden] {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .store-availability-dialog__actions {
      gap: 12px;
      /* Pinned frame element — never shrinks or scrolls out of view. */
      flex-shrink: 0;
    }
  }

  .store-availability-dialog__select-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    border-radius: 24px;
    background-color: #e10600;
    border: 0;
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    cursor: pointer;
    min-width: 212px;
    min-height: 40px;
    transition: opacity 0.15s ease;
  }

  .store-availability-dialog__select-btn:hover {
    opacity: 0.9;
  }

  .store-availability-dialog__auto-btn {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #e10600;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e10600;
    padding: 0 0 1px;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  .store-availability-dialog__auto-btn:hover {
    opacity: 0.8;
  }

  /* Disabled CTA state — used on reopen (both CTAs stay disabled until the
     shopper changes the saved selection). */
  .store-availability-dialog__select-btn:disabled,
  .store-availability-dialog__auto-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Country mismatch zip error: message on the left, switch-store link on the right */
  .store-availability-dialog__zip-error--mismatch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  /* Switch-store anchor — right-aligned, matches the cart-lock-link underline pattern */
  .store-availability-dialog__zip-switch-link {
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: inherit;
    border: 0;
    color: var(--color-black-secondary, #1d1d1d);
    font-weight: 600;
  }
/* END_SNIPPET:store-availability-modal */

/* START_SNIPPET:store-availability-trigger (INDEX:364) */
.store-availability-trigger {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .store-availability-trigger__search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #C6C6C6;
    background-color: #FFFFFF;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
  }

  .store-availability-trigger__search:hover {
    border-color: var(--color-black-light, #464646);
  }

  .store-availability-trigger__location-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .store-availability-trigger__placeholder {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #6B6B6B;
  }

  .store-availability-trigger__pills {
    display: none;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
  }

  .store-availability-trigger__pill {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
    height: 36px;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid #C6C6C6;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    min-width: 150px;
  }

  /* Very narrow viewports (<360px): 150px + 8px gap + 150px would overflow the
     mobile bar's 16px side padding, so drop the floor and let the pills share. */
  @media screen and (max-width: 359px) {
    .store-availability-trigger__pill {
      min-width: 0;
    }
  }

  /* Store pill flexes and truncates; delivery pill stays sized to its content */
  .store-availability-trigger__pill--store {
    flex: 1 1 auto;
  }

  .store-availability-trigger__pill--delivery {
    flex: 0 0 auto;
  }

  /* Mobile AND tablet share the row equally (50/50). The desktop trigger only appears
     at ≥1024px (lg); below that the full-width mobile bar is used, so on tablet the
     store/zip pill must NOT use the desktop `flex: 1 1 auto` grow rule (which let the
     zip eat the row) — it takes 50% like mobile, left-aligned. */
  @media screen and (max-width: 1023px) {
    .store-availability-trigger__pill--store,
    .store-availability-trigger__pill--delivery {
      flex: 1 1 0;
      width: 0;
    }
  }

  .store-availability-trigger__pill:hover {
    border-color: var(--color-black-light, #464646);
  }

  .store-availability-trigger__pill-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .store-availability-trigger__pill-text {
    font-family: var(--font-body--family, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-black-secondary, #1D1D1D);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    min-width: 0;
    /* Push the clear/chevron to the far right of the pill. */
    margin-inline-end: auto;
  }

  .store-availability-trigger__pill-clear {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    /* Sit tight to the verified badge — the pill's 12px gap is too wide between the two trailing
       icons, so pull the clear × in to leave 2px (12 − 10). */
    margin-inline-start: -10px;
  }

  .store-availability-trigger__pill-chevron {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  /* EA-3873: a locked cart can't change the delivery date/method — hide the chevron so the
     delivery pill reads as fixed (matches the modal + PDP dropdown). data-cart-store-locked is
     set on the trigger by store-availability.js #applyCartLock while the cart is store-locked. */
  .store-availability-trigger[data-cart-store-locked] .store-availability-trigger__pill-chevron {
    display: none;
  }

  /* State management: selected state */
  .store-availability-trigger[data-store-selected] .store-availability-trigger__search {
    display: none;
  }

  .store-availability-trigger[data-store-selected] .store-availability-trigger__pills {
    display: flex;
  }

  /* Loading state: shimmer placeholder */
  .store-availability-trigger__skeleton {
    display: none;
    height: 36px;
    width: 240px;
    max-width: 100%;
    border-radius: 8px;
    background-color: #EDEDED;
    background-image: linear-gradient(90deg, #EDEDED 0, #F6F6F6 40px, #EDEDED 80px);
    background-size: 300px 100%;
    background-repeat: no-repeat;
    animation: store-availability-shimmer 1.2s ease-in-out infinite;
  }

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

  @keyframes store-availability-shimmer {
    0% {
      background-position: -80px 0;
    }
    100% {
      background-position: 280px 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .store-availability-trigger__skeleton {
      animation: none;
    }
  }

  /* While loading, hide both real states and show only the shimmer.
     JS removes [data-store-loading] once the saved store is resolved. */
  .store-availability-trigger[data-store-loading] .store-availability-trigger__search,
  .store-availability-trigger[data-store-loading] .store-availability-trigger__pills {
    display: none;
  }

  .store-availability-trigger[data-store-loading] .store-availability-trigger__skeleton {
    display: block;
  }
/* END_SNIPPET:store-availability-trigger */

/* START_SNIPPET:swipable-group (INDEX:376) */
swipable-group-component {
    display: flex;
    flex-direction: column;
    position: relative;
    container-type: inline-size;
    container-name: swipable-group;
  }

  .swipable-group--width-fill {
    width: 100%;
  }

  .swipable-group--width-fit-content {
    width: fit-content;
  }

  .swipable-group--height-fill {
    height: 100%;
  }

  .swipable-group--height-fit {
    height: fit-content;
  }

  .swipable-group__scroller {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    column-gap: var(--swipable-mobile-gap, 16px);
    will-change: scroll-position;
    overscroll-behavior-x: contain;

    /* Prevent hover effects from clipping */
    margin-block: -16px;
    padding-block: 16px;
  }

  @container swipable-group (min-width: 750px) {
    .swipable-group__scroller {
      column-gap: var(--swipable-gap, 32px);
    }
  }

  .swipable-group__scroller::-webkit-scrollbar {
    display: none;
  }

  /* Mouse drag-to-scroll feedback */
  .swipable-group__scroller.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
  }

  .swipable-group__scroller > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: clamp(150px, var(--swipable-mobile-card-size, 79cqw), 100%);
    aspect-ratio: var(--swipable-content-ratio-mobile, auto);
    overflow: hidden;
  }

  @container swipable-group (min-width: 750px) {
    .swipable-group__scroller > * {
      width: calc((100% - (var(--swipable-gap, 32px) * (var(--swipable-columns, 4) - 1))) / var(--swipable-columns, 4));
      min-width: 264px;
      aspect-ratio: var(--swipable-content-ratio, auto);
    }
  }

  /* Full-width overflow: component expands to full viewport, slides align to page content */
  .swipable-group--overflow-full {
    --swipable-page-offset: max(var(--page-margin), calc((100vw - var(--page-content-width)) / 2));
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
  }

  .swipable-group--overflow-full .swipable-group__scroller {
    padding-inline: var(--swipable-page-offset);
    scroll-padding-inline-start: var(--swipable-page-offset);
  }

  .swipable-group--overflow-full .swipable-group__arrows {
    padding-inline: var(--swipable-page-offset);
  }

  /* Arrows container layout */
  .swipable-group__arrows {
    display: flex;
    padding-block: var(--swipable-arrows-gap, 16px) 0;
  }

  .swipable-group__arrows--bottom-right,
  .swipable-group__arrows--top-right {
    align-self: flex-end;
  }

  .swipable-group__arrows--bottom-left,
  .swipable-group__arrows--top-left {
    align-self: flex-start;
  }

  .swipable-group__arrows--top-right,
  .swipable-group__arrows--top-left {
    padding-block: 0 var(--swipable-arrows-gap, 16px);
  }
/* END_SNIPPET:swipable-group */

/* START_SNIPPET:text (INDEX:378) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

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

  .text-read-more {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    width: inherit;
    max-inline-size: inherit;
    text-align: inherit;
  }

  .text-read-more__content {
    width: 100%;
  }

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

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

  .text-read-more__toggle {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    width: fit-content;
    margin-block-start: var(--padding-xs);
    padding-block: 3px;
    padding-inline: 0;
    border: 0;
    border-block-end: 1px solid currentcolor;
    border-radius: 0;
    appearance: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-style: inherit;
    font-weight: 600;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-decoration: none;
  }

  .text-block--align-center .text-read-more__toggle {
    align-self: center;
  }

  .text-block--align-right .text-read-more__toggle {
    align-self: flex-end;
  }

  .text-read-more__toggle[hidden] {
    display: none;
  }

  .text-read-more[data-expanded='false'] .text-read-more__less,
  .text-read-more[data-expanded='true'] .text-read-more__more {
    display: none;
  }

  .text-block a:where(:not(.button, .button-secondary)) {
    text-decoration: underline;
    text-decoration-color: currentcolor;
  }

  .text-block a:where(:not(.button, .button-secondary)):hover {
    text-decoration-color: currentcolor;
  }

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

  /* Zero the outer top/bottom margin of the first/last text element. The second
     selector in each rule reaches one level deeper so a wrapper element (e.g. the
     container a rich text metafield renders around its content) can't reintroduce
     the outer spacing — keeps metafield-sourced text consistent with settings-sourced. */
  .text-block > *:first-child,
  .text-block > *:first-child > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child,
  .text-block > *:last-child > *: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));
  }

  .text-highlight {
    color: var(--highlight-color, inherit);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:386) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  /* CYO option heading above the size picker (e.g. "Choose your box size").
     Only rendered for CYO products; theme .h4 (24/20), semibold per Figma. */
  .variant-picker__cyo-label {
    --color: var(--color-foreground);
    --font-h4--weight: 600;
    margin: 0 0 8px;
  }

  .variant-picker[data-variant-updating='true'] .variant-picker__form {
    cursor: wait;
    opacity: 0.65;
  }

  .variant-picker[data-variant-updating='true'] :is(label, input, select) {
    cursor: wait;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }

  .variant-option--cards {
    --variant-card-focus-space: calc(var(--focus-outline-width) + var(--focus-outline-offset));

    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .variant-option__card-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    margin-block: calc(-1 * var(--variant-card-focus-space));
    margin-inline: calc(-1 * var(--variant-card-focus-space));
    padding-block: var(--variant-card-focus-space);
    padding-inline: calc(var(--variant-card-focus-space) + var(--padding-inline-start, 0px))
      calc(var(--variant-card-focus-space) + var(--padding-inline-end, 0px));
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .variant-option__card-list::-webkit-scrollbar {
    display: none;
  }

  .variant-option--cards legend {
    margin-block-end: 11px;
    color: var(--color-foreground);
  }

  .variant-option__selected-value {
    margin-inline-start: var(--padding-xs);
    font-weight: 400;
  }

  .variant-option__button-label--card {
    flex: 0 0 240px;
    width: 240px;
    min-width: 240px;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    white-space: normal;
    scroll-snap-align: start;
  }

  .variant-option__button-label--card:has(input[type='radio']) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .variant-card__image {
    display: flex;
    flex: 0 0 56px;
    align-self: flex-start;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
    background: var(--variant-card-image-gradient);
  }

  .variant-card__image-element {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .variant-card__content {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
  }

  .variant-option__button-label--card .variant-option__button-label__text {
    text-align: left;
  }

  .variant-card__title,
  .variant-card__price {
    max-width: 100%;
    color: var(--color-variant-text);
  }

  .variant-card__title {
    font-weight: 500;
  }

  .variant-option__button-label--card:has(:checked) .variant-card__title {
    font-weight: 600;
  }

  .variant-card__price {
    font-weight: 400;
  }

  .variant-card__delivery.label {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
    gap: 4px;
    color: var(--variant-card-delivery-color);
    font-weight: 500;
  }

  .variant-card__delivery-icon {
    display: inline-flex;
    flex: 0 0 auto;
    margin-block-start: 1px;
  }

  .variant-card__delivery-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  @media screen and (min-width: 750px) {
    .variant-option__card-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      overflow: visible;
      padding: 0;
      margin-block: 0;
      margin-inline: 0;
      scroll-snap-type: none;
    }

    .variant-option__button-label--card {
      width: 100%;
      min-width: 0;
      max-width: 250px;
      gap: 12px;
    }

    .variant-option__button-label--card:has(input[type='radio']) {
      gap: 12px;
    }
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:387) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:388) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }

  /* Once a native video has been started, keep the play button visible whenever
     it is not playing (paused or finished) so it comes back on its own without
     needing a hover. While playing, the toggle stays hover-only. Scoped with
     :has(video) to native video only - iframe embeds (YouTube/Vimeo) keep their
     own controls and are left untouched. */
  deferred-media[data-media-loaded]:not([data-playing]):has(video) .video-interaction-hint {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:389) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */