/** Shopify CDN: Minification failed

Line 17503:3 Unexpected "("

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-links (INDEX:3) */
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:featured-product (INDEX:9) */
.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:10) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--divider-color, var(--color-border));
    color: var(--color-foreground-muted);

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

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

  .utilities > * {
    text-align: center;

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

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

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

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

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

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

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

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

/* START_SECTION:footer (INDEX:11) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

  .footer-content .menu__heading__default {
    font-weight: var(--font-heading--weight);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

    /* Swap the cart bubble in transparent state only when using the default
       style. Custom bubble colors apply unchanged across header states. */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(
        :has(header-menu[aria-expanded='true'])
      )
      .header__row {
      --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback));
      --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback));
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* When top row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='top']:hover,
  [data-transparent-background='top']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='bottom']:hover,
  [data-transparent-background='bottom']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-bottom-row: var(--color-background);
    }
  }

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

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

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

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

    position: relative;

    /* Overwrite color from section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__submenu:not([inert])) {
      /* 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(--border-bottom-color, 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);
      border-bottom-color: var(--border-bottom-color-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);
    border-bottom-color: var(--border-bottom-color-mobile);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Transparent header layout. Keep this in sync with snippets/section.liquid's first-section height compensation. */
  body:has(#header-component[transparent]) .content-for-layout > .shopify-section:first-child {
    margin-top: calc(var(--header-group-height) * -1);
  }

  body:has(#header-component[transparent]) #header-group > .header-section {
    z-index: var(--layer-menu-drawer);
  }

  /* All other header group content should be beneath the floating header,
  but above the rest of the page content */
  body:has(#header-component[transparent]) #header-group > *:not(.header-section) {
    z-index: calc(var(--layer-menu-drawer) - 1);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* ============================================================
     YC: mobile header layout — match the prototype (logo LEFT, hamburger
     on the RIGHT with the account/cart actions). Horizon's default centers
     the logo and puts the hamburger on the left; override the mobile grid
     to: [logo | actions | hamburger]. !important is used to beat both
     Horizon's @media(max-width:749px) and [data-menu-style='drawer'] rules.
     ============================================================ */
  @media screen and (max-width: 989px) {
    .header__columns {
      grid-template-columns: 1fr auto auto !important;
      grid-template-areas: 'yc-logo yc-actions yc-ham' !important;
      /* Client wants the header icons tight — no gap between the icon cluster
         and the hamburger either. */
      column-gap: 0 !important;
      padding-inline: 16px !important;
      /* Prototype header has 8px block padding — Horizon zeroes it on mobile,
         leaving the logo tight against the promo bar. */
      padding-block: 8px !important;
    }

    .header__columns .header-logo {
      grid-area: yc-logo !important;
      justify-self: start !important;
    }

    .header__columns header-actions {
      grid-area: yc-actions !important;
    }

    .header__columns .header__drawer {
      grid-area: yc-ham !important;
    }

    /* Hamburger sized to sit level with the ~24px account/cart icons (Horizon's
       default 14px reads far too small next to them and vs the prototype). The
       wrapper must grow too — the svg's max-width:100% otherwise clamps it to
       the ~14px .svg-wrapper. */
    .header__columns .header__drawer .header__icon--menu .header-drawer-icon {
      width: 24px !important;
      height: 24px !important;
    }

    .header__columns .header__drawer .header__icon--menu .header-drawer-icon svg {
      width: 24px !important;
      height: 24px !important;
      max-width: none !important;
      --icon-stroke-width: 1.25;
    }
  }

  /* ============================================================
     YC: match the V3 prototype's solid header
     ------------------------------------------------------------
     1) Height 88px — the prototype header is logo 72px + 8px/8px block
        padding (--v3-header-h: 88px). Horizon's standard --header-padding
        (0.7rem = 11.2px) rendered it at 94.4px. Pin the standard padding to
        8px; the compact rule (.header--compact) keeps its own value.
     2) Solid-state hairline — the prototype's .is-solid header carries
        `box-shadow: 0 1px 0 rgba(46,46,46,0.12)` as its bottom border.
        Show it whenever the header is solid: on non-transparent (inner)
        pages always, and on the transparent home/hero header once it sticks
        solid — never while it floats over the video.
     3) Utilities cluster — the prototype's .icon-btn labels are 14px / 600
        beside 20px icons; Horizon rendered them at weight 400 / 22px icons.
     ============================================================ */
  .header:not(.header--compact) {
    --header-padding: 8px;
  }

  .header:not([transparent]),
  .header[transparent][data-sticky-state='active'] {
    box-shadow: 0 1px 0 rgba(46, 46, 46, 0.12);
  }

  /* Phones: the home hero no longer runs its media behind the header — the
     video stacks with the copy below it on a light page (see hero.liquid's
     mobile block) — so the transparent state would paint white type on a
     white page. Force the SOLID header look below 750px by mirroring exactly
     what the sticky-active state does: swap back to the primary logo, paint
     the underlay, and drop the transparent text-color variables. */
  @media screen and (max-width: 749px) {
    .header[transparent] {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --closed-underlay-height: 100%;
      box-shadow: 0 1px 0 rgba(46, 46, 46, 0.12);
    }

    .header[transparent]:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(
        :has(header-menu[aria-expanded='true'])
      )
      .header__row {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: initial;
      --color-primary-button-text: initial;
    }

    /* Cart bubble likewise returns to its solid-state colors (initial makes
       the var() consumers fall through to their fallbacks). */
    .header[transparent][data-bubble-style='default']:not([data-sticky-state='active']):not(
        :has(.menu-list__link:hover)
      ):not(:has(header-menu[aria-expanded='true']))
      .header__row {
      --cart-bubble-background: initial;
      --cart-bubble-text: initial;
    }
  }

  /* Semibold action labels (Poppins 600 is loaded via theme-styles-variables).
     The weight is driven by --header-actions-font-weight, which is re-declared
     inline on both #header-component and <shopify-account>, so override the
     variable on both with !important rather than the resolved font-weight. */
  #header-component,
  #header-component shopify-account {
    --header-actions-font-weight: 600 !important;
  }

  /* 20px icons to match the prototype (Horizon default is 22px / --icon-size-md).
     Exclude the referral pill — its gift icon is 16px (see header-actions). */
  #header-component header-actions .header-actions__action:not(.account-button):not(.header-actions__referral) svg,
  #header-component header-actions .account-button__icon {
    width: 20px;
    height: 20px;
  }
/* END_SECTION:header */

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

  /* --- Youth Crews: video-led hero height (desktop) ---
     The hero video is landscape (16:9). Filling a 100svh, near-portrait viewport
     with object-fit:cover cropped its top and bottom. On desktop, size the hero to
     the video's 16:9 frame instead — min-height (not a fixed height) so taller copy
     is never clipped, capped to the viewport so it never exceeds one screen — so the
     video shows (nearly) uncropped behind the overlaid copy. Tuned for a 16:9 video;
     adjust 56.25vw (= 9/16) if the source ratio differs. */
  @media screen and (min-width: 750px) {
    .hero {
      min-height: min(56.25vw, 100svh);
    }
  }

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

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

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

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

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

  .hero__media-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

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

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

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

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

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

    .hero__media-wrapper--mobile {
      display: block;
    }

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

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

    /* --- Youth Crews: stack the hero on mobile (client request) ---
       The landscape video shows full-width at its NATURAL height (uncropped,
       no fixed height). Only the headline group (heading + subheading)
       overlays the video — bottom-anchored over the scrim — and everything
       else (eyebrow, CTAs, proof row) flows BELOW it on a light/white page
       in ink text, matching the rest of the theme. */
    .hero {
      min-height: 0;
    }

    /* The theme is light — no dark band under the video. (Doubled class to
       out-specify the section's color-custom background class; the dark
       background_color setting is kept for desktop, where it is only the
       behind-video fallback.) */
    .hero.hero {
      background-color: #ffffff;
    }

    .hero__container {
      display: flex;
      flex-direction: column;
    }

    /* Back into normal flow so the video's own height sizes the section. */
    .hero__media-grid {
      position: relative;
    }

    /* Natural aspect ratio, never cropped or distorted. */
    .hero__media {
      height: auto;
      object-fit: contain;
    }

    /* Copy below the video: normal flow with its own breathing room. The
       page-width grid column doesn't apply inside the flex column, so the
       side gutters are restored here. */
    .hero__content-wrapper {
      position: relative;
      padding-block: 28px 8px;
      padding-inline: 20px;
    }

    /* The headline group (heading + subheading) is lifted out of the flow and
       bottom-anchored over the video: the content wrapper starts exactly at
       the video's bottom edge, so `bottom: 100%` lands the group on the video
       with no height math — it self-measures at every width. The section's
       gradient scrim (still enabled, scoped to the media box) keeps the white
       type legible. */
    .hero__content-wrapper > .group-block:has(.text-block.h1) {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      margin-bottom: 14px;
      z-index: 1;
      padding-inline: 20px;
      --gap: 16px !important;
    }

    /* Everything left in the flow sits below the video on white — ink text.
       (Direct-child selector so the headline group's white text is untouched;
       !important beats the blocks' inline --color custom property.) */
    .hero__content-wrapper > .text-block,
    .hero__content-wrapper > .text-block p {
      color: #2e2e2e !important;
    }

    /* Proof row on white: ink rating text (stars stay peach) and the pills
       swap their over-video glass style for the theme's ink-hairline idiom. */
    .hero .yc-rating__text {
      color: #2e2e2e;
      text-shadow: none;
    }

    .hero .yc-pill {
      color: #2e2e2e;
      background-color: #ffffff;
      border-color: #2e2e2e;
    }

    /* The secondary (white) pill button needs its hairline on a white page. */
    .hero__content-wrapper .button-custom:not([class*='button_shop']) {
      border: 1px solid currentColor;
    }
  }

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

  /* ============================================================
     Youth Crews hero — match the v3 prototype:
     wrapped headline, bold pill CTAs, trailing arrow on the primary button.
     ============================================================ */
  /* Copy-stack rhythm: the V3 prototype spaces eyebrow → headline → sub →
     CTAs → proof with gap: clamp(20px, 2.2vw, 36px) (≈32px on desktop, 20px on
     phones). Horizon's static gap setting is a touch tighter and doesn't scale
     the same way, so restore the prototype's responsive gap here. The inline
     `--gap` from gap-style is a custom property, so !important is required to win. */
  .hero .hero__content-wrapper {
    --gap: clamp(20px, 2.2vw, 36px) !important;
  }

  /* The headline (title + sub) lives in its own group block so the phone
     layout below can overlay JUST those two on the video. Give the group the
     same internal gap as the wrapper's rhythm so desktop stays pixel-identical
     to the pre-group layout. (Same !important reason as above: gap-style sets
     --gap inline.) */
  .hero .hero__content-wrapper .group-block:has(.text-block.h1) {
    --gap: clamp(20px, 2.2vw, 36px) !important;
  }

  .hero .text-block.h1 {
    /* No width cap: the V3 headline "Not Baby. Not Adult." sits on ONE line
       (the old 15ch cap forced it to wrap to two). */
    max-width: none;
    /* Prototype heading tracking + tight leading + legibility shadow over video */
    letter-spacing: -0.03em;
    line-height: 0.95;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  }

  /* The visible headline is an inner <h1> that carries Horizon's own h1
     font-size (≈50px on mobile), which overrode the size set on the wrapper —
     that is why the mobile heading rendered too large and wrapped to 4 lines.
     Target the inner <h1> directly at mobile/tablet to match the prototype
     scale (48 → 34), which wraps to ~2 lines like the reference. */
  @media screen and (max-width: 992px) {
    .hero .text-block.h1,
    .hero .text-block.h1 h1 {
      font-size: 48px;
      line-height: 0.95;
      letter-spacing: -0.03em;
    }
  }

  @media screen and (max-width: 640px) {
    .hero .text-block.h1 {
      /* No width cap on phones either — the fluid size below keeps the
         headline on one line instead. */
      max-width: none;
    }

    .hero .text-block.h1,
    .hero .text-block.h1 h1 {
      /* ONE line on phones (client request). "Not Baby. Not Adult." measures
         9.62x its font-size in Poppins at -0.03em tracking, so size the type
         from the real content width: 100vw minus the 40px side padding and up
         to ~16px of desktop-browser scrollbar (the page scrolls inside
         .page-wrapper, so 100vw over-counts by the scrollbar width). Capped at
         the previous 34px so it never grows past the approved scale.
         Verified one line at 320 / 360 / 390px. */
      font-size: min(34px, calc((100vw - 56px) / 9.62));
    }
  }

  .hero .button-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-inline: 32px;
    font-weight: 700;
  }

  /* Trailing right-arrow on the primary "Shop" button (Phosphor arrow-right) */
  .hero [class*='button_shop']::after {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* Prototype .hero__scrim — a 3-stop gradient that never fully clears at the
     top (keeps white copy legible over any video frame). Overrides Horizon's
     2-stop overlay for the hero only. */
  .hero .overlay--gradient {
    background: linear-gradient(
      to top,
      rgba(20, 20, 28, 0.72) 0%,
      rgba(20, 20, 28, 0.28) 45%,
      rgba(20, 20, 28, 0.35) 100%
    );
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX:15) */
.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. The video carries no
     sources until it scrolls into view, so wait for a frame before handing over —
     otherwise an active panel shows an empty box while the file is still loading. */
  .layered-slideshow__panel:not([inert]):has(.layered-slideshow__video[data-video-state='loaded'])
    .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:16) */
.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:18) */
/* YC: featured image (Image block) aligned to the article text column. Shown uncropped at its
     own ratio; tall portraits are capped in height (width follows) instead of being cropped. */
  .blog-post-layout > .image-block {
    width: 100%;
    max-width: var(--normal-content-width);
    margin-inline: auto;
    justify-content: center;
  }

  /* Width is derived from the image's own --ratio (set by the Image block) so a tall photo
     narrows instead of cropping. Needs a definite width: sizes="auto" breaks on width: auto. */
  .blog-post-layout > .image-block .image-block__image {
    width: min(100%, calc(min(80vh, 48rem) * var(--ratio, 1)));
    height: auto;
    aspect-ratio: var(--ratio, auto);
    object-fit: cover;
    border-radius: var(--style-border-radius-lg);
  }

  .blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:19) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

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

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

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

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

/* START_SECTION:main-cart (INDEX:20) */
.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:24) */
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:25) */
.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:27) */
.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-foreground);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

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

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

/* START_SECTION:product-hotspots (INDEX:37) */
/* 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 {
    .quick-add {
      display: flex;
      justify-content: flex-end;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button.add-to-cart-button {
      width: calc(var(--button-size-md) - 4px);
      position: relative;
      transform: translateX(2px);
      justify-self: flex-end;
      height: fit-content;
      border: none;
      color: var(--quick-add-foreground, var(--color-foreground));
      background-color: var(--quick-add-background, var(--color-background));
      pointer-events: all;
      opacity: 1;
      overflow: hidden;
      outline: 2px solid transparent;

      @media (prefers-reduced-motion: no-preference) {
        transition: width var(--animation-speed) var(--ease-out-cubic),
          outline-color var(--animation-speed) var(--ease-out-cubic) var(--animation-speed-slow),
          transform var(--animation-speed) var(--ease-out-cubic);
      }

      &:is(:hover, :active) {
        outline-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
      }

      &:focus-visible {
        outline-color: currentcolor;
        transition-delay: 0s;
      }
    }

    .quick-add__button.add-to-cart-button[data-added='true'] {
      color: transparent;
    }
  }

  @media screen and (min-width: 750px) {
    .hotspot-dialog {
      .quick-add__button:is(:hover, :focus-visible) {
        width: max-content;
        transform: translateX(0);
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:38) */
.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;
    }
  }

  /* ==========================================================================
     Youth Crews sticky CTA — reference: product.html .sticky-cta
     A white pill with a hard offset shadow, centred at the bottom of the
     viewport. Horizon's own show/hide (data-stuck, driven by an
     IntersectionObserver on the buy-buttons block) is kept as-is — it is the
     same trigger the prototype used.
     Tokens: --color-white #fff · --color-ink #2e2e2e · --color-purple #4036d6
             --color-muted #6b6b6b · --color-yellow #ffc7ac · --color-border #e2e1ee
             --radius-pill 999 · --space-24 24 · --space-16 16 · --space-12 12
     ========================================================================== */
  .sticky-add-to-cart__bar {
    bottom: 24px;
    width: max-content;
    max-width: calc(100% - 32px);
    gap: 16px;
    padding: 8px 12px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 999px;
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* The reference's frosted pseudo-border is not part of this design. */
  .sticky-add-to-cart__bar::before {
    content: none;
  }

  /* .sticky-cta__media — 52px, contained (the pack shot must not be cropped) */
  .sticky-add-to-cart__image {
    width: 52px;
    height: 52px;
    border-radius: 0;
    background: none;
  }

  .sticky-add-to-cart__image-img {
    object-fit: contain;
  }

  /* .sticky-cta__info — price stacked over the label */
  .sticky-add-to-cart__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* .sticky-cta__price — the reference nests the unit inside the amount
     (`$90<span>/box</span>`), so the two sit on one line. Here the amount comes
     from the shared `price` snippet, which wraps it in a BLOCK <div>, and that
     was pushing `/box` onto a second line. A baseline flex row restores the
     reference's single line without touching the shared snippet: flex also
     discards the whitespace-only text node between the two, so `$90.00` and
     `/box` stay contiguous exactly as the nested markup renders them. */
  .sticky-add-to-cart__price {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0;
    font-size: 18px;
    font-weight: 700;
    color: #4036d6;
  }

  .yc-sticky__unit {
    font-size: 12px;
    font-weight: 700;
  }

  /* .sticky-cta__label */
  .sticky-add-to-cart__title.yc-sticky__label {
    font-size: 12px;
    font-weight: 400;
    color: #6b6b6b;
    white-space: nowrap;
  }

  /* Horizon shows the variant title here; the reference's label already carries
     the plan, so the separate variant line is redundant. */
  .sticky-add-to-cart__variant {
    display: none;
  }

  /* .sticky-cta__sizes */
  .yc-sticky__sizes {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }

  /* .sticky-cta__size — 40px circles, purple when active */
  .yc-sticky__size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  }

  .yc-sticky__size:hover {
    background-color: #ffc7ac;
  }

  .yc-sticky__size[aria-pressed='true'] {
    background-color: #4036d6;
    color: #ffffff;
  }

  /* #stickyAdd — purple pill, 48px, no shadow of its own */
  .sticky-add-to-cart__button {
    height: 48px;
    padding-block: 0;
    background-color: #4036d6;
    color: #ffffff;
    border-radius: 999px;
    box-shadow: none;
  }

  /* ---- Youth Crews sticky CTA, responsive ----
     These come last on purpose: Horizon's own mobile rules above turn the bar
     into a full-width square dock at 749px, but the reference keeps the centred
     pill at every width and only compacts it at 640. */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 24px;
      width: max-content;
      max-width: calc(100% - 32px);
      border-radius: 999px;
    }

    .sticky-add-to-cart__button {
      width: auto;
      padding-inline: 24px;
    }
  }

  /* Reference: responsive.css @640 .sticky-cta — drop the thumbnail and the
     label, shrink the size circles, and reduce the button to its icon. */
  @media screen and (max-width: 640px) {
    .sticky-add-to-cart__bar {
      padding: 0 0 0 16px;
    }

    /* The second selector is not redundant: Horizon's own 389px block forces
       .sticky-add-to-cart__title back to `display: block` for single-option
       products, at a higher specificity than the plain class. */
    .sticky-add-to-cart__image,
    .sticky-add-to-cart__title.yc-sticky__label,
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title.yc-sticky__label {
      display: none;
    }

    .yc-sticky__size {
      width: 34px;
      height: 34px;
    }

    .sticky-add-to-cart__button {
      flex-shrink: 0;
      width: auto;
      padding-inline: 20px;
    }

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }
  }

  /* Horizon hides the title outright below 389px; the reference keeps showing
     the price and the size shortcuts, which is what the bar is for. */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: none;
    }
  }
/* END_SECTION:product-information */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:slideshow (INDEX:46) */
.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:yc-404 (INDEX:47) */
/* Prototype .faq-hero — flex column, and the positioning context for the
     two corner stickers. */
  .yc-404 {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  /* .container — 1620px max, 50px gutter, 48px stack gap. */
  .yc-404__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* ---------- Corner stickers ---------- */
  /* .sticker + .section-sticker + .section-sticker--tl/--tr, flattened. */
  .yc-404__sticker {
    position: absolute;
    top: 40px;
    z-index: 1;
    width: 96px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-404__sticker--left {
    left: 3%;
    transform: rotate(-14deg);
  }

  .yc-404__sticker--right {
    right: 3%;
    transform: rotate(12deg);
  }

  /* ---------- Numeral ---------- */
  /* Display-heading tokens: Poppins 700, --lh-heading 1.05, --ls-heading
     -.03em, ink. The peach bar is painted as a background gradient pinned to
     the bottom of the line box rather than a border, so it sits behind the
     glyphs the way the prototype's highlight treatments do and never adds to
     the element's height. Stepped in px on the page's own breakpoints rather
     than clamped, so it lands with the rest of the type ladder. */
  .yc-404__numeral {
    margin: 0;
    padding-inline: 8px;
    font-size: 132px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
    background-image: linear-gradient(#ffc7ac, #ffc7ac);
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 0.18em;
  }

  /* ---------- Head ---------- */
  /* .section-head, capped and centred. No `width: 100%`: the reference's auto
     inline margins suppress the flex `stretch`, so the head is fit-content
     capped at 720px. */
  .yc-404__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }

  /* .eyebrow — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius.
     line-height is pinned to the prototype's --lh-body (1.55) rather than
     inherited, so the pill keeps its reference height whatever the theme's
     global body line-height is set to. */
  .yc-404__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* 1em: the reference's Phosphor glyph renders exactly 1em square at the
     eyebrow's 12px, and yc-icon draws the same artwork on the same viewBox. */
  .yc-404__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h1 base — style.css --fs-h1 is 68px (not 72), Poppins 700. */
  .yc-404__title {
    margin: 0;
    font-size: 68px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* .section-subtitle */
  .yc-404__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* ---------- Search ---------- */
  /* A pill on the .btn radius holding icon + field + submit on one row. The
     border is the system's #e2e1ee; the white fill keeps the field legible on
     any of the band tints a merchant can pick. */
  .yc-404__search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 520px;
    padding: 6px 6px 6px 20px;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* The form owns the focus ring, not the bare input: the input has no visible
     box of its own, so a ring on it would float inside the pill. :focus-within
     puts the ring on the shape the user actually sees (WCAG 2.2 AA, 2.4.7). */
  .yc-404__search:focus-within {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-404__search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: #2e2e2e;
  }

  .yc-404__search-icon svg {
    width: 18px;
    height: 18px;
  }

  /* 16px: anything smaller makes iOS Safari zoom the viewport on focus, which
     on a ~94%-mobile store is a worse regression than the type size. */
  .yc-404__search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 0;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.55;
    color: #2e2e2e;
    background: none;
    border: 0;
    appearance: none;
  }

  .yc-404__search-input:focus {
    outline: none;
  }

  .yc-404__search-input::placeholder {
    color: #6b6b6b;
    opacity: 1;
  }

  /* Clears the UA's cross on WebKit — it lands on the submit button's padding
     and double-draws against the pill. */
  .yc-404__search-input::-webkit-search-cancel-button {
    appearance: none;
  }

  /* .btn, tightened to sit inside the pill. */
  .yc-404__search-submit {
    flex: 0 0 auto;
    padding: 12px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #ffffff;
    background-color: #4036d6;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    cursor: pointer;
  }

  /* Ink, not purple: the ring would sit on the button's own purple otherwise. */
  .yc-404__search-submit:focus-visible {
    outline: 3px solid #2e2e2e;
    outline-offset: 2px;
  }

  /* ---------- Actions ---------- */
  /* .cta-actions */
  .yc-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  /* Each button is a theme block, so Shopify wraps it in a `<shopify-block>`
     element and it is the WRAPPER, not the button, that becomes the flex item.
     Below 640px `_yc-faq-cta-button` sets `width: 100%` on the button, which
     resolves against that content-sized wrapper unless the wrapper is widened
     too — the same note is on sections/yc-faq-cta.liquid. */
  @media (max-width: 640px) {
    .yc-404__actions > * {
      width: 100%;
    }
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* responsive.css: --fs-h1 68 -> 48, --gutter 50 -> var(--space-20), and
     `.container { gap: var(--space-32) }` (responsive.css:104). */
  @media (max-width: 992px) {
    .yc-404__container {
      gap: 32px;
      padding-inline: 20px;
    }

    .yc-404__numeral {
      font-size: 104px;
    }

    .yc-404__title {
      font-size: 48px;
    }
  }

  /* responsive.css: --fs-h1 -> 34, --gutter -> var(--space-16), and
     `.section-sticker { display: none }` at phone width. The search pill
     stacks here too: at 320px a 24px-padded submit beside a usable field
     overflows the row. */
  @media (max-width: 640px) {
    .yc-404__container {
      padding-inline: 16px;
    }

    .yc-404__numeral {
      font-size: 76px;
    }

    .yc-404__title {
      font-size: 34px;
    }

    .yc-404__sticker {
      display: none;
    }

    .yc-404__search {
      flex-wrap: wrap;
      gap: 0 8px;
      padding: 10px 16px;
      border-radius: 24px;
    }

    .yc-404__search-submit {
      width: 100%;
      margin-block-start: 8px;
    }
  }

  /* responsive.css: --fs-h1 -> 29 on narrow phones. */
  @media (max-width: 380px) {
    .yc-404__numeral {
      font-size: 64px;
    }

    .yc-404__title {
      font-size: 29px;
    }
  }
/* END_SECTION:yc-404 */

/* START_SECTION:yc-blog-grid (INDEX:48) */
/* Values mirror sections/yc-ugc.liquid so the blog matches the home "Real Families" block */
  .yc-blog-grid {
    display: flex;
    flex-direction: column;
  }

  .yc-blog-grid__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    padding-inline: 50px;
    align-self: center;
  }

  .yc-blog-grid__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .yc-blog-grid__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-blog-grid__eyebrow .yc-icon {
    width: 15px;
    height: 15px;
  }

  .yc-blog-grid__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-blog-grid__subtitle {
    max-width: 620px;
    font-size: 18px;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-blog-grid__subtitle > * {
    margin: 0;
  }

  /* --- Grid: 3 / 2 / 1 columns, partial rows left-aligned --- */
  .yc-blog-grid__grid {
    --yc-blog-cols: 3;
    --yc-blog-gap: 16px;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--yc-blog-gap);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .yc-blog-grid__item {
    display: flex;
    flex: 0 0 calc((100% - (var(--yc-blog-cols) - 1) * var(--yc-blog-gap)) / var(--yc-blog-cols));
    min-width: 0;
  }

  .yc-blog-grid__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 24px;
    overflow: hidden;
  }

  .yc-blog-grid__media {
    aspect-ratio: 3 / 4;
    border-bottom: 1px solid #e2e1ee;
    overflow: hidden;
  }

  .yc-blog-grid__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .yc-blog-grid__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #8b89c8;
    background-color: #e4f5ff;
  }

  .yc-blog-grid__placeholder .yc-icon {
    width: 48px;
    height: 48px;
  }

  .yc-blog-grid__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 auto;
    padding: 24px;
  }

  .yc-blog-grid__story {
    flex: 1 1 auto;
    margin: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
    color: #2e2e2e;
  }

  /* Whole card is clickable via the title link; the visible "Read" link is a duplicate
     kept out of the tab order so keyboard users hit one stop per card */
  .yc-blog-grid__story-link {
    color: inherit;
    text-decoration: none;
  }

  .yc-blog-grid__story-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .yc-blog-grid__card:focus-within {
    outline: 2px solid #4036d6;
    outline-offset: 3px;
  }

  .yc-blog-grid__story-link:focus-visible {
    outline: none;
  }

  .yc-blog-grid__excerpt {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #6b6b6b;
  }

  .yc-blog-grid__author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
  }

  .yc-blog-grid__name {
    font-size: 15px;
    font-weight: 700;
    color: #2e2e2e;
  }

  .yc-blog-grid__role {
    font-size: 12px;
    color: #6b6b6b;
  }

  .yc-blog-grid__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #4036d6;
    text-decoration: none;
    transition: gap 0.18s ease;
  }

  .yc-blog-grid__link .yc-icon {
    width: 16px;
    height: 16px;
  }

  .yc-blog-grid__card:hover .yc-blog-grid__link {
    gap: 8px;
  }

  .yc-blog-grid__empty {
    margin: 0;
    text-align: center;
    color: #6b6b6b;
  }

  /* --- CTA --- */
  .yc-blog-grid__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .yc-blog-grid__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    background-color: #4036d6;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .yc-blog-grid__btn:hover {
    background-color: #2f2799;
  }

  /* Outline variant, matching the hero's white secondary pill */
  .yc-blog-grid__btn--secondary {
    color: #2e2e2e;
    background-color: #ffffff;
    border-color: #2e2e2e;
  }

  .yc-blog-grid__btn--secondary:hover {
    color: #ffffff;
    background-color: #2e2e2e;
  }

  .yc-blog-grid__btn:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 3px;
  }

  .yc-blog-grid__btn-icon {
    width: 18px;
    height: 18px;
  }

  @media (max-width: 989px) {
    .yc-blog-grid__container {
      gap: 36px;
      padding-inline: 20px;
    }

    .yc-blog-grid__title {
      font-size: 36px;
    }

    .yc-blog-grid__grid {
      --yc-blog-cols: 2;
    }
  }

  @media (max-width: 640px) {
    .yc-blog-grid__container {
      gap: 28px;
      padding-inline: 16px;
    }

    .yc-blog-grid__title {
      font-size: 27px;
    }

    .yc-blog-grid__subtitle {
      font-size: 16px;
    }

    .yc-blog-grid__grid {
      --yc-blog-cols: 1;
    }

    /* Single column: a shorter photo keeps more cards on screen */
    .yc-blog-grid__media {
      aspect-ratio: 4 / 3;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-blog-grid__link,
    .yc-blog-grid__btn {
      transition: none;
    }
  }
/* END_SECTION:yc-blog-grid */

/* START_SECTION:yc-buy-box (INDEX:49) */
.yc-bb__container { width: 100%; max-width: 1620px; margin-inline: auto; padding-inline: 50px; }
  /* Prototype .pdp: gallery ~1.4 : info 1, 40px gap, sticky gallery */
  .yc-bb__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }

  .yc-bb__empty { padding: 48px; text-align: center; color: #6b6b6b; border: 1px dashed #e2e1ee; border-radius: 16px; }
  .yc-bb__empty-ic { width: 32px; height: 32px; opacity: 0.6; }

  /* Gallery — vertical thumb rail on the left, sticky while info scrolls */
  .yc-bb__gallery { position: sticky; top: 36px; display: flex; flex-direction: row; align-items: flex-start; gap: 16px; align-self: start; }
  .yc-bb__stage { position: relative; flex: 1 1 auto; min-width: 0; border: 1px solid #e2e1ee; border-radius: 24px; overflow: hidden; background: #fff; aspect-ratio: 1 / 1; }
  .yc-bb__stage-img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .yc-bb__stage-placeholder { width: 100%; height: 100%; background: #e4f5ff; }
  .yc-bb__thumbs { order: -1; display: flex; flex-direction: column; gap: 16px; flex: 0 0 auto; }
  .yc-bb__thumb { width: 76px; height: 76px; padding: 0; border: 1px solid #e2e1ee; border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; transition: box-shadow 0.18s ease, border-color 0.18s ease; }
  .yc-bb__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
  .yc-bb__thumb.is-active { border-color: #4036d6; }
  @media (hover: hover) { .yc-bb__thumb:hover { box-shadow: 4px 4px 0 #2e2e2e; } }

  /* Info column — white card */
  .yc-bb__info { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px; background: #fff; border: 1px solid #e2e1ee; border-radius: 24px; }
  .yc-bb__title { margin: 0; font-size: 46px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; color: #2e2e2e; }
  .yc-bb__rating { display: inline-flex; align-items: center; gap: 8px; }
  .yc-bb__stars { display: inline-flex; color: #0fb654; }
  .yc-bb__star { width: 18px; height: 18px; }
  .yc-bb__reviews { font-size: 14px; font-weight: 600; color: #6b6b6b; text-decoration: none; }
  @media (hover: hover) { .yc-bb__reviews:hover { color: #2e2e2e; } }
  .yc-bb__desc { margin: 0; font-size: 16px; line-height: 1.55; color: #2e2e2e; }

  .yc-bb__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
  .yc-bb__price-now { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #2e2e2e; }
  .yc-bb__price-unit { font-size: 16px; font-weight: 700; color: #6b6b6b; }
  .yc-bb__price-was { font-size: 18px; font-weight: 600; color: #6b6b6b; text-decoration: line-through; }
  .yc-bb__price-save { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: #0fb654; border-radius: 999px; }
  .yc-bb__save-ic { width: 14px; height: 14px; }

  .yc-bb__stock { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; color: #2e2e2e; }
  /* The pulse ring runs on the compositor (transform + opacity) instead of
     animating box-shadow spread, which cannot be composited and cost a paint on
     the main thread every frame for as long as the dot was on screen.

     Geometrically identical to the box-shadow version it replaces: spread 0 → 6px
     on a 9px dot is a circle growing 9px → 21px, i.e. scale(1) → scale(2.3333),
     over the same alpha ramp (0.5 → 0), duration and easing. The ring shares the
     dot's colour, so the overlap renders the same regardless of paint order. */
  .yc-bb__stock-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #0fb654; }
  .yc-bb__stock-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #0fb654;
    will-change: transform, opacity;
    animation: yc-bb-pulse 1.8s ease-in-out infinite;
  }
  @keyframes yc-bb-pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(2.3333); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .yc-bb__stock-dot::after { display: none; } }

  .yc-bb__form { display: flex; flex-direction: column; gap: 20px; width: 100%; margin: 0; }
  .yc-bb__field { display: flex; flex-direction: column; gap: 12px; }
  .yc-bb__field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .yc-bb__label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #2e2e2e; }
  .yc-bb__field-link { font-size: 13px; font-weight: 600; color: #4036d6; text-decoration: underline; text-underline-offset: 3px; }
  @media (hover: hover) { .yc-bb__field-link:hover { color: #2f2799; } }

  /* Size buttons — light border, size number + optional sub, no resting shadow */
  .yc-bb__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
  .yc-bb__size { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 0 1 calc(33.333% - 6px); min-width: 0; padding: 12px 16px; background: #fff; border: 1px solid #e2e1ee; border-radius: 16px; cursor: pointer; text-align: left; transition: background-color 0.15s ease, border-color 0.15s ease; }
  .yc-bb__size-num { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; color: #2e2e2e; }
  .yc-bb__size-sub { display: block; font-size: 11px; font-weight: 600; line-height: 1.2; color: #6b6b6b; }
  .yc-bb__size.is-active { background: #4036d6; border-color: #4036d6; }
  .yc-bb__size.is-active .yc-bb__size-num { color: #fff; }
  .yc-bb__size.is-active .yc-bb__size-sub { color: rgba(255, 255, 255, 0.85); }
  .yc-bb__size.is-soldout { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
  .yc-bb__size:focus-visible { outline: 3px solid #4036d6; outline-offset: 2px; }

  /* Quantity — cream card + white stepper with purple controls */
  .yc-bb__qty-row { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f0eee3; border: 1px solid #e2e1ee; border-radius: 16px; }
  .yc-bb__qty { display: inline-flex; align-items: center; border: 1px solid #e2e1ee; border-radius: 16px; overflow: hidden; background: #fff; }
  .yc-bb__qty-btn { width: 44px; height: 44px; border: 0; background: #fff; color: #4036d6; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, color 0.15s ease; }
  @media (hover: hover) { .yc-bb__qty-btn:hover { background: #4036d6; color: #fff; } }
  .yc-bb__qty-ic { width: 18px; height: 18px; }
  .yc-bb__qty-input { width: 54px; height: 44px; border: 0; border-inline: 1px solid #e2e1ee; text-align: center; font-size: 16px; font-weight: 700; color: #2e2e2e; -moz-appearance: textfield; }
  .yc-bb__qty-input::-webkit-outer-spin-button, .yc-bb__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* Order type — side-by-side cards with a full-width header band */
  .yc-bb__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .yc-bb__plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e1ee; border-radius: 16px; overflow: hidden; cursor: pointer; transition: border-color 0.15s ease; }
  .yc-bb__plan.is-active { border-color: #4036d6; }
  .yc-bb__plan-tag { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; color: #2e2e2e; background: #f0eee3; border-bottom: 1px solid #e2e1ee; }
  .yc-bb__plan-tag-label { overflow: hidden; text-overflow: ellipsis; }
  .yc-bb__plan-tag--popular { color: #fff; background: #4036d6; }
  .yc-bb__plan-chip { flex: 0 0 auto; padding: 2px 7px; font-size: 9px; color: #2e2e2e; background: #ffc7ac; border: 1px solid #2e2e2e; border-radius: 999px; }
  .yc-bb__plan-body { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
  .yc-bb__plan-name { font-size: 17px; font-weight: 700; color: #2e2e2e; }
  .yc-bb__plan-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6b6b6b; }
  .yc-bb__plan-ic { width: 15px; height: 15px; flex: 0 0 auto; }

  /* Frequency — cream card, purple border */
  .yc-bb__freq { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 16px; background: #f0eee3; border: 1px solid #4036d6; border-radius: 16px; }
  .yc-bb__freq[hidden] { display: none; }
  .yc-bb__freq-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #2e2e2e; }
  .yc-bb__freq-ic { width: 16px; height: 16px; }
  .yc-bb__freq-select { position: relative; }
  .yc-bb__freq-select select { width: 100%; padding: 12px 44px 12px 16px; font-size: 15px; font-weight: 600; color: #2e2e2e; border: 1px solid #e2e1ee; border-radius: 8px; background: #fff; appearance: none; cursor: pointer; }
  .yc-bb__freq-caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; }
  .yc-bb__freq-note { margin: 0; font-size: 13px; color: #6b6b6b; }

  /* Add to cart — prototype .btn.btn--purple.btn--block */
  .yc-bb__add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 32px; font-size: 15px; font-weight: 700; color: #fff; background: #4036d6; border: 1px solid #e2e1ee; border-radius: 999px; cursor: pointer; transition: background-color 0.18s ease; }
  .yc-bb__add:hover:not([disabled]) { background: #2f2799; }
  .yc-bb__add[disabled] { background: #b9b7db; cursor: not-allowed; }
  .yc-bb__add-ic { width: 18px; height: 18px; }

  /* Trust row — centered, muted, green icons */
  .yc-bb__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; }
  .yc-bb__trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #6b6b6b; }
  .yc-bb__trust-ic { width: 16px; height: 16px; color: #0fb654; }

  @media screen and (max-width: 989px) {
    .yc-bb__grid { grid-template-columns: 1fr; gap: 32px; }
    .yc-bb__gallery { position: static; }
    .yc-bb__title { font-size: 34px; }
  }

  @media screen and (max-width: 640px) {
    .yc-bb__container { padding-inline: 16px; }
    .yc-bb__info { padding: 24px; }
    .yc-bb__gallery { flex-direction: column; }
    .yc-bb__thumbs { order: 0; flex-direction: row; flex-wrap: wrap; }
    .yc-bb__plans { grid-template-columns: 1fr; }
    .yc-bb__size { flex: 0 1 calc(50% - 4px); }
  }
/* END_SECTION:yc-buy-box */

/* START_SECTION:yc-company-mission (INDEX:50) */
/* .stats-band (401-414): relative, overflow hidden (the 200% wave), flex
     column, 100/60 padding, -1px seam overlap. */
  .yc-company-mission {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-top: -1px;
    padding-block: var(--yc-company-mission-pt, 100px) var(--yc-company-mission-pb, 60px);
    font-size: 16px;
    line-height: 1.55;
    color: #2e2e2e;
    background-color: var(--yc-company-mission-bg, #8b89c8);
  }

  /* ---------- Badges ---------- */
  /* .sticker + .section-sticker + `.stats-band .mission-sticker { top: 118px;
     width: 148px }`. The two-class rule beats --tr/--tl's top/right, so both
     sit at 118px; the rotations come from the corner classes. */
  .yc-company-mission__sticker {
    position: absolute;
    top: 118px;
    z-index: 1;
    width: 148px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-company-mission__sticker--tr {
    right: 4%;
    transform: rotate(12deg);
  }

  .yc-company-mission__sticker--tl {
    left: 4%;
    transform: rotate(-14deg);
  }

  /* ---------- Container ---------- */
  /* .container with `.stats-band .container { position: relative; z-index: 1 }`
     so the content paints above the wave. */
  .yc-company-mission__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    align-self: center;
    padding-inline: 50px;
  }

  /* ---------- Head ---------- */
  /* .section-head — centred column, 16px gap. No 620px cap here: that rule is
     `.company-section .section-head`, and this band is not a .company-section. */
  .yc-company-mission__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .yc-company-mission__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-company-mission__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 base with `.stats-band .section-head h2 { color: white }`. */
  .yc-company-mission__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #ffffff;
  }

  /* ---------- Mission card ---------- */
  /* .mission (419-428). margin-inline auto + max-width centres it in the flex
     column exactly as the reference's does. */
  .yc-company-mission__card {
    position: relative;
    max-width: 860px;
    margin: 32px auto 0;
    padding: 48px 32px 40px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 32px;
  }

  /* .mission__mark (431-444): the quote coin straddling the top edge. */
  .yc-company-mission__mark {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    font-size: 28px;
    color: #2e2e2e;
    background-color: var(--yc-company-mission-mark, #ffc7ac);
    border: 1px solid #e2e1ee;
    border-radius: 50%;
  }

  .yc-company-mission__mark-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* .mission__quote (445-452): a <p> set like a heading — --fs-h4 24px, 700,
     1.05 — but with a paragraph's tracking (none), not a heading's. */
  .yc-company-mission__quote {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    color: #2e2e2e;
  }

  /* ---------- Values slider ---------- */
  /* `.slider` (flex column, 12px gap) + `.mobile-slider { gap: 0 }`. */
  .yc-company-mission__slider {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  /* `.values-grid.slider__track`: the page's .values-grid (later in the
     document) turns the base track's flex row into a grid, and
     `.mobile-slider > .slider__track` switches its scrolling and snapping off
     above the phone breakpoint. What survives from the base track is
     `scroll-behavior: smooth` and the `cursor` reset to default — carried. */
  .yc-company-mission__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    width: 100%;
    scroll-behavior: smooth;
    cursor: default;
  }

  /* Focus ring for the keyboard tab stop (addition). Ink, not the indigo the
     white sections use: indigo on this periwinkle band is under 2:1. */
  .yc-company-mission__grid:focus-visible {
    outline: 3px solid #2e2e2e;
    outline-offset: 4px;
    border-radius: 24px;
  }

  /* `.slider__dots`, hidden above the phone breakpoint by `.mobile-slider >
     .slider__dots { display: none }`. The dots themselves are in
     assets/yc-mobile-slider.css. */
  .yc-company-mission__dots {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */

  /* responsive.css 18-33 + 104: --fs-h2 36, --fs-h4 22, --fs-body 15,
     --gutter 20, container 100%, container gap 32. */
  @media (max-width: 992px) {
    .yc-company-mission {
      font-size: 15px;
    }

    .yc-company-mission__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-company-mission__title {
      font-size: 36px;
    }

    .yc-company-mission__quote {
      font-size: 22px;
    }
  }

  /* company.html 383: the badges would sit on the wave or the copy. */
  @media (max-width: 900px) {
    .yc-company-mission__sticker {
      display: none;
    }
  }

  /* company.html 306-322 — the mobile-slider shell: the grid becomes a
     snapping flex track (86% slides, 4/4/12 clearance for the lifted card's
     shadow), the shell opens a 16px gap and the dots appear. The 24px gap
     between cards is the grid's own and stays. */
  @media (max-width: 860px) {
    .yc-company-mission__slider {
      gap: 16px;
    }

    .yc-company-mission__grid {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding: 4px 4px 12px;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      cursor: grab;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
    }

    .yc-company-mission__grid::-webkit-scrollbar {
      display: none;
    }

    .yc-company-mission__grid > * {
      flex: 0 0 86%;
      scroll-snap-align: start;
    }

    .yc-company-mission__dots {
      display: flex;
    }
  }

  /* responsive.css 110-124: --fs-h2 27, --fs-h4 18, --fs-body 14, --gutter 16. */
  @media (max-width: 640px) {
    .yc-company-mission {
      font-size: 14px;
    }

    .yc-company-mission__container {
      padding-inline: 16px;
    }

    .yc-company-mission__title {
      font-size: 27px;
    }

    .yc-company-mission__quote {
      font-size: 18px;
    }
  }

  /* responsive.css 891-895: --fs-h2 24. */
  @media (max-width: 380px) {
    .yc-company-mission__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-company-mission */

/* START_SECTION:yc-company-people (INDEX:51) */
/* .company-section — relative, flex column, flat 60/60, no background of its
     own (the Advisors instance sets cream in the template). */
  .yc-company-people {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-company-people-pt, 60px) var(--yc-company-people-pb, 60px);
    font-size: 16px;
    line-height: 1.55;
    color: #2e2e2e;
    background-color: var(--yc-company-people-bg, transparent);
  }

  /* ---------- Corner badge ---------- */
  .yc-company-people__sticker {
    position: absolute;
    z-index: 1;
    width: 96px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-company-people__sticker--tl {
    top: 40px;
    left: 3%;
    transform: rotate(-14deg);
  }

  .yc-company-people__sticker--tr {
    top: 40px;
    right: 3%;
    transform: rotate(12deg);
  }

  .yc-company-people__sticker--bl {
    bottom: 48px;
    left: 4%;
    transform: rotate(-10deg);
  }

  /* ---------- Container ---------- */
  .yc-company-people__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    align-self: center;
    padding-inline: 50px;
  }

  /* ---------- Head ---------- */
  /* .section-head with `.company-section .section-head { max-width: 620px;
     margin: 0 auto }`. */
  .yc-company-people__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
  }

  .yc-company-people__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-company-people__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  .yc-company-people__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* ====================================================================
     LEADERSHIP layout — `.people-grid` in the `.mobile-slider` shell
     ==================================================================== */

  /* `.slider` + `.mobile-slider { gap: 0 }` */
  .yc-company-people__slider {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  /* `.people-grid.slider__track` — the page's .people-grid (later in the
     document) makes the base track a grid; `.mobile-slider > .slider__track`
     switches scrolling/snapping off above the phone breakpoint. Surviving base
     properties: scroll-behavior smooth, cursor reset to default. The 32px gap
     is .people-grid's and beats the track's 24 at every width. */
  .yc-company-people--leadership .yc-company-people__grid {
    display: grid;
    /* An EXPLICIT column count, not the reference's `auto-fit, minmax(360px,
       1fr)` — client request 2026-09-22. Auto-fit packs in as many columns as
       the width allows, so the same page showed 2 cards per row at 1440 and 3
       at 1904, and no single minimum could hold 2 at both ends (460 gives 3 at
       1904; 500 drops to 1 at 992). `minmax(0, 1fr)` rather than `1fr` so a
       long word can never push a column past its share. Inert below 860px,
       where the grid becomes the snap slider. */
    grid-template-columns: repeat(var(--yc-company-people-cols, 2), minmax(0, 1fr));
    gap: 32px;
    width: 100%;
    scroll-behavior: smooth;
    cursor: default;
  }

  /* Focus ring for the keyboard tab stop (addition). Indigo on white 7.73:1. */
  .yc-company-people--leadership .yc-company-people__grid:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 4px;
    border-radius: 24px;
  }

  .yc-company-people__dots {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* `.people-grid .people-card` (208-213): avatar column beside the copy. */
  .yc-company-people--leadership .yc-company-person {
    display: flex;
    align-items: center;
    gap: 32px;
    text-align: left;
  }

  /* .people-card__left (214-217) — `flex: 0 0 auto` in the reference, which
     sizes the column to its widest child, the role pill. That is fine for the
     reference's two short pills on two wide cards. With five cards (3-up at
     1440, ~425px each) and a pill like "Community and Partnerships Manager",
     the pill alone took ~300px and starved the bio column to a few characters
     per line (2026-09-21). So the column may now SHRINK, never below the 140px
     avatar, and the pill wraps inside it. A wide card still gets the pill's
     natural width, so Brady's and Perry's cards measure as before. */
  /* CLIENT DESIGN DECISION 2026-09-22, a deliberate deviation from the
     reference: the photo column is a FIXED 30% of the card and the copy takes
     the rest, so every card splits like Brady's. The reference's `flex: 0 0
     auto` sizes this column to its widest child — the role pill — which is why
     "Community and Partnerships Manager" made Jessie's photo column 300px
     against Brady's 195px. The pill now wraps inside the 30% instead of
     setting it. `min-width` keeps the 140px avatar from being squeezed on a
     narrow card (861-992px), where 30% would resolve below it. */
  .yc-company-people--leadership .yc-company-person__left {
    flex: 0 0 30%;
    min-width: 140px;
    text-align: center;
  }

  .yc-company-people--leadership .yc-company-person__left .yc-company-person__role {
    max-width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  /* `.people-card__left .people-card__avatar` (221-225): the 140px ring. */
  .yc-company-people--leadership .yc-company-person__left .yc-company-person__avatar {
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
  }

  /* `.people-card__left .people-card__role { margin-bottom: 0 }` (226) */
  .yc-company-people--leadership .yc-company-person__left .yc-company-person__role {
    margin-bottom: 0;
  }

  /* .people-card__right (227) — `min-width: 0` in the reference, where the
     column is a plain auto-width flex item that fills whatever the left column
     leaves. `flex: 1 1 0` makes that explicit and is what lets the left column
     shrink above (a shrinking item needs a growing neighbour); on a wide card
     the result is the same box. */
  .yc-company-people--leadership .yc-company-person__right {
    /* Takes everything the 30% photo column and the 32px gap leave. A 0 basis
       is safe now that the left column has a fixed one — the earlier `1 1 0`
       failed only because the left was still auto-sized, so the pair never
       overflowed and shrink never engaged. */
    flex: 1 1 0;
    min-width: 0;
  }

  /* `.people-grid .people-card__bio { margin-bottom: 0 }` (228) */
  .yc-company-people--leadership .yc-company-person__bio {
    margin-bottom: 0;
  }

  /* ====================================================================
     ADVISORS layout — `.advisor-grid`, no slider at any width
     ==================================================================== */

  /* .advisor-grid (234-240) */
  .yc-company-people--advisors .yc-company-people__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    width: 100%;
    align-items: start;
  }

  /* `.advisor-grid .people-card` (241-250): stacked, fixed 280px height, 24px
     top/bottom padding (sides stay the base 24), and this card's own slower
     0.3s lift. */
  .yc-company-people--advisors .yc-company-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    height: 280px;
    padding-top: 24px;
    padding-bottom: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* (251-253) */
  .yc-company-people--advisors .yc-company-person__avatar,
  .yc-company-people--advisors .yc-company-person__name,
  .yc-company-people--advisors .yc-company-person__role {
    flex: 0 0 auto;
  }

  /* (257-261): the compact 80px ring with an 8px gap under it. */
  .yc-company-people--advisors .yc-company-person__avatar {
    width: 80px;
    height: 80px;
    margin-bottom: 8px;
  }

  /* (262-265) */
  .yc-company-people--advisors .yc-company-person__bio {
    width: 100%;
    margin-bottom: 8px;
  }

  /* (268): the pill is pinned to the card's bottom edge so a row lines up
     however long each bio runs. */
  .yc-company-people--advisors .yc-company-person__link {
    margin-top: auto;
  }

  /* (270) — the middle column sits above its neighbours. */
  .yc-company-people--advisors .yc-company-person:nth-child(3n + 2) {
    z-index: 1;
  }

  /* (272-274) — ring colour rotates per column, on `auto`-tinted cards only. */
  .yc-company-people--advisors .yc-company-person--tint-auto:nth-child(3n + 1) {
    --yc-tile: #78c6ff;
  }

  .yc-company-people--advisors .yc-company-person--tint-auto:nth-child(3n + 2) {
    --yc-tile: #ff92eb;
  }

  .yc-company-people--advisors .yc-company-person--tint-auto:nth-child(3n + 3) {
    --yc-tile: #ffc7ac;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */

  /* responsive.css 18-33 + 104: --fs-h2 36, --fs-body 15, --gutter 20,
     container 100%, container gap 32. */
  @media (max-width: 992px) {
    .yc-company-people {
      font-size: 15px;
    }

    .yc-company-people__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-company-people__title {
      font-size: 36px;
    }
  }

  /* company.html 306-329 */
  @media (max-width: 860px) {
    /* Leadership: the shell becomes the snapping slider… */
    .yc-company-people__slider {
      gap: 16px;
    }

    .yc-company-people--leadership .yc-company-people__grid {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding: 4px 4px 12px;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      cursor: grab;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
    }

    .yc-company-people--leadership .yc-company-people__grid::-webkit-scrollbar {
      display: none;
    }

    .yc-company-people--leadership .yc-company-people__grid > * {
      flex: 0 0 86%;
      scroll-snap-align: start;
    }

    .yc-company-people__dots {
      display: flex;
    }

    /* …and each card stacks and centres (327), with the ring back at 104px (329). */
    .yc-company-people--leadership .yc-company-person {
      flex-direction: column;
      text-align: center;
    }

    .yc-company-people--leadership .yc-company-person__left .yc-company-person__avatar {
      width: 104px;
      height: 104px;
    }

    /* Stacked, the columns are rows: the shrink/grow pair above is for the
       side-by-side card only, and a `flex-basis: 0` row in an auto-height
       column would collapse. Back to content-sized rows. */
    .yc-company-people--leadership .yc-company-person__left,
    .yc-company-people--leadership .yc-company-person__right {
      flex: 0 0 auto;
      min-width: 0;
    }

    /* Advisors: two-up, and the fixed heights go (332-333). */
    .yc-company-people--advisors .yc-company-people__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .yc-company-people--advisors .yc-company-person {
      height: auto;
    }
  }

  /* responsive.css 110-124 + 831: --fs-h2 27, --fs-body 14, --gutter 16, badge
     hidden. */
  @media (max-width: 640px) {
    .yc-company-people {
      font-size: 14px;
    }

    .yc-company-people__container {
      padding-inline: 16px;
    }

    .yc-company-people__title {
      font-size: 27px;
    }

    .yc-company-people__sticker {
      display: none;
    }
  }

  /* company.html 337-339: one column of advisors. */
  @media (max-width: 600px) {
    .yc-company-people--advisors .yc-company-people__grid {
      grid-template-columns: 1fr;
    }
  }

  /* responsive.css 891-895: --fs-h2 24. */
  @media (max-width: 380px) {
    .yc-company-people__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-company-people */

/* START_SECTION:yc-company-story (INDEX:52) */
/* .company-section — relative (for the corner badge), flex column, 60px
     block padding at every width, no background unless the merchant sets one
     (the reference sits on the page ground). */
  .yc-company-story {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-company-story-pt, 60px) var(--yc-company-story-pb, 60px);
    /* The reference body: 16px/1.55 (15 at <=992, 14 at <=640). Horizon's body
       is 14px/1.6, so the ladder is restated here and inherited by everything
       in the section — the copy column, the coin and the media frame alike. */
    font-size: 16px;
    line-height: 1.55;
    color: #2e2e2e;
    background-color: var(--yc-company-story-bg, transparent);
  }

  /* ---------- Corner badge ---------- */
  /* .sticker (1068) + .section-sticker (1093) + one placement, flattened. */
  .yc-company-story__sticker {
    position: absolute;
    z-index: 1;
    width: 96px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-company-story__sticker--tl {
    top: 40px;
    left: 3%;
    transform: rotate(-14deg);
  }

  .yc-company-story__sticker--tr {
    top: 40px;
    right: 3%;
    transform: rotate(12deg);
  }

  .yc-company-story__sticker--bl {
    bottom: 48px;
    left: 4%;
    transform: rotate(-10deg);
  }

  /* ---------- Grid ---------- */
  /* .container (1620px max, 50px gutter, align-self: center) with
     .company-section__grid on top: display:grid replaces the container's flex
     column, and column-gap/row-gap replace its gap — see the header note on
     why the 48px column gap survives the <=992 `gap: 32px`. */
  .yc-company-story__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 0;
    align-items: stretch;
    width: 100%;
    max-width: 1620px;
    align-self: center;
    padding-inline: 50px;
  }

  .yc-company-story__copy {
    grid-column: 1;
    grid-row: 1;
  }

  .yc-company-story__media {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    overflow: visible;
    min-height: 460px;
    border-radius: 24px;
  }

  /* ---------- Copy ---------- */
  /* .eyebrow — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius,
     with `.company-section__copy .eyebrow { margin-bottom: 16px }`. */
  .yc-company-story__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* 1em, not 1.15em — Phosphor renders a 12x12 box at the eyebrow's 12px and
     yc-icon draws the same artwork on the same viewBox (Batch 65). */
  .yc-company-story__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h1/h2 base (Poppins 700, #2e2e2e, --lh-heading 1.05, --ls-heading -0.03em)
     with `.company-section__copy h1 { font-size: var(--fs-h2) }` — the h1 is
     set at the h2 scale — and the shared `margin-bottom: 16px`. */
  /* line-height is the h1's --lh-tight 0.95, NOT the h2's 1.05: the copy rule
     only overrides the SIZE, so the reference h1 keeps its own leading (46 x
     0.95 = 43.7px, measured). Applied to both heading levels so the H2 option
     really does look identical. */
  .yc-company-story__title {
    margin: 0 0 16px;
    font-size: 46px;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* p (298) — body size and 1.55, no margin of its own. */
  .yc-company-story__p {
    margin: 0;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.55;
    color: inherit;
  }

  /* .story-pull (361-371). Its 24px margin-top is (0,1,0) — see below. */
  .yc-company-story__p--pull {
    margin-top: 24px;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.05;
    color: #2e2e2e;
    background-color: #ede9fd;
    border-left: 4px solid #4036d6;
    border-radius: 0 16px 16px 0;
  }

  /* `.company-section__copy p + p { margin-top: 16px }` — (0,2,0) here against
     the pull-quote's (0,1,0), so it wins over the 24px exactly as the
     reference's (0,1,2) beats (0,1,0). Declared after it as well, so the
     result does not depend on specificity alone. */
  .yc-company-story__copy .yc-company-story__p + .yc-company-story__p {
    margin-top: 16px;
  }

  /* The prototype's base `a { color: inherit; text-decoration: none }`, so a
     link a merchant adds in a paragraph is not recoloured by the theme. */
  .yc-company-story__p a {
    color: inherit;
    text-decoration: none;
  }

  /* Not in the reference: a keyboard user must still find the link (WCAG
     2.4.7). Keyboard only, so the resting design is untouched. */
  .yc-company-story__p a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ---------- Media ---------- */
  /* .company-section__media img (85-93): cover-fitted portrait with the hard
     4px ink shadow that the rest of the site reserves for hover. width/height
     are explicit because Horizon's base.css sets `img { width: 100% }` and
     `height: auto`, and `inset: 0` alone would not give it the frame. */
  .yc-company-story__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 24px;
    border: 1px solid #e2e1ee;
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* Editor empty state only — the placeholder SVG in the same frame. */
  .yc-company-story__img--placeholder {
    background-color: #f0eee3;
    max-width: none;
  }

  /* .media-checker (96-104): 260x80, hanging 18px right and 26px below the
     frame, behind the photo. */
  .yc-company-story__checker {
    position: absolute;
    right: -18px;
    bottom: -26px;
    z-index: 0;
    width: 260px;
    height: 80px;
    color: var(--yc-company-story-checker, #8b89c8);
    pointer-events: none;
  }

  /* .checker-svg (448-452). max-width: none undoes Horizon's global
     `svg { max-width: 100% }` so the box is exactly the wrapper's. */
  .yc-company-story__checker-svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  /* .media-coin (107-131): 118px peach disc, rotated -8deg, straddling the
     frame's bottom-left edge. */
  .yc-company-story__coin {
    position: absolute;
    left: -22px;
    bottom: 32px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 118px;
    height: 118px;
    padding: 8px;
    text-align: center;
    color: #2e2e2e;
    background-color: var(--yc-company-story-coin, #ffc7ac);
    border: 1px solid #e2e1ee;
    border-radius: 50%;
    transform: rotate(-8deg);
  }

  /* `.media-coin i { font-size: 22px }` — Phosphor's `.ph` has line-height 1,
     so the glyph box is exactly 22px; the SVG is sized to match. */
  .yc-company-story__coin-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
  }

  .yc-company-story__coin-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
  }

  .yc-company-story__coin-role {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */

  /* responsive.css 18-33: --fs-h2 36, --fs-body 15, --gutter 20,
     --container-width 100%. (The container gap step does not apply — see the
     header note.) */
  @media (max-width: 992px) {
    .yc-company-story__grid {
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-company-story {
      font-size: 15px;
    }

    .yc-company-story__title {
      font-size: 36px;
    }
  }

  /* company.html 287-329 — single column, photo first, decoration tucked in. */
  @media (max-width: 860px) {
    .yc-company-story__grid {
      grid-template-columns: 1fr;
      row-gap: 24px;
    }

    .yc-company-story__copy,
    .yc-company-story__media {
      grid-column: 1;
      grid-row: auto;
    }

    .yc-company-story__media {
      order: -1;
      min-height: 340px;
    }

    .yc-company-story__copy {
      order: 0;
    }

    .yc-company-story__checker {
      display: none;
    }

    .yc-company-story__coin {
      left: 12px;
      bottom: 12px;
      width: 92px;
      height: 92px;
    }

    .yc-company-story__coin-name {
      font-size: 13px;
    }
  }

  /* responsive.css 110-124 and 831: --fs-h2 27, --fs-body 14, --gutter 16;
     the corner badge goes. */
  @media (max-width: 640px) {
    .yc-company-story__grid {
      padding-inline: 16px;
    }

    .yc-company-story {
      font-size: 14px;
    }

    .yc-company-story__title {
      font-size: 27px;
    }

    .yc-company-story__sticker {
      display: none;
    }
  }

  /* responsive.css 891-895: --fs-h2 24. */
  @media (max-width: 380px) {
    .yc-company-story__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-company-story */

/* START_SECTION:yc-comparison (INDEX:53) */
.yc-comparison {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* v3.css .page-v3 .comparison — cream band in the white/cream/white rhythm.
     Horizon forces `.shopify-section:not(.header-section) :is(.section){ background:
     transparent }` (0,3,0), which out-specifies a plain `.yc-comparison` rule and
     left this section white. Scope the cream to a higher-specificity selector so
     it wins. */
  .shopify-section:not(.header-section) .yc-comparison.section {
    background-color: #f0eee3;
  }

  .yc-comparison__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-left: 50px;
    padding-right: 50px;
  }

  .yc-comparison__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .yc-comparison__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #FFC7AC;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-comparison__eyebrow svg {
    width: 14px;
    height: 14px;
  }

  .yc-comparison__title {
    margin: 0;
    font-size: 46px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* Prototype .section-subtitle (style.css:678) */
  .yc-comparison__subtitle {
    margin: 0;
    max-width: 60ch;
    font-size: 18px;
    line-height: 1.55;
    color: #6b6b6b;
  }

  .yc-comparison__wrap {
    width: 100%;
    overflow: visible;
  }

  /* The wrap is tabindex="0", so it must show focus (WCAG 2.4.7). */
  .yc-comparison__wrap:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 4px;
  }

  .yc-comparison__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1fr 1.2fr 1fr;
    align-items: stretch;
    width: 100%;
    min-width: 680px;
    padding: 16px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 32px;
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  .yc-comparison__highlight {
    grid-column: 3;
    margin-block: -16px;
    /* YC a11y (A11Y-05): fallback matches the schema default — white bold 14px
       cells need 4.5:1, which the old #8B89C8 (3.23:1) failed. */
    background-color: #6C6AB0;
    z-index: 0;
  }

  .yc-comparison__cell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 20px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #2e2e2e;
    text-align: center;
    border-bottom: 1px solid #e2e1ee;
  }

  .yc-comparison__cell.is-last {
    border-bottom: none;
  }

  .yc-comparison__cell--label {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: #2e2e2e;
  }

  .yc-comparison__cell--label svg {
    width: 20px;
    height: 20px;
    color: #4036d6;
    flex-shrink: 0;
  }

  .yc-comparison__cell--head,
  .yc-comparison__cell--corner {
    justify-content: center;
    padding-top: 24px;
    padding-bottom: 24px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b6b6b;
  }

  .yc-comparison__cell--brandhead {
    gap: 12px;
    padding-top: 32px;
  }

  .yc-comparison__flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #FFC7AC;
    border-radius: 999px;
  }

  .yc-comparison__flag svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  .yc-comparison__logo {
    height: 34px;
    width: auto;
  }

  .yc-comparison__brandname {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
  }

  .yc-comparison__mark {
    display: inline-flex;
  }

  .yc-comparison__cell--con .yc-comparison__mark svg {
    width: 26px;
    height: 26px;
    color: #6b6b6b;
    flex-shrink: 0;
  }

  .yc-comparison__cell--pro {
    color: #ffffff;
    font-weight: 700;
    border-bottom-color: rgba(255, 255, 255, 0.22);
  }

  .yc-comparison__cell--pro .yc-comparison__mark svg {
    width: 26px;
    height: 26px;
    color: #ffffff;
    flex-shrink: 0;
  }

  /* Decorative "not baby, not adult" badge, top-right corner.
     The heading is centred and grows to nearly the full section width as the
     viewport narrows (and is a single ~1300px line even on desktop), so the
     prototype's top:40px / 96px badge overhung and covered the end of the
     heading text at every width below ~1500px — worst at tablet, where it hid
     "Adult". Tucked higher (top:16px) and smaller (72px) so its box clears the
     heading top at all widths from 641px up (verified 700/820/1100/1440);
     still hidden ≤640px below. */
  .yc-comparison__sticker {
    position: absolute;
    z-index: 1;
    top: 16px;
    right: 3%;
    width: 72px;
    height: auto;
    transform: rotate(12deg);
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  /* ---------- Tablet (<= 992px) ---------- */
  @media (max-width: 992px) {
    .yc-comparison__container {
      max-width: 100%;
      padding-left: 20px;
      padding-right: 20px;
      gap: 32px;
    }

    .yc-comparison__title {
      font-size: 36px;
    }
  }

  /* ---------- Comparison table scrolls horizontally once it can't fit ---------- */
  @media (max-width: 760px) {
    .yc-comparison__wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-top: 16px;
      padding-bottom: 16px;
    }
  }

  /* ---------- Mobile (<= 640px) ---------- */
  @media (max-width: 640px) {
    .yc-comparison__container {
      padding-left: 16px;
      padding-right: 16px;
    }

    .yc-comparison__title {
      font-size: 27px;
    }

    .yc-comparison__grid {
      padding: 12px;
    }

    .yc-comparison__cell {
      padding: 16px 12px;
      font-size: 13px;
    }

    .yc-comparison__logo {
      height: 28px;
    }

    .yc-comparison__sticker {
      display: none;
    }
  }

  /* ---------- Small mobile (<= 380px) ---------- */
  @media (max-width: 380px) {
    .yc-comparison__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-comparison */

/* START_SECTION:yc-concern-band (INDEX:54) */
.yc-concern-band {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #e4f5ff;
    overflow: hidden;
  }

  .yc-concern-band__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
    /* Room at the foot for the 140px checker band so the privacy line doesn't
       run into it (prototype adds +80px to the section's bottom padding). */
    padding-bottom: 80px;
  }

  .yc-concern-band__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .yc-concern-band__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-concern-band__eyebrow svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

  .yc-concern-band__title {
    margin: 0;
    font-size: 46px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-concern-band__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    color: #2e2e2e;
  }

  .yc-concern-band__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  /* Each situation is a card, not a chip. */
  .yc-concern-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    text-align: left;
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 24px;
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  }

  .yc-concern-card:hover {
    transform: translateY(-4px);
  }

  .yc-concern-card:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 3px;
  }

  .yc-concern-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Fixed basis + no shrink keeps the circle round when the card becomes a
       row on mobile. */
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    color: #4036d6;
    background-color: #ede9fd;
    border: 1px solid #2e2e2e;
    border-radius: 50%;
    transition: color 0.18s ease, background-color 0.18s ease;
  }

  .yc-concern-card__icon svg {
    width: 26px;
    height: 26px;
  }

  .yc-concern-card__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #2e2e2e;
  }

  /* Pushed to the bottom so the CTAs line up across cards of unequal height. */
  .yc-concern-card__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: #4036d6;
    transition: color 0.18s ease;
  }

  .yc-concern-card__go svg {
    width: 16px;
    height: 16px;
  }

  /* Selected state — written by the quiz JS while the visitor works through
     the situation. */
  .yc-concern-card.is-active {
    background-color: #4036d6;
  }

  .yc-concern-card.is-active .yc-concern-card__title,
  .yc-concern-card.is-active .yc-concern-card__go {
    color: #ffffff;
  }

  .yc-concern-card.is-active .yc-concern-card__icon {
    color: #4036d6;
    background-color: #ffffff;
  }

  /* Catch-all link below the pills — purple bold text + arrow, the prototype's
     .alt-path__link idiom (sizing-pack.html) and the same look as the cards'
     "Find the size" CTA. Centred under the grid. */
  .yc-concern-band__catchall {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    max-width: 100%;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #4036d6;
    text-decoration: none;
    transition: color 0.18s ease;
  }

  .yc-concern-band__catchall svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
  }

  .yc-concern-band__catchall:hover {
    text-decoration: underline;
  }

  .yc-concern-band__catchall:hover svg {
    transform: translateX(3px);
  }

  .yc-concern-band__catchall:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 3px;
    border-radius: 4px;
  }

  .yc-concern-band__privacy {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    max-width: 68ch;
    align-self: center;
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: #6b6b6b;
  }

  .yc-concern-band__privacy svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #4036d6;
  }

  /* Trust-badge sticker in the empty blue above the heading. Decorative. */
  .yc-concern-band__badge {
    position: absolute;
    top: 40px;
    right: 6%;
    z-index: 1;
    width: 108px;
    height: auto;
    opacity: 1;
    transform: rotate(11deg);
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  /* Pixel-checker motif along the bottom edge. */
  .yc-concern-band__checker {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 140px;
    pointer-events: none;
  }

  .yc-concern-band__checker--left {
    right: auto;
    left: 0;
  }

  .yc-concern-band__checker-svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .yc-concern-band__checker-svg path {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
  }

  .yc-concern-band__checker-svg path:nth-child(3) { transition-delay: 0.04s; }
  .yc-concern-band__checker-svg path:nth-child(6) { transition-delay: 0.08s; }
  .yc-concern-band__checker-svg path:nth-child(9) { transition-delay: 0.12s; }

  .yc-concern-band:hover .yc-concern-band__checker-svg path:nth-child(1) { transform: translateY(100%); }
  .yc-concern-band:hover .yc-concern-band__checker-svg path:nth-child(3) { transform: translateX(-100%); }
  .yc-concern-band:hover .yc-concern-band__checker-svg path:nth-child(6) { transform: translateY(100%); }
  .yc-concern-band:hover .yc-concern-band__checker-svg path:nth-child(7) { transform: translateX(100%); }
  .yc-concern-band:hover .yc-concern-band__checker-svg path:nth-child(9) { transform: translateX(-100%); }

  @media (prefers-reduced-motion: reduce) {
    .yc-concern-card,
    .yc-concern-band__catchall svg,
    .yc-concern-band__checker-svg path {
      transition: none;
    }
    .yc-concern-card:hover {
      transform: none;
    }
    .yc-concern-band:hover .yc-concern-band__checker-svg path {
      transform: none;
    }
  }

  /* Badge shrinks and re-anchors on smaller viewports. */
  @media (max-width: 1200px) {
    .yc-concern-band__badge {
      top: 24px;
      right: 2%;
      width: 82px;
    }
  }

  /* One card per row: icon beside the words instead of above them. */
  @media (max-width: 992px) {
    .yc-concern-band__container {
      padding-inline: 20px;
    }
    .yc-concern-band__title {
      font-size: 36px;
    }
    .yc-concern-band__grid {
      grid-template-columns: 1fr;
    }
    .yc-concern-card {
      flex-direction: row;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
    }
    .yc-concern-card__title {
      /* min-width:0 lets the title shrink instead of ovalling the icon. */
      flex: 1 1 auto;
      min-width: 0;
      font-size: 16px;
    }
    .yc-concern-card__go {
      margin-top: 0;
    }
  }

  /* responsive.css hides the checker + sticker at this width, so reclaim the
     room reserved for the checker band. */
  @media (max-width: 640px) {
    .yc-concern-band__title {
      font-size: 27px;
    }
    .yc-concern-band__container {
      padding-inline: 16px;
      padding-bottom: 0;
    }
    .yc-concern-band__badge,
    .yc-concern-band__checker {
      display: none;
    }
  }

  @media (max-width: 600px) {
    .yc-concern-card {
      gap: 12px;
      padding: 16px;
    }
    .yc-concern-card__icon {
      flex-basis: 44px;
      width: 44px;
      height: 44px;
    }
    .yc-concern-card__icon svg {
      width: 22px;
      height: 22px;
    }
    .yc-concern-card__title {
      font-size: 15px;
    }
    .yc-concern-card__go {
      gap: 4px;
      font-size: 13px;
    }
  }

  @media (max-width: 380px) {
    .yc-concern-band__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-concern-band */

/* START_SECTION:yc-contact-faq (INDEX:55) */
/* .company-section + .company-section--alt — flex column on cream, and the
     positioning context for the corner sticker. */
  .yc-contact-faq {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* .container — 1620px max, 50px gutter, 48px stack gap. */
  /* ⚠ NO `position` / `z-index` HERE, deliberately. style.css's `.container` is
     static; giving this one a stacking context was an embellishment, and it is
     not free — it puts the container ABOVE the corner sticker, which the
     reference paints on top. On the Gifting page, where the sticker overlaps the
     heading at around 780px, that showed up as a 14x13 region in the pixel diff.
     Same finding as the reasons band (§6e) and the options deck. */
  .yc-contact-faq__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* .sticker + .section-sticker + .section-sticker--tl, flattened. */
  /* `.section-sticker`. The corner-specific half was split out when the
     Gifting page reused this section, which needs the top-RIGHT placement.
     `--left` reproduces exactly what this rule used to declare on its own. */
  .yc-contact-faq__sticker {
    position: absolute;
    top: 40px;
    z-index: 1;
    width: 96px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-contact-faq__sticker--left {
    left: 3%;
    transform: rotate(-14deg);
  }

  .yc-contact-faq__sticker--right {
    right: 3%;
    transform: rotate(12deg);
  }

  /* .section-head with `.company-section .section-head` (620px, centred). */
  /* The Contact page is 620px (`.faq-section .section-head`); the Gifting
     page is 660px (`.company-section .section-head`). Same rule, one number. */
  .yc-contact-faq__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: var(--yc-contact-faq-head-max, 620px);
    margin-inline: auto;
    text-align: center;
  }

  /* .eyebrow — see sections/yc-faq-hero.liquid for the line-height note. */
  .yc-contact-faq__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* The Gifting page uses the outlined chip rather than the peach default.
     Additive: without the modifier class nothing here applies. */
  .yc-contact-faq__eyebrow--outline {
    background-color: #ffffff;
    border-color: #2e2e2e;
  }

  .yc-contact-faq__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 — Poppins 700, --lh-heading 1.05, --ls-heading -.03em, --fs-h2 46. */
  .yc-contact-faq__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* .section-subtitle */
  .yc-contact-faq__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* The prototype's base `a { color: inherit; text-decoration: none }` — the
     FAQ-page link in the standfirst carries no colour or underline. */
  .yc-contact-faq__subtitle a {
    color: inherit;
    text-decoration: none;
  }

  /* Added, not in the reference: a keyboard user must be able to see the
     link (WCAG 2.2 AA, 2.4.7). Invisible at rest. */
  .yc-contact-faq__subtitle a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ---------- Question list ---------- */
  /* .faq + .faq-preview — a flex column capped at 820px. The reference's
     .faq-preview raises the base .faq gap from 4px to 12px. */
  /* Contact is `.faq.faq-preview` — 820px wide, and `.faq-preview` raises the
     base `.faq` gap from 4px to 12px. Gifting is `.faq.gift-faq` — 760px, and
     it keeps the base 4px. Both are settings; the defaults are Contact's. */
  .yc-contact-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--yc-contact-faq-list-gap, 12px);
    width: 100%;
    max-width: var(--yc-contact-faq-list-max, 820px);
    margin-inline: auto;
  }

  /* `.faq > .faq__item:nth-child(6n+…)` — the rotating coloured left rule.
     Each question is a theme block, and `_yc-faq-question` declares no
     `"tag": null`, so Shopify wraps every one in its own element: a bare
     `> .yc-faq-qa` matches nothing, and each card is the only child of its
     own wrapper, so `:nth-child` would be 1 for all of them. The cycle is
     therefore counted on the WRAPPER, with the direct-child form kept
     alongside for the case where the wrapper is absent. Same fix, and the
     same reasoning, as blocks/_yc-faq-group.liquid (context.md Batch 86).
     `display: contents` is NOT a fix here: it changes the layout tree, not
     the DOM tree `:nth-child` resolves against. */
  .yc-contact-faq__list > .yc-faq-qa,
  .yc-contact-faq__list > * > .yc-faq-qa {
    border-left: 4px solid #4036d6;
  }

  .yc-contact-faq__list > .yc-faq-qa:nth-child(6n + 2),
  .yc-contact-faq__list > *:nth-child(6n + 2) > .yc-faq-qa {
    border-left-color: #0fb654;
  }

  .yc-contact-faq__list > .yc-faq-qa:nth-child(6n + 3),
  .yc-contact-faq__list > *:nth-child(6n + 3) > .yc-faq-qa {
    border-left-color: #ffc7ac;
  }

  .yc-contact-faq__list > .yc-faq-qa:nth-child(6n + 4),
  .yc-contact-faq__list > *:nth-child(6n + 4) > .yc-faq-qa {
    border-left-color: #8b89c8;
  }

  .yc-contact-faq__list > .yc-faq-qa:nth-child(6n + 5),
  .yc-contact-faq__list > *:nth-child(6n + 5) > .yc-faq-qa {
    border-left-color: #ff92eb;
  }

  .yc-contact-faq__list > .yc-faq-qa:nth-child(6n + 6),
  .yc-contact-faq__list > *:nth-child(6n + 6) > .yc-faq-qa {
    border-left-color: #78c6ff;
  }

  /* `.faq-preview .faq__a { flex-direction: column; gap: 8px;
     align-items: flex-start }` — the page's own override of the shared
     answer box, applied from the section exactly as the reference applies it
     from the page. The block's own rule is a 12px column gap (the FAQ
     page's), so only the gap and the alignment change here. */
  .yc-contact-faq__list .yc-faq-qa__a {
    gap: 8px;
    align-items: flex-start;
  }

  /* ---------- CTA ---------- */
  /* .faq-preview__cta */
  .yc-contact-faq__cta {
    display: flex;
    justify-content: center;
  }

  /* .btn.btn--purple — 14px/700 pill, 16/32 padding, 1px #e2e1ee border.
     An <a> button inherits the prototype's body line-height (1.55), unlike
     the <button> in section 2 which keeps the UA's `normal`. The reference
     declares a colour transition but defines no hover state anywhere, so the
     button genuinely does not change on hover; reproduced rather than
     "improved", as in blocks/_yc-faq-cta-button.liquid. */
  .yc-contact-faq__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #ffffff;
    background-color: #4036d6;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  /* Added, not in the reference (whose global rule would also snap the pill
     to a 4px radius — a cascade artefact that is not reproduced). White on
     the indigo fill would be invisible, so the ring stays indigo on cream:
     6.64:1. */
  .yc-contact-faq__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  /* .btn__icon — 18px glyph. */
  .yc-contact-faq__btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* responsive.css: --fs-h2 46 -> 36, --gutter 50 -> 20, .container gap 32. */
  @media (max-width: 992px) {
    .yc-contact-faq__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-contact-faq__title {
      font-size: 36px;
    }
  }

  /* responsive.css: --fs-h2 -> 27, --gutter -> 16, `.btn { width: 100% }`
     and `.section-sticker { display: none }`. The CTA is section markup
     rather than a block, so the button's own 100% resolves against the row
     with no wrapper in the way (contrast with context.md Batch 86). */
  @media (max-width: 640px) {
    .yc-contact-faq__container {
      padding-inline: 16px;
    }

    .yc-contact-faq__title {
      font-size: 27px;
    }

    .yc-contact-faq__sticker {
      display: none;
    }

    .yc-contact-faq__btn {
      width: 100%;
    }
  }

  /* responsive.css: --fs-h2 -> 24 on narrow phones. */
  @media (max-width: 380px) {
    .yc-contact-faq__title {
      font-size: 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-contact-faq__btn {
      transition: none;
    }
  }
/* END_SECTION:yc-contact-faq */

/* START_SECTION:yc-contact-form (INDEX:56) */
/* .company-section — flex column, the positioning context for the
     top-left sticker. */
  /* Padding comes through custom properties rather than straight inline
     declarations, so the phone override below can win without `!important` —
     an inline `padding-block` would outrank any stylesheet rule. Same reason
     the other yc-* sections carry their spacing this way. */
  .yc-contact {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-contact-pt, 60px) var(--yc-contact-pb, 132px);
  }

  /* .container — 1620px max, 50px gutter, 48px stack gap. */
  .yc-contact__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* ---------- Stickers ---------- */
  /* .sticker + .section-sticker (+ --tl / .form-sticker), flattened. */
  .yc-contact__sticker {
    position: absolute;
    z-index: 1;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-contact__sticker--left {
    top: 40px;
    left: 3%;
    width: 96px;
    transform: rotate(-14deg);
  }

  /* .form-sticker — hung off the grid's bottom-right corner, into the band's
     132px bottom padding. Keep the padding default and this offset in step
     (the reference's own note). */
  .yc-contact__sticker--form {
    right: 16px;
    bottom: -44px;
    z-index: 2;
    width: 72px;
    transform: rotate(10deg);
  }

  /* ---------- Head ---------- */
  /* .section-head with the page override `.company-section .section-head`
     (max-width 620px, centred). Shrink-to-fit, like the hero's. */
  .yc-contact__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  /* .eyebrow — see sections/yc-faq-hero.liquid for the line-height note. */
  .yc-contact__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-contact__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 — Poppins 700, --lh-heading 1.05, --ls-heading -.03em, --fs-h2 46. */
  .yc-contact__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* .section-subtitle */
  .yc-contact__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-contact__subtitle a {
    color: inherit;
    text-decoration: none;
  }

  .yc-contact__subtitle a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ---------- Layout ---------- */
  /* .form-layout — the two cards share a height (stretch), so whichever is
     taller sets the pair. The custom element IS the grid, so the form and
     the aside are its direct items exactly as in the reference. */
  .yc-contact__layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    align-items: stretch;
    gap: 32px;
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
  }

  /* ---------- Form card ---------- */
  /* .contact-form — white, 1px ink border, 32px radius; the resting shadow
     token is `none`. Shopify's hidden inputs (form_type, utf8) are
     display:none and so take no part in the flex gap. */
  .yc-contact__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 32px 24px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 32px;
  }

  /* .form-row — name and email side by side, stacking below 200px each. */
  .yc-contact__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }

  .yc-contact__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Only the message field (the form's last direct field) absorbs the
     height the taller aside forces on this card; the topic picker must not. */
  .yc-contact__form > .yc-contact__field {
    flex: 1 1 auto;
  }

  .yc-contact__form > .yc-contact__field--fixed {
    flex: 0 0 auto;
  }

  /* .form-label — 13px/700 uppercase, 1px tracking. */
  .yc-contact__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
  }

  /* .form-input / .form-select / .form-textarea. Every property the theme's
     base.css sets on inputs (font, radius, colours, borders) is restated so
     the control is the reference's, not Horizon's. Scoped under the form so
     the selector (0,2,0) outranks base.css's
     `input:not([type='checkbox'], [type='radio'])` (0,1,1), which otherwise
     wins the border colour — measured: the inputs rendered #dfdfdf borders
     before this was scoped. line-height is `normal`: the reference sets none
     on inputs, and a UA control keeps `normal`, where the theme's
     `font: inherit` would pull the body's 1.55 in. `display` is left to the
     UA (inline-block), as in the reference; as flex items they blockify. */
  .yc-contact__form .yc-contact__input,
  .yc-contact__form .yc-contact__select,
  .yc-contact__form .yc-contact__textarea {
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 16px;
    outline: none;
    box-shadow: none;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .yc-contact__input::placeholder,
  .yc-contact__textarea::placeholder {
    color: #2e2e2e;
    opacity: 0.4;
  }

  /* Horizon fades a placeholder to 0 once the field has a value; the
     reference has no such rule. Restated so both states match it. */
  .yc-contact__input:not(:placeholder-shown)::placeholder,
  .yc-contact__textarea:not(:placeholder-shown)::placeholder {
    opacity: 0.4;
  }

  /* Focus: purple border + 3px light-indigo ring. The reference's global
     `input:focus-visible` rule (style.css:173) also lays a 3px purple outline
     over that — reproduced — but it forces `border-radius: 4px` on the
     control while focused, a cascade artefact that is not reproduced. */
  .yc-contact__form .yc-contact__input:focus,
  .yc-contact__form .yc-contact__select:focus,
  .yc-contact__form .yc-contact__textarea:focus {
    border-color: #4036d6;
    box-shadow: 0 0 0 3px #ede9fd;
  }

  .yc-contact__input:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  /* .form-textarea — grows to fill the card; the reference's explicit 1.55. */
  .yc-contact__textarea {
    flex: 1 1 auto;
    min-height: 108px;
    resize: vertical;
    line-height: 1.55;
  }

  /* .form-select — native arrow removed; room kept for the drawn caret.
     ⚠ SCOPED UNDER THE FORM, and it has to be. The shorthand above is
     `.yc-contact__form .yc-contact__select { padding: 12px 16px }` (0,2,0),
     scoped that way to outrank Horizon's `input:not(...)` border rule. An
     unscoped `.yc-contact__select` here is only (0,1,0), so the shorthand's
     `padding-right: 16px` beat this longhand and a long option ran under the
     caret — the client's 2026-09-16 screenshot, "text cropped and
     overlapped". The reference never hits this: both of its rules are
     single-class, so source order settles it. Keep this selector at least as
     specific as the shorthand, or the bug returns silently. */
  .yc-contact__form .yc-contact__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    cursor: pointer;
  }

  .yc-contact__select-wrap {
    position: relative;
    display: block;
  }

  .yc-contact__caret {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #2e2e2e;
  }

  /* Until a topic is chosen the placeholder option shows, dimmed like the
     input placeholders. */
  .yc-contact__select:invalid {
    color: #2e2e2e;
    opacity: 0.55;
  }

  /* .form-actions — button and note share a line on desktop. */
  .yc-contact__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  /* .btn.btn--purple — 14px/700 pill, 16/32 padding, 1px #e2e1ee border.
     A <button> keeps the UA's `line-height: normal` in the reference (its
     `button` rule only inherits the family), unlike the <a> buttons
     elsewhere, which inherit 1.55. The reference declares a colour
     transition but no hover state; reproduced as-is. */
  .yc-contact__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 16px 32px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    text-transform: none;
    letter-spacing: normal;
    color: #ffffff;
    background-color: #4036d6;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  /* Reference `button:focus-visible` ring, minus its 4px-radius artefact. */
  .yc-contact__submit:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  /* .btn__icon — 18px glyph. */
  .yc-contact__submit-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  /* .form-note — 13px ink at 70%, 16px purple lock. */
  .yc-contact__note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #2e2e2e;
    opacity: 0.7;
  }

  .yc-contact__note-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #4036d6;
  }

  /* .form-status — the confirmation line: 14px/600 on green, 1px ink border,
     16px radius. Rendered only after a successful post; the script hides it
     again on the next keystroke, as the reference does.

     ⚠ TEXT IS WHITE BY CLIENT DECISION, AND IT IS BELOW WCAG AA.
     The reference uses ink here, which measures 5.07:1 on this green and
     passes. White measures 2.68:1 and fails the 4.5:1 bar this project
     treats as a hard gate. The client was shown both numbers on 2026-09-22,
     was told white is the less legible of the two, and chose it anyway.
     Recorded rather than silently applied, per ruleset.md's requirement to
     flag a design request that conflicts with WCAG before implementing.

     If this is ever revisited, the fix is NOT to swap the text back on its
     own — it is to darken the green. White passes from about #0a833c
     (4.86:1) and is comfortable at #097a38 (5.45:1), which keeps the white
     look the client asked for. */
  .yc-contact__status {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    color: #ffffff;
    background-color: #0fb654;
    border: 1px solid #2e2e2e;
    border-radius: 16px;
  }

  .yc-contact__status[hidden] {
    display: none;
  }

  .yc-contact__status-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  /* Error state — not in the reference (a mailto/fake form cannot fail).
     Same shape as the confirmation line, on peach.
     ⚠ The ink colour is restated here, not inherited. The confirmation above
     is white on green at the client's instruction; white on this peach would
     be 1.71:1 and effectively unreadable, so the error box keeps ink, which
     is 9.06:1. If the base colour is ever changed again, this override is
     what stops it reaching the error state — leave it in place. */
  .yc-contact__status--error {
    color: #2e2e2e;
    background-color: #ffc7ac;
  }

  .yc-contact__status--error:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-contact__error-list {
    margin: 4px 0 0;
    padding-left: 18px;
    font-weight: 400;
  }

  .yc-contact__error-list li {
    list-style: disc;
  }

  /* ---------- Aside ---------- */
  /* .form-aside — stretched to the form's height, so the blocks share the
     slack rather than leaving it all under the last line. */
  .yc-contact__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 20px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 32px;
  }

  /* h3 — 18px, heading weight/leading/tracking from the base h3. */
  .yc-contact__aside-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* .form-aside__or — the 42px peach seal on the card's top edge. */
  .yc-contact__or {
    position: absolute;
    top: -20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #2e2e2e;
    border-radius: 50%;
    transform: rotate(-8deg);
  }

  /* .channel-list — the cards are `_yc-contact-channel` blocks with
     `"tag": null`, so they are this column's direct children. */
  .yc-contact__channels {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* .form-aside__hr */
  .yc-contact__hr {
    height: 1px;
    background-color: #2e2e2e;
    opacity: 0.15;
  }

  /* .promise-row — one wrapping row of `_yc-contact-promise` items. */
  .yc-contact__promises {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* contact.html: `.form-sticker { right: 8px; bottom: -40px; width: 64px }`. */
  @media (max-width: 1180px) {
    .yc-contact__sticker--form {
      right: 8px;
      bottom: -40px;
      width: 64px;
    }
  }

  /* responsive.css: --fs-h2 46 -> 36, --gutter 50 -> 20, .container gap 32. */
  @media (max-width: 992px) {
    .yc-contact__container {
      gap: 32px;
      padding-inline: 20px;
    }

    .yc-contact__title {
      font-size: 36px;
    }
  }

  /* contact.html <=860px: one column, 24px gap, tighter card, the message
     field stops stretching, the button goes full width. */
  @media (max-width: 860px) {
    .yc-contact__layout {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .yc-contact__textarea {
      flex: 0 0 auto;
    }

    .yc-contact__form {
      padding: 20px;
    }

    .yc-contact__submit {
      width: 100%;
    }
  }

  /* responsive.css: --fs-h2 -> 27, --gutter -> 16, `.section-sticker
     { display: none }` (both stickers carry that class in the reference). */
  @media (max-width: 640px) {
    .yc-contact__container {
      padding-inline: 16px;
    }

    .yc-contact__title {
      font-size: 27px;
    }

    .yc-contact__sticker {
      display: none;
    }

    /* The deep bottom padding exists ONLY to hold the form sticker hanging off
       the card's corner — and the rule directly above hides that sticker at
       this width. The reference keeps its 132px here anyway, which left ~130px
       of empty white between the aside card and the FAQ band on a phone;
       client asked to tighten it on 2026-09-30. Falls back to the section's own
       top padding, so the band is symmetric wherever the sticker is absent and
       a merchant changing the top padding keeps it that way.
       ⚠ A DELIBERATE DEPARTURE FROM THE REFERENCE, phone widths only. Above
       640px the sticker is visible and the full padding is still needed. */
    .yc-contact {
      padding-block-end: var(--yc-contact-pt, 60px);
    }
  }

  /* responsive.css: --fs-h2 -> 24 on narrow phones. */
  @media (max-width: 380px) {
    .yc-contact__title {
      font-size: 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-contact__input,
    .yc-contact__select,
    .yc-contact__textarea,
    .yc-contact__submit {
      transition: none;
    }
  }
/* END_SECTION:yc-contact-form */

/* START_SECTION:yc-faq-cta (INDEX:57) */
/* Prototype .faq-page-section + its inline `text-align: center`. Relative so
     the bottom-left sticker anchors to the band. */
  .yc-faq-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  /* .container narrowed to 980px by `.faq-page-section .container`, plus the
     reference's inline `align-items: center`. No width on the children, so
     each sizes to its content and centres — matching the reference boxes. */
  .yc-faq-cta__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* .sticker + .section-sticker + .section-sticker--bl, flattened. */
  .yc-faq-cta__sticker {
    position: absolute;
    bottom: 48px;
    left: 4%;
    z-index: 1;
    width: 96px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    transform: rotate(-10deg);
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  /* .section-head, with the page override `.faq-page-section .section-head`
     (max-width 620px, centred). */
  .yc-faq-cta__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  /* .eyebrow — see sections/yc-faq-hero.liquid for the line-height note. */
  .yc-faq-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* 1em: the reference's Phosphor glyph renders exactly 1em square at the
     eyebrow's 12px, and yc-icon draws the same artwork on the same viewBox. */
  .yc-faq-cta__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 base — Poppins 700, --lh-heading 1.05, --ls-heading -.03em, at the
     root's --fs-h2, which is 46px (style.css:55) — not 48. */
  .yc-faq-cta__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* .section-subtitle */
  .yc-faq-cta__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* .cta-actions */
  .yc-faq-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  /* Each button is a theme block, so Shopify wraps it in a `<shopify-block>`
     element and it is the WRAPPER, not the button, that becomes the flex item
     here. At desktop that is invisible — a content-sized wrapper is exactly as
     wide as the button inside it. Below 640px it is not: the reference stacks
     the row into two full-width buttons, and a `width: 100%` on the button
     alone resolves against its content-sized wrapper rather than the row, so
     the buttons stayed side by side at their natural widths. Widening the
     wrapper is what makes the button's own 100% mean the row. */
  @media (max-width: 640px) {
    .yc-faq-cta__actions > * {
      width: 100%;
    }
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* responsive.css: --fs-h2 46 -> 36, --gutter 50 -> var(--space-20), and
     `.container { gap: var(--space-32) }` (responsive.css:104). */
  @media (max-width: 992px) {
    .yc-faq-cta__container {
      gap: 32px;
      padding-inline: 20px;
    }

    .yc-faq-cta__title {
      font-size: 36px;
    }
  }

  /* responsive.css: --fs-h2 -> 27, --gutter -> var(--space-16), and
     `.section-sticker { display: none }` at phone width. */
  @media (max-width: 640px) {
    .yc-faq-cta__container {
      padding-inline: 16px;
    }

    .yc-faq-cta__title {
      font-size: 27px;
    }

    .yc-faq-cta__sticker {
      display: none;
    }
  }

  /* responsive.css: --fs-h2 -> 24 on narrow phones. */
  @media (max-width: 380px) {
    .yc-faq-cta__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-faq-cta */

/* START_SECTION:yc-faq-hero (INDEX:58) */
/* Prototype .faq-hero — flex column on ice blue, and the positioning
     context for the two corner stickers. */
  .yc-faq-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  /* Prototype .container — 1620px max, 50px gutter, 48px stack gap. */
  .yc-faq-hero__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* ---------- Corner stickers ---------- */
  /* .sticker + .section-sticker + .section-sticker--tl/--tr, flattened. */
  .yc-faq-hero__sticker {
    position: absolute;
    top: 40px;
    z-index: 1;
    width: 96px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-faq-hero__sticker--left {
    left: 3%;
    transform: rotate(-14deg);
  }

  .yc-faq-hero__sticker--right {
    right: 3%;
    transform: rotate(12deg);
  }

  /* ---------- Head ---------- */
  /* .section-head, plus the page override `.faq-hero .section-head`
     (max-width 720px, centred). */
  /* No `width: 100%`: the reference's auto inline margins suppress the flex
     `stretch`, so the head is fit-content capped at 720px (measured 620px
     against the reference, the width of the standfirst inside it). Forcing
     100% would widen the box to 720px — invisible with everything centred,
     but it is not the reference box. */
  /* max-width is a setting (default 720px, the FAQ/Contact value). The
     Materials hero caps its head at 640px — not 560 — because its chip row
     needs ~575px to stay on one line. */
  .yc-faq-hero__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: var(--yc-hero-head-max, 720px);
    margin-inline: auto;
    text-align: center;
  }

  /* .eyebrow — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius.
     line-height is pinned to the prototype's --lh-body (1.55) rather than
     inherited, so the pill keeps its reference height whatever the theme's
     global body line-height is set to. */
  .yc-faq-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* 1em. Measured against the reference: the Phosphor `<i class="ph
     ph-question">` renders a 12.00 x 12.00 box at the eyebrow's 12px, and
     yc-icon draws the same artwork on the same 256-unit viewBox, so 1em is an
     exact match. (sections/yc-faq.liquid uses 1.15em for this; that is 1.8px
     wider than the reference glyph and should be revisited separately — it is
     live on the homepage and PDP, so it is out of scope here.) */
  .yc-faq-hero__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h1 base (Poppins 700, --lh-tight .95, --ls-heading -.03em) with the page
     override `.faq-hero h1 { font-size: 52px }`. */
  .yc-faq-hero__title {
    margin: 0;
    font-size: 52px;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* heading_size "page": no page override, so the h1 is style.css's base
     `--fs-h1` (68px). The two-class selector outranks the single-class
     <=860px rule below, so the FAQ page's 36px step cannot leak in here;
     the ladder's own steps follow in the responsive block. */
  .yc-faq-hero--h1-page .yc-faq-hero__title {
    font-size: 68px;
  }

  /* contact.html `.contact-badges` — a wrapping, centred row of trust pills.
     As a flex item of the centred head it is shrink-to-fit, exactly as the
     reference's block-level flex row is inside its auto-margin head. The 8px
     margin sits on top of the head's 16px gap, as in the reference. The
     pills themselves are `_yc-contact-badge` blocks with `"tag": null`, so
     they are this row's direct children with no wrapper element. */
  .yc-faq-hero__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }

  /* .section-subtitle — 18px/400, capped at 620px inside the 720px head. */
  .yc-faq-hero__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* The prototype's base `a { color: inherit; text-decoration: none }` — the
     care@ mailto sits in the copy with no colour or underline of its own.
     Pinned here so the theme's own link transition cannot introduce a hover
     underline the reference does not have. */
  .yc-faq-hero__subtitle a {
    color: inherit;
    text-decoration: none;
  }

  /* Not in the reference, which has no focus style of its own: a keyboard
     user must still be able to see the link (WCAG 2.2 AA, 2.4.7). Visible
     only on keyboard focus, so the resting design is untouched. */
  .yc-faq-hero__subtitle a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ============================================================
     Split-media layout — materials.html `.company-hero`
     ============================================================
     Off by default. Every rule below is gated behind
     `.yc-faq-hero--split`, so the FAQ and Contact heroes are untouched. */

  /* The cloud is deliberately pushed past the container's right edge; clipping
     here lets it bleed off-page instead of adding a horizontal scrollbar. */
  .yc-faq-hero--split {
    overflow: hidden;
  }

  /* `.container.company-hero__inner` — the container's flex column becomes a
     two-column grid.

     The 48px gap is NOT the container's inherited stack gap: in the reference
     the page <style> block loads after responsive.css, so `.company-hero__inner
     { gap: 48px }` beats `.container { gap: 32px }` at <=992. Reproduced here
     by specificity (two classes beat one), which holds at every width. */
  .yc-faq-hero--split .yc-faq-hero__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }

  /* `.company-hero .section-head { align-items: flex-start; text-align: left;
     margin: 0 }`. max-width stays on the shared token above. */
  .yc-faq-hero--split .yc-faq-hero__head {
    align-items: flex-start;
    margin-inline: 0;
    text-align: left;
  }

  /* ---------- Media column ---------- */
  .yc-faq-hero__media {
    position: relative;
  }

  /* `.company-hero__cloud` — centred on the product rather than anchored to
     the box edges, and right-aligned because the image is. `color` carries the
     fill and is set inline from the colour setting. */
  .yc-faq-hero__cloud {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -82px;
    transform: translateY(-50%);
    width: 710px;
    max-width: 126%;
    height: 490px;
    pointer-events: none;
  }

  /* Horizon's base.css sets `img { width: 100% }` and `svg { max-width: 100% }`
     — the latter would cap the cloud at its column and break the bleed, so the
     width/max-width above are restated on the element itself. */
  .yc-faq-hero__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    /* Source ratio, set inline from the image's own dimensions — see the
       comment on the media wrapper. `auto` keeps the served variant's ratio
       when no image is set, which is the old behaviour. */
    aspect-ratio: var(--yc-hero-media-ratio, auto);
    margin-left: auto;
  }

  /* ---------- Chip variant of the badge row ---------- */
  /* materials.html `.hero-chips`: one line on desktop, and a 20px offset from
     the standfirst — the head's own flex gap is 16px, so 4px makes it up. The
     pills themselves are styled in blocks/_yc-contact-badge.liquid. */
  .yc-faq-hero__badges--chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-top: 4px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* responsive.css --gutter: 50px -> var(--space-20), and `.container
     { gap: var(--space-32) }` (responsive.css:104). The gap has no visible
     effect while the head is this container's only child, but it is carried
     over so the container stays faithful to the reference component. */
  @media (max-width: 992px) {
    .yc-faq-hero__container {
      gap: 32px;
      padding-inline: 20px;
    }

    /* responsive.css: --fs-h1 68 -> 48 (heading_size "page" only). */
    .yc-faq-hero--h1-page .yc-faq-hero__title {
      font-size: 48px;
    }
  }

  /* faq.html page style block: `.faq-hero h1 { font-size: 36px }`.
     heading_size "page" is unaffected: `.yc-faq-hero--h1-page
     .yc-faq-hero__title` is two classes and outranks this. */
  @media (max-width: 860px) {
    .yc-faq-hero__title {
      font-size: 36px;
    }

    /* materials.html @860: the grid collapses and the head re-centres. */
    .yc-faq-hero--split .yc-faq-hero__container {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .yc-faq-hero--split .yc-faq-hero__head {
      align-items: center;
      margin-inline: auto;
      text-align: center;
    }

    /* The image centres once stacked, so the cloud centres with it. Width back
       to 100%: the desktop 126% overflowed the viewport once centred. */
    .yc-faq-hero__cloud {
      right: auto;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      max-width: 460px;
    }

    .yc-faq-hero__media img {
      max-width: 440px;
      margin-inline: auto;
    }

    /* One line is a desktop luxury — on a phone all three chips are wider than
       the viewport, so let them wrap rather than scroll the page sideways. */
    .yc-faq-hero__badges--chips {
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  /* responsive.css --gutter -> var(--space-16), and `.section-sticker
     { display: none }` — the accents crowd the copy at phone widths. */
  @media (max-width: 640px) {
    .yc-faq-hero__container {
      padding-inline: 16px;
    }

    .yc-faq-hero__sticker {
      display: none;
    }

    /* responsive.css: --fs-h1 -> 34 (heading_size "page" only). */
    .yc-faq-hero--h1-page .yc-faq-hero__title {
      font-size: 34px;
    }

    /* materials.html @640: two chips per row with the odd one centred
       underneath, instead of three stacked lines eating the hero. Each chip
       takes half the row minus the gap, so the wrap point is fixed rather than
       left to the text width. */
    .yc-faq-hero__badges--chips {
      gap: 8px;
    }
  }

  /* responsive.css: --fs-h1 -> 29 on narrow phones (heading_size "page" only). */
  @media (max-width: 380px) {
    .yc-faq-hero--h1-page .yc-faq-hero__title {
      font-size: 29px;
    }
  }
/* END_SECTION:yc-faq-hero */

/* START_SECTION:yc-faq-topics (INDEX:59) */
/* Prototype .faq-page-section — the positioning context for the margin
     badges. Deliberately no `overflow` of any kind: an overflow on an ancestor
     kills `position: sticky` on the tab bar. */
  .yc-faq-topics {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* Prototype .container narrowed to 980px by `.faq-page-section .container`.
     Narrowing the answer list widens the cream either side of it, which is what
     gives the margin badges room to sit without crowding the questions.
     Left unpositioned on purpose — see the section comment. */
  .yc-faq-topics__container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* Shopify wraps every theme block in its own in-flow element, so each
     decorative badge became a flex item in this column. The badges are
     absolutely positioned and have no height, but each wrapper still claimed a
     40px gap — six of them stacked ~240px of dead cream above the first
     category (20px each, 120px, below 640px).

     `display: contents` on the wrapper and on the slot inside it drops both
     from the flex flow, leaving only the absolutely-positioned image, which is
     out of flow and contributes no gap. The badge block always renders its
     slot — including when no image is assigned — so this matches whether or
     not the merchant has supplied the artwork. */
  .yc-faq-topics__container > *:has(> .yc-faq-badge-slot),
  .yc-faq-badge-slot {
    display: contents;
  }

  /* `.faq-tabs + .container { margin-top: 30px }` — space between the sticky
     bar and the first category, applied to the container rather than the bar so
     the bar's own sticky box stays tight. */
  .yc-faq-topics__container--after-tabs {
    margin-top: 30px;
  }

  /* The strip renders whenever the merchant has tabs on, but the JS hides it if
     it finds no categories to list. In that case the gap meant to sit under the
     bar has nothing above it, so it comes back off. */
  .yc-faq-topics--no-tabs .yc-faq-topics__container--after-tabs {
    margin-top: 0;
  }

  /* ---------- Sticky topic strip ---------- */
  .yc-faq-topics__tabs {
    position: sticky;
    /* The theme's header is `position: sticky; top: -1px`, so its bottom edge
       sits one pixel above its measured height. */
    top: calc(var(--header-height, 60px) - 1px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding-block: 16px;
    background-color: var(--yc-faq-bg, #f0eee3);
    /* A touch of the section colour bleeding upward behind the header, so no
       hairline of scrolling content can show in a sub-pixel gap between them. */
    box-shadow: 0 -6px 0 var(--yc-faq-bg, #f0eee3);
  }

  .yc-faq-topics__tabs-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* One-row slider instead of a wrapped two-row block, so the sticky bar stays
     a fixed height at any viewport width. */
  .yc-faq-topics__slider {
    position: relative;
    padding-inline: 40px;
  }

  .yc-faq-topics__tablist {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    /* Dots would have handled navigation in the shared engine; here the arrows
       do, so the native scrollbar is hidden exactly as the engine hides it. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .yc-faq-topics__tablist::-webkit-scrollbar {
    display: none;
  }

  .yc-faq-topics__tablist.is-dragging {
    cursor: grabbing;
    /* Immediate, so drag + momentum aren't eased; we snap on release. */
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  .yc-faq-topics__tablist.is-dragging * {
    user-select: none;
  }

  .yc-faq-topics__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    white-space: nowrap;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .yc-faq-topics__tab:hover {
    background-color: #ede9fd;
  }

  .yc-faq-topics__tab.is-active {
    color: #ffffff;
    background-color: var(--yc-faq-active, #4036d6);
  }

  /* Added, not in the reference: these are the page's primary in-page
     navigation and must show keyboard focus (WCAG 2.2 AA, 2.4.7). */
  .yc-faq-topics__tab:focus-visible,
  .yc-faq-topics__arrow:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  /* ---------- Slider arrows ---------- */
  /* .slider__arrow, resized by `.slider--faqtabs .slider__arrow` to 36px. The
     asymmetry is the reference's: the base engine gives --next a purple fill at
     rest and the FAQ page overrides only the offsets, not the colours. */
  .yc-faq-topics__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    /* The reference sizes its arrow glyph purely through font-size (it is a
       Phosphor font icon at 1em). The icon here is an SVG sized explicitly
       below, so this has no effect on the rendered glyph — it is set to the
       reference's value anyway so `1em` means the same thing in both, and a
       future em-based tweak cannot silently inherit the 13.33px button
       default. */
    font-size: 16px;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }

  .yc-faq-topics__arrow-icon {
    width: 16px;
    height: 16px;
  }

  .yc-faq-topics__arrow:hover {
    color: #ffffff;
    background-color: #4036d6;
    transform: translateY(-50%) scale(1.08);
  }

  .yc-faq-topics__arrow--prev {
    left: 0;
  }

  .yc-faq-topics__arrow--next {
    right: 0;
    color: #ffffff;
    background-color: #4036d6;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* responsive.css --gutter: 50px -> var(--space-20). */
  @media (max-width: 992px) {
    .yc-faq-topics__container,
    .yc-faq-topics__tabs-inner {
      padding-inline: 20px;
    }
  }

  /* Smaller pills and tighter arrow gutters once the phone-width tab bar can't
     spare much side padding. The arrows are 36px wide and sit at the wrapper's
     edges, so the gutter has to be at least that wide — anything less and the
     scroll track runs under the arrow, where a half-scrolled pill looks sliced
     off. */
  @media (max-width: 900px) {
    .yc-faq-topics__tab {
      padding: 8px 12px;
      font-size: 12px;
    }
  }

  /* Phones: still a slider — swipe plus both arrows, same as desktop. The
     wrapper drops the container gutter and spends it on the arrow columns
     instead, so the strip is as wide as the screen allows and the arrows sit
     beside the track rather than on top of it. */
  @media (max-width: 640px) {
    .yc-faq-topics__container {
      gap: 20px;
      padding-inline: 16px;
    }

    .yc-faq-topics__tabs-inner {
      padding-inline: 0;
    }

    .yc-faq-topics__slider {
      padding-inline: 36px;
    }

    .yc-faq-topics__arrow {
      width: 32px;
      height: 32px;
      font-size: 14px;
    }

    .yc-faq-topics__arrow-icon {
      width: 14px;
      height: 14px;
    }

    .yc-faq-topics__arrow--prev {
      left: 2px;
    }

    .yc-faq-topics__arrow--next {
      right: 2px;
    }

    /* Proximity, not mandatory: a mandatory snap on a free-swiped strip yanks a
       part-scrolled pill back and re-clips it at the edge. */
    .yc-faq-topics__tablist {
      scroll-snap-type: x proximity;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-faq-topics__tablist {
      scroll-behavior: auto;
    }

    .yc-faq-topics__tab,
    .yc-faq-topics__arrow {
      transition: none;
    }
  }
/* END_SECTION:yc-faq-topics */

/* START_SECTION:yc-faq (INDEX:60) */
/* Padding is emitted as plain custom properties, NOT through
     `snippets/spacing-style.liquid` + the `.spacing-style` class.

     ROOT CAUSE for the change: that helper wraps each value in
     `max(20px, calc(var(--spacing-scale) * Npx))`, and `--spacing-scale` is
     **0.7** below 990px (`theme-styles-variables.liquid:449`). This band was
     therefore rendering 98px top and 56px bottom on tablets and phones, where
     the prototype's ladder is 124/64 then 48/48. Same defect as the usage
     calculator's, fixed in Batch 74.

     The two settings are the DESKTOP pair. The tablet and phone steps below are
     the design system's, not a merchant choice: in the prototype they come from
     `--section-padding-y` (80 / 64 / 48 by breakpoint, responsive.css:30,122)
     with a flat +60 on top to clear the 130px checker band — and that +60 goes
     away at 640, where the checkers do. Raising the desktop setting therefore
     does not scale the smaller screens, which is exactly the prototype's own
     behaviour. */
  .yc-faq {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-faq-pt, 140px) var(--yc-faq-pb, 80px);
    /* --lh-body. The reference inherits 1.55 from `body`, a layer this theme
       never ported — Horizon's base is 1.6, which ran every line box here
       ~0.6px tall and compounded to 6.4px across an eight-question list and
       ~7px on the section. Declared once so every descendant inherits the
       reference's leading. Same fix, same reason, as sections/yc-size-quiz.liquid
       and sections/yc-sample-pack.liquid. Found measuring the Size Guide page;
       it was equally wrong on the home page and the PDP. */
    line-height: 1.55;
  }

  /* Prototype .container--narrow — 880px max, 50px gutter, 48px stack gap */
  .yc-faq__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* ---------- Top-corner pixel-checkers (dissolve downward) ---------- */
  .yc-faq__checker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 130px;
    pointer-events: none;
  }

  .yc-faq__checker--right {
    left: auto;
    right: 0;
  }

  .yc-faq__checker-svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .yc-faq__checker-svg g {
    fill: currentColor;
  }

  .yc-faq__checker-svg path {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.5, 0, 0.2, 1);
  }

  .yc-faq__checker-svg path:nth-child(2) { transition-delay: 0.06s; }
  .yc-faq__checker-svg path:nth-child(3) { transition-delay: 0.12s; }
  .yc-faq__checker-svg path:nth-child(8) { transition-delay: 0.09s; }

  .yc-faq:hover .yc-faq__checker-svg path:nth-child(1) { transform: translateY(100%); }
  .yc-faq:hover .yc-faq__checker-svg path:nth-child(2) { transform: translateY(200%); }
  .yc-faq:hover .yc-faq__checker-svg path:nth-child(3) { transform: translateY(100%); }
  .yc-faq:hover .yc-faq__checker-svg path:nth-child(8) { transform: translateY(100%); }
  .yc-faq:hover .yc-faq__checker-svg path:nth-child(9) { transform: translateX(-100%); }

  /* ---------- Decorative stickers ---------- */
  /* "FSA/HSA eligible" badge — right of the question list (v3 .faq-section__badge) */
  .yc-faq__badge {
    position: absolute;
    top: 240px;
    right: 5%;
    z-index: 1;
    width: 112px;
    height: auto;
    opacity: 1;
    pointer-events: none;
    transform: rotate(9deg);
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  /* Product page places its badge on the left instead (product.html:
     .section-sticker--tl .faq-section__sticker — left 3%, rotate(-14deg),
     96px, opacity .95; top 230px rather than the modifier's 40px so it clears
     the 130px checker band and sits level with the heading). */
  .yc-faq__badge--left {
    top: 230px;
    right: auto;
    left: 3%;
    width: 96px;
    opacity: 0.95;
    transform: rotate(-14deg);
  }

  /* Bottom-left accent (prototype .section-sticker--bl) */
  .yc-faq__sticker {
    position: absolute;
    bottom: 48px;
    left: 4%;
    z-index: 1;
    width: var(--yc-faq-sticker-w, 96px);
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    transform: rotate(-10deg);
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  /* Top-left instead (prototype .section-sticker--tl, style.css:1099) — the
     Size Guide page's corner artwork. `bottom: auto` is what releases the
     bottom-left anchor above. Its 132px comes from `.badge-wide`, which the
     reference adds because that artwork is landscape rather than the round
     sticker the base rule assumes; it arrives through --yc-faq-sticker-w. */
  .yc-faq--sticker-tl .yc-faq__sticker {
    top: 40px;
    bottom: auto;
    left: 3%;
    transform: rotate(-14deg);
  }

  /* The Size Guide page hides its sticker below 1100px, not 640px: its
     container is the narrow 880px one, so below that width the artwork starts
     crowding the questions rather than sitting in a free margin. A class
     rather than a variable because a media query cannot read a custom
     property. The <=640px rule further down still applies and is harmless. */
  @media (max-width: 1100px) {
    .yc-faq--sticker-hide-1100 .yc-faq__sticker {
      display: none;
    }
  }

  /* ---------- Section head ---------- */
  .yc-faq__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .yc-faq__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* 1em, not 1.15em. The reference's glyph is a Phosphor <i> that occupies
     exactly one em of the eyebrow's own 12px type, so 1.15em made this pill
     1.8px wider than the reference's. Corrected in the FAQ-page sections
     (Batch 67) and flagged for here at the time; measured and fixed in Batch 76. */
  .yc-faq__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  .yc-faq__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* ---------- Accordion ---------- */
  .yc-faq__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  .yc-faq__item {
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 16px;
    overflow: hidden;
  }

  /* ---------- Colourful line treatment (style.css:5538) ----------
     A rotating coloured rule down the left edge of every question, lifted from
     the Gifting page's FAQ, which the client signed off as the reference. The
     cycle is six long so it repeats cleanly however many questions a merchant
     adds; the hand-drawn doodles that shipped alongside it were pulled at the
     client's request, so the rule is the whole treatment.

     Scoped to `.yc-faq__list >` exactly as the reference scopes it to `.faq >`:
     the PDP buy-column accordion reuses the same item pattern and is a spec
     list, not an FAQ, so it must not pick up the colours. */
  .yc-faq__list > .yc-faq__item {
    border-left: 4px solid #4036d6;
  }

  .yc-faq__list > .yc-faq__item:nth-child(6n + 2) {
    border-left-color: #0fb654;
  }

  .yc-faq__list > .yc-faq__item:nth-child(6n + 3) {
    border-left-color: #ffc7ac;
  }

  .yc-faq__list > .yc-faq__item:nth-child(6n + 4) {
    border-left-color: #8b89c8;
  }

  .yc-faq__list > .yc-faq__item:nth-child(6n + 5) {
    border-left-color: #ff92eb;
  }

  .yc-faq__list > .yc-faq__item:nth-child(6n + 6) {
    border-left-color: #78c6ff;
  }

  .yc-faq__q {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    font-size: 16px;
    font-weight: 700;
    color: #2e2e2e;
    cursor: pointer;
    list-style: none;
  }

  .yc-faq__q::-webkit-details-marker {
    display: none;
  }

  .yc-faq__q::marker {
    content: '';
  }

  .yc-faq__q:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: -3px;
  }

  .yc-faq__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: #4036d6;
    transition: transform 0.18s ease;
  }

  .yc-faq__item[open] .yc-faq__icon {
    transform: rotate(45deg);
  }

  .yc-faq__a {
    display: flex;
    flex-direction: column;
    padding: 0 20px 20px;
  }

  .yc-faq__a > * {
    margin: 0;
  }

  .yc-faq__a p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: #6b6b6b;
  }

  .yc-faq__a p + p {
    margin-top: 12px;
  }

  /* ---------- Help row (v3 .help-row) ---------- */
  .yc-faq__help {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 32px;
  }

  .yc-faq__help-item {
    flex: 1 1 240px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 16px;
    color: #2e2e2e;
    text-decoration: none;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
  }

  @media (hover: hover) {
    .yc-faq__help-item:hover {
      transform: translate(-2px, -2px);
      box-shadow: 4px 4px 0 #2e2e2e;
    }
  }

  .yc-faq__help-item:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-faq__help-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: #4036d6;
  }

  .yc-faq__help-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .yc-faq__help-text strong {
    font-size: 15px;
    font-weight: 600;
  }

  .yc-faq__help-text small {
    font-size: 13px;
    color: #6b6b6b;
  }

  .yc-faq__help-go {
    flex: 0 0 auto;
    margin-left: auto;
    width: 16px;
    height: 16px;
    color: #4036d6;
  }

  /* ---------- CTA ---------- */
  .yc-faq__cta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }

  .yc-faq__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background-color: #4036d6;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .yc-faq__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-faq__btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  /* ---------- Tablet (<= 992px) ----------
     responsive.css 30-32 — --section-padding-y 80 -> 64, --gutter 50 -> 20, and
     `.container { gap: var(--space-32) }` (104), plus --fs-h2 46 -> 36.

     NOTE `max-width` is NOT touched. responsive.css sets --container-width to
     100% here, but this is `.container--narrow`, which uses
     --container-width-narrow — and that token is 880px at every width, never
     overridden. Dropping the cap made the question column ~97px too wide on
     every tablet. */
  @media (max-width: 992px) {
    .yc-faq {
      padding-block: var(--yc-faq-pt-tablet, 124px) var(--yc-faq-pb-tablet, 64px);
    }

    .yc-faq__container {
      gap: 32px;
      padding-inline: 20px;
    }

    .yc-faq__title {
      font-size: 36px;
    }
  }

  /* ---------- Phones (<= 640px) ----------
     responsive.css 124 — --gutter -> 16, --fs-h2 -> 27, --section-padding-y ->
     48; responsive.css 507 and 831 hide `.faq-checker` and `.section-sticker`;
     and responsive.css 569 drops the checker clearance from the top padding,
     since there is no checker left to clear. All four are one breakpoint — the
     hides were previously at 600, which left a 601-640 band showing decoration
     the prototype had already removed. */
  @media (max-width: 640px) {
    .yc-faq {
      padding-block: var(--yc-faq-pt-mobile, 48px) var(--yc-faq-pb-mobile, 48px);
    }

    .yc-faq__container {
      padding-inline: 16px;
    }

    .yc-faq__title {
      font-size: 27px;
    }

    .yc-faq__checker,
    .yc-faq__badge,
    .yc-faq__sticker {
      display: none;
    }
  }

  @media (max-width: 600px) {
    .yc-faq__help-item {
      flex: 1 1 100%;
    }
  }

  /* responsive.css 891 — --fs-h2 -> 24px on small phones. */
  @media (max-width: 380px) {
    .yc-faq__title {
      font-size: 24px;
    }
  }

  /* v3.css 1532-1543. ⚠ Scoped to the RIGHT-hand badge on purpose: those rules
     are `.page-v3 .faq-section__badge`, i.e. the home page's "FSA/HSA eligible"
     sticker. The product and subscription pages put a badge on the LEFT
     (`.faq-section__sticker`) and nothing steps it down — it stays 96px at
     top 230px all the way to the 640px hide. Applying this to both variants
     shrank that badge to 82px and moved it 30px up on every page. */
  @media (max-width: 1200px) {
    .yc-faq__badge:not(.yc-faq__badge--left) {
      top: 200px;
      right: 1%;
      width: 82px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-faq__checker-svg path {
      transition: none;
    }

    .yc-faq:hover .yc-faq__checker-svg path {
      transform: none;
    }

    .yc-faq__icon,
    .yc-faq__help-item,
    .yc-faq__btn {
      transition: none;
    }
  }
/* END_SECTION:yc-faq */

/* START_SECTION:yc-features (INDEX:61) */
.yc-features {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* Prototype .container — 1620px max, 50px gutter, 48px stack gap, centered */
  .yc-features__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* Prototype .section-head */
  .yc-features__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  /* Prototype .eyebrow */
  .yc-features__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-features__eyebrow-icon {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
  }

  /* Prototype h2 */
  .yc-features__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* Prototype .feature-grid */
  .yc-features__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px;
  }

  /* The grid is tabindex="0", so it must show focus (WCAG 2.4.7). */
  .yc-features__grid:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 4px;
  }

  /* Prototype .feature */
  .yc-features__card {
    display: flex;
    flex: 1 1 280px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
    text-align: center;
    background-color: #78c6ff;
    border-radius: 24px;
    box-shadow: none;
    /* V3 removed the hover lift/shadow on feature cards (was reading as "tap me"). */
  }

  /* Prototype .feature__img */
  .yc-features__img {
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: 16px;
  }

  /* Prototype h4 (rendered as h3 for hierarchy) */
  .yc-features__card-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* Prototype .feature__text */
  .yc-features__text {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* Prototype .section-sticker + .section-sticker--tl */
  .yc-features__sticker {
    position: absolute;
    z-index: 1;
    top: 40px;
    left: 3%;
    width: 96px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    transform: rotate(-14deg);
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  /* ---------- Tablet (<= 992px): scaled tokens + gutter ---------- */
  @media (max-width: 992px) {
    .yc-features__container {
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-features__title {
      font-size: 36px;
    }

    .yc-features__card-title {
      font-size: 22px;
    }
  }

  /* ---------- Mobile (<= 640px): horizontal swipeable slider ---------- */
  @media (max-width: 640px) {
    .yc-features__container {
      padding-inline: 16px;
    }

    .yc-features__title {
      font-size: 27px;
    }

    .yc-features__card-title {
      font-size: 18px;
    }

    .yc-features__grid {
      flex-wrap: nowrap;
      width: 100%;
      min-width: 0;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .yc-features__grid::-webkit-scrollbar {
      display: none;
    }

    .yc-features__card {
      flex: 0 0 84%;
      scroll-snap-align: start;
    }

    /* Prototype hides section stickers on phones — they crowd the copy */
    .yc-features__sticker {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-features__card {
      transition: none;
    }
  }
/* END_SECTION:yc-features */

/* START_SECTION:yc-final-note (INDEX:62) */
/* Prototype `.final-note-section` — a flex column with a flat 60/60. */
  .yc-final-note {
    display: flex;
    flex-direction: column;
    line-height: 1.55;
  }

  /* `.container.container--narrow` — 880px max, 50px gutter. The 48px stack gap
     is stated for fidelity but has no effect: one child. */
  .yc-final-note__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.final-note` — the tinted panel. */
  .yc-final-note__panel {
    width: 100%;
    padding: 32px;
    text-align: center;
    background-color: var(--yc-final-note-panel-bg, #ede9fd);
    border-radius: var(--yc-final-note-radius, 20px);
  }

  /* h2 base (--lh-heading 1.05, --ls-heading -0.03em) with the page's --fs-h4
     size. LADDERED: 24 -> 22 at <=992 -> 18 at <=640. */
  .yc-final-note__title {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* `--fs-16` is a FIXED token — these do not step with the heading.

     ⚠ TWO CLASSES, DELIBERATELY. Horizon's base.css:155 sets
     `:last-child:is(p, h1, …) { margin-block-end: 0 }`, which computes to
     specificity (0,1,1) and so beats a single class — it silently stripped the
     8px the reference leaves on the LAST paragraph, making the panel 8px short
     at every width. The reference's own reset has no such rule, so its trailing
     margin is real and is part of the panel's height. Scoping this rule to the
     panel raises it to (0,2,0) and wins. */
  .yc-final-note__panel .yc-final-note__line {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* The reference gives the link a colour and a weight but no underline — the
     global `a { text-decoration: none }` stands. */
  .yc-final-note__line a {
    color: var(--yc-final-note-link, #4036d6);
    font-weight: 700;
    text-decoration: none;
  }

  /* The reference's own global ring (style.css:169-177) — 3px indigo, 2px
     offset, --radius-xs. Ported rather than invented; the mailto is the only
     focusable thing in this section, so it has to be visible. */
  .yc-final-note__line a:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* ---------- Responsive ---------- */
  /* responsive.css: --gutter 50 -> 20 (the narrow 880px cap is its own token
     and does NOT change), --fs-h4 24 -> 22. */
  @media (max-width: 992px) {
    .yc-final-note__container {
      padding-inline: 20px;
    }

    .yc-final-note__title {
      font-size: 22px;
    }
  }

  /* --gutter 16, --fs-h4 18. */
  @media (max-width: 640px) {
    .yc-final-note__container {
      padding-inline: 16px;
    }

    .yc-final-note__title {
      font-size: 18px;
    }
  }
/* END_SECTION:yc-final-note */

/* START_SECTION:yc-fit-check (INDEX:63) */
/* Prototype `.fit-section` — a flex column. The page gives it no top padding
     (the Sizing Pack callout above ends on its own) and a flat 60px bottom.
     line-height restates the reference's inherited --lh-body. */
  .yc-fit-check {
    display: flex;
    flex-direction: column;
    line-height: 1.55;
  }

  /* `.container` — the full 1620px one, 50px gutter, 48px stack gap. */
  .yc-fit-check__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.section-head` — centred column, 16px gap. */
  .yc-fit-check__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  /* `.eyebrow` — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius. */
  .yc-fit-check__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-fit-check__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 base on the --fs-h2 ladder (46 -> 36 -> 27 -> 24). */
  .yc-fit-check__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* `.section-subtitle` — 18px/400, capped at 620px. Not on the ladder. */
  .yc-fit-check__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* ---------- The three-up grid ---------- */
  /* `1fr 1.75fr 1fr` — the correct state carries the product shot, so it needs
     the extra width. `align-items: start` so a column that outgrows the locked
     height does not stretch its siblings. */
  .yc-fit-check__tri {
    display: grid;
    grid-template-columns: var(--yc-fit-grid, 1fr 1.75fr 1fr);
    gap: 24px;
    align-items: start;
    width: 100%;
  }

  /* ---------- A column (blocks/_yc-fit-column.liquid) ---------- */
  /* All three locked to ONE height — see the note in the section comment for
     where 278.89px comes from. Released to `auto` below 900px. */
  .yc-fit-check__col {
    height: var(--yc-fit-col-height, 278.89px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 24px;
  }

  /* The correct state: tinted, a ROW, and carrying the shot.
     `box-shadow: var(--shadow-hard)` in the reference resolves to `none`
     (style.css:122), so none is emitted — the same trap as the hero coin. */
  .yc-fit-check__col--right {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    background-color: var(--yc-fit-right-bg, #e4f5ff);
  }

  /* The tag pill. Its fill comes from the column's own `--yc-fit-tag`, set
     inline from the block's colour setting — the reference does the same thing
     with a `--tag` custom property per state class. */
  .yc-fit-check__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--yc-fit-tag-color, #2e2e2e);
    background-color: var(--yc-fit-tag, #ffffff);
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-fit-check__tag-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* Media and body only exist on a column that has a photo. */
  .yc-fit-check__media {
    flex: 0 0 var(--yc-fit-media-basis, 38%);
    align-self: stretch;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 16px;
    overflow: hidden;
  }

  .yc-fit-check__media-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
  }

  .yc-fit-check__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* ---------- The symptom list ---------- */
  /* A grid, not a flex column, in the reference — the 8px gap is the same
     either way, but grid is what it says. `list-style: none` matches the
     prototype's global `ul, ol` reset. */
  .yc-fit-check__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
    width: 100%;
  }

  .yc-fit-check__list li {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    color: #2e2e2e;
    background-color: var(--yc-fit-chip-bg, #f0eee3);
    border-radius: 16px;
  }

  /* On the tinted card the chips go white so they still read as chips. */
  .yc-fit-check__col--right .yc-fit-check__list li {
    background-color: var(--yc-fit-chip-bg-right, #ffffff);
  }

  /* ---------- Responsive ---------- */
  /* responsive.css: --gutter 50 -> 20, --container-width -> 100%, .container
     gap 48 -> 32, --fs-h2 46 -> 36. */
  @media (max-width: 992px) {
    .yc-fit-check__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-fit-check__title {
      font-size: 36px;
    }
  }

  /* sizing.html:671-679 — one column, the locked height released, and the
     middle card back to a column with its photo on top at a fixed 4:3 so it
     does not stretch to a stacked sibling. */
  @media (max-width: 900px) {
    .yc-fit-check__tri {
      grid-template-columns: 1fr;
    }

    .yc-fit-check__col {
      height: auto;
    }

    .yc-fit-check__col--right {
      flex-direction: column;
    }

    .yc-fit-check__media {
      flex: 0 0 auto;
      width: 100%;
      aspect-ratio: 4 / 3;
    }

    .yc-fit-check__body {
      width: 100%;
    }
  }

  /* --fs-h2 27. */
  @media (max-width: 640px) {
    .yc-fit-check__container {
      padding-inline: 16px;
    }

    .yc-fit-check__title {
      font-size: 27px;
    }
  }

  /* --fs-h2 24. */
  @media (max-width: 380px) {
    .yc-fit-check__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-fit-check */

/* START_SECTION:yc-fit-notice (INDEX:64) */
/* `.fit-notice-section` — a flex column in the reference so that `.container`
     (which centres itself with `align-self: center`) resolves. Kept for the
     same reason. */
  .yc-fit-notice {
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-fn-pt, 40px) var(--yc-fn-pb, 0px);
    line-height: 1.55;
  }

  /* `.container` — 1620px, 50px gutter, stepping to 20px at <=992 and 16px at
     <=640 (responsive.css). */
  .yc-fit-notice__container {
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.fit-notice`. The reference's `margin: 40px auto 0` is split: the top
     40px is the section's own padding (so a merchant can change it), the auto
     margins stay here to centre the 760px card. */
  .yc-fit-notice__card {
    max-width: var(--yc-fn-max, 760px);
    margin-inline: auto;
    padding: 24px 32px;
    text-align: center;
    background-color: var(--yc-fn-card-bg, #fdeaff);
    border: 2px solid var(--yc-fn-border, #ff92eb);
    border-radius: 18px;
  }

  /* Matches the reference's h2 rendering exactly; only the tag may differ. */
  .yc-fit-notice__heading {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
    color: #2e2e2e;
  }

  .yc-fit-notice__text {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-fit-notice__text a {
    color: #4036d6;
    font-weight: 700;
  }

  /* responsive.css — gutter 50 -> 20. */
  @media screen and (max-width: 992px) {
    .yc-fit-notice__container {
      padding-inline: 20px;
    }
  }

  /* sizing-pack.html page styles, line 673. */
  @media screen and (max-width: 900px) {
    .yc-fit-notice {
      padding-block-start: var(--yc-fn-pt-mobile, 24px);
    }
  }

  @media screen and (max-width: 640px) {
    .yc-fit-notice__container {
      padding-inline: 16px;
    }

    .yc-fit-notice__card {
      padding: 20px;
    }
  }
/* END_SECTION:yc-fit-notice */

/* START_SECTION:yc-footer (INDEX:65) */
.yc-footer {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    /* Pull up 1px so the section above and the footer meet with no hairline. */
    margin-top: -1px;
    isolation: isolate;
  }

  /* Flat seam band in the wave colour, painted from the footer itself (not the
     animated/flipped wave layer) so the sub-pixel hairline above the wave can
     never show — matches the prototype .footer::before. Home only, since the
     wave itself only renders on the home page. */
  .yc-footer--home::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 0;
    height: 20px;
    background-color: var(--yc-wave-fill, #f0eee3);
    pointer-events: none;
  }

  /* Wave on the top edge — fill matches the section directly above (page-aware
     via --yc-wave-fill: cream on home, white on inner pages). Drifts like the
     other dividers. */
  .yc-footer__wave {
    position: absolute;
    left: 0;
    top: -1px;
    width: 200%;
    line-height: 0;
    pointer-events: none;
    transform: scaleY(-1);
    z-index: 0;
    color: var(--yc-wave-fill, #f0eee3);
  }

  .yc-footer__wave-svg {
    display: block;
    /* Inner pages: static full-width wave (no drift animation). */
    width: 100%;
    height: 90px;
  }

  /* Home page only: 200%-wide svg that drifts left and loops seamlessly. */
  .yc-footer--home .yc-footer__wave-svg {
    width: 200%;
    animation: yc-footer-wave 14s linear infinite;
  }

  .yc-footer__wave-svg path {
    fill: currentColor;
  }

  @keyframes yc-footer-wave {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-footer__wave-svg { animation: none; width: 100%; }
    .yc-footer__cta-checker-svg path { transition: none; }
    .yc-footer__cta:hover .yc-footer__cta-checker-svg path { transform: none; }
  }

  .yc-footer__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    padding-inline: 50px;
  }

  /* ---- Newsletter CTA card ---- */
  .yc-footer__cta {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px;
    padding: 40px;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 32px;
  }

  /* The decorative checker sits along the card's bottom edge; clip only it so it
     can't spill past the rounded corners now that the card no longer clips
     everything (the hand shape must be free to poke above the card). */
  .yc-footer__cta-checker { overflow: hidden; border-radius: 0 0 32px 32px; }

  /* Decorative pixel-checker motif behind the newsletter copy (prototype
     .footer-cta__checker), periwinkle squares that shuffle on hover. */
  .yc-footer__cta-checker {
    position: absolute;
    bottom: -1px;
    left: 60%;
    transform: translateX(-50%);
    z-index: 0;
    width: min(680px, 92%);
    height: 110px;
    pointer-events: none;
  }

  .yc-footer__cta-checker-svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .yc-footer__cta-checker-svg path {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.65s ease;
  }

  .yc-footer__cta-checker-svg path:nth-child(3) { transition-delay: 0.05s; }
  .yc-footer__cta-checker-svg path:nth-child(5) { transition-delay: 0.1s; }
  .yc-footer__cta-checker-svg path:nth-child(8) { transition-delay: 0.15s; }
  .yc-footer__cta-checker-svg path:nth-child(10) { transition-delay: 0.2s; }

  /* Hover ripple applied unconditionally to match the prototype (style.css
     `.footer-cta:hover .checker-svg path`, no hover-media guard). The previous
     `@media (hover: hover)` wrapper suppressed it in touch/emulation contexts
     and made this section behave differently from the other checker sections
     (concern-band, FAQ, testimonials), which never had the guard. */
  .yc-footer__cta:hover .yc-footer__cta-checker-svg path:nth-child(1) { transform: translateX(100%); }
  .yc-footer__cta:hover .yc-footer__cta-checker-svg path:nth-child(3) { transform: translateY(100%); }
  .yc-footer__cta:hover .yc-footer__cta-checker-svg path:nth-child(5) { transform: translateX(-100%); }
  .yc-footer__cta:hover .yc-footer__cta-checker-svg path:nth-child(8) { transform: translateY(100%); }
  .yc-footer__cta:hover .yc-footer__cta-checker-svg path:nth-child(10) { transform: translateY(100%); }

  .yc-footer__cta-shape {
    position: absolute;
    top: -50px;
    right: 40px;
    z-index: 0;
    width: 90px;
    height: auto;
    pointer-events: none;
  }

  .yc-footer__cta-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1 1 300px; }
  .yc-footer__cta-heading { margin: 0; color: #2e2e2e; }
  .yc-footer__cta-copy { margin: 0; font-size: 15px; font-weight: 400; color: #6b6b6b; }

  .yc-footer__cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #FFC7AC;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-footer__cta-badge-ic { width: 1em; height: 1em; }

  /* Newsletter form */
  .yc-footer__form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    flex: 1 1 320px;
    margin: 0;
  }

  .yc-footer__input {
    flex: 1 1 200px;
    padding: 16px 20px;
    font-size: 14px;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    outline: none;
  }

  /* iOS zooms into any input under 16px on focus; touch devices only, so the
     desktop design keeps its 14px. */
  @media (pointer: coarse) {
    .yc-footer__input { font-size: 16px; }
  }

  .yc-footer__input:focus-visible { border-color: #4036d6; box-shadow: 0 0 0 2px rgba(64,54,214,0.25); }

  .yc-footer__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background-color: #4036d6;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.18s ease;
  }

  .yc-footer__submit:hover { background-color: #2f2799; }
  .yc-footer__submit-ic { width: 1.14em; height: 1.14em; }
  .yc-footer__form-note { margin: 0; font-weight: 600; color: #2e2e2e; }

  /* ---- Main grid ---- */
  .yc-footer__top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
  }

  .yc-footer__logo-col { display: flex; align-items: flex-start; flex: 1 1 200px; }
  .yc-footer__logo { width: 100%; max-width: 220px; height: auto; }
  .yc-footer__logo-text { font-size: 24px; font-weight: 700; color: #ffffff; }

  .yc-footer__info { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: 1 1 240px; }
  .yc-footer__tagline { margin: 0; font-size: 14px; max-width: 34ch; }

  .yc-footer__contact { display: flex; flex-direction: column; gap: 8px; }
  .yc-footer__chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: #ffffff; text-decoration: none; transition: opacity 0.2s ease; }
  .yc-footer__chip:hover { opacity: 0.85; }
  .yc-footer__chip-ic { width: 18px; height: 18px; color: #ffffff; }

  .yc-footer__socials { display: flex; flex-direction: row; gap: 12px; }
  .yc-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.4);
    color: #ffffff;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  .yc-footer__social svg { width: 20px; height: 20px; }
  .yc-footer__social:hover { background-color: #FFC7AC; color: #2e2e2e; transform: translateY(-2px); }

  .yc-footer__col { display: flex; flex-direction: column; gap: 16px; flex: 1 1 150px; }
  .yc-footer__col-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #ffffff; }
  .yc-footer__links { display: flex; flex-direction: column; gap: 12px; }
  /* Solid white to match the prototype (style.css `.footer__links a` inherits
     `.footer { color: #fff }`). Was rgba(...,0.85), which read as a different,
     dimmer colour than the reference and dropped contrast further. */
  .yc-footer__links a { font-size: 14px; color: #ffffff; text-decoration: none; transition: color 0.2s ease; }
  .yc-footer__links a:hover { color: #ffffff; }

  /* ---- Trust badges ---- */
  .yc-footer__badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    padding-block: 32px;
    border-top: 1px solid rgba(255,255,255,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.18);
  }
  .yc-footer__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.92); }
  .yc-footer__badge-ic { width: 18px; height: 18px; color: #ffffff; }

  /* ---- Bottom bar ---- */
  .yc-footer__bottom { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
  .yc-footer__copy { margin: 0; font-size: 13px; color: rgba(255,255,255,0.75); }
  .yc-footer__legal { display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .yc-footer__legal a { font-size: 13px; color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s ease; }
  .yc-footer__legal a:hover { color: #ffffff; }

  @media screen and (max-width: 992px) {
    .yc-footer__inner { padding-inline: 20px; }
    /* Checker sits behind the copy/form once the card narrows on tablet — hide
       it through the whole tablet/mobile range (matches the mobile treatment). */
    .yc-footer__cta-checker { display: none; }
  }

  /* ---- Mobile: stack the newsletter CTA + form, full-width controls ---- */
  @media screen and (max-width: 640px) {
    .yc-footer__inner {
      padding-inline: 16px;
      gap: 32px;
    }

    .yc-footer__cta {
      flex-direction: column;
      align-items: stretch;
      flex-wrap: nowrap;
      gap: 20px;
      padding: 24px;
    }

    /* Checker crowds the stacked copy on phones (matches prototype ≤640 hide) */
    .yc-footer__cta-checker {
      display: none;
    }

    .yc-footer__cta-text {
      flex: 1 1 auto;
    }

    .yc-footer__form {
      flex-direction: column;
      flex-wrap: nowrap;
      max-width: none;
      flex: 1 1 auto;
    }

    .yc-footer__input {
      flex: 1 1 auto;
      width: 100%;
    }

    .yc-footer__submit {
      width: 100%;
    }

    /* Link columns two-up on phones */
    .yc-footer__col {
      flex: 1 1 40%;
    }

    .yc-footer__badges {
      gap: 16px;
    }

    .yc-footer__bottom {
      flex-direction: column;
      align-items: flex-start;
    }
  }
/* END_SECTION:yc-footer */

/* START_SECTION:yc-form-split (INDEX:66) */
.yc-form-split {
    display: flex;
    flex-direction: column;
  }

  /* Page-width container (prototype .container: 1620px max, 50px gutter). */
  .yc-form-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  .yc-form-split__inner--align-start { align-items: start; }
  .yc-form-split__inner--align-center { align-items: center; }
  .yc-form-split__inner--align-stretch { align-items: stretch; }

  .yc-form-split__inner--image-right .yc-form-split__media {
    order: 2;
  }

  /* Only the content column: centre it when the image is hidden. */
  .yc-form-split__inner:not(:has(.yc-form-split__media)) {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
  }

  /* ---------- Media ---------- */
  .yc-form-split__media {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 32px;
  }

  .yc-form-split__img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* "Fill column": the image covers the full height of the content column. */
  .yc-form-split__media--cover {
    align-self: stretch;
    min-height: 420px;
  }

  .yc-form-split__media--cover .yc-form-split__img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
  }

  .yc-form-split__placeholder {
    background-color: #f3f3f7;
  }

  /* ---------- Content ---------- */
  .yc-form-split__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
  }

  /* .eyebrow — same pill as yc-split / yc-contact-form. */
  .yc-form-split__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-form-split__eyebrow-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
  }

  .yc-form-split__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-form-split__text {
    max-width: 56ch;
    font-size: 16px;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-form-split__text > * {
    margin: 0;
  }

  .yc-form-split__text > * + * {
    margin-top: 12px;
  }

  .yc-form-split__text a {
    color: #4036d6;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .yc-form-split__text a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  .yc-form-split__form {
    width: 100%;
  }

  /* The app root carries an inline min-height for its loading state. */
  .yc-form-split__form [data-form-root] {
    width: 100%;
  }

  .yc-form-split__empty {
    margin: 0;
    padding: 24px;
    width: 100%;
    font-size: 14px;
    color: #2e2e2e;
    border: 1px dashed #2e2e2e;
    border-radius: 16px;
  }

  /* ---------- Shopify Forms theming ----------
     Overrides the custom properties the app declares on :host. Outer-document
     declarations on the host element win over :host, so no !important. */
  .yc-form-split--themed shopify-forms-embed {
    --forms-body-font: normal 400 15px var(--font-body--family, inherit), sans-serif;
    --forms-heading-font: normal 700 24px var(--font-heading--family, inherit), sans-serif;
    --forms-base-font-size: 15px;
    --forms-heading-font-size: 24px;
    --heading-font-size: 24px;

    --body-text-color: #2e2e2e;
    --heading-text-color: #2e2e2e;
    --form-text-color: #2e2e2e;
    --form-placeholder-color: rgb(46 46 46 / 0.4);
    --form-background-color: #ffffff;
    --form-error-color: #c8102e;
    --link-text-color: #4036d6;
    --forms-accent-color: #4036d6;
    --forms-accent-color-hovered-modifier: #4036d61a;

    --form-field-border: 0 0 0 1px #2e2e2e;
    --form-field-border-focused: 0 0 0 2px #4036d6;
    --form-field-border-radius: 16px;

    --button-text-color: #ffffff;
    --button-background-color: #4036d6;
    --button-border-radius: 999px;
    --button-padding: 16px;

    --container-background-color: transparent;
    --container-max-w: 100%;
    --inline-container-max-width: 100%;
    --forms-padding-top: 0px;
    --forms-padding-right: 0px;
    --forms-padding-bottom: 0px;
    --forms-padding-left: 0px;
    --app-embed-padding-x: 0px;
    --app-embed-padding-y: 0px;

    display: block;
    width: 100%;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1200px) {
    .yc-form-split__inner {
      gap: 40px;
    }
  }

  @media (max-width: 989px) {
    .yc-form-split__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
      padding-inline: 20px;
    }

    .yc-form-split__inner--image-right .yc-form-split__media {
      order: 0;
    }

    .yc-form-split__inner--mobile-bottom .yc-form-split__media {
      order: 2;
    }

    .yc-form-split__inner--mobile-hidden .yc-form-split__media {
      display: none;
    }

    .yc-form-split__media {
      border-radius: 24px;
    }

    .yc-form-split__media--cover {
      min-height: 0;
      aspect-ratio: 4 / 3;
    }

    .yc-form-split__title {
      font-size: 36px;
    }
  }

  @media (max-width: 640px) {
    .yc-form-split__inner {
      padding-inline: 16px;
    }

    .yc-form-split__title {
      font-size: 27px;
    }

    .yc-form-split__eyebrow {
      font-size: 11px;
    }
  }
/* END_SECTION:yc-form-split */

/* START_SECTION:yc-founder-note (INDEX:67) */
.yc-founder-note {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f0eee3;
    --yc-fn-gutter: 50px;
  }

  .yc-founder-note__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    padding-left: var(--yc-fn-gutter);
    padding-right: var(--yc-fn-gutter);
    align-self: center;
  }

  .yc-founder-note.section--full-width .yc-founder-note__container {
    max-width: none;
  }

  .yc-founder-note__card {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 24px;
    box-shadow: 4px 4px 0 #2e2e2e;
    overflow: hidden;
  }

  .yc-founder-note__col {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 50%;
    min-width: 0;
    padding: 40px;
  }

  .yc-founder-note__mark {
    position: absolute;
    top: -18px;
    right: 32px;
    font-size: 160px;
    line-height: 1;
    font-weight: 700;
    color: #4036d6;
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
  }

  .yc-founder-note__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e1ee;
  }

  .yc-founder-note__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #FFC7AC;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-founder-note__eyebrow .yc-icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
  }

  .yc-founder-note__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .yc-founder-note__body p {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: #6b6b6b;
  }

  .yc-founder-note__body .yc-founder-note__lead {
    font-size: 20px;
    font-weight: 600;
    color: #2e2e2e;
    letter-spacing: -0.01em;
  }

  .yc-founder-note__sign {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 24px;
    border-top: 1px solid #e2e1ee;
  }

  .yc-founder-note__signature {
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
    color: #4036d6;
  }

  .yc-founder-note__role {
    font-size: 13px;
    color: #6b6b6b;
  }

  .yc-founder-note__answered {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 12px 16px;
    background-color: #f0eee3;
    border: 1px solid #2e2e2e;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
    color: #2e2e2e;
  }

  .yc-founder-note__answered strong {
    font-weight: 700;
  }

  .yc-founder-note__answered-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -2px;
    color: #4036d6;
    background-color: #E4F5FF;
    border: 1px solid #2e2e2e;
    border-radius: 50%;
  }

  .yc-founder-note__answered-icon .yc-icon {
    width: 22px;
    height: 22px;
  }

  .yc-founder-note__media {
    position: relative;
    flex: 1 1 50%;
    min-height: 420px;
    border-right: 1px solid #2e2e2e;
  }

  .yc-founder-note__media img,
  .yc-founder-note__media .yc-founder-note__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .yc-founder-note__media .yc-founder-note__placeholder {
    background-color: #E4F5FF;
    color: #4036d6;
  }

  .yc-founder-note__stamp {
    position: absolute;
    z-index: 1;
    left: auto;
    bottom: 24px;
    right: -20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #ffffff;
    background-color: #0FB654;
    border: 1px solid #2e2e2e;
    border-radius: 50%;
  }

  .yc-founder-note__stamp .yc-icon {
    width: 24px;
    height: 24px;
  }

  .yc-founder-note__badge {
    position: absolute;
    width: 116px;
    height: auto;
    z-index: 2;
    opacity: 1;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-founder-note__badge--corner {
    top: -40px;
    left: max(4px, calc(var(--yc-fn-gutter) - 40px));
    transform: rotate(-14deg);
  }

  .yc-founder-note__badge--bottom {
    top: auto;
    bottom: 16px;
    right: 4%;
    transform: rotate(10deg);
  }

  /* ---------- Tablet: stack photo over letter ---------- */
  @media (max-width: 992px) {
    .yc-founder-note {
      --yc-fn-gutter: 20px;
    }

    .yc-founder-note__card {
      flex-direction: column;
    }

    .yc-founder-note__media {
      order: -1;
      min-height: 300px;
      border-right: 0;
      border-bottom: 1px solid #2e2e2e;
    }

    .yc-founder-note__stamp {
      right: 24px;
      bottom: -20px;
    }

    .yc-founder-note__badge {
      width: 84px;
    }

    .yc-founder-note__badge--corner {
      top: -28px;
      left: max(4px, calc(var(--yc-fn-gutter) - 28px));
    }
  }

  @media (max-width: 760px) {
    .yc-founder-note {
      margin-top: 48px;
    }

    .yc-founder-note__head {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 16px;
    }

    .yc-founder-note__mark {
      font-size: 110px;
      right: 16px;
    }

    .yc-founder-note__body .yc-founder-note__lead {
      font-size: 18px;
    }

    .yc-founder-note__sign {
      align-items: center;
      text-align: center;
    }
  }

  /* Decorative section sticker crowds copy on phones */
  @media (max-width: 640px) {
    .yc-founder-note {
      --yc-fn-gutter: 16px;
    }

    .yc-founder-note__badge--bottom {
      display: none;
    }
  }

  @media (max-width: 600px) {
    .yc-founder-note__col {
      padding: 24px;
    }
  }
/* END_SECTION:yc-founder-note */

/* START_SECTION:yc-gift-doors (INDEX:68) */
/* `.company-section` + `--alt` — a flat 60/60 flex column on cream. */
  .yc-gift-doors {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-gift-doors-pt, 60px) var(--yc-gift-doors-pb, 60px);
    line-height: 1.55;
  }

  /* `.container` — 1620px max, 50px gutter, self-centred. Its 48px stack gap is
     inert here (one child) and is not ported. */
  .yc-gift-doors__container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.gift-two` — a narrow heading column beside the rows. */
  .yc-gift-doors__layout {
    display: grid;
    grid-template-columns: var(--yc-gift-doors-head, 300px) 1fr;
    gap: 48px;
    align-items: center;
  }

  .yc-gift-doors__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* `.section-head` with `.gift-two__head .section-head` on top. That override
     and `.company-section .section-head` (660px, centred) have EQUAL
     specificity, and the gift-two rule is later in the document, so it wins:
     no cap, no auto margin, left-aligned. Only the winning values are ported. */
  .yc-gift-doors__head-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
  }

  /* `.eyebrow` — 12/700 uppercase pill. line-height pinned to the prototype's
     --lh-body so the pill keeps its reference height. */
  .yc-gift-doors__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* `.eyebrow--outline` — white fill and an INK border (the base pill's border
     is #e2e1ee). */
  .yc-gift-doors__eyebrow--outline {
    background-color: #ffffff;
    border-color: #2e2e2e;
  }

  .yc-gift-doors__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* `.gift-two__head h2` over the h1-h6 base. The `--fs-h2` responsive ladder
     never reaches it: that rule is (0,1,1) and beats the bare `h2` at every
     width, so 46 -> 36 -> 27 -> 24 does not apply and the clamp governs. */
  .yc-gift-doors__heading {
    margin: 0;
    font-size: clamp(26px, 2.4vw, 36px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* `.section-subtitle` at --fs-16 (the head override) rather than the base 18.
     The 620px cap is the base rule's and survives; the 300px column is what
     actually constrains it above 1080px. */
  .yc-gift-doors__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-gift-doors__subtitle a {
    color: inherit;
    text-decoration: none;
  }

  /* Added, not in the reference (WCAG 2.2 AA 2.4.7). Invisible at rest. */
  .yc-gift-doors__subtitle a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  .yc-gift-doors__marks {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Heights come from the viewBox ratios, as in the reference:
     42 x 26/60 = 18.2px and 22 x 1 = 22px. */
  .yc-gift-doors__doodle {
    width: 42px;
    color: #78c6ff;
  }

  .yc-gift-doors__spark {
    width: 22px;
    color: #ff92eb;
  }

  /* `.gift-doors` — the stack. `position: relative` anchors BOTH the "or" coin
     and each row's corner badge; see the section header. */
  .yc-gift-doors__rows {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* `.gift-doors__or` — a coin, not loose text: the gap is only 28px, so a
     bordered circle overlapping both row edges reads as a hinge between the two
     paths rather than a stray word floating on the section fill. */
  .yc-gift-doors__or {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #2e2e2e;
    background-color: var(--yc-gift-doors-or, #ffc7ac);
    border: 1px solid #2e2e2e;
    border-radius: 50%;
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* responsive.css :root ladder — --gutter 50 -> 20, --container-width -> 100%. */
  @media (max-width: 992px) {
    .yc-gift-doors__container {
      max-width: 100%;
      padding-inline: 20px;
    }
  }

  /* responsive.css --gutter -> 16. */
  @media (max-width: 640px) {
    .yc-gift-doors__container {
      padding-inline: 16px;
    }
  }

  /* gifting.html 294-295. Ordered AFTER the 992/640 container steps but BEFORE
     the 1080 collapse, because the two layout rules have equal specificity and
     the later one has to win below 1080. */
  @media (max-width: 1240px) {
    .yc-gift-doors__layout {
      grid-template-columns: var(--yc-gift-doors-head-narrow, 260px) 1fr;
      gap: 32px;
    }
  }

  /* gifting.html 307-311 — one centred column. */
  @media (max-width: 1080px) {
    .yc-gift-doors__layout {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .yc-gift-doors__head {
      align-items: center;
    }

    .yc-gift-doors__head-inner {
      align-items: center;
      max-width: 620px;
      margin-inline: auto;
      text-align: center;
    }
  }

  /* gifting.html 326-332 — the rows breathe once they have restacked. */
  @media (max-width: 600px) {
    .yc-gift-doors__rows {
      gap: 44px;
    }
  }
/* END_SECTION:yc-gift-doors */

/* START_SECTION:yc-gift-flow (INDEX:69) */
/* `.company-section` — a flat 60/60 flex column on white, and the positioning
     context for the corner sticker. */
  .yc-gift-flow {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-gift-flow-pt, 60px) var(--yc-gift-flow-pb, 60px);
    line-height: 1.55;
  }

  /* `.container` — 1620px max, 50px gutter, 48px stack gap. That gap is LIVE
     here: this container holds TWO children, the head and the switch. */
  /* ⚠ NO `position` / `z-index` HERE, deliberately — the same finding the
     reasons band recorded. The reference's `.container` is static, which leaves
     the positioned sticker composited above the copy; giving the container a
     stacking context changes how the sticker's 0.95 opacity and drop-shadow
     composite, and that shows up in the pixel diff. */
  .yc-gift-flow__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.sticker` + `.section-sticker` + `--tr`. Width cascade: `.sticker` sets
     92px and `.section-sticker` 96px, which wins; z-index is likewise
     `.section-sticker`'s 1, not `.sticker`'s 3. */
  .yc-gift-flow__sticker {
    position: absolute;
    z-index: 1;
    width: var(--yc-gift-flow-sticker-w, 96px);
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgb(46 46 46 / 18%));
  }

  .yc-gift-flow__sticker--tl {
    top: 40px;
    left: 3%;
    transform: rotate(-14deg);
  }

  .yc-gift-flow__sticker--tr {
    top: 40px;
    right: 3%;
    transform: rotate(12deg);
  }

  /* `.section-head` with `.company-section .section-head` — 660px, centred. */
  .yc-gift-flow__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 660px;
    margin-inline: auto;
    text-align: center;
  }

  /* `.eyebrow` — the OUTLINED variant on this band. */
  .yc-gift-flow__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-gift-flow__eyebrow--outline {
    background-color: #ffffff;
    border-color: #2e2e2e;
  }

  .yc-gift-flow__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 base at --fs-h2, which rides the responsive ladder — there is no
     page-level font-size override on this heading. */
  .yc-gift-flow__heading {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* `.section-subtitle` — 18/400, capped at 620px. --fs-18 is a FIXED token. */
  .yc-gift-flow__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* ---------- The switch ---------- */
  /* `.gift-flow` */
  .yc-gift-flow__switch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  /* Off-canvas but still focusable, so the toggle is reachable by keyboard.
     `position: absolute` also keeps both inputs out of the flex flow, so the
     switch has exactly two flex items and one 32px gap. */
  .yc-gift-flow__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .yc-gift-flow__toggle {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 999px;
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  .yc-gift-flow__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 148px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #2e2e2e;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .yc-gift-flow__tab-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    font-size: 18px;
  }

  /* The reference's `#giftSideYou:checked ~ ...` pair, rewritten with `:has()`
     so two copies of this section on one page cannot drive each other. */
  .yc-gift-flow__switch:has(.yc-gift-flow__radio--you:checked) .yc-gift-flow__tab--you,
  .yc-gift-flow__switch:has(.yc-gift-flow__radio--them:checked) .yc-gift-flow__tab--them {
    color: #ffffff;
    background-color: var(--yc-gift-flow-active, #4036d6);
  }

  /* The inputs sit off-canvas, so the focus ring has to be drawn on the label
     the focused input controls. */
  .yc-gift-flow__switch:has(.yc-gift-flow__radio--you:focus-visible) .yc-gift-flow__tab--you,
  .yc-gift-flow__switch:has(.yc-gift-flow__radio--them:focus-visible) .yc-gift-flow__tab--them {
    outline: 3px solid var(--yc-gift-flow-active, #4036d6);
    outline-offset: 3px;
  }

  /* ---------- The panels ---------- */
  .yc-gift-flow__panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
    width: 100%;
  }

  /* The side that isn't selected washes back rather than disappearing, so the
     comparison is still there to read. See the header note on WCAG 1.4.3. */
  .yc-gift-flow__col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    border: 1px solid #2e2e2e;
    border-radius: 32px;
    opacity: 0.42;
    filter: saturate(0.35);
    transition: opacity 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
  }

  .yc-gift-flow__switch:has(.yc-gift-flow__radio--you:checked) .yc-gift-flow__col--sender,
  .yc-gift-flow__switch:has(.yc-gift-flow__radio--them:checked) .yc-gift-flow__col--recipient {
    opacity: 1;
    filter: none;
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* ---------- Panel header ---------- */
  .yc-gift-flow__panel-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 2px dashed rgb(46 46 46 / 22%);
  }

  .yc-gift-flow__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    font-size: 28px;
    color: #2e2e2e;
    background-color: var(--yc-gift-flow-tile, #78c6ff);
    border: 1px solid #2e2e2e;
    border-radius: 50%;
  }

  .yc-gift-flow__avatar-icon {
    width: 1em;
    height: 1em;
  }

  .yc-gift-flow__head-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .yc-gift-flow__tag {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--yc-gift-flow-tag, #4036d6);
  }

  .yc-gift-flow__title {
    margin: 0;
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* ---------- The timeline ---------- */
  .yc-gift-flow__timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Dashed rail down the dot column, stopping at the first and last dot rather
     than running the full height of the list. */
  .yc-gift-flow__timeline::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 22px;
    bottom: 22px;
    left: 21px;
    border-left: 2px dashed rgb(46 46 46 / 28%);
  }

  /* ---------- One stop ---------- */
  /* Rendered by snippets/yc-gift-flow-stop.liquid, which cannot carry a
     stylesheet tag of its own — so these are its rules. Do not write that tag
     name in full here: theme-check reads a Liquid tag inside a CSS block as real
     markup and raises StaticStylesheetAndJavascriptTags plus StylesheetOncePerFile. */
  .yc-gift-flow__stop {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: start;
    gap: 16px;
  }

  .yc-gift-flow__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    font-size: 19px;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 50%;
  }

  .yc-gift-flow__dot-icon {
    width: 1em;
    height: 1em;
  }

  .yc-gift-flow__stop-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px;
  }

  /* The "when" stamp — the half of the heading a plain grid of cards could not
     answer. */
  .yc-gift-flow__when {
    align-self: flex-start;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 999px;
  }

  .yc-gift-flow__stop-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-gift-flow__stop-text {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #2e2e2e;
    opacity: 0.76;
  }

  /* ---------- Responsive ---------- */
  /* The section's own 1080px step. */
  @media (max-width: 1080px) {
    .yc-gift-flow__col {
      gap: 20px;
      padding: 24px;
    }

    .yc-gift-flow__timeline {
      gap: 16px;
    }

    .yc-gift-flow__avatar {
      width: 50px;
      height: 50px;
      font-size: 24px;
    }
  }

  /* responsive.css :root — --gutter 50 -> 20, --container-width -> 100%,
     --fs-h2 46 -> 36 — plus `.container { gap: 32px }`, LIVE here. */
  @media (max-width: 992px) {
    .yc-gift-flow__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-gift-flow__heading {
      font-size: 36px;
    }
  }

  /* One panel at a time here — side by side they are too narrow to hold a
     timeline, and the washed-back panel is not worth the height. */
  @media (max-width: 820px) {
    .yc-gift-flow__panels {
      grid-template-columns: 1fr;
    }

    .yc-gift-flow__col {
      display: none;
      opacity: 1;
      filter: none;
    }

    .yc-gift-flow__switch:has(.yc-gift-flow__radio--you:checked) .yc-gift-flow__col--sender,
    .yc-gift-flow__switch:has(.yc-gift-flow__radio--them:checked) .yc-gift-flow__col--recipient {
      display: flex;
    }
  }

  /* responsive.css --gutter -> 16, --fs-h2 -> 27, `.section-sticker` hidden. */
  @media (max-width: 640px) {
    .yc-gift-flow__container {
      padding-inline: 16px;
    }

    .yc-gift-flow__heading {
      font-size: 27px;
    }

    .yc-gift-flow__sticker {
      display: none;
    }
  }

  /* The section's own 480px step. */
  @media (max-width: 480px) {
    .yc-gift-flow__toggle {
      width: 100%;
    }

    .yc-gift-flow__tab {
      min-width: 0;
      flex: 1 1 0;
      padding: 12px 12px;
    }

    .yc-gift-flow__col {
      padding: 20px 16px;
    }

    .yc-gift-flow__stop {
      grid-template-columns: 38px 1fr;
      gap: 12px;
    }

    .yc-gift-flow__dot {
      width: 38px;
      height: 38px;
      font-size: 17px;
    }

    .yc-gift-flow__timeline::before {
      top: 19px;
      bottom: 19px;
      left: 18px;
    }
  }

  /* responsive.css --fs-h2 -> 24 on narrow phones. */
  @media (max-width: 380px) {
    .yc-gift-flow__heading {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-gift-flow */

/* START_SECTION:yc-gift-help (INDEX:70) */
.yc-gift-help {
    display: flow-root;
  }

  .yc-gift-help__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  .yc-gift-help__inner--align-center {
    align-items: center;
  }

  .yc-gift-help__inner--align-start {
    align-items: start;
  }

  .yc-gift-help__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
  }

  /* .eyebrow — 12px/700 uppercase on peach. Ink on peach is 9.06:1. */
  .yc-gift-help__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-gift-help__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  .yc-gift-help__heading {
    margin: 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-gift-help__text {
    max-width: 52ch;
    font-size: 16px;
    line-height: 1.6;
    color: #2e2e2e;
  }

  .yc-gift-help__text > :first-child {
    margin-block-start: 0;
  }

  .yc-gift-help__text > :last-child {
    margin-block-end: 0;
  }

  .yc-gift-help__options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .yc-gift-help__option {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #2e2e2e;
  }

  .yc-gift-help__option-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: #4036d6;
  }

  .yc-gift-help__note {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgb(46 46 46 / 0.75);
  }

  .yc-gift-help__form {
    min-width: 0;
  }

  .yc-gift-help__empty {
    margin: 0;
    padding: 24px;
    font-size: 14px;
    color: rgb(46 46 46 / 0.6);
    border: 1px dashed rgb(46 46 46 / 0.3);
    border-radius: 16px;
  }

  /* ---------- Shopify Forms theming ----------
     Overrides the custom properties the app declares on :host. Outer-document declarations on the
     host element win over :host, so no !important is needed. Values mirror yc-form-split. */
  .yc-gift-help--themed shopify-forms-embed {
    --forms-body-font: normal 400 15px var(--font-body--family, inherit), sans-serif;
    --forms-heading-font: normal 700 24px var(--font-heading--family, inherit), sans-serif;
    --forms-base-font-size: 15px;
    --forms-heading-font-size: 24px;
    --heading-font-size: 24px;

    --body-text-color: #2e2e2e;
    --heading-text-color: #2e2e2e;
    --form-text-color: #2e2e2e;
    --form-placeholder-color: rgb(46 46 46 / 0.4);
    --form-background-color: #ffffff;
    --form-error-color: #c8102e;
    --link-text-color: #4036d6;
    --forms-accent-color: #4036d6;
    --forms-accent-color-hovered-modifier: #4036d61a;

    --form-field-border: 0 0 0 1px #2e2e2e;
    --form-field-border-focused: 0 0 0 2px #4036d6;
    --form-field-border-radius: 16px;

    --button-text-color: #ffffff;
    --button-background-color: #4036d6;
    --button-border-radius: 999px;
    --button-padding: 16px;

    --container-background-color: transparent;
    --container-max-w: 100%;
    --inline-container-max-width: 100%;
    --forms-padding-top: 0px;
    --forms-padding-right: 0px;
    --forms-padding-bottom: 0px;
    --forms-padding-left: 0px;
    --app-embed-padding-x: 0px;
    --app-embed-padding-y: 0px;

    display: block;
    width: 100%;
  }

  /* ---------- Responsive ----------
     The page's own ladder: gutter 50 -> 20 at <=992 -> 16 at <=640. The columns collapse at 900px,
     where a 1fr/1fr split leaves the form fields too narrow to use comfortably. */
  @media screen and (max-width: 1200px) {
    .yc-gift-help__inner {
      gap: 48px;
    }

    .yc-gift-help__heading {
      font-size: 36px;
    }
  }

  @media screen and (max-width: 992px) {
    .yc-gift-help__inner {
      padding-inline: 20px;
    }
  }

  @media screen and (max-width: 900px) {
    .yc-gift-help__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
    }
  }

  @media screen and (max-width: 640px) {
    .yc-gift-help__inner {
      padding-inline: 16px;
    }

    .yc-gift-help__heading {
      font-size: 28px;
    }
  }
/* END_SECTION:yc-gift-help */

/* START_SECTION:yc-gift-hero (INDEX:71) */
/* `.company-hero`, as the page's second block leaves it (gifting.html 92-97):
     white rather than the cream the other section shells use, because the peach
     blob needs something lighter than itself to sit on. `overflow: hidden` is
     load-bearing — the blob is 106% of its column. line-height restates the
     reference's inherited --lh-body; see the section comment. */
  .yc-gift-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-gift-hero-pt, 48px) var(--yc-gift-hero-pb, 48px);
    text-align: center;
    line-height: 1.55;
  }

  /* `.container` — 1620px max, 50px gutter, self-centred. Its 48px stack gap is
     inert here (one child) and is not ported. */
  .yc-gift-hero__container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.gift-hero-grid` (gifting.html 98-104). The copy column is the NARROWER
     of the two — the drawn composition carries the wider half. */
  .yc-gift-hero__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 40px;
    align-items: center;
    text-align: left;
  }

  /* `.section-head` (style.css:646) with `.gift-hero-grid .section-head`
     (105-111) on top: left-aligned, capped at 520px, not centred. Same
     specificity as `.company-hero .section-head` and later in the document, so
     the grid rule wins — reproduced by porting only the winning values. */
  .yc-gift-hero__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 520px;
    text-align: left;
  }

  /* `.eyebrow` — 12px/700 uppercase, 8/16 padding, pill. line-height is pinned
     to the prototype's --lh-body (1.55) rather than inherited, so the pill keeps
     its reference height whatever the theme's body line-height is. */
  .yc-gift-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* `.eyebrow--outline` (116-119) — white fill and an INK border, so the
     headline stays the only heavy thing in the column. Note the border colour
     differs from the base pill's #e2e1ee. */
  .yc-gift-hero__eyebrow--outline {
    background-color: #ffffff;
    border-color: #2e2e2e;
  }

  /* 1em: the reference's `<i class="ph ...">` renders a 12.00 x 12.00 box at the
     eyebrow's 12px, and yc-icon draws the same artwork on the same 256-unit
     viewBox. (Same reasoning as sections/yc-size-hero.liquid.) */
  .yc-gift-hero__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* `.gift-hero-grid h1` (113) over the h1 base (style.css 260-277).
     ⚠ THE ONLY `rem` ON THE PAGE. The reference sets no root font-size, so its
     clamp resolves against 16px: 2.6rem = 41.6px and 4.2rem = 67.2px. Written
     as px here so a different root size in the theme cannot move it — the
     project's px-only rule.
     The `--fs-h1` responsive ladder never reaches this heading: `.gift-hero-grid
     h1` is (0,1,1) and beats the bare `h1` at every width. */
  .yc-gift-hero__title {
    margin: 0;
    font-size: clamp(41.6px, 5vw, 67.2px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* `.section-subtitle` (style.css:678) with the grid's override (112): 16px,
     not the base 18px, and capped at 380px, not 620px. --fs-16 is a FIXED token
     and does not move on the responsive ladder. */
  .yc-gift-hero__subtitle {
    margin: 0;
    max-width: 380px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* The prototype's base `a { color: inherit; text-decoration: none }`, pinned
     so the theme's own link styling cannot add a colour or underline. */
  .yc-gift-hero__subtitle a {
    color: inherit;
    text-decoration: none;
  }

  /* Added, not in the reference: a keyboard user must be able to see a link in
     the standfirst (WCAG 2.2 AA, 2.4.7). Invisible at rest. */
  .yc-gift-hero__subtitle a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* `.gift-hero__actions` (124-129). The 8px top margin ADDS to the head's 16px
     gap, so the real distance from the standfirst is 24px. */
  .yc-gift-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
  }

  /* `.btn` (style.css:698) — 14/700 pill, 16/32 padding, 1px #e2e1ee border.
     An <a> button inherits the prototype's body line-height (1.55), pinned here.
     Both variants are the SAME size and the SAME border; only the fill differs,
     which is what makes neither read as the fallback option. The reference
     declares the transition but defines NO hover state for either variant, so
     the buttons genuinely do not change on hover; reproduced rather than
     "improved", as in blocks/_yc-faq-cta-button.liquid. */
  .yc-gift-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #ffffff;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .yc-gift-hero__btn--purple {
    color: #ffffff;
    background-color: #4036d6;
  }

  .yc-gift-hero__btn--white {
    color: #2e2e2e;
    background-color: #ffffff;
  }

  .yc-gift-hero__btn--ink {
    color: #ffffff;
    background-color: #2e2e2e;
  }

  /* Added, not in the reference — whose global focus rule would ALSO snap the
     pill from a 999px radius to 4px. That radius snap is a cascade artefact and
     is not reproduced; the 3px indigo ring is. Indigo on white is 7.73:1. */
  .yc-gift-hero__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  /* `.btn__icon` — an 18px glyph. */
  .yc-gift-hero__btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  /* `.gift-hero__marks` (132) — 24px margin ON TOP of the head's 16px gap. */
  .yc-gift-hero__marks {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
  }

  /* Both doodles take their height from the viewBox ratio, as in the reference:
     74 x 24/100 = 17.76px and 26 x 1 = 26px. */
  .yc-gift-hero__squiggle {
    width: 74px;
    color: #2e2e2e;
  }

  .yc-gift-hero__spark {
    width: 26px;
    color: #ff92eb;
  }

  /* ---------- The drawn composition ---------- */
  /* `.gift-hero__visual` (147-153). The mass a product shot would carry is
     replaced by layered card edges, so the depth is all border. */
  .yc-gift-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 430px;
  }

  /* `.gift-hero__blob` (154-166) — an organic peach shape behind everything. */
  .yc-gift-hero__blob {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 54%;
    width: 106%;
    height: 98%;
    transform: translate(-50%, -52%);
    border-radius: 64% 36% 52% 48% / 38% 62% 38% 62%;
    opacity: 0.9;
  }

  /* `.gift-hero__stack` (170) */
  .yc-gift-hero__stack {
    position: relative;
    z-index: 2;
    width: min(560px, 96%);
  }

  /* `.gift-hero__note--back` (171-177). `height: 100%` resolves against the
     stack, which is the offset parent. */
  .yc-gift-hero__note-back {
    position: absolute;
    z-index: 0;
    height: 100%;
    border: 1px solid #2e2e2e;
    border-radius: 24px;
  }

  .yc-gift-hero__note-back--1 {
    top: -34px;
    left: 30px;
    right: -22px;
    transform: rotate(4.5deg);
  }

  /* Sits a touch further out and takes the ice wash, so the three edges read as
     separate cards rather than one thick border. */
  .yc-gift-hero__note-back--2 {
    top: 10px;
    left: -34px;
    right: 30px;
    transform: rotate(-6deg);
  }

  /* `.gift-hero__note` (180-191) — the written tag. This is the one place on
     the page that carries a resting hard shadow. */
  .yc-gift-hero__note {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 300px;
    padding: 46px 54px 118px;
    background-color: var(--yc-gift-hero-note-fill, #f0eee3);
    border: 1px solid #2e2e2e;
    border-radius: 24px;
    box-shadow: 4px 4px 0 #2e2e2e;
    transform: rotate(-2.5deg);
  }

  /* Inner dashed rule, inset from the card edge — the stitched-tag look. */
  .yc-gift-hero__note::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 2px dashed rgb(46 46 46 / 32%);
    border-radius: 16px;
    pointer-events: none;
  }

  /* `.gift-hero__note-hole` (199-215) — a punched eyelet hung off the tag's
     top-right corner, with the ink dot drawn by its ::after. */
  .yc-gift-hero__note-hole {
    position: absolute;
    z-index: 3;
    top: -22px;
    right: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background-color: var(--yc-gift-hero-accent, #8b89c8);
    border: 1px solid #2e2e2e;
    border-radius: 50%;
  }

  .yc-gift-hero__note-hole::after {
    content: '';
    width: 22px;
    height: 22px;
    background-color: #2e2e2e;
    border-radius: 50%;
  }

  /* Twine loop threaded through the eyelet. The colour is the reference's own
     twine brown and is not on the brand palette, so it stays a literal. */
  .yc-gift-hero__note-string {
    position: absolute;
    z-index: 2;
    top: -76px;
    right: 18px;
    width: 70px;
    color: #c9a87c;
  }

  /* `.gift-hero__note-text` (223-234). The script face sits outside the
     Poppins-only rule the same way the checker and doodle motifs sit outside
     the type system — this is handwriting on a gift tag, not page copy. */
  .yc-gift-hero__note-text {
    margin: 0;
    font-family: var(--yc-gift-hero-note-family, 'Segoe Script', cursive);
    font-style: var(--yc-gift-hero-note-style, normal);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: var(--yc-gift-hero-note-weight, 400);
    line-height: 1.42;
    color: #2e2e2e;
  }

  /* Sign-off, right-aligned under the message. It fills the vertical run a
     product shot would have taken and makes the tag read as written by a
     person rather than set as a caption. */
  .yc-gift-hero__note-sign {
    display: block;
    margin-top: 8px;
    font-family: var(--yc-gift-hero-note-family, 'Segoe Script', cursive);
    font-style: var(--yc-gift-hero-note-style, normal);
    font-size: clamp(19px, 1.7vw, 25px);
    font-weight: var(--yc-gift-hero-note-weight, 400);
    line-height: 1.2;
    text-align: right;
    color: #2e2e2e;
    opacity: 0.72;
  }

  .yc-gift-hero__note-heart {
    position: absolute;
    left: 54px;
    bottom: 116px;
    width: 30px;
    color: #ff92eb;
  }

  /* Checkerboard hem, inside the dashed rule on the bottom edge. Built from a
     CONIC gradient, not crossed 45deg linear ones — the reference's own note
     says those give diamonds rather than squares. */
  .yc-gift-hero__note-checker {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
    height: 36px;
    background-image: conic-gradient(
      var(--yc-gift-hero-accent, #8b89c8) 0 25%,
      transparent 0 50%,
      var(--yc-gift-hero-accent, #8b89c8) 0 75%,
      transparent 0
    );
    background-size: 36px 36px;
  }

  /* Marks scattered around the tag, positioned against the visual column.
     Colours are a designed set rather than merchant choices, so they are
     literals — the same call the reference's own palette comment makes. */
  .yc-gift-hero__mark {
    position: absolute;
    z-index: 3;
    pointer-events: none;
  }

  .yc-gift-hero__mark--star-ink {
    top: 6%;
    right: 6%;
    width: 42px;
    color: #2e2e2e;
  }

  /* Named for its position in the reference, but the fill is INDIGO. */
  .yc-gift-hero__mark--star-accent {
    bottom: 12%;
    right: 3%;
    width: 30px;
    color: #4036d6;
  }

  .yc-gift-hero__mark--dash {
    right: 0;
    top: 44%;
    width: 96px;
    color: #2e2e2e;
    opacity: 0.7;
  }

  .yc-gift-hero__mark--heart {
    top: 12%;
    left: 6%;
    width: 34px;
    color: #ff92eb;
    transform: rotate(-12deg);
  }

  .yc-gift-hero__mark--sparkle {
    bottom: 16%;
    left: 10%;
    width: 30px;
    color: #0fb654;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* responsive.css :root ladder — --gutter 50 -> 20, --container-width -> 100%. */
  @media (max-width: 992px) {
    .yc-gift-hero__container {
      max-width: 100%;
      padding-inline: 20px;
    }
  }

  /* gifting.html 269-275 — the columns even up and the tag tightens. */
  @media (max-width: 1240px) {
    .yc-gift-hero__grid {
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }

    .yc-gift-hero__note {
      min-height: 260px;
      padding: 38px 40px 100px;
    }

    .yc-gift-hero__note-back--1 {
      top: -26px;
      left: 22px;
      right: -16px;
    }

    .yc-gift-hero__note-back--2 {
      top: 8px;
      left: -24px;
      right: 22px;
    }

    .yc-gift-hero__mark--dash {
      display: none;
    }
  }

  /* gifting.html 279-289 — stack early: below this the two-column grid leaves
     the headline too narrow to hold its first line. The visual goes ABOVE the
     copy, which is the one place `order` is used on this page. */
  @media (max-width: 1080px) {
    .yc-gift-hero {
      padding-block: var(--yc-gift-hero-pt-stacked, 36px) var(--yc-gift-hero-pb-stacked, 44px);
    }

    .yc-gift-hero__grid {
      grid-template-columns: 1fr;
      gap: 32px;
      text-align: center;
    }

    .yc-gift-hero__head {
      align-items: center;
      max-width: 620px;
      margin-inline: auto;
      text-align: center;
    }

    .yc-gift-hero__subtitle {
      max-width: 520px;
    }

    .yc-gift-hero__actions,
    .yc-gift-hero__marks {
      justify-content: center;
    }

    .yc-gift-hero__visual {
      order: -1;
      min-height: 370px;
    }
  }

  /* responsive.css at <=640: --gutter -> 16, and `.btn { width: 100% }`
     (responsive.css:759).
     ⚠ THAT BUTTON RULE IS WHAT STACKS THE PAIR, AND IT LANDS 40px BEFORE THIS
     SECTION'S OWN 600px BLOCK DOES. `.yc-gift-hero__actions` wraps, and
     `align-items: center` on the stacked head makes it shrink-to-fit, so two
     100%-wide buttons each fill the row and wrap onto their own line. Between
     641px and 600px the reference therefore already shows the buttons stacked
     and equal — measured, and missing from the first pass. */
  @media (max-width: 640px) {
    .yc-gift-hero__container {
      padding-inline: 16px;
    }

    .yc-gift-hero__btn {
      width: 100%;
    }
  }

  /* gifting.html 291-325. One fanned edge only — three eat the margins the tag
     needs to stay readable — and the scattered marks go, the same way
     responsive.css drops `.section-sticker` at phone widths. The buttons go
     full width and stay matched, which `responsive.css:759` would do anyway;
     stated here because the actions column is what it resolves against. */
  @media (max-width: 600px) {
    .yc-gift-hero__visual {
      min-height: 290px;
    }

    .yc-gift-hero__note {
      min-height: 210px;
      padding: 28px 24px 82px;
      border-radius: 16px;
    }

    .yc-gift-hero__note::before {
      inset: 10px;
      border-radius: 10px;
    }

    .yc-gift-hero__note-back--1 {
      top: -16px;
      left: 14px;
      right: -10px;
      transform: rotate(3.5deg);
    }

    .yc-gift-hero__note-back--2 {
      display: none;
    }

    .yc-gift-hero__note-hole {
      top: -18px;
      right: 22px;
      width: 40px;
      height: 40px;
    }

    .yc-gift-hero__note-hole::after {
      width: 16px;
      height: 16px;
    }

    .yc-gift-hero__note-string {
      top: -60px;
      right: 12px;
      width: 56px;
    }

    .yc-gift-hero__note-text {
      font-size: 21px;
    }

    .yc-gift-hero__note-sign {
      font-size: 17px;
    }

    .yc-gift-hero__note-heart {
      left: 26px;
      bottom: 92px;
      width: 24px;
    }

    .yc-gift-hero__note-checker {
      left: 18px;
      right: 18px;
      bottom: 20px;
      height: 28px;
      background-size: 28px 28px;
    }

    .yc-gift-hero__mark {
      display: none;
    }

    /* Side by side the two CTAs are too cramped to stay equal here, so they go
       to an explicit column. They are already 100% wide and centred from the
       <=640 block and the base rule, so the reference's own repetition of
       `width` and `justify-content` here is dead and is not ported. */
    .yc-gift-hero__actions {
      flex-direction: column;
      align-items: stretch;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-gift-hero__btn {
      transition: none;
    }
  }
/* END_SECTION:yc-gift-hero */

/* START_SECTION:yc-gift-options (INDEX:72) */
/* `.company-section` + `--ice` — a flat 60/60 flex column, and the
     positioning context for the corner sticker. */
  .yc-gift-options {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-gift-options-pt, 60px) var(--yc-gift-options-pb, 60px);
    line-height: 1.55;
  }

  /* `.container` — 1620px max, 50px gutter, 48px stack gap between the head and
     the deck. Unlike the hero and the fork, this container HAS two children, so
     its gap is live and is ported. */
  /* ⚠ NO `position` / `z-index` HERE, deliberately — matching the reference's
     static `.container`, which leaves the positioned corner sticker painting on
     top. Section 3 proved this is not a free choice: there the sticker overlaps
     the H2 and the stacking context changed how its 0.95 opacity and drop-shadow
     composited. It changes nothing measurable on this section, and the two are
     kept consistent. */
  .yc-gift-options__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.sticker` + `.section-sticker` + `.badge-wide`. The width cascade is worth
     knowing: `.sticker` sets 92px, `.section-sticker` 96px, and `.badge-wide`
     (the page's own rule, later in the document) wins at 140px. z-index is
     `.section-sticker`'s 1, not `.sticker`'s 3, for the same reason. */
  .yc-gift-options__sticker {
    position: absolute;
    z-index: 1;
    width: var(--yc-gift-options-sticker-w, 140px);
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgb(46 46 46 / 18%));
  }

  .yc-gift-options__sticker--tr {
    top: 40px;
    right: 3%;
    transform: rotate(12deg);
  }

  .yc-gift-options__sticker--tl {
    top: 40px;
    left: 3%;
    transform: rotate(-14deg);
  }

  /* `.section-head` with `.company-section .section-head` — 660px, centred.
     Note 660, not the 620 the Company and Contact pages use. */
  .yc-gift-options__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 660px;
    margin-inline: auto;
    text-align: center;
  }

  /* `.eyebrow` — 12/700 uppercase pill, line-height pinned to the prototype's
     --lh-body so the pill keeps its reference height. */
  .yc-gift-options__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* `.eyebrow--outline` — white fill and an INK border. */
  .yc-gift-options__eyebrow--outline {
    background-color: #ffffff;
    border-color: #2e2e2e;
  }

  .yc-gift-options__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 base at --fs-h2, which DOES ride the responsive ladder here — unlike the
     fork's heading, this one has no page-level font-size override. */
  .yc-gift-options__heading {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* `.section-subtitle` — 18/400, capped at 620px. --fs-18 is a FIXED token. */
  .yc-gift-options__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-gift-options__subtitle a {
    color: inherit;
    text-decoration: none;
  }

  /* Added, not in the reference (WCAG 2.2 AA 2.4.7). Invisible at rest. */
  .yc-gift-options__subtitle a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* `.gift-scope-note` — a translucent white pill with a 2px ink border (twice
     the 1px every other bordered thing on this page uses, which is what makes
     it read as a notice rather than a chip). Its 14px top margin ADDS to the
     head's 16px gap, so it sits 30px below the standfirst. */
  .yc-gift-options__scope {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px auto 0;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #2e2e2e;
    background-color: rgb(255 255 255 / 72%);
    border: 2px solid #2e2e2e;
    border-radius: 999px;
  }

  .yc-gift-options__scope-icon {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    opacity: 0.7;
  }

  .yc-gift-options__deck {
    position: relative;
  }

  /* `.gift-options` — the dealt deck. NO gap: the side cards tuck under the
     centre one via negative margins, and the block padding is clearance for the
     featured card, which stands taller than the fan. */
  .yc-gift-options__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.16fr 1fr;
    gap: 0;
    align-items: center;
    padding-block: 24px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* responsive.css :root ladder — --gutter 50 -> 20, --container-width -> 100%,
     --fs-h2 46 -> 36 — PLUS `.container { gap: 32px }` (responsive.css:104).
     ⚠ THAT GAP STEP IS LIVE ON THIS SECTION AND INERT ON THE OTHER TWO. The
     hero and the fork each put a single child in their container, so its stack
     gap never renders and is deliberately not ported; here the head and the
     deck are two children, so the 48 -> 32 step is a real 16px and omitting it
     moved the whole deck. Measured. */
  @media (max-width: 992px) {
    .yc-gift-options__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-gift-options__heading {
      font-size: 36px;
    }
  }

  /* gifting.html 475 — the fan tightens before it collapses. */
  @media (max-width: 1240px) {
    .yc-gift-options__grid {
      grid-template-columns: 1fr 1.1fr 1fr;
    }
  }

  /* gifting.html 485-492 — stacked, capped and centred; the featured card leads
     (its `order: -1` lives in the block). */
  @media (max-width: 900px) {
    .yc-gift-options__grid {
      grid-template-columns: 1fr;
      gap: 24px;
      max-width: var(--yc-gift-options-stack-max, 460px);
      margin-inline: auto;
      padding-block: 0;
    }
  }

  /* responsive.css --gutter -> 16, --fs-h2 -> 27, and `.section-sticker`
     hidden. */
  @media (max-width: 640px) {
    .yc-gift-options__container {
      padding-inline: 16px;
    }

    .yc-gift-options__heading {
      font-size: 27px;
    }

    .yc-gift-options__sticker {
      display: none;
    }
  }

  /* responsive.css --fs-h2 -> 24 on narrow phones. */
  @media (max-width: 380px) {
    .yc-gift-options__heading {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-gift-options */

/* START_SECTION:yc-gift-reasons (INDEX:73) */
/* `.company-section` — a flat 60/60 flex column on white, and the positioning
     context for the corner sticker. */
  .yc-gift-reasons {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-gift-reasons-pt, 60px) var(--yc-gift-reasons-pb, 60px);
    line-height: 1.55;
  }

  /* `.container` — 1620px max, 50px gutter, 48px stack gap. That gap is LIVE
     here (head + grid = two children); see the section header. */
  /* ⚠ NO `position` / `z-index` HERE, deliberately. The other ported sections
     give their container `position: relative; z-index: 1` so copy paints above
     the corner sticker. The reference's `.container` is static, which leaves the
     positioned sticker on top — and at 780px the sticker's box genuinely
     overlaps the H2's, so the stacking context is not free: it changed the
     compositing of the sticker's 0.95 opacity and drop-shadow and showed up as a
     23x12px region in the pixel diff. Measured, then removed. */
  .yc-gift-reasons__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.sticker` + `.section-sticker` + `--tl`. The width cascade: `.sticker` sets
     92px and `.section-sticker` 96px, which wins; z-index is likewise
     `.section-sticker`'s 1, not `.sticker`'s 3. */
  .yc-gift-reasons__sticker {
    position: absolute;
    z-index: 1;
    width: var(--yc-gift-reasons-sticker-w, 96px);
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgb(46 46 46 / 18%));
  }

  .yc-gift-reasons__sticker--tl {
    top: 40px;
    left: 3%;
    transform: rotate(-14deg);
  }

  .yc-gift-reasons__sticker--tr {
    top: 40px;
    right: 3%;
    transform: rotate(12deg);
  }

  /* `.section-head` with `.company-section .section-head` — 660px, centred. */
  .yc-gift-reasons__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 660px;
    margin-inline: auto;
    text-align: center;
  }

  /* `.eyebrow` — the PEACH default here, not the outlined variant. */
  .yc-gift-reasons__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-gift-reasons__eyebrow--outline {
    background-color: #ffffff;
    border-color: #2e2e2e;
  }

  .yc-gift-reasons__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 base at --fs-h2, which DOES ride the responsive ladder here — there is
     no page-level font-size override on this heading. */
  .yc-gift-reasons__heading {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* `.section-subtitle` — 18/400, capped at 620px. --fs-18 is a FIXED token. */
  .yc-gift-reasons__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-gift-reasons__subtitle a {
    color: inherit;
    text-decoration: none;
  }

  /* Added, not in the reference (WCAG 2.2 AA 2.4.7). Invisible at rest. */
  .yc-gift-reasons__subtitle a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* `.gift-why-grid` — self-reflowing, no media queries. See the section
     header: this is the reference's design, not an omission. */
  .yc-gift-reasons__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--yc-gift-reasons-card-min, 250px), 1fr));
    gap: var(--yc-gift-reasons-gap, 18px);
  }

  /* ---------- Responsive (inherited ladder only) ---------- */
  /* responsive.css :root — --gutter 50 -> 20, --container-width -> 100%,
     --fs-h2 46 -> 36 — plus `.container { gap: 32px }`, which is LIVE here. */
  @media (max-width: 992px) {
    .yc-gift-reasons__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-gift-reasons__heading {
      font-size: 36px;
    }
  }

  /* responsive.css --gutter -> 16, --fs-h2 -> 27, `.section-sticker` hidden. */
  @media (max-width: 640px) {
    .yc-gift-reasons__container {
      padding-inline: 16px;
    }

    .yc-gift-reasons__heading {
      font-size: 27px;
    }

    .yc-gift-reasons__sticker {
      display: none;
    }
  }

  /* responsive.css --fs-h2 -> 24 on narrow phones. */
  @media (max-width: 380px) {
    .yc-gift-reasons__heading {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-gift-reasons */

/* START_SECTION:yc-gift-steps (INDEX:74) */
/* `.company-section` + `--alt` — a flat 60/60 flex column on cream, and the
     positioning context for the corner sticker. */
  .yc-gift-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-gift-steps-pt, 60px) var(--yc-gift-steps-pb, 60px);
    line-height: 1.55;
  }

  /* `.container`. Its 48px stack gap is INERT here — one child — so the <=992
     step down to 32px is deliberately not ported. See the section header. */
  .yc-gift-steps__container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.sticker` + `.section-sticker` + `--tl`. `.section-sticker`'s 96px and
     z-index 1 win over `.sticker`'s 92px and z-index 3. */
  .yc-gift-steps__sticker {
    position: absolute;
    z-index: 1;
    width: var(--yc-gift-steps-sticker-w, 96px);
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgb(46 46 46 / 18%));
  }

  .yc-gift-steps__sticker--tl {
    top: 40px;
    left: 3%;
    transform: rotate(-14deg);
  }

  .yc-gift-steps__sticker--tr {
    top: 40px;
    right: 3%;
    transform: rotate(12deg);
  }

  /* `.gift-how` — the band's own 36px rhythm, which is why the container's gap
     is not needed. */
  .yc-gift-steps__layout {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }

  /* `.section-head` with `.company-section .section-head` — 660px, centred. */
  .yc-gift-steps__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 660px;
    margin-inline: auto;
    text-align: center;
  }

  .yc-gift-steps__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* `.eyebrow--outline` — white fill and an INK border. */
  .yc-gift-steps__eyebrow--outline {
    background-color: #ffffff;
    border-color: #2e2e2e;
  }

  .yc-gift-steps__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 base at --fs-h2, which rides the responsive ladder — no page-level
     font-size override on this heading. */
  .yc-gift-steps__heading {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* `.section-subtitle` — 18/400, capped at 620px. --fs-18 is FIXED. */
  .yc-gift-steps__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-gift-steps__subtitle a {
    color: inherit;
    text-decoration: none;
  }

  /* Added, not in the reference (WCAG 2.2 AA 2.4.7). Invisible at rest. */
  .yc-gift-steps__subtitle a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* `.gift-steps` — card, connector, card, connector, card. `gap: 0` because
     the connector tracks ARE the gaps; the top padding is clearance for the
     coins, which hang half above each card. */
  .yc-gift-steps__grid {
    position: relative;
    display: grid;
    grid-template-columns: var(--yc-gift-steps-tracks, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
    padding-top: 26px;
  }

  /* Every step emits a trailing connector; the last one has nothing to connect
     to, so it is dropped here rather than by a per-block toggle. `display: none`
     also removes it from grid flow, which is what keeps the item count equal to
     the track count. */
  .yc-gift-steps__grid > :last-child {
    display: none;
  }

  /* `.gift-how__foot` — the callout and the CTA share one line. */
  .yc-gift-steps__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  /* `.gift-callout` — a one-line notice pill. `margin-inline: auto` from the
     base rule is overridden to 0 in this row, so only the winning value is
     shipped. */
  .yc-gift-steps__callout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    gap: 12px;
    padding: 8px 20px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 999px;
  }

  .yc-gift-steps__callout-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 16px;
    color: #2e2e2e;
    background-color: var(--yc-gift-steps-callout-icon, #ffc7ac);
    border: 1px solid #2e2e2e;
    border-radius: 50%;
  }

  .yc-gift-steps__callout-glyph {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  .yc-gift-steps__callout p {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: #2e2e2e;
  }

  .yc-gift-steps__callout strong {
    font-weight: 700;
  }

  /* `.btn` — and `.gift-how__foot .btn { flex: 0 0 auto }` so it does not
     stretch beside the pill. The reference defines no hover for this variant. */
  .yc-gift-steps__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #ffffff;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .yc-gift-steps__btn--purple {
    color: #ffffff;
    background-color: #4036d6;
  }

  .yc-gift-steps__btn--white {
    color: #2e2e2e;
    background-color: #ffffff;
  }

  .yc-gift-steps__btn--ink {
    color: #ffffff;
    background-color: #2e2e2e;
  }

  /* Added. The reference's global focus rule would also snap the pill to a 4px
     radius; that cascade artefact is not reproduced, the ring is. */
  .yc-gift-steps__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-gift-steps__btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* responsive.css :root — --gutter 50 -> 20, --container-width -> 100%,
     --fs-h2 46 -> 36. The container's gap step is inert here; see the header. */
  @media (max-width: 992px) {
    .yc-gift-steps__container {
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-gift-steps__heading {
      font-size: 36px;
    }
  }

  /* gifting.html 578-582 — the connector tracks narrow before they go. */
  @media (max-width: 1080px) {
    .yc-gift-steps__grid {
      grid-template-columns: var(--yc-gift-steps-tracks-narrow, minmax(0, 1fr));
    }
  }

  /* gifting.html 583-589 — stacked: one column, and the connectors are hidden
     by the block's own rule. */
  @media (max-width: 860px) {
    .yc-gift-steps__grid {
      grid-template-columns: 1fr;
      gap: 44px;
    }
  }

  /* responsive.css --gutter -> 16, --fs-h2 -> 27, `.section-sticker` hidden and
     `.btn { width: 100% }`. */
  @media (max-width: 640px) {
    .yc-gift-steps__container {
      padding-inline: 16px;
    }

    .yc-gift-steps__heading {
      font-size: 27px;
    }

    .yc-gift-steps__sticker {
      display: none;
    }

    .yc-gift-steps__btn {
      width: 100%;
    }
  }

  /* gifting.html 590-593 — the pill squares off and reads left once it wraps. */
  @media (max-width: 600px) {
    .yc-gift-steps__callout {
      border-radius: 24px;
      text-align: left;
    }
  }

  /* responsive.css --fs-h2 -> 24 on narrow phones. */
  @media (max-width: 380px) {
    .yc-gift-steps__heading {
      font-size: 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-gift-steps__btn {
      transition: none;
    }
  }
/* END_SECTION:yc-gift-steps */

/* START_SECTION:yc-gift-unsure (INDEX:75) */
/* `.company-section` + `--alt` — a flat 60/60 flex column on cream. */
  .yc-gift-unsure {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-gift-unsure-pt, 60px) var(--yc-gift-unsure-pb, 60px);
    line-height: 1.55;
  }

  /* `.container` — 1620px max, 50px gutter, 48px stack gap. */
  /* The gap and its 48 -> 32px step at <=992 are INERT here, because this
     container holds ONE child, the card. They are still declared, so the
     section reads the same as its five siblings and a merchant who adds a
     second child gets the reference's spacing rather than none. On sections 3,
     4 and 6 the same step is live. Child count decides, every time. */
  .yc-gift-unsure__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.gift-unsure` — the white card, and the positioning context for the badge. */
  .yc-gift-unsure__card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(0, 460px);
    gap: 40px;
    align-items: center;
    padding: 44px;
    background-color: var(--yc-gift-unsure-card-bg, #ffffff);
    border: 1px solid #2e2e2e;
    border-radius: 32px;
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* `.sticker` + `.gift-unsure__badge`. NOTE: no `opacity` — that belongs to the
     `.section-sticker` variant, which this is not. See the section header. */
  .yc-gift-unsure__badge {
    position: absolute;
    z-index: 3;
    top: -34px;
    right: 26px;
    width: var(--yc-gift-unsure-badge-w, 104px);
    height: auto;
    pointer-events: none;
    transform: rotate(-8deg);
    filter: drop-shadow(3px 3px 0 rgb(46 46 46 / 18%));
  }

  /* ---------- Left column ---------- */
  .yc-gift-unsure__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* `.eyebrow` — the PEACH default here, not the outlined variant. */
  .yc-gift-unsure__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-gift-unsure__eyebrow--outline {
    background-color: #ffffff;
    border-color: #2e2e2e;
  }

  .yc-gift-unsure__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* This H2 sets its OWN size, so it does not ride the --fs-h2 responsive
     ladder the other bands' headings do. */
  .yc-gift-unsure__heading {
    margin: 0;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* The richtext paragraphs are direct children of the flex column. */
  .yc-gift-unsure__copy p {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* The prototype's bare `a` rule. Inherited, and an open 1.4.1 item — see the
     section header. */
  .yc-gift-unsure__copy a {
    color: inherit;
    text-decoration: none;
  }

  /* Added, not in the reference (WCAG 2.2 AA 2.4.7). Invisible at rest. */
  .yc-gift-unsure__copy a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ---------- Right column ---------- */
  .yc-gift-unsure__panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background-color: var(--yc-gift-unsure-panel-bg, #8b89c8);
    border: 1px solid #2e2e2e;
    border-radius: 24px;
  }

  /* The badge hangs over this panel's top-right corner above 860px, so the copy
     needs clearance from it rather than running under it. */
  .yc-gift-unsure__panel-title {
    margin: 0;
    padding-right: 76px;
    font-size: clamp(19px, 1.7vw, 23px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--yc-gift-unsure-panel-fg, #ffffff);
  }

  .yc-gift-unsure__panel p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--yc-gift-unsure-panel-fg, #ffffff);
  }

  /* ⚠ SCOPED TO `p a` ON PURPOSE, AND IT MUST STAY THAT WAY. Written as
     `.yc-gift-unsure__panel a` this rule is specificity 0,1,1 and outranks
     `.yc-gift-unsure__btn` at 0,1,0 — it turned the button's label ink instead
     of white, which the box measurement caught at every width. The reference is
     safe only because its equivalent is the bare `a` element selector at 0,0,1,
     which loses to `.btn`. Restricting this to links inside a paragraph keeps
     the button out of its reach entirely. */
  .yc-gift-unsure__panel p a {
    color: inherit;
    text-decoration: none;
  }

  .yc-gift-unsure__panel p a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* `.btn` */
  .yc-gift-unsure__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #ffffff;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .yc-gift-unsure__btn--purple {
    color: #ffffff;
    background-color: #4036d6;
  }

  .yc-gift-unsure__btn--white {
    color: #2e2e2e;
    background-color: #ffffff;
  }

  .yc-gift-unsure__btn--ink {
    color: #ffffff;
    background-color: #2e2e2e;
  }

  /* Added. The reference's global focus rule would also snap the pill to a 4px
     radius; that cascade artefact is not reproduced, the ring is. */
  .yc-gift-unsure__btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
  }

  .yc-gift-unsure__btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  /* ---------- Responsive ---------- */
  /* responsive.css :root — --gutter 50 -> 20, --container-width -> 100%. The
     container's gap step is inert here; see above. */
  @media (max-width: 992px) {
    .yc-gift-unsure__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }
  }

  /* The section's own 860px step: one column, and the panel's H3 no longer has
     to keep clear of the badge. */
  @media (max-width: 860px) {
    .yc-gift-unsure__card {
      grid-template-columns: 1fr;
      padding: 28px;
    }

    .yc-gift-unsure__panel-title {
      padding-right: 0;
    }
  }

  /* responsive.css --gutter -> 16, and `.btn { width: 100% }`. The badge is a
     bare `.sticker`, so the `.section-sticker` hide rule does NOT reach it. */
  @media (max-width: 640px) {
    .yc-gift-unsure__container {
      padding-inline: 16px;
    }

    .yc-gift-unsure__btn {
      width: 100%;
    }
  }

  /* The section's own 600px step: the card makes room at the top and the badge
     shrinks, rather than being hidden. */
  @media (max-width: 600px) {
    .yc-gift-unsure__card {
      padding-top: 76px;
    }

    .yc-gift-unsure__badge {
      top: -24px;
      right: 12px;
      width: 84px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-gift-unsure__btn {
      transition: none;
    }
  }
/* END_SECTION:yc-gift-unsure */

/* START_SECTION:yc-giveaway-rules (INDEX:76) */
/* Flex column on the page ground, no background unless the merchant sets one
     — the same model as `.yc-policy-copy`. The reference body is 16px/1.55
     (15 at <=992, 14 at <=640); Horizon's is 14px/1.6, so it is restated here
     and inherited by every rule. text-align is pinned left: this renders inside
     Horizon's `.section` wrapper, so stating it keeps the result identical
     wherever the section is placed. */
  .yc-giveaway-rules {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    text-align: left;
    color: #2e2e2e;
    background-color: var(--yc-rules-bg, transparent);
  }

  /* `.container` — 1620px max, 50px gutter, 48px stack gap. The gap never
     renders (one child) but is ported so the section behaves like every other
     container if a second element is ever added. */
  .yc-giveaway-rules__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    align-self: center;
    padding-inline: 50px;
  }

  /* The prose column. See the header note on why this is capped, not fixed.

     ⚠ THE `100%` IN THE max-width IS LOAD-BEARING — do not simplify it back to
     the bare token. `margin-inline: auto` makes this box shrink-to-fit, and
     shrink-to-fit resolves to AT LEAST its min-content width: rule 11 prints
     the privacy-policy URL in full, an unbreakable 304px token at 14px, which
     floated the column to 342px inside a 278px container at 320px wide and put
     a horizontal scrollbar on the whole page. `min()` clamps the column to the
     container first, and `overflow-wrap` on the rule text then breaks the URL.
     Measured at 320px: 342px before, 278px after. */
  .yc-giveaway-rules__body {
    display: flex;
    flex-direction: column;
    max-width: min(var(--yc-rules-max, 820px), 100%);
    margin-inline: auto;
  }

  .yc-giveaway-rules__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
  }

  /* h2 base (--lh-heading 1.05, --ls-heading -0.03em) at --fs-h4.
     LADDERED: 24 -> 22 at <=992 -> 18 at <=640, matching `yc-final-note`. */
  .yc-giveaway-rules__heading {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* Horizon's base.css zeroes the last child's bottom margin at (0,1,1), which
     beats a single class — hence the two-class scope on the sibling rules
     below, the same trap documented in sections/yc-final-note.liquid. */
  .yc-giveaway-rules__intro > :is(p, ul, ol) {
    margin: 0;
    font-size: inherit;
    line-height: 1.55;
    color: inherit;
  }

  .yc-giveaway-rules__body .yc-giveaway-rules__intro > * + * {
    margin-top: 12px;
  }

  /* `role="list"` keeps the semantics that `list-style: none` removes in
     WebKit — see the header note. */
  .yc-giveaway-rules__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .yc-giveaway-rules__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  /* A hairline between rules, so 13 dense clauses stay scannable. The divider
     colour doubles as the on/off switch: leaving the setting empty emits no
     custom property, the fallback is `transparent`, and the rule disappears —
     no second setting and no second code path. */
  .yc-giveaway-rules__item + .yc-giveaway-rules__item {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--yc-rules-divider, transparent);
  }

  /* The number pill. Decorative only — the <ol> numbers the items for
     assistive tech, so this carries aria-hidden and must never be the only
     place the number exists. */
  .yc-giveaway-rules__num {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background-color: var(--yc-rules-num-bg, #ede9fd);
    color: var(--yc-rules-num-fg, #4036d6);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  /* `min-width: 0` so a long unbroken URL inside a rule shrinks the column
     instead of overflowing the flex row. */
  .yc-giveaway-rules__text {
    min-width: 0;
    padding-top: 4px;
    overflow-wrap: anywhere;
  }

  /* `p` base: body size and 1.55, no margin of its own — the prototype's reset
     zeroes it and the spacing is the sibling rule below. */
  .yc-giveaway-rules__text > :is(p, ul, ol) {
    margin: 0;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.55;
    color: inherit;
  }

  /* 12px between the paragraphs of a single multi-part rule (rule 7 of the
     Giveaway rules is four). FIXED — it does not ladder. Two-class scope for
     the same base.css reason as the intro above. */
  .yc-giveaway-rules__body .yc-giveaway-rules__text > * + * {
    margin-top: 12px;
  }

  .yc-giveaway-rules__text :is(ul, ol) {
    padding-inline-start: 20px;
  }

  /* Matches `.yc-policy-copy__p a` — purple, semibold, no underline. */
  .yc-giveaway-rules__text a,
  .yc-giveaway-rules__intro a {
    color: var(--yc-rules-link, #4036d6);
    font-weight: 600;
    text-decoration: none;
  }

  /* Not in the reference — keyboard only, so the resting design is untouched
     (WCAG 2.4.7). */
  .yc-giveaway-rules__text a:focus-visible,
  .yc-giveaway-rules__intro a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */

  /* responsive.css 18-33: --fs-body 15, --gutter 20, --container-width 100%,
     `.container` gap 48 -> 32; --fs-h4 24 -> 22. */
  @media (max-width: 992px) {
    .yc-giveaway-rules {
      font-size: 15px;
    }

    .yc-giveaway-rules__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-giveaway-rules__heading {
      font-size: 22px;
    }
  }

  /* responsive.css 110-124: --fs-body 14, --gutter 16; --fs-h4 18. */
  @media (max-width: 640px) {
    .yc-giveaway-rules {
      font-size: 14px;
    }

    .yc-giveaway-rules__container {
      padding-inline: 16px;
    }

    .yc-giveaway-rules__heading {
      font-size: 18px;
    }

    .yc-giveaway-rules__head {
      margin-bottom: 24px;
    }

    .yc-giveaway-rules__item {
      gap: 12px;
    }

    .yc-giveaway-rules__item + .yc-giveaway-rules__item {
      margin-top: 20px;
      padding-top: 20px;
    }

    .yc-giveaway-rules__num {
      width: 26px;
      height: 26px;
      font-size: 13px;
    }

    .yc-giveaway-rules__text {
      padding-top: 2px;
    }
  }
/* END_SECTION:yc-giveaway-rules */

/* START_SECTION:yc-guarantee (INDEX:77) */
/* .guarantee-band (style.css 577-585) / .company-section (company.html 48-56).
     Padding through custom properties so the breakpoint steps below override
     it without !important. Body size/leading are the reference's (16px/1.55);
     Horizon's are 14px/1.6, and the eyebrow pill and lead inherit them. */
  .yc-guarantee {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-guarantee-pt, 140px) var(--yc-guarantee-pb, 80px);
    font-size: 16px;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* ---------- Corner badge (optional) ---------- */
  /* .sticker (1068-1075) + .section-sticker (1093-1097): width, inset and
     hide-breakpoint are settings; the rotation comes with the corner. z-index
     2 puts it above the card, as the reference's positioned sticker paints
     above its static .container (company.html 384-389: "tucked into the corner
     so it overlaps only the card's empty padding"). */
  .yc-guarantee__sticker {
    position: absolute;
    z-index: 2;
    width: var(--yc-guarantee-sticker-w, 96px);
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-guarantee__sticker--tl {
    top: var(--yc-guarantee-sticker-y, 40px);
    left: var(--yc-guarantee-sticker-x, 3%);
    transform: rotate(-14deg);
  }

  .yc-guarantee__sticker--tr {
    top: var(--yc-guarantee-sticker-y, 40px);
    right: var(--yc-guarantee-sticker-x, 3%);
    transform: rotate(12deg);
  }

  .yc-guarantee__sticker--bl {
    bottom: var(--yc-guarantee-sticker-y, 48px);
    left: var(--yc-guarantee-sticker-x, 4%);
    transform: rotate(-10deg);
  }

  /* Wave divider — top edge, flipped to curve upward */
  .yc-guarantee__wave {
    position: absolute;
    left: 0;
    top: -1px;
    width: 200%;
    line-height: 0;
    pointer-events: none;
    transform: scaleY(-1);
    z-index: 0;
  }

  .yc-guarantee__wave-svg {
    display: block;
    width: 200%;
    height: 90px;
    animation: yc-guarantee-wave 14s linear infinite;
  }

  @keyframes yc-guarantee-wave {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .yc-guarantee__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  .yc-guarantee.section--full-width .yc-guarantee__container {
    max-width: none;
  }

  /* Promise card */
  .yc-guarantee__card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
    padding: 48px;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 32px;
  }

  /* Decorative shape, bottom-right of the card */
  .yc-guarantee__shape {
    position: absolute;
    right: 180px;
    bottom: 40px;
    z-index: 0;
    width: 100px;
    height: auto;
    border-radius: 0 0 32px 0;
    pointer-events: none;
  }

  /* Stamp-style seal, pinned to the top-right corner */
  .yc-guarantee__seal {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #FFC7AC;
    border: 1px solid #e2e1ee;
    color: #2e2e2e;
    text-align: center;
    transform: translateY(-45%) rotate(-8deg);
    animation: yc-guarantee-seal-bob 3.2s ease-in-out infinite;
  }

  .yc-guarantee__seal::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px dashed rgba(46, 46, 46, 0.35);
  }

  .yc-guarantee__seal-icon {
    width: 48px;
    height: 48px;
  }

  @keyframes yc-guarantee-seal-bob {
    0%, 100% { transform: translateY(-45%) rotate(-8deg); }
    50% { transform: translateY(-58%) rotate(4deg); }
  }

  .yc-guarantee__seal-text {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
  }

  /* Body */
  .yc-guarantee__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 0;
  }

  .yc-guarantee__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #FFC7AC;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-guarantee__eyebrow-icon {
    width: 1em;
    height: 1em;
  }

  .yc-guarantee__title {
    margin: 0;
    font-size: 46px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* `.guarantee__body h2 { padding-right: 140px }` (company.html 500): keeps the
     headline clear of the seal's footprint. Off by default; 0 at <=992. */
  .yc-guarantee__title--clear-seal {
    padding-right: 140px;
  }

  .yc-guarantee__lead {
    font-size: 16px;
    font-weight: 400;
    color: #6b6b6b;
  }

  .yc-guarantee__lead > :first-child { margin-top: 0; }
  .yc-guarantee__lead > :last-child { margin-bottom: 0; }

  .yc-guarantee__points {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .yc-guarantee__point {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #2e2e2e;
  }

  .yc-guarantee__point-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #0FB654;
  }

  /* `.company-cta__actions` (company.html 492-496) */
  .yc-guarantee__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  /* .btn (style.css 698-715) */
  .yc-guarantee__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #ffffff;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .yc-guarantee__btn--purple {
    background-color: #4036d6;
    color: #ffffff;
  }

  /* Addition, not in the reference (no `.btn--purple:hover` there) — kept as it
     shipped on the home page. */
  .yc-guarantee__btn--purple:hover {
    background-color: #2f2799;
  }

  /* .btn--white (737-740). No hover in the reference; none here. */
  .yc-guarantee__btn--white {
    background-color: #ffffff;
    color: #2e2e2e;
  }

  .yc-guarantee__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  /* flex: none — the reference's <i> cannot shrink below its glyph, and neither
     may this svg when a narrow button squeezes its label (measured 14.8px at
     320 without it). */
  .yc-guarantee__btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-flex;
  }

  /* ----- Responsive ----- */
  /* responsive.css 18-33: --section-padding-y 80 -> 64 (band ladder 124/64),
     --fs-h2 36, --gutter 20; company.html 504-507: seal clearance off, the
     button row centred (invisible with one button). */
  @media (max-width: 992px) {
    .yc-guarantee {
      padding-block: var(--yc-guarantee-pt-md, 124px) var(--yc-guarantee-pb-md, 64px);
      font-size: 15px;
    }
    .yc-guarantee__container { padding-inline: 20px; }
    .yc-guarantee__title { font-size: 36px; }
    .yc-guarantee__title--clear-seal { padding-right: 0; }
    .yc-guarantee__actions { justify-content: center; }
  }

  /* Seal overlaps the centred copy once the section stacks — drop it
     (v3.css 379-401, `.page-v3 .guarantee__seal`). */
  @media (max-width: 760px) {
    .yc-guarantee__seal { display: none; }
  }

  /* responsive.css 110-124 + 612-625 + 759: --section-padding-y 48 (band
     ladder 108/48), --fs-h2 27, --gutter 16; the card stacks and centres;
     `.btn { width: 100% }`. */
  @media (max-width: 640px) {
    .yc-guarantee {
      padding-block: var(--yc-guarantee-pt-sm, 108px) var(--yc-guarantee-pb-sm, 48px);
      font-size: 14px;
    }
    .yc-guarantee__container { padding-inline: 16px; }
    .yc-guarantee__title { font-size: 27px; }
    /* Top padding is 32px, not the 80px it was. The 80px was clearance for the
       seal, which straddles the card's top edge on desktop — but the seal is
       already `display: none` from 760px down (rule above), so below 640px
       those 80px reserved room for nothing: measured 81px of empty card above
       the eyebrow (client note, Oct 2026). The sticker cannot need it either —
       it is a child of `.yc-guarantee`, not the card, and every instance
       positions it `bl`. 32px matches the bottom, so the card is evenly padded.
       ⚠ If a future instance ever puts a sticker `tl`/`tr` AND shows it below
       640px, that one needs its own top padding — this rule no longer provides
       incidental cover. */
    .yc-guarantee__card {
      flex-direction: column;
      text-align: center;
      gap: 24px;
      padding: 32px 24px;
    }
    .yc-guarantee__body {
      align-items: center;
      text-align: center;
    }
    /* NOT `justify-content: center` on the points, and NOT `width: 100%` on the
       button row: the reference has neither. Its centred body shrink-wraps
       both — the wrapped points sit LEFT-aligned inside a full-width list, and
       the row is exactly as wide as its widest button, which `.btn { width:
       100% }` then fills (measured: row 549px inside a 558px body at 640).
       Both were pre-existing deviations on the home page (Batch 93). */
    .yc-guarantee__btn { width: 100%; }
    .yc-guarantee__shape { display: none; }
    .yc-guarantee__sticker--hide-640 { display: none; }
  }

  @media (max-width: 900px) {
    .yc-guarantee__sticker--hide-900 { display: none; }
  }

  @media (max-width: 1100px) {
    .yc-guarantee__sticker--hide-1100 { display: none; }
  }

  @media (max-width: 380px) {
    .yc-guarantee__title { font-size: 24px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-guarantee__wave-svg,
    .yc-guarantee__seal {
      animation: none;
    }
  }
/* END_SECTION:yc-guarantee */

/* START_SECTION:yc-materials-badges (INDEX:78) */
/* materials.html `.company-section`. */
  .yc-materials-badges {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* `.container` — 1620px max, 50px gutter, 48px stack gap (32 at <=992). */
  .yc-materials-badges__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.company-section .section-head` — centred, capped at 620px. This band IS
     a `.company-section`, unlike the specs band above it. */
  .yc-materials-badges__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  .yc-materials-badges__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-materials-badges__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  .yc-materials-badges__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* Not in the reference's own markup — this band has no standfirst — but the
     setting exists, so it is styled to `.section-subtitle` for when it is used. */
  .yc-materials-badges__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* materials.html `.trust-badges-row`. `align-items: flex-start` keeps the
     badge artwork on one line when a caption below it wraps to two. */
  .yc-materials-badges__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding-top: 8px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* The badge row itself has NO responsive rules in the reference: five 128px
     columns with a 24px gap simply wrap. Only the shared container and heading
     ladder step. */
  @media (max-width: 992px) {
    .yc-materials-badges__container {
      gap: 32px;
      padding-inline: 20px;
    }

    .yc-materials-badges__title {
      font-size: 36px;
    }
  }

  @media (max-width: 640px) {
    .yc-materials-badges__container {
      padding-inline: 16px;
    }

    .yc-materials-badges__title {
      font-size: 27px;
    }
  }

  @media (max-width: 380px) {
    .yc-materials-badges__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-materials-badges */

/* START_SECTION:yc-materials-cta (INDEX:79) */
/* materials.html `.company-section.company-section--flush-top`. */
  .yc-materials-cta {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* `.container`. Only one child here, so its 48/32px stack gap never shows —
     carried over anyway so the container stays faithful to the component. */
  .yc-materials-cta__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* ---------- Corner seal ---------- */
  /* `.mat-seal`. box-shadow is genuinely NONE: the reference sets
     `var(--shadow-hard-sm)`, which resolves to `none` (it is the resting
     token). Border is #e2e1ee, the standard hairline, not ink. */
  .yc-materials-cta__seal {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 104px;
    height: 104px;
    padding: 8px;
    text-align: center;
    color: #2e2e2e;
    background-color: var(--yc-seal-fill, #ffc7ac);
    border: 1px solid #e2e1ee;
    border-radius: 50%;
    box-shadow: none;
    pointer-events: none;
  }

  .yc-materials-cta__seal--top-right {
    top: 28px;
    right: 3%;
    transform: rotate(8deg);
  }

  /* `.mat-seal--tl` — the base tilt is the other way. */
  .yc-materials-cta__seal--top-left {
    top: 28px;
    left: 3%;
    transform: rotate(-8deg);
  }

  .yc-materials-cta__seal-icon {
    width: 20px;
    height: 20px;
  }

  .yc-materials-cta__seal strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.05;
  }

  .yc-materials-cta__seal > span {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* ---------- Panel ---------- */
  /* `.materials-cta` — dusty purple, not the indigo primary. */
  .yc-materials-cta__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 40px 32px;
    text-align: center;
    color: #ffffff;
    background-color: var(--yc-cta-fill, #8b89c8);
    border: 1px solid #e2e1ee;
    border-radius: 32px;
  }

  /* `.eyebrow` — unchanged on this fill: ink on peach, as everywhere else. */
  .yc-materials-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-materials-cta__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* `--fs-h3` (32 -> 26 -> 21), 700, pure white. */
  .yc-materials-cta__title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #ffffff;
  }

  /* Full white, no opacity — the reference's own note: 16px text on this fill
     needs all the contrast it can get. */
  .yc-materials-cta__text {
    margin: 0;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.55;
    color: #ffffff;
  }

  /* `.btn.btn--white` with the page's `color: var(--color-purple)` override. */
  .yc-materials-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    text-decoration: none;
    color: #4036d6;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  /* `.btn__icon` is 18px in the reference. */
  .yc-materials-cta__button-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  /* ADDITION. The reference has NO `.btn:hover` or `.btn:focus` rule anywhere
     in style.css, v3.css or responsive.css — the resting state is all there is.
     The hover gap is reproduced as-is (it is the reference's design, and a
     client decision to change), but a keyboard user must be able to SEE the
     button, so a focus ring is added (WCAG 2.4.7). Indigo on white measures
     6.64:1; the offset keeps it clear of the white fill. */
  .yc-materials-cta__button:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 3px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  @media (max-width: 992px) {
    .yc-materials-cta__container {
      gap: 32px;
      padding-inline: 20px;
    }

    /* responsive.css: --fs-h3 32 -> 26. */
    .yc-materials-cta__title {
      font-size: 26px;
    }
  }

  /* responsive.css --gutter -> 16 and --fs-h3 -> 21; the page block hides the
     seal, which would crowd the panel at phone widths. */
  @media (max-width: 640px) {
    .yc-materials-cta__container {
      padding-inline: 16px;
    }

    .yc-materials-cta__seal {
      display: none;
    }

    .yc-materials-cta__title {
      font-size: 21px;
    }

    /* responsive.css:759 — `.btn { width: 100% }` inside the <=640 block. The
       button stops being shrink-to-fit and spans the panel's inner width, so
       it GROWS as the viewport narrows (measured 383px at 481 down to 277px at
       375, against a constant 252px when this rule is missed). Easy to
       overlook: it lives in the shared stylesheet, not the page block. */
    .yc-materials-cta__button {
      width: 100%;
    }
  }
/* END_SECTION:yc-materials-cta */

/* START_SECTION:yc-materials-layers (INDEX:80) */
/* materials.html `.company-section` — relative so the corner sticker
     anchors to the band. */
  .yc-materials-layers {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* `.container` — 1620px max, 50px gutter, 48px stack gap. Unlike the hero,
     this band does NOT pin the gap: the reference lets responsive.css step it
     to 32px at <=992, and here it is visible because the container has two
     children (the head and the slider). */
  .yc-materials-layers__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.sticker` + `.section-sticker` + `--tl`, flattened. `.section-sticker`
     is declared after `.sticker` in style.css, so its z-index 1 and 96px width
     win over the base 3 / 92px. `.badge-wide` (page block, later still) then
     takes the width to 132px for landscape artwork. */
  .yc-materials-layers__sticker {
    position: absolute;
    top: 40px;
    left: 3%;
    z-index: 1;
    width: 96px;
    height: auto;
    opacity: 0.95;
    transform: rotate(-14deg);
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-materials-layers__sticker--wide {
    width: 132px;
  }

  /* `.company-section .section-head` — centred, capped at 620px. */
  .yc-materials-layers__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  /* `.eyebrow` — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius.
     line-height pinned to the prototype's --lh-body (1.55) so the pill keeps
     its reference height whatever the theme's global line-height is. */
  .yc-materials-layers__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-materials-layers__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 base: --fs-h2 46 -> 36 at <=992 -> 27 at <=640, Poppins 700,
     --lh-heading 1.05, --ls-heading -0.03em. */
  .yc-materials-layers__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* `.section-subtitle` — 18px/400, capped at 620px. */
  .yc-materials-layers__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* `.slider` + `.slider--materials`. */
  .yc-materials-layers__slider {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0;
  }

  /* `.slider__track` with `.material-grid`'s 32px gap (which overrides the
     track's own 24px) and `align-items: stretch`, so every card matches the
     tallest in view. */
  .yc-materials-layers__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .yc-materials-layers__track::-webkit-scrollbar {
    display: none;
  }

  /* Two cards per view; the 32px gap is split out of each card's share.
     `> *` rather than a class, because the blocks are `"tag": null` and this
     rule belongs to whatever the track is holding. */
  .yc-materials-layers__track > * {
    flex: 0 0 calc(50% - 16px);
    scroll-snap-align: start;
  }

  /* Not in the reference, which leaves the focusable track with no focus
     style. It is `tabindex="0"`, so it must show focus (WCAG 2.4.7). */
  .yc-materials-layers__track:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 4px;
    border-radius: 24px;
  }

  /* `.slider__dots`, with `.slider--materials`'s 15px gap. `position:
     relative` is this section's contribution: the autoplay control in
     `yc-mobile-slider.css` anchors to this row, and being out of flow is what
     keeps the dots on the reference's centre line. */
  .yc-materials-layers__dots {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* responsive.css --gutter 50 -> 20, .container gap 48 -> 32, --fs-h2 -> 36. */
  @media (max-width: 992px) {
    .yc-materials-layers__container {
      gap: 32px;
      padding-inline: 20px;
    }

    .yc-materials-layers__title {
      font-size: 36px;
    }
  }

  /* materials.html @860: back to one card per view — two would be too narrow
     to read. */
  @media (max-width: 860px) {
    .yc-materials-layers__track > * {
      flex: 0 0 100%;
    }
  }

  /* responsive.css --gutter -> 16, --fs-h2 -> 27, and `.section-sticker
     { display: none }` — the accents crowd the copy at phone widths. */
  @media (max-width: 640px) {
    .yc-materials-layers__container {
      padding-inline: 16px;
    }

    .yc-materials-layers__sticker {
      display: none;
    }

    .yc-materials-layers__title {
      font-size: 27px;
    }
  }

  /* responsive.css: --fs-h2 -> 24 on narrow phones. */
  @media (max-width: 380px) {
    .yc-materials-layers__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-materials-layers */

/* START_SECTION:yc-materials-notinit (INDEX:81) */
/* materials.html `.not-in-it-band` — flex column, centred, TOP padding only. */
  .yc-notinit {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: var(--yc-notinit-pad-top, 40px) var(--yc-notinit-pad-bottom, 0px);
  }

  /* `.container`. Single child, so its 48px stack gap never shows — carried
     over so the container stays faithful to the shared component. */
  .yc-notinit__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.not-in-it` — ice fill with an INK hairline, like the spec cards. */
  .yc-notinit__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    padding: 32px;
    text-align: center;
    background-color: var(--yc-notinit-fill, #e4f5ff);
    border: 1px solid #2e2e2e;
    border-radius: 24px;
  }

  .yc-notinit__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-notinit__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* `.not-in-it h2` — --fs-h3 (32 -> 26 -> 21), 700. */
  .yc-notinit__title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-notinit__lead {
    margin: 0;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* `.not-in-it__list`. The pills themselves are `_yc-notinit-item` blocks. */
  .yc-notinit__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* `.not-in-it__origin` — separated by a 15%-ink rule, full panel width. */
  .yc-notinit__origin {
    display: flex;
    /* flex-start, not center: once the sentence wraps (it does from ~640px
       down) `center` floats the pin into the gutter between the two lines.
       The pin is then optically centred on the FIRST line by the icon's own
       margin below — on a single line that margin reproduces `center`
       exactly, so wide screens are unchanged (client note, Oct 2026). */
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(46, 46, 46, 0.15);
    font-size: 14px;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-notinit__origin-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    /* Centre the 18px pin on the first line box. 1.55em mirrors the row's own
       `line-height: 1.55` at its own `font-size: 14px` → (21.7 - 18) / 2 =
       1.85px. Keep this in step if either of those two values changes. */
    margin-block-start: calc((1.55em - 18px) / 2);
    color: #4036d6;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  @media (max-width: 992px) {
    .yc-notinit__container {
      gap: 32px;
      padding-inline: 20px;
    }

    .yc-notinit__title {
      font-size: 26px;
    }
  }

  @media (max-width: 640px) {
    .yc-notinit {
      padding-top: var(--yc-notinit-pad-top-sm, 24px);
    }

    .yc-notinit__container {
      padding-inline: 16px;
    }

    .yc-notinit__panel {
      padding: 24px 16px;
    }

    .yc-notinit__title {
      font-size: 21px;
    }
  }
/* END_SECTION:yc-materials-notinit */

/* START_SECTION:yc-materials-specs (INDEX:82) */
/* materials.html `.spec-band`. `overflow: hidden` keeps the checker's
     right-anchored band from widening the page. */
  .yc-materials-specs {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-block: var(--yc-specs-pad-top, 60px) var(--yc-specs-pad-bottom, 140px);
  }

  /* `.spec-band .container` — z-index 1 lifts the content over the checker. */
  .yc-materials-specs__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.sticker` + `.section-sticker` + `--tr`, flattened, with `.badge-wide`. */
  .yc-materials-specs__sticker {
    position: absolute;
    top: 40px;
    right: 3%;
    z-index: 1;
    width: 96px;
    height: auto;
    opacity: 0.95;
    transform: rotate(12deg);
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-materials-specs__sticker--wide {
    width: 132px;
  }

  /* `.spec-band__seal` — `.section-sticker--bl` re-slotted. style.css puts
     `--bl` 48px up, which lands inside the 140px checker band; the free slot is
     the strip between the cards and the checker, left of the note. */
  .yc-materials-specs__seal {
    position: absolute;
    bottom: 74px;
    left: 3%;
    z-index: 1;
    width: 120px;
    height: auto;
    opacity: 0.95;
    /* `.section-sticker--bl` is rotate(-10deg), NOT the -14deg of `--tl`. The
       page block overrides its width, bottom and left but not its rotation. */
    transform: rotate(-10deg);
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  /* ---------- Head ---------- */
  /* NO max-width here, deliberately. `.spec-band` is not a `.company-section`,
     so the 620px cap that band puts on its head does not apply — this head is
     the bare `.section-head`, which stretches to the container as a flex item.
     Measured: 1340px at a 1440 viewport, not 620. The children are centred and
     shrink-to-fit either way, so it looks identical today, but capping it would
     wrap the heading early the moment the copy got longer. */
  .yc-materials-specs__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .yc-materials-specs__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-materials-specs__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  .yc-materials-specs__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-materials-specs__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* ---------- Cards ----------
     `.slider.mobile-slider`: the shell's own gap is switched off at desktop,
     where this is a plain grid. */
  .yc-materials-specs__slider {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  /* `.spec-grid` + `.mobile-slider > .slider__track` in its desktop state:
     a plain auto-fit grid with the track's scroll behaviour disabled. */
  .yc-materials-specs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    overflow: visible;
    cursor: default;
    scroll-snap-type: none;
    scrollbar-width: none;
  }

  .yc-materials-specs__grid::-webkit-scrollbar {
    display: none;
  }

  /* Not in the reference, which leaves the focusable track with no focus
     style. It is `tabindex="0"`, so it must show focus (WCAG 2.4.7). */
  .yc-materials-specs__grid:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 4px;
    border-radius: 24px;
  }

  /* `.mobile-slider > .slider__dots { display: none }` at desktop. */
  .yc-materials-specs__dots {
    position: relative;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* ---------- Note ---------- */
  .yc-materials-specs__note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    line-height: 1.55;
    color: #2e2e2e;
    opacity: 0.8;
  }

  .yc-materials-specs__note-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #4036d6;
  }

  /* The prototype's base `a { color: inherit; text-decoration: none }`. Pinned
     so the theme's own link styling cannot introduce an underline the
     reference does not have. */
  .yc-materials-specs__note a {
    color: inherit;
    text-decoration: none;
  }

  /* Not in the reference, which gives this link no focus style. WCAG 2.4.7. */
  .yc-materials-specs__note a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  @media (max-width: 992px) {
    .yc-materials-specs__container {
      gap: 32px;
      padding-inline: 20px;
    }

    .yc-materials-specs__title {
      font-size: 36px;
    }
  }

  /* materials.html @860: the same markup becomes a one-per-view snap track,
     and the bottom-left seal goes — the note wraps into its column. */
  @media (max-width: 860px) {
    .yc-materials-specs__seal {
      display: none;
    }

    .yc-materials-specs__slider {
      gap: 16px;
    }

    .yc-materials-specs__grid {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      cursor: grab;
      /* The cards lift and cast a hard shadow on tap; overflow-x also clips
         vertically, so room is reserved inside the scroll box. */
      padding: 4px 4px 12px;
    }

    /* One card per view, no peek at the next. `> *` rather than a class,
       because the blocks are `"tag": null`. */
    .yc-materials-specs__grid > * {
      flex: 0 0 100%;
      scroll-snap-align: start;
    }

    .yc-materials-specs__dots {
      display: flex;
    }
  }

  /* responsive.css hides `.sg-checker` on phones, so the 140px reserved for it
     is just empty ice under the note — the reference matches the 60px top. */
  @media (max-width: 640px) {
    .yc-materials-specs {
      padding-bottom: var(--yc-specs-pad-bottom-sm, 60px);
    }

    .yc-materials-specs__container {
      padding-inline: 16px;
    }

    .yc-materials-specs__sticker {
      display: none;
    }

    .yc-materials-specs__title {
      font-size: 27px;
    }
  }

  @media (max-width: 380px) {
    .yc-materials-specs__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-materials-specs */

/* START_SECTION:yc-measure-guide (INDEX:83) */
/* Prototype `.measure-section` — flex column on cream. line-height restates
     the reference's inherited --lh-body. */
  .yc-measure-guide {
    display: flex;
    flex-direction: column;
    line-height: 1.55;
  }

  /* `.container` — the FULL 1620px one here, not section 2's narrow variant.
     The responsive step to a 32px stack gap at <=992 applies and is ported. */
  .yc-measure-guide__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.section-head` — centred column, 16px gap. */
  .yc-measure-guide__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  /* `.eyebrow` — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius. */
  .yc-measure-guide__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-measure-guide__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 base on the --fs-h2 ladder (46 -> 36 -> 27 -> 24), --lh-heading 1.05,
     --ls-heading -0.03em. No page override. */
  .yc-measure-guide__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* ---------- Slider shell ---------- */
  /* `.slider` is a flex column with a 12px gap; `.mobile-slider` zeroes it on
     desktop and restores 16px at <=900. Only the effective values ship. */
  .yc-measure-guide__slider {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  /* `.measure-grid.slider__track` carries both classes; the page's
     `.measure-grid` loads after style.css and wins at equal specificity, so
     the track wraps and takes `width: 100%` while `.mobile-slider >
     .slider__track` switches its own scrolling off. */
  .yc-measure-guide__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* The scroll region is a tab stop, so it must show focus. */
  .yc-measure-guide__grid:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 4px;
    border-radius: 4px;
  }

  /* Hidden on desktop; `.slider__dots` supplies the geometry for when the
     <=900px rule shows it. `position: relative` is required by
     assets/yc-mobile-slider.css for the (unused here) autoplay control. */
  .yc-measure-guide__dots {
    position: relative;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* ---------- Card (blocks/_yc-measure-card.liquid) ---------- */
  /* `.measure-card` — 1.5px border, not the 1px --border-solid. `padding: 0`
     is the reference's own reset now that a full-bleed photo sits at the top;
     `overflow: hidden` is what clips that photo to the 20px radius.
     `flex: 1 1 380px` beats `.slider__track > *`'s `flex: 0 0 min(340px, 82%)`
     on source order at equal specificity. */
  .yc-measure-guide__card {
    flex: 1 1 var(--yc-measure-card-min, 380px);
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
    border: 1.5px solid #e2e1ee;
    border-radius: 20px;
  }

  .yc-measure-guide__photo {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--yc-measure-photo-bg, #e4f5ff);
  }

  .yc-measure-guide__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .yc-measure-guide__body {
    padding: 24px;
  }

  .yc-measure-guide__card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }

  /* The round icon tile. `flex: none` so it never shrinks against a long
     heading; the 22px font-size is what sizes the glyph (1em below). */
  .yc-measure-guide__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    font-size: 22px;
    color: var(--yc-measure-icon-color, #4036d6);
    background-color: var(--yc-measure-icon-bg, #ede9fd);
    border-radius: 50%;
  }

  .yc-measure-guide__icon-svg {
    width: 1em;
    height: 1em;
  }

  /* h3 base keeps --lh-heading 1.05 and --ls-heading -0.03em; the page
     override supplies the 20px size and the 700 weight, so the --fs-h3 ladder
     never applies. */
  .yc-measure-guide__card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* ---------- Step list ---------- */
  /* A real <ol> with `list-style: none`, numbered by a CSS counter exactly as
     the reference does. The counter is named `step` there; kept, since it is
     scoped to this list either way. */
  .yc-measure-guide__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
  }

  .yc-measure-guide__step {
    counter-increment: step;
    position: relative;
    display: flex;
    gap: 12px;
    padding: 12px 0;
  }

  .yc-measure-guide__step:not(:last-child) {
    border-bottom: 1px dashed #e2e1ee;
  }

  .yc-measure-guide__step::before {
    content: counter(step);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    background-color: #2e2e2e;
    border-radius: 50%;
  }

  .yc-measure-guide__step p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* The prototype's base `a { color: inherit; text-decoration: none }`, plus a
     keyboard-only focus ring the reference has no equivalent for (WCAG 2.4.7),
     in case a merchant links inside a step. */
  .yc-measure-guide__step p a {
    color: inherit;
    text-decoration: none;
  }

  .yc-measure-guide__step p a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ---------- Responsive ---------- */
  /* responsive.css: --gutter 50 -> 20, --container-width 1620px -> 100%,
     .container gap 48 -> 32, --fs-h2 46 -> 36. */
  @media (max-width: 992px) {
    .yc-measure-guide__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-measure-guide__title {
      font-size: 36px;
    }
  }

  /* sizing.html:640-663 — the page's own slider breakpoint. */
  @media (max-width: 900px) {
    .yc-measure-guide__slider {
      gap: 16px;
    }

    .yc-measure-guide__grid {
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      /* overflow-x also clips vertically, so room is reserved inside the
         scroll box — the reference reserves it for the cards' tap lift. */
      padding: 4px 4px 12px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .yc-measure-guide__grid::-webkit-scrollbar {
      display: none;
    }

    /* One card per view, filling the centred track — no peek at the next. */
    .yc-measure-guide__card {
      flex: 0 0 100%;
      scroll-snap-align: start;
    }

    .yc-measure-guide__dots {
      display: flex;
    }
  }

  /* --fs-h2 27. */
  @media (max-width: 640px) {
    .yc-measure-guide__container {
      padding-inline: 16px;
    }

    .yc-measure-guide__title {
      font-size: 27px;
    }
  }

  /* --fs-h2 24. */
  @media (max-width: 380px) {
    .yc-measure-guide__title {
      font-size: 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-measure-guide__grid {
      scroll-behavior: auto;
    }
  }
/* END_SECTION:yc-measure-guide */

/* START_SECTION:yc-next-step (INDEX:84) */
/* `.next-step` */
  .yc-next-step {
    position: relative;
    padding: var(--yc-ns-pt, 64px) 24px var(--yc-ns-pb, 64px);
    line-height: 1.55;
  }

  /* `.next-step .section-sticker--bl` — sits in the gap the pitch column
     leaves under the journey list, clear of the chip row. */
  .yc-next-step__sticker {
    position: absolute;
    bottom: 24px;
    left: 3%;
    z-index: 1;
    width: var(--yc-ns-sticker-w, 84px);
    height: auto;
    pointer-events: none;
  }

  .yc-next-step__inner {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 24px 48px;
    align-items: start;
    max-width: 1180px;
    margin-inline: auto;
  }

  /* ---------- Pitch column ---------- */
  /* `.eyebrow` (style.css:659). */
  .yc-next-step__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-next-step__eyebrow-icon {
    width: 16px;
    height: 16px;
  }

  .yc-next-step__heading {
    margin: 0 0 8px;
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-transform: none;
    color: #2e2e2e;
  }

  .yc-next-step__lead {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    color: #2e2e2e;
  }

  /* `.journey` — an <ol>, so the base stylesheet's markers and padding are
     reset here. */
  .yc-next-step__journey {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
  }

  .yc-next-step__step {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .yc-next-step__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    background-color: #2e2e2e;
    border-radius: 50%;
  }

  .yc-next-step__num-icon {
    width: 12px;
    height: 12px;
  }

  .yc-next-step__step--done .yc-next-step__num {
    background-color: #0fb654;
  }

  .yc-next-step__step--next .yc-next-step__num {
    background-color: #4036d6;
  }

  .yc-next-step__step-title {
    font-size: 14px;
    font-weight: 700;
    color: #2e2e2e;
  }

  .yc-next-step__step--done .yc-next-step__step-title {
    color: #6b6b6b;
  }

  /* ---------- Size rows ---------- */
  /* `.size-picker` */
  .yc-next-step__sizes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .yc-next-step__size {
    display: flex;
  }

  /* `.size-card` */
  .yc-next-step__card {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 64px 1fr auto auto;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    text-decoration: none;
    color: #2e2e2e;
    background-color: var(--yc-ns-face, #ffffff);
    border: 1px solid #2e2e2e;
    border-radius: 24px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .yc-next-step__card:hover,
  .yc-next-step__card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* `.size-card__num` — the numeral on a coloured coin, with its label above. */
  .yc-next-step__coin {
    grid-column: 1;
    grid-row: 1;
    padding: 8px 4px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    background-color: var(--yc-ns-tile, #78c6ff);
    border: 1px solid #2e2e2e;
    border-radius: 16px;
    box-shadow: 2px 2px 0 #2e2e2e;
  }

  .yc-next-step__coin small {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    opacity: 0.65;
  }

  .yc-next-step__specs {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .yc-next-step__fit {
    font-size: 15px;
    font-weight: 700;
  }

  .yc-next-step__meta {
    font-size: 13px;
    color: #6b6b6b;
  }

  /* The savings note is the reason to click, so it keeps brand colour while
     the rest of the meta line stays quiet. Inline-block + nowrap so the pill
     wraps as one piece instead of breaking mid-badge. */
  .yc-next-step__save {
    display: inline-block;
    white-space: nowrap;
    margin-left: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #2e2e2e;
    background-color: var(--yc-ns-tile, #78c6ff);
    border-radius: 999px;
  }

  .yc-next-step__price {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 20px;
    font-weight: 700;
    color: #4036d6;
    white-space: nowrap;
  }

  .yc-next-step__price small {
    font-size: 12px;
    font-weight: 600;
    color: #6b6b6b;
  }

  /* `.btn.btn--purple.size-card__cta` — the button base, then the row's own
     padding override. */
  .yc-next-step__cta {
    grid-column: 4;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    color: #ffffff;
    background-color: #4036d6;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .yc-next-step__cta-icon {
    width: 14px;
    height: 14px;
  }

  .yc-next-step__card:hover .yc-next-step__cta,
  .yc-next-step__card:focus-visible .yc-next-step__cta {
    background-color: #2f2799;
  }

  /* ---------- Foot ---------- */
  .yc-next-step__foot {
    grid-column: 1 / -1;
  }

  .yc-next-step__reassure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .yc-next-step__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #2e2e2e;
    background-color: rgb(255 255 255 / 72%);
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-next-step__chip-icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: #0fb654;
  }

  .yc-next-step__help {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
    color: #6b6b6b;
  }

  .yc-next-step__help a {
    color: #4036d6;
    font-weight: 700;
  }

  /* ---------- Responsive ---------- */
  /* Below this the pitch column narrows, its text runs taller and the sticker
     lands on the journey list, so it only shows where the corner is empty. */
  @media screen and (max-width: 1240px) {
    .yc-next-step__sticker {
      display: none;
    }
  }

  /* One column once a size row cannot hold coin + fit + price + button. */
  @media screen and (max-width: 1040px) {
    .yc-next-step__inner {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .yc-next-step__head {
      text-align: center;
    }

    .yc-next-step__eyebrow {
      margin-inline: auto;
    }

    .yc-next-step__lead {
      max-width: 620px;
      margin-inline: auto;
    }

    .yc-next-step__journey {
      align-items: center;
    }
  }

  @media screen and (max-width: 900px) {
    .yc-next-step {
      padding: var(--yc-ns-pad-mobile, 48px) 16px;
    }
  }

  @media screen and (max-width: 620px) {
    .yc-next-step__card {
      grid-template-columns: auto 1fr;
      gap: 8px 16px;
    }

    .yc-next-step__price {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .yc-next-step__cta {
      grid-column: 1 / -1;
      grid-row: 3;
      width: 100%;
    }

    /* The meta line rarely fits the badge on a phone, so the pill gets its own
       line with a little air rather than a cramped hanging wrap. */
    .yc-next-step__meta {
      line-height: 1.5;
    }

    .yc-next-step__save {
      margin-left: 0;
      margin-top: 4px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-next-step__card,
    .yc-next-step__cta {
      transition: none;
    }

    .yc-next-step__card:hover,
    .yc-next-step__card:focus-visible {
      transform: none;
    }
  }
/* END_SECTION:yc-next-step */

/* START_SECTION:yc-policy-copy (INDEX:85) */
/* .company-section (57-62) — flex column, a flat 60px block padding at every
     width, no background unless the merchant sets one (the reference sits on
     the page ground: computed background-color is rgba(0,0,0,0)).

     The reference body is 16px/1.55 (15 at <=992, 14 at <=640), restated here
     and inherited by every paragraph — Horizon's body is 14px/1.6. text-align
     is pinned left: the reference inherits it from the document, but this
     section renders inside Horizon's `.section` wrapper, so stating it keeps
     the result identical wherever the section is placed. */
  .yc-policy-copy {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    text-align: left;
    color: #2e2e2e;
    background-color: var(--yc-policy-bg, transparent);
  }

  /* .container (631-640) — 1620px max, 50px gutter, 48px stack gap,
     align-self: center. The gap never renders here (one child), but it is
     ported so the section behaves like every other container if a second
     element is ever added. */
  .yc-policy-copy__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    align-self: center;
    padding-inline: 50px;
  }

  /* .policy (65-71) — the 760px prose column. See the header note on why
     `margin-inline: auto` makes this shrink-to-fit-capped rather than fixed. */
  .yc-policy-copy__body {
    display: flex;
    flex-direction: column;
    max-width: var(--yc-policy-max, 760px);
    margin-inline: auto;
  }

  /* `p` base (298-301): body size and 1.55, no margin of its own — the
     prototype's reset zeroes it and the spacing is the sibling rule below. */
  .yc-policy-copy__p {
    margin: 0;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.55;
    color: inherit;
  }

  /* --- Subheadings and rich blocks (added for the Accessibility Statement) ---

     ⚠ THE RETURN POLICY MUST NOT MOVE. Everything below is additive: it styles
     two block types that `templates/page.return-policy.json` does not contain,
     and the one rule that CAN reach that page — the generalised `* + *` — emits
     the same 16px the `p + p` rule below already gave it. Verified by measuring
     the Return Policy before and after.

     The heading is `--fs-h4`, LADDERED 24 -> 22 (<=992) -> 18 (<=640), the same
     ladder as `yc-final-note` and `yc-giveaway-rules`. The 32px lead-in above a
     subhead and the 12px between a rich block's own children are FIXED tokens —
     they do not ladder. */
  .yc-policy-copy__h {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* Generalises the `p + p` rule below to every block type in the column, so a
     heading or a list spaces like a paragraph. Specificity (0,1,0) sits under
     the (0,3,0) rule below, so the Return Policy's paragraphs keep their own
     rule and the computed result is identical either way. */
  .yc-policy-copy__body > * + * {
    margin-top: 16px;
  }

  /* A subhead opens a new section of the document, so it gets a bigger lead-in
     than the gap between two paragraphs — but never above the first block. */
  .yc-policy-copy__body > * + .yc-policy-copy__h {
    margin-top: 32px;
  }

  /* Richtext emits its own sibling run, so the block's wrapper owns the gaps
     inside it. 12px, tighter than the 16px BETWEEN blocks, so a paragraph and
     the list it introduces read as one unit. */
  .yc-policy-copy__rich > :is(p, ul, ol) {
    margin: 0;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.55;
    color: inherit;
  }

  .yc-policy-copy__body .yc-policy-copy__rich > * + * {
    margin-top: 12px;
  }

  .yc-policy-copy__rich :is(ul, ol) {
    padding-inline-start: 24px;
  }

  .yc-policy-copy__rich li + li {
    margin-top: 8px;
  }

  /* `.policy p + p { margin-top: var(--space-16) }` — 16px, fixed at every
     width. Scoped to the column so it can never reach a paragraph elsewhere. */
  .yc-policy-copy__body .yc-policy-copy__p + .yc-policy-copy__p {
    margin-top: 16px;
  }

  /* `.policy a { color: var(--color-purple); font-weight: var(--fw-semibold) }`
     over the global `a { color: inherit; text-decoration: none }`. Measured
     rgb(64,54,214) / 600 / none. See the WCAG 1.4.1 note in the header. */
  .yc-policy-copy__p a,
  .yc-policy-copy__rich a {
    color: var(--yc-policy-link, #4036d6);
    font-weight: 600;
    text-decoration: none;
  }

  /* Not in the reference — keyboard only, so the resting design is untouched
     (WCAG 2.4.7). */
  .yc-policy-copy__p a:focus-visible,
  .yc-policy-copy__rich a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */

  /* responsive.css 18-33: --fs-body 15, --gutter 20, --container-width 100%,
     and `.container` gap 48 -> 32. */
  @media (max-width: 992px) {
    .yc-policy-copy {
      font-size: 15px;
    }

    .yc-policy-copy__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    /* --fs-h4 24 -> 22. */
    .yc-policy-copy__h {
      font-size: 22px;
    }
  }

  /* responsive.css 110-124: --fs-body 14, --gutter 16. */
  @media (max-width: 640px) {
    .yc-policy-copy {
      font-size: 14px;
    }

    .yc-policy-copy__container {
      padding-inline: 16px;
    }

    /* --fs-h4 18. */
    .yc-policy-copy__h {
      font-size: 18px;
    }

    /* The subhead lead-in tightens with the column on phones. */
    .yc-policy-copy__body > * + .yc-policy-copy__h {
      margin-top: 24px;
    }
  }
/* END_SECTION:yc-policy-copy */

/* START_SECTION:yc-press-bar (INDEX:86) */
.yc-press__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .yc-press__title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    /* Prototype --color-muted */
    color: #6b6b6b;
  }

  .yc-press__logos {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 48px;
  }

  .yc-press__logo,
  .yc-press__logo-link {
    display: inline-flex;
    align-items: center;
  }

  .yc-press__logo-img {
    height: var(--yc-press-logo-height, 25px);
    width: auto;
    object-fit: contain;
    opacity: 0.9;
    /* Reference has no hover on press logos (they aren't links) — removed. */
  }

  @media screen and (max-width: 640px) {
    .yc-press__logos {
      gap: 24px;
    }
  }
/* END_SECTION:yc-press-bar */

/* START_SECTION:yc-quote-strip (INDEX:87) */
/* `.quote-strip` — the warm wash behind the white card. On plain white the
     card's hairline border was the only thing separating it from the page
     (the reference's own note). */
  .yc-quote-strip {
    position: relative;
    padding: var(--yc-qs-pt, 64px) 24px var(--yc-qs-pb, 48px);
    line-height: 1.55;
  }

  /* `.sticker.section-sticker--br` — `--br` is not a global variant, so the
     reference positions it on the page: in the cream to the right of the card.
     width/z-index/opacity are the resolved cascade of .sticker (92px, z 3),
     .section-sticker (96px, z 1, .95) and the page rule (88px). */
  .yc-quote-strip__sticker {
    position: absolute;
    right: 4%;
    bottom: 40px;
    z-index: 1;
    width: var(--yc-qs-sticker-w, 88px);
    height: auto;
    opacity: 0.95;
    transform: rotate(10deg);
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgb(46 46 46 / 18%));
  }

  .yc-quote-strip__inner {
    max-width: var(--yc-qs-max, 760px);
    margin-inline: auto;
  }

  /* `.testimonial` with the page's padding and gap overrides. A <figure>, so
     the user-agent margin is reset. */
  .yc-quote-strip__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 48px 32px 32px;
    text-align: center;
    background-color: var(--yc-qs-card, #ffffff);
    border: 1px solid #e2e1ee;
    border-radius: 32px;
  }

  /* `.testimonial__mark` — the coin straddles the card's top edge. */
  .yc-quote-strip__mark {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: #2e2e2e;
    background-color: var(--yc-qs-coin, #ffc7ac);
    border: 1px solid #e2e1ee;
    border-radius: 50%;
  }

  /* The prototype sizes the Phosphor glyph with font-size: 20px; the inline
     SVG takes the same 20px as a box. */
  .yc-quote-strip__mark-icon {
    width: 20px;
    height: 20px;
  }

  /* `.testimonial__stars.rating__stars`, at the page's 18px rather than the
     card's own --fs-h4. */
  .yc-quote-strip__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--yc-qs-star, #ffc7ac);
  }

  .yc-quote-strip__star {
    width: 18px;
    height: 18px;
  }

  /* `.testimonial__quote` — a <blockquote>, so the user-agent margin and
     indent are reset. */
  .yc-quote-strip__quote {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-quote-strip__author {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 8px;
  }

  .yc-quote-strip__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
  }

  .yc-quote-strip__name {
    font-size: 17px;
    font-weight: 700;
    color: #2e2e2e;
  }

  .yc-quote-strip__role {
    font-size: 13px;
    font-weight: 400;
    color: #6b6b6b;
  }

  /* Below this the cream to the right of the card runs out. */
  @media screen and (max-width: 1040px) {
    .yc-quote-strip__sticker {
      display: none;
    }
  }

  /* sizing-pack.html page styles, lines 285-288. */
  @media screen and (max-width: 600px) {
    .yc-quote-strip {
      padding: 48px 16px 32px;
    }

    .yc-quote-strip__card {
      padding: 40px 20px 24px;
    }
  }
/* END_SECTION:yc-quote-strip */

/* START_SECTION:yc-reasons-hero (INDEX:88) */
/* Base = phones (< 768px). The pattern variable is optional, so the
     gradient still renders on its own when no pattern image is assigned. */
  .yc-reasons-hero {
    padding: min(var(--yc-rh-pt, 64px), var(--yc-rh-pt-m, 40px)) 15px min(var(--yc-rh-pb, 64px), var(--yc-rh-pb-m, 40px));
    background-color: var(--yc-rh-start, #9695d1);
    background-image:
      linear-gradient(
        123deg,
        var(--yc-rh-start, #9695d1) 0,
        var(--yc-rh-mid, #a3a2d6) 68.4783%,
        var(--yc-rh-start, #9695d1) 99.6377%
      ),
      var(--yc-rh-pattern, none);
  }

  .yc-reasons-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
    margin-inline: auto;
    text-align: center;
  }

  .yc-reasons-hero__heading {
    margin: 0 0 16px;
    font-family: var(--font-heading--family);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--yc-rh-heading, #2e2e2e);
  }

  .yc-reasons-hero__accent {
    color: var(--yc-rh-accent, #2e2e2e);
  }

  /* The reference sizes the pill as a share of the 1000px container
     (44% / 24% / 16%); max-content stops a longer label overflowing it. */
  .yc-reasons-hero__pill {
    box-sizing: border-box;
    width: 44%;
    min-width: max-content;
    margin: 0;
    padding: 8px 24px;
    font-family: var(--font-heading--family);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    color: #262626;
    background-color: var(--yc-rh-pill, #ffc7ac);
    border-radius: 100px;
  }

  /* Product photo above the band (a3). The CDN image keeps its own ratio. */
  .yc-reasons-hero__media {
    padding: 20px 15px;
    background-color: #ffffff;
  }

  .yc-reasons-hero__image {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin-inline: auto;
  }

  /* Star row + italic line (a3): two stacked lines, 14px on phones, 21px up. */
  .yc-reasons-hero__eyebrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--yc-rh-heading, #2e2e2e);
  }

  .yc-reasons-hero__stars {
    display: inline-flex;
    gap: 0.2em;
    height: 1.2em;
    align-items: center;
    color: var(--yc-rh-star, #ffc7ac);
  }

  .yc-reasons-hero__star {
    width: 1em;
    height: 1em;
  }

  /* The reference's 10px heading padding, carried by the pill instead so
     a1's heading → pill gap is untouched. */
  .yc-reasons-hero__pill--tag {
    width: auto;
    min-width: 0;
    max-width: 220px;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: none;
  }

  @media screen and (min-width: 768px) {
    .yc-reasons-hero__eyebrow {
      margin-bottom: 26px;
      font-size: 21px;
    }

    .yc-reasons-hero__pill.yc-reasons-hero__pill--tag {
      width: auto;
      max-width: none;
      padding: 10px 30px;
      font-size: 17px;
      font-weight: 700;
    }
  }

  @media screen and (min-width: 768px) {
    .yc-reasons-hero {
      padding: var(--yc-rh-pt, 64px) 15px var(--yc-rh-pb, 64px);
    }

    .yc-reasons-hero__heading {
      font-size: 32px;
    }

    .yc-reasons-hero__pill {
      width: 24%;
      font-size: 16px;
    }
  }

  @media screen and (min-width: 1025px) {
    .yc-reasons-hero__heading {
      max-width: var(--yc-rh-max, 800px);
      font-size: 44px;
    }

    .yc-reasons-hero__pill {
      width: 16%;
    }
  }
/* END_SECTION:yc-reasons-hero */

/* START_SECTION:yc-reasons-split (INDEX:89) */
/* Base = phones (< 768px). */
  .yc-rsplit {
    color: #000000;
  }

  .yc-rsplit__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .yc-rsplit__hero,
  .yc-rsplit__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    background-color: var(--yc-rsplit-row, #ffffff);
  }

  .yc-rsplit__hero {
    background-color: var(--yc-rsplit-hero, #f7f7fc);
  }

  /* The square is reserved by aspect-ratio, so nothing shifts while a photo
     (or a large animated one) loads. */
  .yc-rsplit__media {
    position: relative;
    align-self: stretch;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--yc-rsplit-quote, #f7f7fc);
  }

  .yc-rsplit__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .yc-rsplit__image--top {
    object-position: center top;
  }

  .yc-rsplit__image--bottom {
    object-position: center bottom;
  }

  .yc-rsplit__body {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 36px 12px 60px;
  }

  .yc-rsplit__body--hero {
    text-align: center;
  }

  .yc-rsplit__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 5px;
    margin-bottom: 16px;
  }

  .yc-rsplit__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--yc-rsplit-star, #ffc7ac);
  }

  .yc-rsplit__star {
    width: 16px;
    height: 16px;
  }

  .yc-rsplit__eyebrow {
    margin: 0;
    font-size: 14px;
    font-style: italic;
    line-height: 1.4;
  }

  .yc-rsplit__title,
  .yc-rsplit__heading,
  .yc-rsplit__cta-heading {
    font-family: var(--font-heading--family);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
  }

  .yc-rsplit__title {
    margin: 0;
    font-size: 28px;
    color: #000000;
  }

  .yc-rsplit__intro {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.5;
  }

  .yc-rsplit__intro p,
  .yc-rsplit__text p {
    margin: 0;
  }

  .yc-rsplit__heading {
    margin: 0 0 20px;
    font-size: 20px;
    color: #262626;
  }

  .yc-rsplit__num {
    color: var(--yc-rsplit-num, #8a89ca);
  }

  .yc-rsplit__quote {
    margin: 0 0 20px;
    padding: 16px 24px;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    background-color: var(--yc-rsplit-quote, #f7f7fc);
    border-left: 4px solid var(--yc-rsplit-num, #8a89ca);
  }

  .yc-rsplit__quote blockquote,
  .yc-rsplit__quote p {
    margin: 0;
  }

  .yc-rsplit__author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 12px;
  }

  .yc-rsplit__author-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
  }

  .yc-rsplit__text {
    font-size: 16px;
    line-height: 1.5;
  }

  .yc-rsplit__text p + p {
    margin-top: 24px;
  }

  .yc-rsplit__body > :last-child {
    margin-bottom: 0;
  }

  .yc-rsplit__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 12px;
    text-align: center;
    background-color: var(--yc-rsplit-cta, #f7f7fc);
  }

  .yc-rsplit__cta-heading {
    max-width: 652px;
    margin: 0 0 16px;
    font-size: 20px;
    color: #262626;
  }

  /* The theme's `.btn`, as yc-reasons / yc-guarantee ship it. Full width on
     phones, with text-align so a wrapped label centres. */
  .yc-rsplit__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* White on indigo 7.73:1 (hover 11.22:1); white on ink / ink on white 13.58:1. */
  .yc-rsplit__btn--purple {
    background-color: #4036d6;
  }

  .yc-rsplit__btn--purple:hover {
    background-color: #2f2799;
  }

  .yc-rsplit__btn--white {
    color: #2e2e2e;
    background-color: #ffffff;
  }

  .yc-rsplit__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-rsplit__btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .yc-rsplit__btn {
      transition: background-color 0.18s ease, color 0.18s ease;
    }
  }

  @media screen and (min-width: 641px) {
    .yc-rsplit__btn {
      width: auto;
    }
  }

  @media screen and (min-width: 768px) {
    .yc-rsplit__body {
      max-width: 530px;
      margin-inline: auto;
      padding: 24px 15px 48px;
    }

    .yc-rsplit__proof {
      margin-bottom: 12px;
    }

    .yc-rsplit__title {
      font-size: 32px;
    }

    .yc-rsplit__heading,
    .yc-rsplit__cta-heading {
      font-size: 24px;
    }

    .yc-rsplit__cta {
      padding: 40px 24px;
    }

    .yc-rsplit__cta-heading {
      max-width: 500px;
      margin-bottom: 28px;
    }
  }

  @media screen and (min-width: 1025px) {
    .yc-rsplit__hero,
    .yc-rsplit__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yc-rsplit__hero--no-media,
    .yc-rsplit__row--no-media {
      grid-template-columns: minmax(0, 1fr);
    }

    .yc-rsplit__row--flip .yc-rsplit__media {
      order: 2;
    }

    /* 20px more below than above: the reference's copy sits ~10px above the
       row's centre line. */
    .yc-rsplit__body {
      max-width: 632px;
      padding: 40px 40px 60px;
    }

    .yc-rsplit__body--hero {
      max-width: 700px;
    }

    .yc-rsplit__title {
      font-size: 44px;
    }

    .yc-rsplit__heading,
    .yc-rsplit__cta-heading {
      font-size: 32px;
    }

    .yc-rsplit__cta-heading {
      max-width: 652px;
    }
  }
/* END_SECTION:yc-reasons-split */

/* START_SECTION:yc-reasons (INDEX:90) */
/* Base = phones (< 768px). */
  .yc-reasons__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .yc-reason {
    padding: 40px var(--yc-rs-gutter, 15px);
    background-color: var(--yc-rs-row, #ffffff);
  }

  /* 56px below = 40px band padding + the reference paragraph's 16px margin. */
  .yc-reasons__intro {
    padding: 40px var(--yc-rs-gutter, 15px) 56px;
    background-color: var(--yc-rs-intro, #f7f7fc);
  }

  .yc-reasons__intro-inner.yc-reason__text {
    max-width: 1000px;
    margin: 0 auto;
  }

  .yc-reason--alt {
    background-color: var(--yc-rs-alt, #f7f7fc);
  }

  .yc-reason__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    max-width: 1000px;
    margin-inline: auto;
  }

  .yc-reason__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 2px solid #262626;
    border-radius: 16px;
  }

  .yc-reason__image--top {
    object-position: center top;
  }

  .yc-reason__image--right {
    object-position: right center;
  }

  .yc-reason__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }

  .yc-reason__num {
    margin-bottom: -40px;
    font-family: var(--font-heading--family);
    font-size: 80px;
    font-weight: 700;
    line-height: 1.5;
    color: #e6e6e6;
    user-select: none;
  }

  /* Sits over the numeral's lower half, as in the reference. */
  .yc-reason__heading {
    position: relative;
    margin: 0 0 24px;
    font-family: var(--font-heading--family);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: #262626;
  }

  .yc-reason__text {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.5;
    color: #707070;
  }

  .yc-reason__text p {
    margin: 0;
  }

  .yc-reason__text p + p {
    margin-top: 24px;
  }

  .yc-reason__text > :last-child,
  .yc-reason__text:last-child {
    margin-bottom: 0;
  }

  .yc-reason__quote {
    align-self: stretch;
    margin: 0;
    padding: 16px 16px 16px 24px;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    color: #262626;
    background-color: var(--yc-rs-tint, rgb(150 149 209 / 7%));
    border-left: 2px solid var(--yc-rs-rule, #9695d1);
    border-radius: 0 16px 16px 0;
  }

  .yc-reason--alt .yc-reason__quote {
    background-color: var(--yc-rs-row, #ffffff);
  }

  .yc-reason__quote blockquote,
  .yc-reason__quote p {
    margin: 0;
  }

  .yc-reason__quote figcaption {
    font-style: inherit;
  }

  /* a3: bold author, then the shared "Verified User" tag, one line each,
     both 14px / 1.5 like the quote. */
  .yc-reason__quote--verified figcaption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .yc-reason__author {
    font-weight: 700;
  }

  .yc-reason__quote--verified .yc-verified {
    font-size: 14px;
    line-height: 1.5;
  }

  .yc-reason__quote--verified .yc-verified__icon {
    width: 14px;
    height: 14px;
  }

  .yc-reasons__cta {
    display: flex;
    justify-content: center;
    padding: 40px var(--yc-rs-gutter, 15px);
    background-color: var(--yc-rs-cta, #f7f7fc);
  }

  /* The theme's `.btn`, as yc-guarantee / yc-gift-hero ship it. Full width on
     phones (responsive.css 759), with text-align so a wrapped label centres
     (the yc-sizing-pack-callout finding). */
  .yc-reasons__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* White on indigo 7.73:1 (hover 11.22:1); white on ink / ink on white 13.58:1. */
  .yc-reasons__btn--purple {
    color: #ffffff;
    background-color: #4036d6;
  }

  .yc-reasons__btn--purple:hover {
    background-color: #2f2799;
  }

  .yc-reasons__btn--white {
    color: #2e2e2e;
    background-color: #ffffff;
  }

  .yc-reasons__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-reasons__btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .yc-reasons__btn {
      transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }
  }

  @media screen and (min-width: 641px) {
    .yc-reasons__btn {
      width: auto;
    }
  }

  @media screen and (min-width: 768px) {
    .yc-reason,
    .yc-reasons__intro,
    .yc-reasons__cta {
      padding-inline: 15px;
    }

    .yc-reason__inner {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 40px;
    }

    .yc-reason--alt .yc-reason__media {
      order: 2;
    }

    .yc-reason__image {
      border-radius: 24px;
    }

    .yc-reason__num {
      margin-bottom: -78px;
      font-size: 120px;
    }

    .yc-reason__heading {
      font-size: 24px;
    }

    .yc-reason__quote {
      border-radius: 0 24px 24px 0;
    }
  }

  /* A row with no photo stays one column at every width. */
  .yc-reason.yc-reason--no-media .yc-reason__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* PageFly's tablet band ends at 1024.5px, but its 72px gap already
     applies at 1024 (the photo stays 464px there). */
  @media screen and (min-width: 1024px) {
    .yc-reason__inner {
      grid-template-columns: minmax(0, 464px) minmax(0, 1fr);
      gap: 72px;
    }

    .yc-reason--alt .yc-reason__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 464px);
    }
  }
/* END_SECTION:yc-reasons */

/* START_SECTION:yc-review-carousel (INDEX:94) */
/* Base = phones (< 768px). */
  .yc-rcar {
    padding: 36px 12px 38px;
    color: #000000;
    background-color: var(--yc-rcar-bg, #ffffff);
  }

  .yc-rcar__heading {
    margin: 0 0 36px;
    font-family: var(--font-heading--family);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    color: #262626;
  }

  .yc-rcar__carousel {
    position: relative;
    display: block;
    max-width: 1200px;
    margin-inline: auto;
  }

  /* The reference's cards ride 10px above their slider box, and that 10px
     reappears under the row — 14px here plus 10px on the band's bottom. */
  .yc-rcar__carousel + .yc-rcar__carousel {
    margin-top: 14px;
  }

  /* position: relative makes the track the containing block of each card's
     absolutely positioned .visually-hidden rating, so off-screen cards'
     rating text is clipped by the track instead of widening the page. */
  .yc-rcar__track {
    position: relative;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0 15px 15px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    scrollbar-width: none;
  }

  .yc-rcar__track::-webkit-scrollbar {
    display: none;
  }

  .yc-rcar__track:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-rcar__track > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .yc-rcar__photo {
    width: 221px;
  }

  .yc-rcar__photo-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background-color: var(--yc-rcar-card, #f7f7fc);
    border-radius: 24px;
  }

  .yc-rcar__track--reviews {
    align-items: center;
  }

  .yc-rcar__review {
    width: 100%;
  }

  .yc-rcar__card {
    box-sizing: border-box;
    margin: 0;
    padding: 16px 24px;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    background-color: var(--yc-rcar-card, #f7f7fc);
    border-radius: 24px;
  }

  .yc-rcar__stars {
    display: flex;
    gap: 3px;
    margin: 0 0 12px;
    color: var(--yc-rcar-star, #ffc7ac);
  }

  .yc-rcar__star {
    width: 24px;
    height: 24px;
  }

  .yc-rcar__quote,
  .yc-rcar__quote p {
    margin: 0;
  }

  .yc-rcar__author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 12px;
  }

  .yc-rcar__author-name {
    font-weight: 700;
    line-height: 1.4;
  }

  @media screen and (min-width: 768px) {
    .yc-rcar {
      padding: 40px 24px 50px;
    }

    .yc-rcar__heading {
      font-size: 24px;
    }

    .yc-rcar__photo {
      width: 296px;
    }

    .yc-rcar__review {
      width: min(370px, 100%);
    }
  }

  @media screen and (min-width: 1025px) {
    .yc-rcar__heading {
      font-size: 32px;
    }

    .yc-rcar__photo {
      width: calc((100% - 90px) / 4);
    }

    .yc-rcar__review {
      width: calc((100% - 60px) / 3);
    }
  }
/* END_SECTION:yc-review-carousel */

/* START_SECTION:yc-sample-pack (INDEX:95) */
.yc-sample-pack {
    position: relative; /* containing block for the top-left badge */
    display: flex;
    flex-direction: column;
  }

  .yc-sample-pack__container {
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  .yc-sample-pack.section--full-width .yc-sample-pack__container {
    max-width: none;
  }

  /* Purple offer card */
  .yc-sample-pack__card {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
    /* Extra bottom padding keeps the white copy clear of the white pixel-checker
       along the bottom edge — white-on-white was clipping the perks. */
    padding: clamp(28px, 4vw, 56px);
    padding-bottom: calc(clamp(28px, 4vw, 56px) + 72px);
    /* YC a11y (A11Y-05): was the brand lilac #8b89c8, which carries the white
       16px lead and 14px perks at only 3.23:1. Same hue and saturation,
       lightness lowered until white body text clears 4.5:1 (4.85:1). */
    background-color: #6c6ab0;
    border-radius: 32px;
    /* --lh-body. The reference inherits this from `body`, a layer this theme
       never ported — Horizon's base is 1.6, which made every line box in the
       card ~0.6px tall and the offer column 2px deep. Declared once here so
       every descendant inherits the reference's leading, rather than patching
       each rule (which is also why none of them declare a line-height). */
    line-height: 1.55;
  }

  /* Decorative shape, overhanging the top edge */
  .yc-sample-pack__shape {
    position: absolute;
    top: -60px;
    left: 60%;
    transform: translateX(-50%);
    z-index: 2;
    width: 140px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
  }

  /* White pixel-checker centered along the bottom edge */
  .yc-sample-pack__checker {
    position: absolute;
    bottom: 0;
    left: 40%;
    transform: translateX(-50%);
    z-index: 0;
    width: min(680px, 92%);
    height: 110px;
    pointer-events: none;
  }

  .yc-sample-pack__checker-svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .yc-sample-pack__checker-svg path {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .yc-sample-pack__checker-svg path:nth-child(4) { transition-delay: 0.07s; }
  .yc-sample-pack__checker-svg path:nth-child(7) { transition-delay: 0.14s; }

  /* Hover ripple applied unconditionally to match the prototype (style.css
     `.callout-card:hover .checker-svg path`, no hover-media guard) and the other
     checker sections. The previous `@media (hover: hover)` wrapper suppressed it
     in touch/emulation contexts. */
  .yc-sample-pack__card:hover .yc-sample-pack__checker-svg path:nth-child(2) { transform: translateY(100%); }
  .yc-sample-pack__card:hover .yc-sample-pack__checker-svg path:nth-child(4) { transform: translate(100%, 100%); }
  .yc-sample-pack__card:hover .yc-sample-pack__checker-svg path:nth-child(6) { transform: translate(-100%, 100%); }
  .yc-sample-pack__card:hover .yc-sample-pack__checker-svg path:nth-child(7) { transform: translateY(200%); }
  .yc-sample-pack__card:hover .yc-sample-pack__checker-svg path:nth-child(9) { transform: translateY(100%); }

  /* Left content column */
  .yc-sample-pack__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 0;
    color: #ffffff;
  }

  .yc-sample-pack__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-sample-pack__eyebrow-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
  }

  .yc-sample-pack__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    /* Prototype global heading tracking (--ls-heading) */
    letter-spacing: -0.03em;
    color: #ffffff;
  }

  .yc-sample-pack__lead {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    /* YC a11y (A11Y-05): was rgba(255,255,255,.9) — the 10% transparency alone
       pulled the lead from 4.85:1 down to 4.5:1 on the card colour. */
    color: #ffffff;
  }

  .yc-sample-pack__lead > :first-child { margin-top: 0; }
  .yc-sample-pack__lead > :last-child { margin-bottom: 0; }

  .yc-sample-pack__perks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .yc-sample-pack__perk {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
  }

  .yc-sample-pack__perk-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #ffc7ac;
  }

  /* White offer panel */
  .yc-sample-pack__offer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    flex-shrink: 0;
    width: 360px;
    max-width: 100%;
    padding: 32px 24px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 24px;
  }

  .yc-sample-pack__offer-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b6b6b;
  }

  /* .callout-card__price — free now, was-price struck through beside it. */
  .yc-sample-pack__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
  }

  .yc-sample-pack__price-now {
    font-size: 24px;
    font-weight: 700;
    color: #2e2e2e;
  }

  .yc-sample-pack__price-was {
    font-size: 18px;
    font-weight: 700;
    color: #6b6b6b;
    text-decoration: line-through;
  }

  /* "Just pay shipping" — matches .yc-pdp-price-note on the product page. */
  .yc-sample-pack__price-note {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    /* Pulled up into the offer column's 16px gap so it reads as part of the
       price rather than a row of its own. */
    margin: -8px 0 0;
    padding: 4px 12px;
    background-color: #fff1e8;
    border: 1px solid #ffc7ac;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: #2e2e2e;
  }

  .yc-sample-pack__price-note-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #4036d6;
  }

  /* The form is only a submit wrapper; the button keeps the card's layout. */
  /* Both are submit wrappers only — `display: contents` keeps the CTA a direct
     flex item of the offer column, so adding them changed no spacing. The live
     region inside the component is `position: absolute`, so it is out of flow
     and adds no gap either. */
  .yc-sample-pack__form-component,
  .yc-sample-pack__form {
    display: contents;
  }

  /* .callout-card__more */
  .yc-sample-pack__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: -8px;
    font-size: 13px;
    font-weight: 600;
    color: #4036d6;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .yc-sample-pack__more:hover {
    color: #2f2799;
  }

  .yc-sample-pack__more-icon {
    width: 14px;
    height: 14px;
  }

  .yc-sample-pack__sizes {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }

  .yc-sample-pack__size {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 0;
    padding: 12px 4px;
    background-color: #ffffff;
    color: #2e2e2e;
    border: 1px solid #2e2e2e;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
  }

  /* .sample-sizes--static — all sizes are included, so nothing is selectable
     and none is active. The reference still lifts them on hover. */
  .yc-sample-pack__sizes--static .yc-sample-pack__size {
    cursor: default;
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  }

  /* .sticker + .section-sticker--tl: 96px, top 40px, left 3%, -14deg. */
  .yc-sample-pack__badge {
    position: absolute;
    top: 40px;
    left: 5%;
    z-index: 3;
    width: 80px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    transform: rotate(-14deg);
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  @media (hover: hover) {
    .yc-sample-pack__size:hover {
      background-color: #e4f5ff;
    }

    /* The static chips lift on hover in the reference, even though they are
       not selectable (.sample-sizes--static .sample-size:hover). */
    .yc-sample-pack__sizes--static .yc-sample-pack__size:hover {
      transform: translateY(-3px);
      box-shadow: 3px 3px 0 #2e2e2e;
    }
  }

  .yc-sample-pack__size.is-active {
    background-color: #4036d6;
    color: #ffffff;
    box-shadow: 3px 3px 0 #2e2e2e;
  }

  .yc-sample-pack__size:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-sample-pack__size-num {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
  }

  .yc-sample-pack__size-sub {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
  }

  .yc-sample-pack__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: #6b6b6b;
  }

  .yc-sample-pack__note-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    color: #4036d6;
  }

  /* CTA — resolved .btn + .btn--purple + .btn--block */
  .yc-sample-pack__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    /* The reference's pill measures 54px: 32px padding + a 1px border + a
       ~20.4px content box set by its 18px Phosphor GLYPH, whose line box is
       taller than the 14px label. Our icon is an inline SVG, so it contributes
       only its own 18px and the box would come out 2px short. Stating the
       reference's height reproduces it without inflating the label's leading. */
    min-height: 54px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    background-color: #4036d6;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .yc-sample-pack__cta:focus-visible {
    outline: 2px solid #2e2e2e;
    outline-offset: 2px;
  }

  .yc-sample-pack__cta-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  .yc-sample-pack__secure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #6b6b6b;
  }

  .yc-sample-pack__secure-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }

  /* ---------- Responsive (prototype responsive.css) ---------- */
  @media (max-width: 992px) {
    .yc-sample-pack__container { padding-inline: 20px; }
    .yc-sample-pack__title { font-size: 36px; }
    /* Checker overlaps the perk text once the card narrows on tablet — hide it
       through the whole tablet/mobile range (matches the mobile treatment). */
    .yc-sample-pack__checker { display: none; }
  }

  @media (max-width: 640px) {
    .yc-sample-pack__container { padding-inline: 16px; }
    .yc-sample-pack__title { font-size: 27px; }

    /* responsive.css: "Section sticker accents crowd the copy at phone widths" */
    .yc-sample-pack__badge { display: none; }

    .yc-sample-pack__card {
      flex-direction: column;
      align-items: stretch;
      text-align: center;
      gap: 32px;
      padding: 24px;
    }

    .yc-sample-pack__content { align-items: center; }
    .yc-sample-pack__lead { max-width: none; }
    .yc-sample-pack__perks { align-items: center; }
    .yc-sample-pack__offer { width: 100%; }

    .yc-sample-pack__shape,
    .yc-sample-pack__checker { display: none; }

    .yc-sample-pack__sizes { flex-wrap: wrap; }
    .yc-sample-pack__size { flex: 1 1 40%; }
  }

  @media (max-width: 380px) {
    .yc-sample-pack__title { font-size: 24px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-sample-pack__checker-svg path { transition: none; }
    .yc-sample-pack__card:hover .yc-sample-pack__checker-svg path { transform: none; }
  }
/* END_SECTION:yc-sample-pack */

/* START_SECTION:yc-sample-tab (INDEX:96) */
.yc-sample-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 70;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Prototype: padding 16px block / 8px inline */
    padding: 16px 8px;
    background-color: #ffc7ac;
    color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-right: none;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease;
  }

  @media (hover: hover) {
    .yc-sample-tab:hover {
      transform: translateY(-50%) translateX(-4px);
      background-color: #ff92eb;
    }
  }

  .yc-sample-tab:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-sample-tab__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .yc-sample-tab__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  /* Hidden on tablet + mobile (≤990px); shows on desktop only.
     Unconditional so it doesn't depend on the merchant toggle. */
  @media (max-width: 990px) {
    .yc-sample-tab {
      display: none;
    }
  }
/* END_SECTION:yc-sample-tab */

/* START_SECTION:yc-size-chart (INDEX:97) */
/* Prototype `.size-chart-section` — a plain flex column, no background of
     its own. line-height restates the reference's inherited --lh-body. */
  .yc-size-chart {
    display: flex;
    flex-direction: column;
    line-height: 1.55;
  }

  /* `.container.container--narrow` — 880px max, 50px gutter, 48px stack gap.
     Unlike the hero, this section does NOT re-state the container gap, so the
     responsive step to 32px at <=992 applies and is ported below. */
  .yc-size-chart__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.section-head` — centred column, 16px gap. */
  .yc-size-chart__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  /* `.eyebrow` — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius. */
  .yc-size-chart__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-size-chart__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 base — Poppins 700, --lh-heading 1.05, --ls-heading -0.03em, on the
     --fs-h2 ladder (46 -> 36 -> 27 -> 24). No page override here, unlike the
     hero's h1. */
  .yc-size-chart__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* ---------- Slider shell ---------- */
  /* `.slider` is a flex column with a 12px gap; `.mobile-slider` zeroes that
     gap on desktop and restores 16px at <=900. Only the effective values are
     shipped. */
  .yc-size-chart__slider {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  /* `.sizeguide-grid.slider__track` carries both classes. The page's
     `.sizeguide-grid` loads after style.css, so at equal specificity it wins:
     flex-wrap becomes `wrap` and the track takes `width: 100%`, while
     `.mobile-slider > .slider__track` switches the track's own scrolling off.
     Net desktop behaviour is a plain wrapping row. */
  .yc-size-chart__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* The dots row is hidden on desktop; `.slider__dots` supplies its geometry
     for when the <=900px rule shows it. `position: relative` is required by
     `assets/yc-mobile-slider.css` for the (unused here) autoplay control. */
  .yc-size-chart__dots {
    position: relative;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* ---------- Size card ---------- */
  /* `.sizeguide-card` — note the 1.5px border, not the 1px --border-solid.
     `flex: 1 1 220px` beats `.slider__track > * { flex: 0 0 min(340px, 82%) }`
     on source order at equal specificity. */
  .yc-size-chart__card {
    flex: 1 1 var(--yc-size-chart-card-min, 220px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #ffffff;
    border: 1.5px solid #e2e1ee;
    border-radius: 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  /* Hover-only lift. Gated on a hover-capable pointer so it cannot fire as a
     sticky state on touch, and dropped entirely under reduced motion. */
  @media (hover: hover) {
    .yc-size-chart__card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(46, 46, 46, 0.1);
    }
  }

  .yc-size-chart__card-media {
    position: relative;
    background-color: var(--yc-size-chart-media-bg, #e4f5ff);
    aspect-ratio: 4 / 3;
  }

  /* The pack shots ship on their own white ground, so `contain` keeps the
     product whole and the ice tile fills the rest. */
  .yc-size-chart__card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
  }

  /* The big numeral shown when a card has no photo. Sized by the viewBox, so
     it tracks the tile at every width without a single breakpoint. */
  .yc-size-chart__card-numeral {
    display: block;
    width: 100%;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
  }

  .yc-size-chart__card-numeral text {
    font-family: inherit;
    font-size: 86px;
    font-weight: 700;
    letter-spacing: -0.03em;
    fill: var(--yc-size-chart-numeral, #4036d6);
  }

  /* The number coin. `min-width` + `height` 44px, so a two-digit size grows
     wider rather than clipping. */
  .yc-size-chart__card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    background-color: var(--yc-size-chart-badge-bg, #4036d6);
    border-radius: 50%;
  }

  .yc-size-chart__card-body {
    padding: 20px;
  }

  .yc-size-chart__card-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b6b6b;
  }

  /* ⚠ 16px, NOT 24px, and that is the reference's own behaviour — see the
     --fs-24 note in the section comment. The value is `body`'s --fs-body, so
     it steps down with that ladder (15 at <=992, 14 at <=640), not with a
     heading scale. Declared explicitly rather than left to inherit, because in
     this theme the inherited value would be Horizon's body size, not the
     prototype's. */
  .yc-size-chart__card-waist {
    display: block;
    margin: 4px 0 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-size-chart__card-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed #e2e1ee;
    font-size: 13px;
    line-height: 1.55;
    color: #6b6b6b;
  }

  .yc-size-chart__card-meta b {
    font-weight: 700;
    color: #2e2e2e;
  }

  /* ---------- Explainer cards ---------- */
  .yc-size-chart__notes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
  }

  .yc-size-chart__note {
    flex: 1 1 var(--yc-size-chart-note-min, 260px);
    padding: 20px;
    background-color: var(--yc-size-chart-note-bg, #f0eee3);
    border-radius: 16px;
  }

  /* h4 base keeps --lh-heading 1.05 and --ls-heading -0.03em; the page
     override supplies the 16px size and the 700 weight.

     ⚠ A BLOCK, NOT A FLEX ROW, and the icon is an inline glyph separated by a
     single space — measured, not assumed. The reference h4 is `display: block`
     with `gap: normal`, and its icon sits at `vertical-align: baseline` with
     the label starting immediately after the 16px glyph (measured
     icon-to-text gap: 0, so the visible space is the space CHARACTER, not a
     gap property).

     This matters by 2px. Two inline boxes with different font metrics sharing
     a baseline grow the line box to the union of their ascents and descents:
     Poppins text alone gives 16.80px, but Poppins + the Phosphor-Fill glyph
     gives 18.80px. A flex row with `align-items: center` produces only the
     text's 16.80px, which measured 2px short here and propagated 2px into the
     card, the notes row, the container and the section (4px at <=390px, where
     the notes stack). */
  .yc-size-chart__note-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* An inline SVG sits with its bottom edge ON the baseline, so at
     `vertical-align: baseline` it contributes a full 1em above it and the line
     box comes out 19.80px — 1px TALLER than the reference's font glyph, whose
     own metrics put part of it below the baseline. Nudging the glyph down by
     1px (0.0625em at 16px) reproduces the reference exactly: h4 18.80px, icon
     offset 0, label at x 16 — all three measured identical. Expressed in `em`
     rather than `px` so it holds if the title size is ever changed.

     `display: inline` is REQUIRED, not decorative: Horizon's base.css:75 sets
     `svg { display: block }` globally, which put the label on its own line and
     measured the h4 14px too tall. Every other yc-icon in this build sits in a
     flex container, where a flex item is blockified anyway and the global rule
     is harmless — this is the one place it bites. */
  .yc-size-chart__note-icon {
    display: inline;
    width: 1em;
    height: 1em;
    vertical-align: -0.0625em;
  }

  .yc-size-chart__note-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #6b6b6b;
  }

  /* The prototype's base `a { color: inherit; text-decoration: none }`, plus a
     keyboard-only focus ring the reference has no equivalent for (WCAG 2.4.7),
     in case a merchant links out of an explainer card. */
  .yc-size-chart__note-text a {
    color: inherit;
    text-decoration: none;
  }

  .yc-size-chart__note-text a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* The scroll region is a tab stop, so it must show focus. */
  .yc-size-chart__grid:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 4px;
    border-radius: 4px;
  }

  /* ---------- Responsive ---------- */
  /* responsive.css: --gutter 50 -> 20, --container-width -> 100% (the narrow
     880px cap is its own token and does NOT change), .container gap 48 -> 32,
     --fs-h2 46 -> 36, --fs-body 16 -> 15. */
  @media (max-width: 992px) {
    .yc-size-chart__container {
      gap: 32px;
      padding-inline: 20px;
    }

    .yc-size-chart__title {
      font-size: 36px;
    }

    .yc-size-chart__card-waist {
      font-size: 15px;
    }
  }

  /* sizing.html:640-663 — the page's own slider breakpoint. The same markup
     becomes a one-per-view snap track with a visible dot row. */
  @media (max-width: 900px) {
    .yc-size-chart__slider {
      gap: 16px;
    }

    .yc-size-chart__grid {
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      /* The cards lift and cast a shadow on tap; overflow-x also clips
         vertically, so room is reserved inside the scroll box. */
      padding: 4px 4px 12px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .yc-size-chart__grid::-webkit-scrollbar {
      display: none;
    }

    /* One card per view, filling the centred track — no peek at the next. */
    .yc-size-chart__card {
      flex: 0 0 100%;
      scroll-snap-align: start;
    }

    .yc-size-chart__dots {
      display: flex;
    }
  }

  /* --fs-h2 27, --fs-body 14. */
  @media (max-width: 640px) {
    .yc-size-chart__container {
      padding-inline: 16px;
    }

    .yc-size-chart__title {
      font-size: 27px;
    }

    .yc-size-chart__card-waist {
      font-size: 14px;
    }
  }

  /* --fs-h2 24. */
  @media (max-width: 380px) {
    .yc-size-chart__title {
      font-size: 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-size-chart__card {
      transition: none;
    }

    .yc-size-chart__card:hover {
      transform: none;
    }

    .yc-size-chart__grid {
      scroll-behavior: auto;
    }
  }
/* END_SECTION:yc-size-chart */

/* START_SECTION:yc-size-hero (INDEX:98) */
/* Prototype `.size-hero` — flex column on ice blue (sizing.html:143-148).
     line-height restates the reference's inherited --lh-body; see the section
     comment for why Horizon's 1.6 base cannot be left in place. */
  .yc-size-hero {
    display: flex;
    flex-direction: column;
    line-height: 1.55;
  }

  /* `.container.size-hero__inner` — the container's flex COLUMN becomes a row.

     The reference carries both classes on one element, which is why it states
     `flex-direction: row` explicitly (sizing.html:152-160). The 48px gap is
     the container's own stack gap reused as the row gap; it is NOT the
     responsive `.container { gap: 32px }` step at <=992, because the page
     <style> block loads after responsive.css and re-states 48px. Reproduced
     here by simply not porting that step — the 32px value only ever applies
     below 900px, where this section's own media query sets it. */
  .yc-size-hero__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* ---------- Copy column ---------- */
  .yc-size-hero__copy {
    flex: 1 1 0;
    min-width: 0;
  }

  /* `.section-head` (style.css:646) with the page's left-alignment override
     (sizing.html:161). align-items: flex-start is what makes every row
     shrink-to-fit rather than fill the column. */
  .yc-size-hero__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
  }

  /* `.eyebrow` — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius.
     line-height is pinned to the prototype's --lh-body (1.55) rather than
     inherited, so the pill keeps its reference height whatever the theme's
     global body line-height is set to. */
  .yc-size-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* 1em. The reference's `<i class="ph ph-ruler">` renders a 12.00 x 12.00 box
     at the eyebrow's 12px, and yc-icon draws the same artwork on the same
     256-unit viewBox, so 1em is an exact match. (Same reasoning as
     sections/yc-faq-hero.liquid.) */
  .yc-size-hero__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h1 base — Poppins 700, --ls-heading -0.03em (style.css 144-155) — with the
     page's own font-size override (sizing.html:162-164). That override is a
     two-class-plus-element selector, so it outranks the `--fs-h1` ladder at
     every width and the ladder never applies here. Min and max are settings;
     the 3.4vw between them is the reference's fluid slope.

     ⚠ DELIBERATE DEVIATION FROM THE REFERENCE — client-reported 2026-09-17 (D12).
     The reference sets `h1 { line-height: var(--lh-tight) }` = 0.95
     (style.css:62, 273-276). At 0.95 the line box is SHORTER THAN THE TYPE: the
     ink of one line and the next overlap by 4.31px at the 26px mobile size,
     measured ink-to-ink from the font's own ascent/descent. Wherever the
     heading wraps, descenders physically collide with the next line's capitals
     — "The Right Size Changes / Everything" puts the `g` of both "Right" and
     "Changes" straight through "Everything". Verified identical on the
     reference at 430, 423, 414, 390, 375, 360 and 320px, so it is inherited,
     not introduced.

     1.05 is NOT an invented number: it is the design system's own
     `--lh-heading` (style.css:63), which every h2 on the site already uses. It
     is the smallest value in the palette that clears the collision.

     This only bites where the heading WRAPS: at 1440px it is a single line
     (46px) and at 768px a single line (26px), so nothing collides there and the
     only effect is a slightly taller heading box. It wraps at 992px and at
     ≤430px, which is where the collision was reported. */
  .yc-size-hero__title {
    margin: 0;
    font-size: clamp(var(--yc-size-hero-h-min, 26px), 3.4vw, var(--yc-size-hero-h-max, 46px));
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* sizing.html:212-217 — the one waist figure, 20px/700 in indigo. 6.92:1 on
     the ice canvas. */
  .yc-size-hero__sub {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.55;
    color: #4036d6;
  }

  /* `.section-subtitle` — 18px/400, capped at 620px (style.css:678). --fs-18
     is NOT on the responsive ladder (only --fs-h* and --fs-body are), so 18px
     holds at every width. */
  .yc-size-hero__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* The prototype's base `a { color: inherit; text-decoration: none }` — pinned
     so the theme's own link styling cannot introduce a colour or underline the
     reference does not have. */
  .yc-size-hero__subtitle a {
    color: inherit;
    text-decoration: none;
  }

  /* Not in the reference, which has no focus style of its own: if a merchant
     puts a link in the standfirst, a keyboard user must still be able to see it
     (WCAG 2.2 AA, 2.4.7). Visible only on keyboard focus, so the resting design
     is untouched. */
  .yc-size-hero__subtitle a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* sizing.html:218-231 — the measuring hint. The reference sets
     `align-self: center` on `.size-hero__hint` and then immediately overrides
     it to flex-start with the two-class `.size-hero .size-hero__hint` rule; the
     centred value only ever applies below 900px. Only the effective value is
     shipped, not the dead one. Border is 1.5px, not the 1px --border-solid. */
  .yc-size-hero__hint {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1.5px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-size-hero__hint-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    color: #4036d6;
  }

  /* ---------- Media column ---------- */
  /* sizing.html:170-181. `align-self: stretch` + `min-height` is what lets the
     frame match the copy column's height and never fall below 360px. */
  .yc-size-hero__media {
    position: relative;
    flex: 0 1 var(--yc-size-hero-media-basis, 460px);
    align-self: stretch;
    min-height: var(--yc-size-hero-media-min, 360px);
    background-color: #ffffff;
    border-radius: var(--yc-size-hero-media-radius, 24px);
    overflow: hidden;
  }

  .yc-size-hero__media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Stamp coin, overhanging the frame's bottom-left inset (sizing.html:186-208).
     `box-shadow` is deliberately absent: style.css resolves --shadow-hard-sm to
     `none` at rest (style.css:124), so the reference coin casts no shadow.
     Width, height, rotation and fill are settings, emitted inline. */
  .yc-size-hero__badge {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 8px;
    text-align: center;
    color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 50%;
  }

  .yc-size-hero__badge-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
  }

  .yc-size-hero__badge-figure {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.05;
  }

  .yc-size-hero__badge-label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* ---------- Responsive ---------- */
  /* responsive.css :root ladder — --gutter 50 -> 20, --container-width -> 100%. */
  @media (max-width: 992px) {
    .yc-size-hero__container {
      max-width: 100%;
      padding-inline: 20px;
    }
  }

  /* sizing.html:664-670 — the page's own collapse. One centred column; the
     frame stops stretching to a stacked sibling and takes a fixed 4/3 box. */
  @media (max-width: 900px) {
    .yc-size-hero__container {
      flex-direction: column;
      gap: 32px;
    }

    .yc-size-hero__head {
      align-items: center;
      text-align: center;
    }

    .yc-size-hero__hint {
      align-self: center;
    }

    .yc-size-hero__media {
      flex: 0 0 auto;
      width: 100%;
      min-height: 0;
      aspect-ratio: 4 / 3;
    }
  }

  @media (max-width: 640px) {
    .yc-size-hero__container {
      padding-inline: 16px;
    }
  }
/* END_SECTION:yc-size-hero */

/* START_SECTION:yc-size-quiz (INDEX:99) */
/* Prototype `.quiz-section` (style.css:366) — a plain flex column whose block
   padding is `--section-padding-y`, stepped 80 -> 64 (<=992) -> 48 (<=640) by
   responsive.css. Emitted from settings rather than through `spacing-style`;
   see the note above the section root for why. */
.yc-size-quiz {
  display: flex;
  flex-direction: column;
  padding-block: var(--yc-quiz-pad-top, 80px) var(--yc-quiz-pad-bottom, 80px);
  /* --lh-body. The reference inherits 1.55 from `body`, a layer this theme
     never ported — Horizon's base is 1.6, which made every line box here
     ~0.6px tall and compounded to ~4px on the section at desktop and ~30px at
     tablet. Declared once so every descendant inherits the reference's
     leading, rather than each element patching it. Same fix, same reason, as
     sections/yc-sample-pack.liquid. */
  line-height: 1.55;
}

/* `.container.quiz-layout` — the prototype's own container: 1620px max, a
   50px gutter that steps to 20px at <=992 and 16px at <=640, turned into a row
   with a 64px gap by `.quiz-layout` (style.css:373-378).

   THE GUTTER IS THE SECTION'S OWN, not Horizon's page grid. Leaving the root
   as Horizon's `.section` grid meant the horizontal inset came from
   `--page-margin` (base.css:265-278), which is 50px down to 750px and 16px
   below it — so between 992px and 750px the wizard sat 30px further in on each
   side than the reference, and between 749px and 641px 4px further out. The
   root is a flex column here for the same reason every other yc-* section on
   this page is one. */
.yc-size-quiz__layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: 1620px;
  margin-inline: auto;
  padding-inline: 50px;
}

.yc-size-quiz__head {
  display: flex;
  flex: 0 1 680px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}

.yc-size-quiz__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #2e2e2e;
  background-color: #ffc7ac;
  border: 1px solid #e2e1ee;
  border-radius: 999px;
}

.yc-size-quiz__eyebrow-ic {
  width: 1em;
  height: 1em;
}

.yc-size-quiz__title {
  margin: 0;
  font-size: 46px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #2e2e2e;
}

.yc-size-quiz__subtitle {
  margin: 0;
  max-width: 620px;
  font-size: 18px;
  font-weight: 400;
  color: #2e2e2e;
}

/* Single centered wizard panel */
.yc-size-quiz__panel {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  align-self: center;
  padding: 40px;
  background-color: #ffffff;
  border: 1px solid #e2e1ee;
  border-radius: 32px;
}

.yc-size-quiz__shape {
  position: absolute;
  /* v3.css .page-v3 .quiz__shape pins the shape to the card's top-right corner. */
  top: -34px;
  right: -34px;
  left: auto;
  z-index: 2;
  width: 100px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* ⚠ THE REFERENCE'S CONTROLS RUN ON THE UA DEFAULT `line-height: normal`,
   NOT on --lh-body. Every one of these is a <button> in the prototype
   (.quiz__option, .quiz__back, .quiz__restart, and the result CTA `.btn`), and
   the prototype's reset only zeroes margin/padding and sets box-sizing — it
   never adds `font: inherit`, so form controls keep the UA's own metrics.

   Measured at 1440: the reference's option button computes `font-size:
   13.3333px; line-height: normal` (pure UA default) and its labels come out
   25px / 20px tall, where inheriting 1.55 gives 24.80px / 20.15px, and the
   "Popular" badge 23.50px against the reference's 24px. Small, but constant at
   every width and cumulative down the option list.

   Restated here rather than left to inherit the root's 1.55, so the boxes
   match. The children that need a size of their own already set one
   (.quiz__option-ic 20px, .quiz__option-arrow 18px), which is why the button's
   own UA font-size never shows. */
   (The option button carries its own copy of this, next to the `font: inherit`
   whose shorthand would otherwise undo it.) */
.yc-size-quiz__back,
.yc-size-quiz__restart,
.yc-size-quiz__btn {
  line-height: normal;
}

/* v3.css:1026-1034 — below 1200px the card sits close to the container edge,
   so the reference tucks the sticker in and shrinks it. Missing here, which
   left it 16px wide and 10px high of its reference position between 1200px and
   641px on BOTH pages. (It is hidden outright at <=640 — see that block.) */
@media (max-width: 1200px) {
  .yc-size-quiz__shape {
    top: -24px;
    right: -16px;
    width: 84px;
  }
}

.yc-size-quiz__bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yc-size-quiz__progress {
  display: flex;
  width: 100%;
  height: 10px;
  background-color: #f0eee3;
  border-radius: 999px;
  overflow: hidden;
}

/* The served width is the FIRST step's share, derived in Liquid from how many
   steps are rendered (25% with the intent step, 33% without) so the bar does
   not flash a wrong width before the script runs. assets/yc-size-quiz.js takes
   over from there using the same formula as the reference's v3.js. */
.yc-size-quiz__progress-bar {
  display: block;
  width: var(--yc-quiz-progress-first, 25%);
  height: 100%;
  background-color: #0fb654;
  border-radius: 999px;
  transition: width 0.35s ease;
}

/* ---------- Corner seal (Size Guide page only, off by default) ----------
   sizing.html:410-441. A stamp on the panel's top-right corner that OVERHANGS
   the frame — `translate(28%, -42%)` — so it never covers the progress bar.
   `box-shadow` is deliberately absent: style.css resolves --shadow-hard-sm to
   `none` at rest (style.css:124), the same finding as the hero's coin. */
.yc-size-quiz__seal {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  transform: translate(28%, -42%) rotate(var(--yc-quiz-seal-rotate, 8deg));
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: var(--yc-quiz-seal-size, 112px);
  height: var(--yc-quiz-seal-size, 112px);
  padding: 8px;
  text-align: center;
  color: #2e2e2e;
  background-color: var(--yc-quiz-seal-bg, #78c6ff);
  border: 1px solid #e2e1ee;
  border-radius: 50%;
}

.yc-size-quiz__seal-ic {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.yc-size-quiz__seal-figure {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.05;
}

.yc-size-quiz__seal-label {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.yc-size-quiz__step-count {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6b6b6b;
}

.yc-size-quiz__context {
  display: flex;
  margin: 0;
  padding: 12px 16px;
  background-color: #ede9fd;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #4036d6;
}

.yc-size-quiz__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Only the active step is shown */
.yc-size-quiz__step {
  display: none;
}

.yc-size-quiz__step.is-active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.yc-size-quiz__q {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #2e2e2e;
}

.yc-size-quiz__q:focus {
  outline: none;
}

.yc-size-quiz__hint {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #6b6b6b;
}

.yc-size-quiz__options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}

/* ⚠ DO NOT RE-ADD A STEP-2 OVERRIDE HERE. style.css:3748-3753 and 3772-3779
   describe a different step-2 layout ("all options in one row, icon on top",
   stacked and centred) — but those rules are DEAD IN THE PROTOTYPE. They select
   `[data-quiz-step="use"]` while BOTH reference pages mark the step up as
   `data-quiz3-step="use"` (sizing.html:979, index-v3.html:896). The attribute
   names differ, so the selectors never match and the step renders with the
   DEFAULT option styling below: a two-column grid of icon-left rows with the
   caret still visible. That is what the reference actually paints on both
   pages, and it is what this section must reproduce.

   The same typo kills style.css:3811 (`option-txt` centring) and style.css:3846
   (`option-arrow { display: none }`), which is why the caret stays visible.

   An earlier build implemented the INTENDED design by porting those rules to a
   working `--use` class. It looked deliberate and measured 0.00px, because the
   step is hidden until the quiz reaches it and the harness compares hidden
   boxes as "hidden on both sides". The client caught it on the live theme.
   If the centred one-row design is ever actually wanted, fix the attribute in
   the prototype first so the reference and the port agree. */

.yc-size-quiz__option {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  background-color: #ffffff;
  border: 1px solid #e2e1ee;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  /* MUST come after `font: inherit`: that shorthand also sets line-height, so
     it re-inherits the root's 1.55 and silently beats any earlier
     `line-height` rule for this button. The reference's option is a plain
     <button> on the UA default — see the controls note higher up. */
  line-height: normal;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.yc-size-quiz__option:hover {
  border-color: #4036d6;
  box-shadow: 4px 4px 0 #2e2e2e;
}

.yc-size-quiz__option.is-active {
  border-color: #4036d6;
  box-shadow: inset 0 0 0 2px #4036d6;
}

.yc-size-quiz__option:focus-visible {
  outline: 2px solid #4036d6;
  outline-offset: 2px;
}

.yc-size-quiz__option--soft {
  background-color: #f0eee3;
}

.yc-size-quiz__option-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #ede9fd;
  color: #4036d6;
}

.yc-size-quiz__option-ic .yc-icon {
  width: 20px;
  height: 20px;
}

.yc-size-quiz__option-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.yc-size-quiz__option-main {
  font-size: 16px;
  font-weight: 700;
  color: #2e2e2e;
}

.yc-size-quiz__option-sub {
  font-size: 13px;
  font-weight: 400;
  color: #6b6b6b;
}

.yc-size-quiz__option-badge {
  position: absolute;
  top: -8px;
  right: 16px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
  background-color: #4036d6;
  border-radius: 999px;
}

.yc-size-quiz__option-arrow {
  display: inline-flex;
  flex-shrink: 0;
  color: #6b6b6b;
}

.yc-size-quiz__option-arrow .yc-icon {
  width: 18px;
  height: 18px;
}

.yc-size-quiz__back,
.yc-size-quiz__restart {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 0;
  background: none;
  border: 0;
  font-size: 14px;
  font-weight: 700;
  color: #4036d6;
  cursor: pointer;
  transition: gap 0.18s ease;
}

.yc-size-quiz__restart {
  align-self: center;
  color: #6b6b6b;
}

.yc-size-quiz__back:hover,
.yc-size-quiz__restart:hover {
  gap: 8px;
}

.yc-size-quiz__back:focus-visible,
.yc-size-quiz__restart:focus-visible,
.yc-size-quiz__btn:focus-visible,
.yc-size-quiz__review:focus-visible {
  outline: 2px solid #4036d6;
  outline-offset: 2px;
}

.yc-size-quiz__back .yc-icon,
.yc-size-quiz__restart .yc-icon {
  width: 16px;
  height: 16px;
}

/* Result step */
.yc-size-quiz__result.is-active {
  align-items: stretch;
  gap: 12px;
}

.yc-size-quiz__result-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  padding: 2px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #2e2e2e;
  background-color: #ffc7ac;
  border-radius: 999px;
}

.yc-size-quiz__result-badge .yc-icon {
  width: 12px;
  height: 12px;
}

.yc-size-quiz__result-card {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px 24px;
  width: 100%;
  padding: 24px;
  background-color: #f0eee3;
  border-radius: 24px;
}

.yc-size-quiz__result-media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.yc-size-quiz__result-media img {
  width: 124px;
  height: 124px;
  object-fit: contain;
  border-radius: 16px;
}

/* No image configured (no default_result_image / per-size result_image) →
   hide the empty <img> so it doesn't show a broken-image icon. It appears
   automatically once a src is set (merchant image or JS-populated). */
.yc-size-quiz__result-media img:not([src]),
.yc-size-quiz__result-media img[src=''] {
  display: none;
}

.yc-size-quiz__result-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  flex: 1 1 auto;
}

.yc-size-quiz__result-size {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #4036d6;
  line-height: 1.1;
}

.yc-size-quiz__result-text {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: #6b6b6b;
}

.yc-size-quiz__plan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 0;
  margin: 0;
  list-style: none;
}

.yc-size-quiz__plan[hidden] {
  display: none;
}

.yc-size-quiz__plan li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #2e2e2e;
}

.yc-size-quiz__plan .yc-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: #0fb654;
}

.yc-size-quiz__result-actions {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(46, 46, 46, 0.14);
}

.yc-size-quiz__btn {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  font-size: 14px;
  font-weight: 700;
  /* The reference's CTA is a <button>, which the UA gives `line-height: normal`
     (style.css:698-715 sets none). Ours is an <a> so it would inherit the
     section's 1.55 and stand 0.69px taller at every width. Measured. */
  line-height: normal;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background-color: #2e2e2e;
  border: 1px solid #e2e1ee;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.yc-size-quiz__btn--purple {
  background-color: #4036d6;
  color: #ffffff;
}

.yc-size-quiz__btn-ic {
  width: 18px;
  height: 18px;
}

.yc-size-quiz__review {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #4036d6;
  text-decoration: underline;
}

.yc-size-quiz__review[hidden] {
  display: none;
}

.yc-size-quiz__review .yc-icon {
  width: 14px;
  height: 14px;
}

/* ---------- Tablet (<= 992px): stack intro above the wizard ---------- */
@media (max-width: 992px) {
  .yc-size-quiz {
    padding-block: var(--yc-quiz-pad-top-tablet, 64px) var(--yc-quiz-pad-bottom-tablet, 64px);
  }

  .yc-size-quiz__layout {
    flex-direction: column;
    gap: 40px;
  }

  .yc-size-quiz__head,
  .yc-size-quiz__panel {
    flex: 0 0 auto;
  }

  .yc-size-quiz__head {
    max-width: none;
    align-items: center;
    text-align: center;
  }

  .yc-size-quiz__title {
    font-size: 36px;
  }

  /* MISSING LADDER STEPS. Both of these are `--fs-h4` in the reference
     (.quiz__q style.css:3729, .quiz__result-size style.css:3920), and
     responsive.css steps that token 24 -> 22 at <=992 -> 18 at <=640. Only the
     24 and the 18 were ported, so the step question rendered 2px large through
     the whole tablet band and displaced everything below it by 2.4px. */
  .yc-size-quiz__q,
  .yc-size-quiz__result-size {
    font-size: 22px;
  }

  /* NO max-width. `.quiz` carries `max-width: 620px` in style.css:3673, but
     `.container.quiz-layout .quiz` overrides it to `max-width: none`
     (style.css:383-386) and nothing at <=992 puts it back — so the reference's
     wizard fills the container here. A 620px cap was 332px narrow at 992px. */
  .yc-size-quiz__panel {
    padding: 24px;
  }

  .yc-size-quiz__layout {
    padding-inline: 20px;
  }
}

/* ⚠ DELIBERATE DEVIATION FROM THE REFERENCE — client-approved 2026-09-10 (D8).
   The reference hides the seal at <=900px ("crowds the wizard on small
   screens", sizing.html:441). It is hidden at <=992px here instead.

   WHY: the seal overhangs the panel by 37.6px, and from 992px down the panel
   fills the container — so between 901px and 992px its right edge sits past the
   viewport and the WHOLE PAGE scrolls sideways by 18px. The reference does the
   same thing (measured: seal right edge 1009.6 against a panel edge of 972 at
   992px), so this is inherited, not introduced. But ruleset.md makes "no
   horizontal scrolling at any viewport" a MUST, and the cost of honouring it is
   only a decorative, aria-hidden stamp in a 92px-wide band — its "20 Sec ·
   2 Questions" is already the section heading's promise, so nothing is lost.

   Raising the breakpoint also matches the reference's own stated intent; the
   prototype simply picked the number before its panel went full-width.

   This is the ONE box on this page that intentionally differs from the
   reference. Everything else still measures 0.00px, and because the seal is
   absolutely positioned with pointer-events: none, hiding it moves nothing. */
@media (max-width: 992px) {
  .yc-size-quiz__seal {
    display: none;
  }
}

/* ---------- Mobile (<= 640px) ---------- */
@media (max-width: 640px) {
  .yc-size-quiz {
    padding-block: var(--yc-quiz-pad-top-mobile, 48px) var(--yc-quiz-pad-bottom-mobile, 48px);
  }

  .yc-size-quiz__layout {
    padding-inline: 16px;
  }

  .yc-size-quiz__title {
    font-size: 27px;
  }

  /* --fs-h4's last step. `.quiz__result-size` was missing it as well as the
     22px one above. */
  .yc-size-quiz__q,
  .yc-size-quiz__result-size {
    font-size: 18px;
  }

  .yc-size-quiz__shape {
    display: none;
  }

  .yc-size-quiz__options {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
  }

  .yc-size-quiz__result-card {
    flex-direction: column;
    /* Column + flex-wrap:wrap makes children with flex-basis:100% wrap into a
       second column and overflow right — force single-column stacking here. */
    flex-wrap: nowrap;
    /* ⚠ NO `align-items` HERE. responsive.css:662-666 sets only
       flex-direction, text-align and gap, leaving the card on the
       `align-items: flex-start` it gets from v3.css:1067-1072. An earlier build
       added `align-items: stretch`, which stretched `.result-actions` to the
       full card width — so the CTA rendered 81.47px too wide at 425px and
       left-aligned content read as full-bleed. The reference keeps that block
       shrink-to-fit, exactly as wide as the review link beneath it. Measured. */
    text-align: center;
    gap: 16px;
  }

  .yc-size-quiz__result-info {
    text-align: center;
    align-items: center;
  }

  .yc-size-quiz__result-badge {
    align-self: center;
  }

  .yc-size-quiz__result-media {
    align-self: center;
  }
}

/* ---------- Result actions stack (<= 760px) ---------- */
@media (max-width: 760px) {
  .yc-size-quiz__result-actions {
    flex-direction: column;
    gap: 12px;
  }

  .yc-size-quiz__btn {
    width: 100%;
  }
}

/* --fs-h2's last step (responsive.css:@380). Missing here, so the heading ran
   3px large below 380px and wrapped to a 6.3px-taller block, displacing the
   whole wizard. */
@media (max-width: 380px) {
  .yc-size-quiz__title {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yc-size-quiz__progress-bar,
  .yc-size-quiz__option,
  .yc-size-quiz__btn,
  .yc-size-quiz__back,
  .yc-size-quiz__restart {
    transition: none;
  }
}
/* END_SECTION:yc-size-quiz */

/* START_SECTION:yc-sizing-pack-callout (INDEX:100) */
/* Prototype `.samplepack` — a flex column. The page zeroes the top padding
     (style.css gives it --space-80; the quiz above already ends on its own) and
     sets a flat 60px bottom at every width. line-height restates the
     reference's inherited --lh-body. */
  .yc-sizing-pack-callout {
    display: flex;
    flex-direction: column;
    line-height: 1.55;
  }

  /* `.container` — the full 1620px one, 50px gutter. The 48px stack gap is
     stated for fidelity but has no effect: the container has one child. */
  .yc-sizing-pack-callout__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* `.samplepack__card` — 200px media | 1fr body | 260px buy. The template is
     built in Liquid from the columns actually rendered, so an empty column
     leaves no hole.

     ⚠ `box-shadow` is a REAL 4px hard shadow here: --shadow-hard-lg resolves
     to `4px 4px 0 var(--color-ink)` (style.css:123), unlike --shadow-hard and
     --shadow-hard-sm which are both `none`. */
  .yc-sizing-pack-callout__card {
    display: grid;
    grid-template-columns: var(--yc-spc-grid, 200px 1fr 260px);
    align-items: center;
    gap: 24px;
    padding: 24px;
    background-color: var(--yc-spc-card-bg, #ffffff);
    border: 1px solid #e2e1ee;
    border-radius: 24px;
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* ---------- Media column ---------- */
  .yc-sizing-pack-callout__media {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background-color: var(--yc-spc-media-bg, #e4f5ff);
    border: 1px solid #e2e1ee;
    border-radius: 16px;
  }

  /* `height: auto`, not a fixed ratio — the tile takes the shot's own. */
  .yc-sizing-pack-callout__img {
    width: 100%;
    height: auto;
  }

  .yc-sizing-pack-callout__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    background-color: var(--yc-spc-badge-bg, #2e2e2e);
    border-radius: 999px;
  }

  /* ---------- Body column ---------- */
  .yc-sizing-pack-callout__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* `.eyebrow` — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius.
     `align-self: flex-start` keeps it shrink-to-fit inside the column, which is
     what `width: fit-content` does for it in the reference. */
  .yc-sizing-pack-callout__eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-sizing-pack-callout__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h2 base (--lh-heading 1.05, --ls-heading -0.03em) with the page's --fs-h4
     size. LADDERED: 24 -> 22 at <=992 -> 18 at <=640. */
  .yc-sizing-pack-callout__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-sizing-pack-callout__lead {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: #6b6b6b;
  }

  /* `ul, ol { list-style: none }` is a global reset in the reference, so the
     markers are off and the padding zeroed. */
  .yc-sizing-pack-callout__perks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-sizing-pack-callout__perks li {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .yc-sizing-pack-callout__perk-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    color: #4036d6;
  }

  /* ---------- Buy column ---------- */
  .yc-sizing-pack-callout__buy {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* A flex row on the BASELINE: the price text is an anonymous flex item and
     the <small> a real one, 8px apart. LADDERED with the title. */
  .yc-sizing-pack-callout__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-sizing-pack-callout__price small {
    font-size: 12px;
    font-weight: 400;
    color: #6b6b6b;
  }

  .yc-sizing-pack-callout__chosen {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    color: #4036d6;
  }

  /* `.btn.btn--ink.btn--block` flattened: 16/32 padding, 14px/700, white on
     ink, 1px border, pill radius, full width. The `transition` is the
     reference's own — nothing changes these properties, because NO `.btn:hover`
     rule exists anywhere in the prototype's stylesheets. */
  .yc-sizing-pack-callout__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    /* NO `text-align: center`. `.btn` sets `justify-content: center`, which
       centres the label and the icon as flex ITEMS, but it sets no text-align —
       so the label's own text stays left-aligned, which shows the moment it
       wraps to two lines (it does here: "Get Your Sizing Pack / Sample").
       Adding text-align: center centred the second line instead, and the BOX
       measurement could not see it — the span's box is identical either way.
       The pixel diff caught it. */
    text-decoration: none;
    color: #ffffff;
    background-color: var(--yc-spc-cta-bg, #2e2e2e);
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  /* The reference's own global ring (style.css:169-177) — 3px indigo, 2px
     offset, --radius-xs. Ported rather than invented. */
  .yc-sizing-pack-callout__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
    border-radius: 4px;
  }

  .yc-sizing-pack-callout__btn-icon {
    flex: 0 0 auto;
    /* `.btn__icon { font-size: var(--fs-18) }` — 18px, not the button's 14px. */
    width: 18px;
    height: 18px;
  }

  .yc-sizing-pack-callout__note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    color: #6b6b6b;
  }

  .yc-sizing-pack-callout__note-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* ---------- Responsive ---------- */
  /* responsive.css: --gutter 50 -> 20, --container-width -> 100%, .container
     gap -> 32, --fs-h4 24 -> 22. */
  @media (max-width: 992px) {
    .yc-sizing-pack-callout__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-sizing-pack-callout__title,
    .yc-sizing-pack-callout__price {
      font-size: 22px;
    }
  }

  /* ⚠ DELIBERATE DEVIATION FROM THE REFERENCE — client-approved 2026-09-17 (D11,
     which supersedes D9). responsive.css:848-858 collapses this card to one
     column at <=640px. It is collapsed at <=992px here instead.

     WHY (readability — the reason for 992): the grid is `200px 1fr 260px`. The
     outer two tracks are FIXED, so every pixel lost below ~1100px comes out of
     the body column alone. Measured on the reference:

       1200px -> body 542px, lead 3 lines, section 329px
        992px -> body 394px, lead 3 lines, section 350px
        900px -> body 302px, lead 4 lines, section 372px
        820px -> body 222px, lead 6 lines, section 456px
        768px -> body 170px, lead 7 lines, section 539px   (iPad portrait)
        723px -> body 125px, lead 11 lines, section 689px

     At 723px the text column is NARROWER THAN THE 200px PHOTO beside it and the
     paragraph runs 11 lines instead of 3, doubling the section's height. That
     is the whole 721-992px band, which is exactly where tablets sit. The
     reference does the same thing — the port measured 0.00px against it at 768,
     860, 900 and 992 — so this is inherited, not introduced.

     WHY NOT LOWER THAN 720 (the original D9 floor, still true): the 1fr body
     track cannot shrink below its min-content floor of 122.47px, so the card
     needs 200 + 122.47 + 260 + 48 (two gaps) + 48 (padding) + 2 (border) =
     680.47px, i.e. a 720.47px viewport at the 20px gutter. Below that the grid
     stops fitting and pushes the card past the viewport: measured 15px of
     horizontal page scroll at 660, 30px at 645, 34px at 641. ruleset.md makes
     "no horizontal scrolling at any viewport" a MUST, so 720px was the hard
     ceiling on how low this breakpoint could ever go. D9 set it there because
     that is where the layout stops FITTING; D11 raises it to where the layout
     stops READING, which is the higher bar and the one the client asked for.

     992px introduces no new breakpoint — it is already a step in this section
     (the block above) and in the theme's own ladder.

     The card is the ONLY thing this moves. The gutter and font-size steps below
     stay on the reference's own 640px breakpoint — they are token ladders and
     have nothing to do with either the overflow or the reflow. */
  @media (max-width: 992px) {
    .yc-sizing-pack-callout__card {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .yc-sizing-pack-callout__media {
      max-width: var(--yc-spc-media-max-mobile, 220px);
      margin-inline: auto;
    }
  }

  /* responsive.css's own token steps: --gutter 16, --fs-h4 18. Breakpoint
     unchanged. */
  @media (max-width: 640px) {
    .yc-sizing-pack-callout__container {
      padding-inline: 16px;
    }

    .yc-sizing-pack-callout__title,
    .yc-sizing-pack-callout__price {
      font-size: 18px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-sizing-pack-callout__btn {
      transition: none;
    }
  }
/* END_SECTION:yc-sizing-pack-callout */

/* START_SECTION:yc-split (INDEX:101) */
.yc-split {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Top wave divider — flipped to curve upward, drifting sideways on loop */
  .yc-split__wave {
    position: absolute;
    left: 0;
    top: -1px;
    bottom: auto;
    width: 200%;
    line-height: 0;
    pointer-events: none;
  }

  .yc-split__wave-svg {
    display: block;
    width: 200%;
    height: 90px;
    fill: #ffffff;
    transform: scaleY(-1);
    animation: yc-split-wave 14s linear infinite;
  }

  @keyframes yc-split-wave {
    from { transform: scaleY(-1) translateX(0); }
    to { transform: scaleY(-1) translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-split__wave-svg {
      animation: none;
      width: 100%;
    }
  }

  .yc-split__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    /* v3.css .page-v3 .split__inner centers content + media vertically (the old
       top-align existed to seat the now-removed fragrance badge at the corner). */
    align-items: center;
    gap: 64px;
    /* Page-width container: the .yc-split root is display:flex (for the wave +
       stacking), which overrides Horizon's .section grid gutters, so the inner
       must cap + gutter the content itself (matches the concern/founder pattern
       and the prototype .container = 1620px max, 50px gutter). */
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  .yc-split__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 1 1 0;
    min-width: 0;
  }

  /* Eyebrow pill */
  .yc-split__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #FFC7AC;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-split__eyebrow-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }

  .yc-split__title {
    margin: 0;
    font-size: 46px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-split__lead {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
    max-width: 46ch;
  }

  /* Feature list — two columns, one on phones */
  .yc-split__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    column-gap: 40px;
    row-gap: 32px;
    width: 100%;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .yc-split__feature {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .yc-split__feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #ffffff;
    color: #4036d6;
  }

  .yc-split__feature-svg {
    width: 20px;
    height: 20px;
  }

  .yc-split__feature-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .yc-split__feature-title {
    margin: 0;
    font-size: 19px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-split__feature-text {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #2e2e2e;
    line-height: 1.55;
  }

  /* CTA button */
  .yc-split__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: #ffffff;
    background-color: #4036d6;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }

  @media (hover: hover) {
    .yc-split__btn:hover {
      transform: translateY(-2px);
    }
  }

  .yc-split__btn:focus-visible {
    outline: 2px solid #2e2e2e;
    outline-offset: 3px;
  }

  .yc-split__btn-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  /* Media column + corner sticker badge */
  .yc-split__media {
    position: relative;
    display: flex;
    flex: 1 1 0;
    justify-content: center;
    align-self: center;
    min-width: 0;
  }

  .yc-split__media-img {
    width: 100%;
    height: auto;
  }

  .yc-split__media-placeholder {
    display: block;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
  }

  .yc-split__media-placeholder .yc-split__placeholder-svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .yc-split__badge {
    position: absolute;
    top: 23px;
    left: -96px;
    width: 104px;
    height: auto;
    z-index: 2;
    transform: rotate(-12deg);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1200px) {
    .yc-split__badge {
      width: 82px;
      top: -10px;
      left: -60px;
    }
  }

  @media (max-width: 992px) {
    .yc-split__inner {
      flex-direction: column;
      gap: 40px;
      padding-inline: 20px;
    }

    .yc-split__media {
      order: -1;
      align-self: stretch;
    }

    .yc-split__title {
      font-size: 36px;
    }

    .yc-split__feature-title {
      font-size: 17px;
    }

    .yc-split__badge {
      left: -8px;
    }
  }

  @media (max-width: 640px) {
    /* The 140px desktop top padding (positions the badge over the media on
       desktop) scales to ~98px on mobile, leaving a huge gap above this
       section. On mobile the layout stacks, so trim it to the reference gap. */
    .yc-split {
      padding-block-start: 32px !important;
    }

    .yc-split__inner {
      padding-inline: 16px;
    }

    .yc-split__features {
      grid-template-columns: 1fr;
    }

    .yc-split__title {
      font-size: 27px;
    }

    .yc-split__feature-title {
      font-size: 16px;
    }

    .yc-split__badge {
      top: -8px;
      left: 4px;
      width: 76px;
    }
  }
/* END_SECTION:yc-split */

/* START_SECTION:yc-story (INDEX:102) */
.yc-story__container {
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  .yc-story__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }

  .yc-story__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 2 1 0;
  }

  /* Eyebrow pill */
  .yc-story__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-story__eyebrow svg {
    width: 14px;
    height: 14px;
    flex: none;
  }

  .yc-story__title {
    margin: 0;
    font-size: 46px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-story__body {
    color: #2e2e2e;
    font-size: 16px;
    line-height: 1.55;
  }

  .yc-story__body p {
    margin: 0;
  }

  .yc-story__body > * + * {
    margin-top: 16px;
  }

  /* CTA button (matches .btn.btn--purple) */
  .yc-story__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background-color: #4036d6;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }

  .yc-story__btn:hover {
    background-color: #2f2799;
    box-shadow: 4px 4px 0 #2e2e2e;
    transform: translate(-1px, -1px);
  }

  .yc-story__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 3px;
  }

  .yc-story__btn-icon {
    display: inline-flex;
    font-size: 18px;
  }

  .yc-story__btn-icon svg {
    width: 18px;
    height: 18px;
  }

  /* Media column */
  .yc-story__media {
    position: relative;
    display: flex;
    flex: 3 1 0;
  }

  .yc-story__video-wrap {
    position: relative;
    display: block;
    width: 100%;
  }

  .yc-story__media img,
  .yc-story__video,
  .yc-story__poster,
  .yc-story__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 24px;
  }

  /* Poster overlay — see the markup comment. Replaces the video's `poster=`
     attribute, which the browser fetches eagerly regardless of `preload="none"`.
     Specificity has to beat `.yc-story__media img` above (0,1,1), hence the
     descendant selector. `inset: 0` with both dimensions constrained makes the
     inherited `aspect-ratio` moot, but it is reset explicitly so the two rules
     cannot argue. */
  .yc-story__media .yc-story__poster-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    pointer-events: none;
  }

  .yc-story__video-wrap.is-playing .yc-story__poster-overlay {
    display: none;
  }

  /* Decorative shape sticker straddling the top edge of the media */
  .yc-story__media .yc-story__shape {
    position: absolute;
    top: 20px;
    left: 15%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 120px;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
  }

  /* Play button */
  .yc-story__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    color: #2e2e2e;
    cursor: pointer;
    padding: 0;
    transition: transform 0.18s ease;
  }

  .yc-story__play svg {
    width: 32px;
    height: 32px;
  }

  .yc-story__play:hover {
    transform: translate(-50%, -50%) scale(1.08);
  }

  .yc-story__play:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 3px;
  }

  .yc-story__play.is-hidden {
    display: none;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 992px) {
    .yc-story__container {
      padding-inline: 20px;
    }

    .yc-story__inner {
      flex-direction: column;
      align-items: stretch;
      gap: 40px;
    }

    /* Lead with the media on mobile so the video isn't stranded below the
       CTA. Source order stays content-first for screen readers / keyboard. */
    .yc-story__media {
      order: -1;
    }

    .yc-story__title {
      font-size: 36px;
    }
  }

  @media (max-width: 640px) {
    .yc-story__container {
      padding-inline: 16px;
    }

    .yc-story__title {
      font-size: 27px;
    }

    /* Shape sticker is hidden on small screens (matches prototype) */
    .yc-story__media .yc-story__shape {
      display: none;
    }
  }

  @media (max-width: 380px) {
    .yc-story__title {
      font-size: 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-story__btn,
    .yc-story__play {
      transition: none;
    }

    .yc-story__btn:hover {
      transform: none;
    }

    .yc-story__play:hover {
      transform: translate(-50%, -50%);
    }
  }
/* END_SECTION:yc-story */

/* START_SECTION:yc-sub-benefits (INDEX:103) */
/* .company-section — relative so the corner sticker anchors to the band. */
  .yc-sub-benefits {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-sub-benefits-pt, 60px) var(--yc-sub-benefits-pb, 60px);
  }

  /* .container — 1620px max, 50px gutter, 48px stack gap, self-centred. */
  .yc-sub-benefits__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    align-self: center;
    padding-inline: 50px;
  }

  /* .sticker + .section-sticker + --tl, flattened.

     ROOT CAUSE for top/width here, not the reference's 40px/96px: the head is
     centred and grows close to the full section width at every width below
     ~1500px (client screenshot, iPad 768px — "DESIGNED BY A MEDICAL DAD"
     biting into "One less thing to remember..."). Same defect class as the
     yc-comparison.liquid sticker fixed 2026-09-22, same fix shape — tucked
     smaller and higher so the badge's own box clears the heading's top edge
     instead of overlapping it. Verified clear (17px+) from 641px (just above
     the existing <=640px hide) through 1920px. See context.md 2026-09-24. */
  .yc-sub-benefits__sticker {
    position: absolute;
    top: 16px;
    left: 3%;
    z-index: 1;
    width: 72px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    transform: rotate(-14deg);
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  /* ---------- Head ---------- */
  /* .section-head with `.company-section .section-head` (660px, centred). */
  .yc-sub-benefits__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 660px;
    margin-inline: auto;
    text-align: center;
  }

  /* .eyebrow — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius. */
  .yc-sub-benefits__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-sub-benefits__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  /* h2 base — 46px, --lh-heading 1.05, --ls-heading -0.03em. */
  .yc-sub-benefits__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* .section-subtitle — 18px/400, capped at 620px. */
  .yc-sub-benefits__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* ---------- Orbit ---------- */
  /* .why-orbit — the centre column is sized to hold the product box. Cards hug
     their copy (align-items: center) instead of stretching to the tall centre
     cell. */
  .yc-sub-benefits__orbit {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 0.95fr) 1fr;
    gap: 22px;
    align-items: center;
    width: 100%;
  }

  /* With the visual switched off there is no centre cell to reserve, so the
     orbit becomes an even three-up. Not a reference state — it is the graceful
     empty state for a merchant who removes the product shot. */
  .yc-sub-benefits__orbit--no-visual {
    grid-template-columns: repeat(3, 1fr);
  }

  .yc-sub-benefits__visual {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
  }

  .yc-sub-benefits__cloud {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    color: var(--yc-sub-benefits-cloud, #e4f5ff);
  }

  .yc-sub-benefits__img {
    position: relative;
    z-index: 1;
    width: 78%;
    max-width: 240px;
    height: auto;
  }

  .yc-sub-benefits__spark {
    position: absolute;
    z-index: 2;
    max-width: none;
    color: var(--yc-sub-benefits-spark, #ffc7ac);
  }

  .yc-sub-benefits__spark--a {
    top: 6%;
    right: 4%;
    width: 30px;
    transform: rotate(12deg);
  }

  .yc-sub-benefits__spark--b {
    bottom: 10%;
    left: 2%;
    width: 22px;
    transform: rotate(-14deg);
  }

  /* ---------- Responsive (reference breakpoints) ---------- */

  /* subscription.html 243-246 — the default 660px head wraps this section's h2
     onto four lines from laptop widths up; 860px lands it on three and balance
     evens their lengths. Phones and tablets keep 660px. */
  @media (min-width: 992px) {
    .yc-sub-benefits__head {
      max-width: 860px;
    }

    .yc-sub-benefits__title {
      text-wrap: balance;
    }
  }

  /* responsive.css 31 — --gutter 50 -> 20, --container-width -> 100%,
     `.container { gap: var(--space-32) }` (104), and --fs-h2 46 -> 36. */
  @media (max-width: 992px) {
    .yc-sub-benefits__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-sub-benefits__title {
      font-size: 36px;
    }
  }

  /* subscription.html 963-977 — the orbit needs a centre column wide enough to
     hold the box; below that it drops to two plain columns and the visual goes
     with it. (The card margin reset that pairs with this lives in
     blocks/_yc-sub-benefit.liquid.) */
  @media (max-width: 1080px) {
    .yc-sub-benefits__orbit,
    .yc-sub-benefits__orbit--no-visual {
      grid-template-columns: 1fr 1fr;
    }

    .yc-sub-benefits__visual {
      display: none;
    }
  }

  /* responsive.css 124 — --gutter -> 16px, and --fs-h2 -> 27px. */
  @media (max-width: 640px) {
    .yc-sub-benefits__container {
      padding-inline: 16px;
    }

    .yc-sub-benefits__title {
      font-size: 27px;
    }

    /* .section-sticker { display: none } — the accents crowd the copy here. */
    .yc-sub-benefits__sticker {
      display: none;
    }
  }

  /* subscription.html 807-810 — single column of cards on phones. */
  @media (max-width: 600px) {
    .yc-sub-benefits__orbit,
    .yc-sub-benefits__orbit--no-visual {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }

  /* responsive.css 891-894 — --fs-h2 -> 24px. */
  @media (max-width: 380px) {
    .yc-sub-benefits__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-sub-benefits */

/* START_SECTION:yc-sub-compare (INDEX:104) */
/* .company-section — relative so the corner sticker anchors to the band. */
  .yc-sub-compare {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-sub-compare-pt, 60px) var(--yc-sub-compare-pb, 60px);
  }

  /* .container — 1620px max, 50px gutter, 48px stack gap, self-centred. */
  .yc-sub-compare__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    align-self: center;
    padding-inline: 50px;
  }

  /* .sticker + .section-sticker + --tr + .badge-wide. The Stronger Together
     artwork is landscape, so it takes more width than the round 96px stickers
     even after this fix.

     ROOT CAUSE for top/width here, not the reference's 40px/132px: the head
     is centred and grows close to the full section width at every width
     below ~1500px (client screenshot, iPad 768px — "STRONGER TOGETHER" biting
     into "Subscription vs. One-Time Purchase"). Same defect class as the
     yc-comparison.liquid sticker fixed 2026-09-22 and yc-sub-benefits.liquid
     fixed alongside this one — tucked smaller and higher so the badge's own
     box clears the heading's top edge instead of overlapping it. Verified
     clear (12px+) from 641px (just above the existing <=640px hide) through
     1920px. See context.md 2026-09-24. */
  .yc-sub-compare__sticker {
    position: absolute;
    top: 8px;
    right: 3%;
    z-index: 1;
    width: 84px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    transform: rotate(12deg);
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  /* ---------- Head ---------- */
  /* .section-head with `.company-section .section-head` (660px, centred). */
  .yc-sub-compare__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 660px;
    margin-inline: auto;
    text-align: center;
  }

  .yc-sub-compare__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-sub-compare__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  .yc-sub-compare__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-sub-compare__subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* ---------- Slider shell ---------- */
  /* .slider.mobile-slider — gap 0 on desktop, and the dots hidden until the
     phone breakpoint turns the table into a snapping track. */
  .yc-sub-compare__slider {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  /* .sub-compare-wrap. The focus ring is not in the reference — this is a
     keyboard-reachable scroll region now, so it needs a visible focus state
     (WCAG 2.4.7). Indigo on white measures 6.64:1 on the cream/white bands
     this section sits on. */
  .yc-sub-compare__wrap {
    width: 100%;
    overflow-x: auto;
  }

  .yc-sub-compare__wrap:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 4px;
    border-radius: 24px;
  }

  /* .sub-compare. padding-block is the creative pass's calc(16px + 8px) = 24px;
     padding-inline stays the base 16px. */
  .yc-sub-compare__table {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1.15fr 1fr;
    gap: 0;
    /* One of the three resets `.sub-compare` applies to the base track
       (subscription.html:362-364), and the one that was missed: without it the
       `cursor: grab` from `.slider__track` inherits to every cell, so the whole
       table reads as draggable when it is not. */
    cursor: default;
    width: 100%;
    min-width: 620px;
    padding: 24px 16px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 24px;
    overflow: hidden;
    /* Inherited from the base `.slider__track` (style.css:6013-6025), which
       stays in force because its reset selector never matches — see the
       header note. Inert while `overflow: hidden` prevents scrolling, but it
       is the reference's computed state and it becomes live under 600px. */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .yc-sub-compare__table::-webkit-scrollbar {
    display: none;
  }

  /* `.slider__track > *` (style.css:6049-6052). The flex basis there is inert
     on a grid item; the snap alignment is not, and it applies at every width. */
  .yc-sub-compare__table > * {
    scroll-snap-align: start;
  }

  /* .sub-compare__highlight — the fill behind the middle column. The negative
     block margin pulls it past the table's own vertical padding, and scale
     1.04 pops it forward. --span is written by Liquid from the row count. */
  .yc-sub-compare__highlight {
    grid-column: 2;
    grid-row: 1 / span var(--span, 8);
    z-index: 0;
    margin-block: -16px;
    background-color: var(--yc-sub-compare-highlight, #7270a4);
    border: 1px solid #2e2e2e;
    border-radius: 24px;
    box-shadow: 4px 4px 0 #2e2e2e;
    transform: scale(1.04);
  }

  /* ---------- Cells ---------- */
  /* Every cell is placed explicitly, because the highlight is — otherwise
     auto-placement flows around it and the columns shift. The row comes from
     Liquid via --r; the column from a static class. */
  .yc-sub-compare__cell {
    position: relative;
    z-index: 1;
    grid-row: var(--r, auto);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px;
    font-size: 14px;
    line-height: 1.55;
    color: #2e2e2e;
    border-bottom: 1px solid #e2e1ee;
  }

  .yc-sub-compare__cell--c1 {
    grid-column: 1;
  }

  .yc-sub-compare__cell--c2 {
    grid-column: 2;
  }

  .yc-sub-compare__cell--c3 {
    grid-column: 3;
  }

  /* The last row carries no rule. */
  .yc-sub-compare__cell:nth-last-child(-n + 3) {
    border-bottom: none;
  }

  .yc-sub-compare__cell--label {
    font-size: 15px;
    font-weight: 600;
  }

  .yc-sub-compare__label-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    font-size: 20px;
    line-height: 1;
    color: #4036d6;
  }

  .yc-sub-compare__cell--head {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 24px;
    padding-bottom: 24px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
  }

  /* The Subscribe column sits on the tinted highlight. */
  .yc-sub-compare__cell--sub {
    padding-inline: 24px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
  }

  /* Gutter between the tinted Subscribe column and this one — without it the
     icons sit flush against the tint's edge (client note in the reference). */
  .yc-sub-compare__cell--once {
    padding-left: 32px;
  }

  .yc-sub-compare__cell-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    font-size: 24px;
    line-height: 1;
  }

  .yc-sub-compare__cell--sub .yc-sub-compare__cell-icon {
    color: #ffffff;
  }

  .yc-sub-compare__cell--once .yc-sub-compare__cell-icon {
    color: #6b6b6b;
  }

  .yc-sub-compare__flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 12px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border-radius: 999px;
  }

  /* 24px and WHITE, which looks wrong in a 10px pill and is nevertheless what
     the reference renders. `.sub-compare__cell--sub i` (403-430) and the
     creative pass's `.sub-compare__cell--sub i { font-size: 24px }` (993) were
     written for the body cells' check marks, but they match ANY `<i>` inside a
     `--sub` cell — and the flag sits inside the `--sub` HEADER cell, so its
     star is caught too.

     Reproduced deliberately, because it is not cosmetic: a 24px icon in a
     10px pill makes that pill 28px tall instead of 19.5px, which sets the
     header row's height and therefore the whole table's. Measured.

     ⚠ Flagged for the client: the star is white on the peach pill, about
     1.9:1, so it is all but invisible. No AA failure — it is decorative and
     the pill's text carries the meaning — but it is almost certainly an
     unintended cascade rather than a design choice. See context.md Batch 72. */
  .yc-sub-compare__flag-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
  }

  /* ---------- Dots ---------- */
  /* `.slider__dots`. The dots themselves (`.yc-slider__dot`) live in
     `assets/yc-mobile-slider.css`, shared with the subscriber quotes — they
     were duplicated here and had already drifted from the reference. Only the
     row that holds them is this section's business, because only this section
     knows where it sits and when it appears. */
  .yc-sub-compare__dots {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */

  /* responsive.css 31 — --gutter 50 -> 20, --container-width -> 100%,
     `.container { gap: var(--space-32) }` (104), and --fs-h2 46 -> 36. */
  @media (max-width: 992px) {
    .yc-sub-compare__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-sub-compare__title {
      font-size: 36px;
    }
  }

  /* responsive.css 124 — --gutter -> 16px, --fs-h2 -> 27px, and
     `.section-sticker { display: none }`. */
  @media (max-width: 640px) {
    .yc-sub-compare__container {
      padding-inline: 16px;
    }

    .yc-sub-compare__title {
      font-size: 27px;
    }

    .yc-sub-compare__sticker {
      display: none;
    }
  }

  /* subscription.html 757-797 — the table is 620px wide and already scrolls;
     giving it snap points and dots makes it read as a slider rather than a
     stray scrollbar. The grid's own cells are the snap targets, and their three
     distinct column offsets become the three dots. Note the scrolling moves
     from the wrapper to the grid itself here. */
  @media (max-width: 600px) {
    .yc-sub-compare__slider {
      gap: 16px;
    }

    .yc-sub-compare__wrap {
      overflow: visible;
    }

    /* Only the track geometry changes here. The snap type, snap alignment and
       hidden scrollbar are already on from the base rules above — the
       reference restates them in this block, which is why they look
       phone-only at a glance. */
    .yc-sub-compare__table {
      grid-template-columns: 150px 210px 210px;
      min-width: 0;
      overflow-x: auto;
    }

    .yc-sub-compare__dots {
      display: flex;
    }
  }

  /* responsive.css 891-894 — --fs-h2 -> 24px. */
  @media (max-width: 380px) {
    .yc-sub-compare__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-sub-compare */

/* START_SECTION:yc-sub-cta (INDEX:105) */
/* .company-section — 60px block padding, no background of its own. The
     reference's own comment on this one: the padding-top is deliberately back,
     because the FAQ above is a cream band and a flush-top card would butt
     straight against the colour change. */
  .yc-sub-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-sub-cta-pt, 60px) var(--yc-sub-cta-pb, 60px);
    background-color: var(--yc-sub-cta-bg, transparent);
  }

  /* .container — 1620px max, 50px gutter, 48px stack gap, self-centred. */
  .yc-sub-cta__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* .sub-cta — `overflow: hidden` is load-bearing twice over: it clips the
     checker motif to the bottom edge, and it is why both badges sit inside the
     card instead of overhanging it. */
  .yc-sub-cta__card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 48px 32px;
    text-align: center;
    color: #ffffff;
    background-color: var(--yc-sub-cta-card, #4036d6);
    border: 1px solid #2e2e2e;
    border-radius: 32px;
  }

  /* `.sub-cta > *` — lifts the content above the checker, which sits at 0. */
  .yc-sub-cta__card > * {
    position: relative;
    z-index: 1;
  }

  /* .eyebrow — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius.
     Ink on peach is 9.06:1, unaffected by the card behind it. */
  .yc-sub-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-sub-cta__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  /* h2 at --fs-h3 (32px), not --fs-h2: it is a card heading, one step under
     the section headings above it. White on the indigo card is 7.73:1. */
  .yc-sub-cta__title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #ffffff;
  }

  .yc-sub-cta__body {
    margin: 0;
    max-width: 560px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: #ffffff;
  }

  /* .sub-cta__actions */
  .yc-sub-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  /* .sub-cta__badge — the bolt is tall and narrow, so it takes a smaller width
     than the hand. Note the shadow alpha is 0.22 here, not the 0.18 the
     section stickers elsewhere on the page use. */
  .yc-sub-cta__badge {
    position: absolute;
    z-index: 2;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.22));
  }

  /* Size and inset are settings, because the reference's values assume ITS
     crops. `width: 58px` is the width of the bolt itself in
     verceldesign-youthcrews/images/badge-bolt.png (668x1097 — tall and
     narrow). Point the slot at a square, padded asset instead and the same
     58px renders a much smaller bolt inside a transparent box. The fallbacks
     below are the reference's numbers, so an exact-crop asset needs no
     settings at all. */
  .yc-sub-cta__badge--tr {
    top: var(--yc-sub-cta-badge-tr-top, 18px);
    right: var(--yc-sub-cta-badge-tr-right, 30px);
    width: var(--yc-sub-cta-badge-tr-width, 58px);
    transform: rotate(var(--yc-sub-cta-badge-tr-rotate, 10deg));
  }

  .yc-sub-cta__badge--bl {
    bottom: var(--yc-sub-cta-badge-bl-bottom, 16px);
    left: var(--yc-sub-cta-badge-bl-left, 30px);
    width: var(--yc-sub-cta-badge-bl-width, 88px);
    transform: rotate(var(--yc-sub-cta-badge-bl-rotate, -10deg));
  }

  /* .sub-cta__checker — flush to the bottom edge (the -1px hides a rounding
     seam against the border) and faded well back, so it reads as texture
     rather than as the checker bands the other sections use. */
  .yc-sub-cta__checker {
    position: absolute;
    bottom: -1px;
    left: 50%;
    z-index: 0;
    width: min(640px, 90%);
    height: 96px;
    opacity: 0.35;
    pointer-events: none;
    transform: translateX(-50%);
  }

  .yc-sub-cta__checker-svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */

  /* responsive.css 31 — --gutter 50 -> 20, --container-width -> 100%, and
     `.container { gap: var(--space-32) }` (104). --fs-h3 steps 32 -> 26 here
     and -> 21 at 640 (style.css 56, responsive.css 22 and 114). */
  @media screen and (max-width: 992px) {
    .yc-sub-cta__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-sub-cta__title {
      font-size: 26px;
    }
  }

  /* responsive.css 124 — --gutter -> 16px, --fs-h3 -> 21px — and 759,
     `.btn { width: 100% }`, which is LIVE on this row: below 640px the
     reference takes both buttons full width so they stack. Missing until the
     Gifting build measured it; it was costing this row up to 283.20px on the
     Subscription page too. */
  /* ⚠ THE WRAPPER HAS TO TAKE THE WIDTH, NOT JUST THE LINK. _yc-sub-cta-button
     declares no `"tag": null`, so each button sits inside its own block wrapper,
     and it is that wrapper, not the row, that a bare `width: 100%` on the link
     would resolve against — the row would render exactly as before. This is the
     trap recorded as Batch 86. Both selectors are declared so the rule holds
     whether or not a wrapper is present. */
  @media screen and (max-width: 640px) {
    .yc-sub-cta__container {
      padding-inline: 16px;
    }

    .yc-sub-cta__title {
      font-size: 21px;
    }

    .yc-sub-cta__actions > *,
    .yc-sub-cta__btn {
      width: 100%;
    }
  }

  /* subscription.html 813 — the card is too narrow here for corner badges;
     they landed on the heading and the buttons. Decorative, so they drop, the
     same way responsive.css drops .section-sticker at phone widths. */
  @media screen and (max-width: 600px) {
    .yc-sub-cta__badge {
      display: none;
    }
  }
/* END_SECTION:yc-sub-cta */

/* START_SECTION:yc-sub-hero (INDEX:106) */
/* .company-hero, with the creative-pass override (846) that adds
     overflow:hidden and takes the padding to 65px. overflow is what keeps the
     116%-wide product shot inside the band. */
  /* Padding comes through custom properties rather than straight inline
     padding, so the <=1080px pair below can override it without !important —
     an inline `padding-block` would beat any stylesheet rule. */
  .yc-sub-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-sub-hero-pt, 65px) var(--yc-sub-hero-pb, 65px);
    text-align: center;
  }

  /* .container — 1620px max, 50px gutter, 48px stack gap, self-centred.
     Deliberately NOT position:relative/z-index:1 (the pattern the FAQ hero
     uses): on this section the reference's container is a plain static box,
     and the corner badges already sit above it on z-index 4. Adding a stacking
     context here would be a deviation with no purpose. */
  .yc-sub-hero__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    /* align-self, not margin-inline: auto — the prototype's own mechanism.
       Same result, but it keeps the computed box identical too. */
    align-self: center;
    padding-inline: 50px;
  }

  /* ---------- Corner badges ---------- */
  /* .sticker (position/drop-shadow) + .sub-hero__badge (z-index/width) +
     the two corner placements, flattened. */
  .yc-sub-hero__badge {
    position: absolute;
    z-index: 4;
    width: 110px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-sub-hero__badge--tr {
    top: 44px;
    right: 40px;
    transform: rotate(9deg);
  }

  .yc-sub-hero__badge--bl {
    bottom: 56px;
    left: 26px;
    transform: rotate(-9deg);
  }

  /* ---------- Grid ---------- */
  /* .sub-hero-grid (847-856). padding-left reserves the lane the corner
     badges live in, so they never land on the eyebrow or the chips. */
  .yc-sub-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 32px;
    align-items: center;
    text-align: left;
    padding-left: 150px;
  }

  /* .section-head with `.sub-hero-grid .section-head` (857-864) on top: left
     aligned, capped at 620px, no auto margins. */
  .yc-sub-hero__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 620px;
    text-align: left;
  }

  /* .eyebrow — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius.
     line-height pinned to the prototype's --lh-body so the pill keeps its
     reference height whatever the theme's body line-height is. */
  .yc-sub-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* 1em, not 1.15em: Phosphor renders a 12.00 x 12.00 box at the eyebrow's
     12px and yc-icon draws the same artwork on the same 256-unit viewBox
     (measured in Batch 65). */
  .yc-sub-hero__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* h1 base (Poppins 700, #2e2e2e) with `.sub-hero-grid h1` (865) replacing
     the size, line-height and tracking. clamp written in px — see the header
     note. */
  .yc-sub-hero__title {
    margin: 0;
    font-size: clamp(38.4px, 4.6vw, 62.4px);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.02em;
    color: #2e2e2e;
  }

  /* .section-subtitle with `.sub-hero-grid .section-subtitle` (866): 16px,
     capped at 380px so it sets short lines beside the tall headline. */
  .yc-sub-hero__subtitle {
    margin: 0;
    max-width: 380px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* The prototype's base `a { color: inherit; text-decoration: none }`, pinned
     so the theme's own link styling cannot colour or underline copy the
     reference leaves plain. */
  .yc-sub-hero__subtitle a {
    color: inherit;
    text-decoration: none;
  }

  /* Not in the reference, which has no focus style here: a keyboard user must
     still be able to see the link (WCAG 2.2 AA, 2.4.7). Keyboard only, so the
     resting design is untouched. */
  .yc-sub-hero__subtitle a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* .sub-hero__actions (85-91) with the creative-pass margin-top (869) and
     `.sub-hero-grid .sub-hero__actions` left alignment (867-868). */
  .yc-sub-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 4px;
  }

  /* .sub-hero__chips (92-98) with the creative-pass gap/margin (935) and the
     left alignment from 867-868. */
  .yc-sub-hero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 16px;
  }

  /* ---------- Visual ---------- */
  .yc-sub-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
  }

  /* Soft organic wash behind the product — no outline, so the photo reads as
     floating on colour. Ice blue rather than the saturated sky token because
     the product PNG feathers out to white at its edges. */
  .yc-sub-hero__blob {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 92%;
    height: 84%;
    transform: translate(-48%, -52%);
    background-color: var(--yc-sub-hero-blob, #e4f5ff);
    border-radius: 54% 46% 58% 42% / 46% 56% 44% 54%;
  }

  /* Pink starburst peeking out from behind the product, top-left. */
  .yc-sub-hero__burst {
    position: absolute;
    z-index: 0;
    top: 2%;
    left: 6%;
    width: 132px;
    height: 132px;
    background-color: var(--yc-sub-hero-burst, #ff92eb);
    opacity: 0.85;
    clip-path: polygon(
      50% 0%,
      60% 22%,
      82% 10%,
      78% 34%,
      100% 38%,
      82% 53%,
      97% 72%,
      74% 72%,
      76% 96%,
      56% 82%,
      44% 100%,
      36% 78%,
      14% 88%,
      18% 64%,
      0% 56%,
      18% 42%,
      3% 24%,
      26% 25%,
      24% 2%,
      44% 16%
    );
  }

  /* Deliberately wider than the blob so the packs break past its edges
     instead of sitting neatly inside it. The explicit width also overrides
     the theme's global `img { width: 100% }` (base.css:80), which the
     prototype's own reset does not have. */
  .yc-sub-hero__img {
    position: relative;
    z-index: 2;
    width: 116%;
    max-width: 680px;
    height: auto;
  }

  /* Loose ink doodle — the squiggle from the reference. */
  /* max-width: none undoes Horizon's global `svg { max-width: 100% }`
     (base.css:75), which the prototype's own reset does not have. No effect at
     the current 92px, but it is not the reference box. */
  .yc-sub-hero__doodle {
    position: absolute;
    z-index: 1;
    right: -6px;
    top: 44%;
    width: 92px;
    max-width: none;
    color: var(--yc-sub-hero-doodle, #0fb654);
    pointer-events: none;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */

  /* subscription.html 947-949 — laptop widths squeeze the copy column
     hardest, so the reserved lane narrows and the copy column takes a bigger
     share to keep all four chips on one line. (The chip type/padding half of
     this breakpoint lives in blocks/_yc-sub-chip.liquid.) */
  @media (max-width: 1440px) {
    .yc-sub-hero__grid {
      grid-template-columns: 1.3fr 1fr;
      padding-left: 108px;
    }

    .yc-sub-hero__badge {
      width: 92px;
    }

    .yc-sub-hero__chips {
      gap: 6px;
    }
  }

  /* subscription.html 956-959 — below this the reserved lane costs the copy
     column more than the badges are worth, so the lane and the badges go. */
  @media (max-width: 1200px) {
    .yc-sub-hero__grid {
      padding-left: 0;
    }

    .yc-sub-hero__badge {
      display: none;
    }
  }

  /* subscription.html 963-977 — stack early: between here and 1200px the
     two-column grid leaves the copy column too narrow for the chip row. */
  @media (max-width: 1080px) {
    .yc-sub-hero {
      padding-block: var(--yc-sub-hero-pt-sm, 48px) var(--yc-sub-hero-pb-sm, 56px);
    }

    .yc-sub-hero__grid {
      grid-template-columns: 1fr;
      gap: 24px;
      text-align: center;
    }

    .yc-sub-hero__head {
      align-items: center;
      margin-inline: auto;
      text-align: center;
    }

    .yc-sub-hero__subtitle {
      max-width: 520px;
    }

    .yc-sub-hero__actions,
    .yc-sub-hero__chips {
      justify-content: center;
    }

    .yc-sub-hero__visual {
      order: -1;
      min-height: 300px;
    }

    /* Stacked, the visual has no neighbouring column to bleed into, so the
       product comes back inside its box. */
    .yc-sub-hero__img {
      width: 100%;
      max-width: 520px;
    }

    .yc-sub-hero__burst {
      width: 96px;
      height: 96px;
    }

    .yc-sub-hero__doodle {
      width: 64px;
    }
  }

  /* responsive.css 31 — --gutter 50px -> 20px, --container-width -> 100%, and
     `.container { gap: var(--space-32) }` (104). The gap is invisible while
     the grid is this container's only child, but it is carried over so the
     container stays faithful to the reference component. */
  @media (max-width: 992px) {
    .yc-sub-hero__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }
  }

  /* responsive.css 124 — --gutter -> 16px. */
  @media (max-width: 640px) {
    .yc-sub-hero__container {
      padding-inline: 16px;
    }
  }

  /* subscription.html 978-981 and 818-823 — the doodle goes, the burst
     shrinks and moves in, and the chips become a fixed two-column grid
     because a wrapping flex row breaks them 1/1/2 on unequal labels. */
  @media (max-width: 600px) {
    .yc-sub-hero__visual {
      min-height: 220px;
    }

    .yc-sub-hero__doodle {
      display: none;
    }

    .yc-sub-hero__burst {
      width: 72px;
      height: 72px;
      left: 2%;
    }

    .yc-sub-hero__chips {
      display: grid;
      grid-template-columns: repeat(2, auto);
      justify-content: center;
      justify-items: center;
    }
  }
/* END_SECTION:yc-sub-hero */

/* START_SECTION:yc-sub-how (INDEX:107) */
/* .company-section + --alt (cream). */
  .yc-sub-how {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-sub-how-pt, 60px) var(--yc-sub-how-pb, 60px);
  }

  /* .container — 1620px max, 50px gutter, 48px stack gap, self-centred. */
  .yc-sub-how__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    align-self: center;
    padding-inline: 50px;
  }

  /* .sub-how — heading column left, steps right. */
  .yc-sub-how__grid {
    display: grid;
    grid-template-columns: minmax(180px, 250px) 1fr;
    gap: 48px;
    align-items: center;
    width: 100%;
  }

  .yc-sub-how__head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* .section-head with `.sub-how__head .section-head`: left aligned, no cap,
     no auto margins. */
  .yc-sub-how__lede {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  /* .eyebrow — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius. */
  .yc-sub-how__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-sub-how__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  /* h2 base, stepped down from --fs-h2 (46px) because that wrapped to four
     lines in a column this narrow. The clamp is the reference's. */
  .yc-sub-how__title {
    margin: 0;
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* Doodle and CTA share a row under the heading. */
  .yc-sub-how__foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 4px;
  }

  .yc-sub-how__doodle {
    width: 34px;
    max-width: none;
    color: var(--yc-sub-how-doodle, #4036d6);
  }

  /* .btn + .btn--purple + `.sub-how__cta { flex: 0 0 auto }`. */
  .yc-sub-how__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #ffffff;
    background-color: #4036d6;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  /* Horizon's default focus ring is `currentcolor`, which here is WHITE and
     lands on the cream band at 1.11:1 — a WCAG 2.2 AA failure. The reference's
     own global ring (style.css:171-179) is indigo, which measures 6.64:1 on
     cream. Same call as the hero's CTA; measured per surface, not copied. */
  .yc-sub-how__cta:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-sub-how__cta-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    font-size: 18px;
    line-height: 1;
  }

  /* Steps and the flexibility strip stack inside the grid's second cell. */
  .yc-sub-how__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* .sub-steps — gap 0, because the connectors ARE the gaps. The track list is
     generated from the block count; see the section header. */
  .yc-sub-how__steps {
    display: grid;
    grid-template-columns: var(--yc-sub-how-tracks, 1fr auto 1fr auto 1fr);
    gap: 0;
    align-items: stretch;
  }

  /* ---------- Flexibility callout ---------- */
  /* .flex-callout — a pill that hugs its copy instead of stretching the column,
     centred in the cell. Static notice, so no hover and no lift. */
  .yc-sub-how__callout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    gap: 12px;
    padding: 8px 20px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 999px;
  }

  .yc-sub-how__callout-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ffc7ac;
    border: 1px solid #2e2e2e;
    font-size: 16px;
    color: #2e2e2e;
  }

  .yc-sub-how__callout-glyph {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  .yc-sub-how__callout-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: #2e2e2e;
  }

  .yc-sub-how__callout-text strong {
    font-weight: 700;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */

  /* responsive.css 31 — --gutter 50 -> 20, --container-width -> 100%, and
     `.container { gap: var(--space-32) }` (104). */
  @media (max-width: 992px) {
    .yc-sub-how__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }
  }

  /* subscription.html 327-335 — the arrows need horizontal room to read as a
     curve; below that the heading stacks above three plain columns. The arrow's
     own `display: none` lives in the block file. */
  @media (max-width: 1100px) {
    /* The row gap is 48px, not the 24px it was, because `__body`'s box is NOT
       its visual top edge: the step card's numbered coin is absolutely
       positioned at `top: 0` with `translateY(-50%)`, so it hangs 22px above
       the box and swallows most of the gap. Measured at 390px and 900px, 24px
       left exactly 3px of air under the CTA and the coin read as if it were
       touching the button (client note, Oct 2026). 48 - 22 = 26px of real
       clearance, which is the breathing room the 24px was aiming at. Stated
       explicitly rather than letting the base 48px cascade through, so a
       future change to the desktop gap can't silently retighten this. */
    .yc-sub-how__grid {
      grid-template-columns: 1fr;
      gap: 48px;
    }

    .yc-sub-how__lede {
      align-items: center;
      margin: 0 auto;
      text-align: center;
    }

    .yc-sub-how__doodle {
      display: none;
    }

    /* The heading centres once stacked, so the CTA row centres with it. */
    .yc-sub-how__foot {
      justify-content: center;
    }

    .yc-sub-how__steps {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
  }

  /* subscription.html 336-338 — a single stack of steps. */
  @media (max-width: 760px) {
    .yc-sub-how__steps {
      grid-template-columns: 1fr;
      gap: 34px;
    }
  }

  /* responsive.css 124 — --gutter -> 16px; and 759-761, buttons go full width. */
  @media (max-width: 640px) {
    .yc-sub-how__container {
      padding-inline: 16px;
    }

    .yc-sub-how__cta {
      width: 100%;
    }
  }

  /* subscription.html 562-564 — the pill squares off to a card radius and
     left-aligns once the copy wraps to more than one line. */
  @media (max-width: 600px) {
    .yc-sub-how__callout {
      border-radius: 24px;
      text-align: left;
    }
  }
/* END_SECTION:yc-sub-how */

/* START_SECTION:yc-sub-manage (INDEX:108) */
/* .company-section + .company-section--utility — ice strip fenced by 2px
     dashed rules. Padding via a custom property so the value stays editable
     without an inline `padding-block` that no media query could override. */
  .yc-sub-manage {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-sub-manage-py, 34px);
    border-top: 2px dashed var(--yc-sub-manage-rule, #2e2e2e);
    border-bottom: 2px dashed var(--yc-sub-manage-rule, #2e2e2e);
  }

  /* .container — 1620px max, 50px gutter, 48px stack gap, self-centred. */
  .yc-sub-manage__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    /* align-self, not margin-inline: auto — the prototype's own mechanism.
       Identical result, but it keeps the computed box identical too. */
    align-self: center;
    padding-inline: 50px;
  }

  /* ---------- Band head ---------- */
  /* .manage-band__head — the 24px bottom margin is the reference's, and it is
     what separates the head from the card (the container's 48px gap does not
     apply between them because the head carries its own margin). */
  /* Desktop: pill, heading and skip link on one row (the intro wrapper is
     `display: contents`), with the skip link pushed to the far end. */
  .yc-sub-manage__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 24px;
  }

  .yc-sub-manage__intro {
    display: contents;
  }

  /* .manage-band__tag — 12px/700 uppercase white pill, 1px ink border. Note
     the 0.04em tracking here, NOT the --ls-wide 1px the .eyebrow pill uses. */
  .yc-sub-manage__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 999px;
  }

  /* 1em box for the inline SVG, matching the reference glyph's line box. The
     old baseline-alignment notes (Batch 69) went with the heading, which now
     sits in the card rather than beside this pill. */
  .yc-sub-manage__tag-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  /* .manage-band__title — steps down from section scale so the strip does not
     read as a sales section. */
  .yc-sub-manage__title {
    margin: 0;
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* .manage-band__skip — underlined text link, no pill. */
  .yc-sub-manage__skip {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    color: #2e2e2e;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .yc-sub-manage__skip-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  /* ---------- Card ---------- */
  /* .manage — the checklist column is sized by its longest pill (max-content)
     rather than taking all the leftover width, and the card itself is
     fit-content, so it only gets as wide as the two columns actually need.
     align-items: stretch (not center) is what lets the checklist match the
     panel's height so the pills can distribute down it. */
  .yc-sub-manage__card {
    position: relative;
    display: grid;
    grid-template-columns: max-content minmax(0, 700px);
    gap: 40px;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 44px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 32px;
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* .sticker + .manage__badge, flattened. Deliberately not hidden on phones:
     responsive.css only hides .section-sticker, and this badge is re-placed at
     <=600px rather than dropped. */
  .yc-sub-manage__badge {
    position: absolute;
    top: -34px;
    right: 26px;
    z-index: 3;
    width: 104px;
    height: auto;
    pointer-events: none;
    transform: rotate(-8deg);
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  /* The phone copy (inside __intro) — see the <=700px rules. */
  .yc-sub-manage__badge--intro {
    display: none;
  }

  .yc-sub-manage__copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  /* .manage__list — base rule plus the creative-pass override. stretch so
     every pill is the width of the longest one; flex + space-between so the
     column fills the card's height and the pills spread down it, leaving the
     two sides level whatever the panel's height. */
  .yc-sub-manage__list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ---------- Login panel ---------- */
  /* THE ONE DELIBERATE COLOUR DEVIATION ON THIS PAGE, and it is an
     accessibility fix, not a design preference.

     The reference fills this panel with --color-blue #8b89c8 and sets white
     text on it. Measured, that is 3.23:1 — and the body copy is 15px regular,
     which needs 4.5:1 (WCAG 2.2 AA, 1.4.3). A real failure in the reference.

     Three routes were costed against the real numbers:
       recolour the copy to ink        -> 4.21:1. STILL FAILS. (This was my
                                         first assumption and it was wrong;
                                         4.21 is under 4.5, not over it.)
       lighten the panel, ink text     -> ink reaches 4.5, but the submit
                                         button's light border drops to
                                         2.34:1 and the button stops reading
                                         as a control. Rejected.
       darken the panel, keep white    -> chosen. #7270a4 gives white 4.60:1,
                                         the heading 4.60:1, the white input
                                         fill 4.60:1 and the submit's light
                                         border 3.55:1. Everything passes and
                                         the reference's white-on-tint
                                         intent survives.

     Same hue, ~18% darker. It is a setting, so it is reversible in one click.
     ⚠ The identical white-on-#8b89c8 pattern recurs in section 5 (the
     Subscribe column, 15px) and section 7 (the featured testimonial), so this
     same darkening should be applied there for consistency — flagged, not
     assumed, since it edges toward a brand-token decision. */
  .yc-sub-manage__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background-color: var(--yc-sub-manage-panel, #7270a4);
    border: 1px solid #2e2e2e;
    border-radius: 24px;
  }

  /* .manage__title — h3, sized for a card column. The 76px right padding keeps
     the last line clear of the badge hanging over this panel's corner. */
  .yc-sub-manage__form-title {
    margin: 0;
    padding-right: 76px;
    font-size: clamp(20px, 1.8vw, 25px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--yc-sub-manage-panel-heading, #ffffff);
  }

  /* White, as the reference has it — legal because the PANEL was darkened
     rather than the text recoloured. See the panel rule above for the numbers.
     Both text colours stay settings, because the panel colour is one too:
     change the panel and these have to be re-measured. */
  .yc-sub-manage__form-copy {
    margin: 0;
    padding-right: 76px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--yc-sub-manage-panel-copy, #ffffff);
  }

  .yc-sub-manage__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* .manage__label — visually hidden, kept for the accessible name. */
  .yc-sub-manage__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .yc-sub-manage__input {
    width: 100%;
    padding: 16px 20px;
    font-family: inherit;
    font-size: 14px;
    /* normal, not the body 1.55. The prototype's only input rule is
       "input { font-family: inherit }", so the control keeps the UA
       line-height. This theme's base.css uses "font: inherit" on inputs, which
       WOULD pull 1.55 in — 0.9px taller than the reference, and it compounds
       up through the panel and then the card. Caught by measurement. */
    line-height: normal;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 999px;
    outline: none;
    transition: box-shadow 0.18s ease;
  }

  .yc-sub-manage__input::placeholder {
    color: #6b6b6b;
  }

  /* The reference restates the pill radius here because style.css's global
     input:focus-visible sets --radius-xs, which squares the pill off on click.
     The #ede9fd halo is the reference's too.

     The ring is INK, not the reference's global #4036d6. Measured on this
     panel: purple-on-#8b89c8 is 2.40:1 and #ede9fd-on-#8b89c8 is 2.71:1 —
     both under the 3:1 a focus indicator needs (WCAG 2.2 AA, 1.4.11 /
     2.4.11). Ink on the same panel is 4.23:1 and passes. The panel's dusty
     purple is simply too close to the brand indigo for an indigo ring to read
     against it. Keyboard-only, so nothing about the resting design changes.
     Note this is the opposite call from the hero, where the same purple ring
     sits on cream and measures 6.64:1 — the correct ring colour depends on
     the surface behind the control. */
  .yc-sub-manage__input:focus-visible {
    border-radius: 999px;
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px #ede9fd;
  }

  /* .btn + .btn--purple + `.manage__form .btn { align-self: flex-start }`.
     A <button>, so font and border must be restated — a button does not
     inherit them. */
  .yc-sub-manage__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    /* normal, for the same reason as the input above: the prototype's
       "button" rule sets no line-height, so this submit measures 54.4px tall,
       not the 55.3px a 1.55 line-height gives. Note the hero's CTAs are <a>
       elements and DO correctly inherit 1.55 there — this one differs only
       because it is a <button>. */
    line-height: normal;
    color: #ffffff;
    background-color: #4036d6;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  /* Ink for the same measured reason as the input above. Horizon's
     `currentcolor` default would be WHITE here (the button's own colour), and
     the reference's global indigo ring only reaches 2.40:1 against this
     panel. Ink reaches 4.23:1. The ring is offset 2px, so it sits on the
     panel, not on the button fill. Keyboard only. */
  .yc-sub-manage__btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
  }

  .yc-sub-manage__btn-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    font-size: 18px;
    line-height: 1;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */

  /* responsive.css 31 — --gutter 50 -> 20, --container-width -> 100%, and
     `.container { gap: var(--space-32) }` (104). */
  @media (max-width: 992px) {
    .yc-sub-manage__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }
  }

  /* subscription.html 748-753 — the card drops to one column and lets go of
     its fit-content width; stacked, the panel sits well below the badge so the
     copy no longer needs to keep clear of it. */
  @media (max-width: 860px) {
    .yc-sub-manage__card {
      grid-template-columns: 1fr;
      width: auto;
      padding: 28px;
    }

    .yc-sub-manage__form-copy {
      padding-right: 0;
    }
  }


  /* responsive.css 124 — --gutter -> 16px; and 759-761, buttons go full width. */
  @media (max-width: 640px) {
    .yc-sub-manage__container {
      padding-inline: 16px;
    }

    .yc-sub-manage__btn {
      width: 100%;
    }
  }

  /* Phones — heading and skip link inside the white box (client note, Sep
     2026). The pill stays on the band; __intro becomes the card's top half
     (sides and top border, top radii) and the card drops its own top edge, so
     the two read as one box. The card's hard shadow gains a second, unshifted
     right edge so it runs up to the seam without a 4px notch. This replaces
     the reference's <=600px rule that padded the card top 76px to make room
     for the badge: the badge now sits on __intro's corner and the heading
     wraps short of it. */
  @media (max-width: 700px) {
    /* The container's stack gap would open a strip of band between __intro
       and the card; the head's own gap spaces the pill instead. */
    .yc-sub-manage__container {
      gap: 0;
    }

    .yc-sub-manage__head {
      flex-direction: column;
      align-items: stretch;
      gap: 24px;
      margin-bottom: 0;
    }

    .yc-sub-manage__tag {
      align-self: flex-start;
    }

    /* Centre the checklist stack (client note, Oct 2026). The pills are sized
       to the longest one by `.yc-sub-manage__list { align-items: stretch }`,
       so the column is narrower than the stacked card — 281px inside 306px at
       390px — and __copy's `align-items: flex-start` left-hugs it, leaving a
       ~25px strip of dead card on the right. Centring __copy's cross axis
       moves the whole stack without resizing it. Deliberately NOT
       `align-items: center` on the pills themselves: the icon + label stay
       left-aligned inside each pill so the five green checks keep their shared
       vertical line, which is what makes the list scan as a checklist. */
    .yc-sub-manage__copy {
      align-items: center;
    }

    .yc-sub-manage__intro {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      /* 100px right: the 84px badge sits 12px in from the corner. */
      padding: 24px 100px 0 20px;
      background-color: #ffffff;
      border: 1px solid #2e2e2e;
      border-bottom: 0;
      border-radius: 32px 32px 0 0;
      box-shadow: 4px 0 0 #2e2e2e;
    }

    .yc-sub-manage__skip {
      margin-inline-start: 0;
    }

    .yc-sub-manage__card {
      padding: 24px 20px;
      border-top: 0;
      border-radius: 0 0 32px 32px;
      box-shadow: 4px 4px 0 #2e2e2e, 4px 0 0 #2e2e2e;
    }

    .yc-sub-manage__badge--card {
      display: none;
    }

    .yc-sub-manage__badge--intro {
      display: block;
      top: -24px;
      right: 12px;
      width: 84px;
    }
  }
/* END_SECTION:yc-sub-manage */

/* START_SECTION:yc-sub-quotes (INDEX:109) */
/* .company-section — 60px block padding, no background of its own. The
     background is emitted only when a merchant sets one, so the default sits
     on the page ground exactly as the reference does rather than painting an
     opaque white over it. */
  .yc-sub-quotes {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: var(--yc-sub-quotes-pt, 60px) var(--yc-sub-quotes-pb, 60px);
    background-color: var(--yc-sub-quotes-bg, transparent);
  }

  /* .container — 1620px max, 50px gutter, 48px stack gap, self-centred. */
  .yc-sub-quotes__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* .sticker + .section-sticker--tl. */
  .yc-sub-quotes__sticker {
    position: absolute;
    top: 40px;
    left: 3%;
    z-index: 1;
    width: 96px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    transform: rotate(-14deg);
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  /* ---------- Head ---------- */
  /* .section-head with `.company-section .section-head` (660px, centred). */
  .yc-sub-quotes__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 660px;
    margin-inline: auto;
    text-align: center;
  }

  /* .eyebrow — 12px/700 uppercase on peach, 1px #e2e1ee border, pill radius. */
  .yc-sub-quotes__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  .yc-sub-quotes__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  /* h2 base — 46px, --lh-heading 1.05, --ls-heading -0.03em. */
  .yc-sub-quotes__title {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* ---------- Slider shell ---------- */
  /* `.slider` (flex column, 12px gap) with `.mobile-slider { gap: 0 }` on top:
     above the phone breakpoint the dots are hidden, so the gap would be a gap
     to nothing. */
  .yc-sub-quotes__slider {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  /* `.sub-tm-grid.slider__track`. Two rulesets land on this element and the
     resolution matters:

     - `.slider__track` (style.css:6013) makes it a flex row that scrolls and
       snaps. `.mobile-slider > .slider__track` (subscription.html:351) then
       switches the scrolling and snapping back off for desktop, and
       `.sub-tm-grid` (461) — same weight, declared later — turns `display`
       into grid, which makes the flex properties inert.
     - So above 600px this is a grid, and most of what the base track
       contributes is either overridden or inert. It is written out as a grid
       here rather than as a track-plus-overrides, because reproducing a
       cancelled ruleset would be reproducing the reference's history instead
       of its result.
     - But two things from the base track DO survive, and they are easy to
       miss: `.mobile-slider > .slider__track` cancels only `overflow`,
       `cursor` and `scroll-snap-type`, so `scroll-behavior: smooth` stays, and
       `cursor` is not removed but reset to `default` — which then inherits to
       every card, word and star inside. Both are carried below. Same trap as
       Batch 72: an override list tells you what it cancels, not what it leaves
       behind.

     `auto-fit`/`minmax(300px, 1fr)` is the base; the reference pins it to
     three columns from 601px up. Row gap 40, column gap 24. */
  .yc-sub-quotes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px 24px;
    scroll-behavior: smooth;
    cursor: default;
  }

  /* The focus ring for that tab stop. Offset far enough out to clear the quote
     coin hanging off each card's top edge. Indigo on white is 7.73:1. */
  .yc-sub-quotes__grid:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 4px;
    border-radius: 32px;
  }

  /* ---------- Dots ---------- */
  /* `.slider__dots`. The dots themselves (`.yc-slider__dot`) are in
     `assets/yc-mobile-slider.css`, shared with the comparison table. */
  .yc-sub-quotes__dots {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */

  /* subscription.html 997 — three fixed columns, cards stretched to a common
     height, and the featured fill (which is in the block file, since it is a
     per-card setting here rather than the reference's :nth-child(2)). */
  @media screen and (min-width: 601px) {
    .yc-sub-quotes__grid {
      grid-template-columns: repeat(3, 1fr);
      align-items: stretch;
    }
  }

  /* responsive.css 31 — --gutter 50 -> 20, --container-width -> 100%,
     `.container { gap: var(--space-32) }` (104), and --fs-h2 46 -> 36. */
  @media screen and (max-width: 992px) {
    .yc-sub-quotes__container {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-sub-quotes__title {
      font-size: 36px;
    }
  }

  /* responsive.css 124 — --gutter -> 16px, and --fs-h2 -> 27px.
     responsive.css 831 — the sticker accents crowd the copy at phone widths. */
  @media screen and (max-width: 640px) {
    .yc-sub-quotes__container {
      padding-inline: 16px;
    }

    .yc-sub-quotes__title {
      font-size: 27px;
    }

    .yc-sub-quotes__sticker {
      display: none;
    }
  }

  /* subscription.html 755-780 — the shared mobile-slider behaviour. The grid
     becomes a snapping flex track, one card per view, and the dots appear.

     The track's padding is the reference's: 4px of side and 12px of bottom
     clearance because `overflow-x` clips vertically as well, then 42px on top
     because the quote coin hangs 36px above each card and would otherwise be
     cut in half. The column gap stays 24px — `.mobile-slider`'s 16px gap is on
     the shell, between the track and the dots, not between the cards. */
  @media screen and (max-width: 600px) {
    .yc-sub-quotes__slider {
      gap: 16px;
    }

    .yc-sub-quotes__grid {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding: 42px 4px 12px;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      cursor: grab;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
    }

    .yc-sub-quotes__grid::-webkit-scrollbar {
      display: none;
    }

    .yc-sub-quotes__grid > * {
      flex: 0 0 100%;
      scroll-snap-align: start;
    }

    .yc-sub-quotes__dots {
      display: flex;
    }
  }

  /* responsive.css 891 — --fs-h2 -> 24px on small phones. */
  @media screen and (max-width: 380px) {
    .yc-sub-quotes__title {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-sub-quotes */

/* START_SECTION:yc-testimonials (INDEX:110) */
.yc-testimonials {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .yc-testimonials__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* ---------- Decorative top wave ---------- */
  .yc-testimonials__wave {
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 0;
    width: 200%;
    line-height: 0;
    pointer-events: none;
    transform: scaleY(-1);
  }

  .yc-testimonials__wave-svg {
    display: block;
    width: 200%;
    height: 90px;
    animation: yc-testimonials-wave 14s linear infinite;
  }

  .yc-testimonials__wave-svg path {
    fill: currentColor;
  }

  @keyframes yc-testimonials-wave {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ---------- Decorative pixel-checkers (bottom corners) ---------- */
  .yc-testimonials__checker {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
  }

  .yc-testimonials__checker--left {
    right: auto;
    left: 0;
  }

  .yc-testimonials__checker-svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .yc-testimonials__checker-svg g {
    fill: currentColor;
  }

  .yc-testimonials__checker-svg path {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s ease-in-out;
  }

  .yc-testimonials__checker-svg path:nth-child(5) { transition-delay: 0.05s; }
  .yc-testimonials__checker-svg path:nth-child(8) { transition-delay: 0.1s; }

  .yc-testimonials:hover .yc-testimonials__checker-svg path:nth-child(2)  { transform: translateX(100%); }
  .yc-testimonials:hover .yc-testimonials__checker-svg path:nth-child(4)  { transform: translateX(-100%); }
  .yc-testimonials:hover .yc-testimonials__checker-svg path:nth-child(5)  { transform: translateY(100%); }
  .yc-testimonials:hover .yc-testimonials__checker-svg path:nth-child(8)  { transform: translateX(100%); }
  .yc-testimonials:hover .yc-testimonials__checker-svg path:nth-child(10) { transform: translateX(-100%); }

  /* ---------- Slider shell ---------- */
  .yc-testimonials__slider {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .yc-testimonials__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 24px;
    padding-top: 40px;
    padding-bottom: 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .yc-testimonials__track::-webkit-scrollbar { display: none; }

  .yc-testimonials__track > * {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* JS mode: the track is driven programmatically (no native scroll) so a
     vertical wheel/swipe over the card never hijacks the page scroll. */
  .yc-testimonials__slider.is-loaded .yc-testimonials__track {
    overflow: hidden;
    scroll-snap-type: none;
    scroll-behavior: auto;
    touch-action: pan-y;
    cursor: default;
  }

  .yc-testimonials__slider.is-loaded .yc-testimonials__track > * {
    scroll-snap-align: none;
  }

  .yc-testimonials__track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
  }

  .yc-testimonials__track.is-dragging * {
    user-select: none;
  }

  /* ---------- Review card ---------- */
  .yc-testimonials__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    margin: 0;
    padding: 64px 48px 48px;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 32px;
  }

  .yc-testimonials__mark {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #FFC7AC;
    border: 1px solid #e2e1ee;
    color: #2e2e2e;
  }

  .yc-testimonials__mark .yc-icon {
    width: 34px;
    height: 34px;
  }

  .yc-testimonials__stars {
    display: inline-flex;
    align-items: center;
    color: #FFC7AC;
    font-size: 24px;
  }

  .yc-testimonials__stars .yc-icon {
    width: 1em;
    height: 1em;
  }

  .yc-testimonials__quote {
    margin: 0;
    max-width: 22ch;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-testimonials__author {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 8px;
  }

  .yc-testimonials__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #FF92EB;
    border: 1px solid #e2e1ee;
    color: #2e2e2e;
  }

  .yc-testimonials__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .yc-testimonials__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
  }

  .yc-testimonials__name {
    font-size: 17px;
    font-weight: 700;
    color: #2e2e2e;
  }

  .yc-testimonials__role {
    font-size: 13px;
    font-weight: 400;
    color: #6b6b6b;
  }

  /* ---------- Arrows + dots (only shown once JS upgrades the slider) ---------- */
  .yc-testimonials__arrow,
  .yc-testimonials__dots {
    display: none;
  }

  .yc-testimonials__slider.is-loaded .yc-testimonials__arrow {
    display: inline-flex;
  }

  .yc-testimonials__slider.is-loaded .yc-testimonials__dots {
    display: flex;
  }

  .yc-testimonials__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }

  .yc-testimonials__arrow .yc-icon {
    width: 20px;
    height: 20px;
  }

  .yc-testimonials__arrow:hover {
    color: #ffffff;
    background-color: #4036d6;
    transform: translateY(-50%) scale(1.08);
  }

  .yc-testimonials__arrow:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
  }

  /* The track is tabindex="0", so it must show focus (WCAG 2.4.7). */
  .yc-testimonials__track:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-testimonials__arrow--prev { left: -25px; }

  .yc-testimonials__arrow--next {
    right: -25px;
    color: #ffffff;
    background-color: #4036d6;
  }

  .yc-testimonials__dots {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .yc-testimonials__dot {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease, width 0.18s ease;
  }

  .yc-testimonials__dot:hover {
    background-color: #FFC7AC;
    transform: scale(1.15);
  }

  .yc-testimonials__dot.is-active {
    width: 34px;
    border-radius: 999px;
    background-color: #4036d6;
  }

  .yc-testimonials__dot:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
  }

  /* ---------- Responsive (mirrors responsive.css) ---------- */
  @media (max-width: 992px) {
    .yc-testimonials__inner { padding-inline: 20px; }
    .yc-testimonials__quote { font-size: 36px; }
    .yc-testimonials__stars { font-size: 22px; }
  }

  @media (max-width: 640px) {
    .yc-testimonials__inner { padding-inline: 16px; }
    .yc-testimonials__quote { font-size: 27px; }
    .yc-testimonials__stars { font-size: 18px; }
    .yc-testimonials__card {
      padding: 48px 20px 32px;
    }
    .yc-testimonials__author {
      flex-direction: column;
    }
    .yc-testimonials__meta {
      align-items: center;
    }
    /* Pull arrows inside the track so they aren't clipped off-screen (prototype @640) */
    .yc-testimonials__arrow {
      width: 40px;
      height: 40px;
    }
    .yc-testimonials__arrow .yc-icon {
      width: 16px;
      height: 16px;
    }
    .yc-testimonials__arrow--prev { left: 6px; }
    .yc-testimonials__arrow--next { right: 6px; }
    /* Corner checkers are hidden on phones in the prototype */
    .yc-testimonials__checker { display: none; }
  }

  @media (max-width: 380px) {
    .yc-testimonials__quote { font-size: 24px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-testimonials__wave-svg { animation: none; }
    .yc-testimonials__checker-svg path { transition: none; }
    .yc-testimonials:hover .yc-testimonials__checker-svg path { transform: none; }
    .yc-testimonials__track { scroll-behavior: auto; }
  }
/* END_SECTION:yc-testimonials */

/* START_SECTION:yc-trust-bar (INDEX:111) */
/* Keep the root as Horizon's .section grid — it provides the page-width
     gutter columns. Setting display here (e.g. flex) kills those columns and
     makes the row span full-bleed, so we intentionally don't touch display.
     The list is the grid content-column item, so it stays page-width. */
  .yc-trust__list {
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .yc-trust__item {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    /* Prototype (v3.css): --color-ice wash, light --color-border hairline, --radius-md.
       V3 removed the hover lift/shadow on these facts, so no transition/hover here. */
    background-color: #e4f5ff;
    border: 1px solid #e2e1ee;
    border-radius: 16px;
  }

  .yc-trust__icon,
  .yc-trust__art {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    object-fit: contain;
  }

  .yc-trust__icon {
    /* Prototype: icons render in brand purple */
    color: #4036d6;
  }

  .yc-trust__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .yc-trust__title {
    font-size: 15px;
    font-weight: 600;
    color: #2e2e2e;
  }

  .yc-trust__subtext {
    font-size: 13px;
    color: #6b6b6b;
  }

  /* Tablet: 2 columns (2×2) instead of the 3 + 1 wrap — icon stays beside text */
  @media screen and (max-width: 992px) {
    .yc-trust__item {
      flex: 1 1 calc(50% - 6px);
    }
  }

  /* Phone: compact 2×2 grid, icon stacked over centered text (prototype @600) */
  @media screen and (max-width: 600px) {
    .yc-trust__item {
      flex: 1 1 calc(50% - 6px);
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      padding: 16px 12px;
    }

    .yc-trust__text {
      align-items: center;
    }

    .yc-trust__title {
      font-size: 14px;
    }

    .yc-trust__subtext {
      font-size: 12px;
    }
  }
/* END_SECTION:yc-trust-bar */

/* START_SECTION:yc-ugc (INDEX:112) */
.yc-ugc {
  position: relative;
  display: flex;
  flex-direction: column;
}

.yc-ugc__container {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  max-width: 1620px;
  padding-left: 50px;
  padding-right: 50px;
  align-self: center;
}

/* --- Section head --- */
.yc-ugc__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.yc-ugc__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #2e2e2e;
  background-color: #FFC7AC;
  border: 1px solid #e2e1ee;
  border-radius: 999px;
}

.yc-ugc__eyebrow .yc-icon {
  width: 15px;
  height: 15px;
}

.yc-ugc__title {
  margin: 0;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #2e2e2e;
}

.yc-ugc__subtitle {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: #2e2e2e;
  max-width: 620px;
}

.yc-ugc__subtitle strong {
  font-weight: 700;
}

/* --- Grid --- */
.yc-ugc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  width: 100%;
}

/* --- Tile --- */
.yc-ugc__tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: #ffffff;
  border: 1px solid #e2e1ee;
  border-radius: 24px;
  box-shadow: none;
  overflow: hidden;
  /* V3 removed the tile hover shadow — tiles are static. */
}

.yc-ugc__media {
  position: relative;
  display: flex;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid #e2e1ee;
}

.yc-ugc__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yc-ugc__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #E4F5FF;
  color: #8B89C8;
}

.yc-ugc__placeholder .yc-icon {
  width: 48px;
  height: 48px;
}

.yc-ugc__tag {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #e2e1ee;
  color: #4036d6;
}

.yc-ugc__tag .yc-icon {
  width: 18px;
  height: 18px;
}

.yc-ugc__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 auto;
  padding: 24px;
}

.yc-ugc__story {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: #2e2e2e;
  flex: 1 1 auto;
}

.yc-ugc__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.yc-ugc__name {
  font-size: 15px;
  font-weight: 700;
  color: #2e2e2e;
}

.yc-ugc__role {
  font-size: 12px;
  font-weight: 400;
  color: #6b6b6b;
}

.yc-ugc__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #4036d6;
  text-decoration: none;
  transition: gap 0.18s ease;
}

.yc-ugc__link .yc-icon {
  width: 16px;
  height: 16px;
}

.yc-ugc__link:hover {
  gap: 8px;
}

/* --- CTA --- */
.yc-ugc__cta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.yc-ugc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background-color: #4036d6;
  border: 1px solid #e2e1ee;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.yc-ugc__btn:hover {
  background-color: #2f2799;
}

.yc-ugc__btn-icon {
  width: 18px;
  height: 18px;
}

/* --- Decorative stickers --- */
.yc-ugc__sticker {
  position: absolute;
  z-index: 1;
  top: 40px;
  right: 3%;
  width: 96px;
  height: auto;
  opacity: 0.95;
  transform: rotate(12deg);
  pointer-events: none;
  filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
}

.yc-ugc__badge {
  position: absolute;
  z-index: 1;
  top: auto;
  bottom: 96px;
  left: 6%;
  right: auto;
  width: 104px;
  height: auto;
  opacity: 1;
  transform: rotate(11deg);
  pointer-events: none;
  filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
}

/* --- Editor "disabled" note --- */
.yc-ugc--disabled {
  padding-top: 40px;
  padding-bottom: 40px;
}

.yc-ugc__note {
  margin: 0 auto;
  max-width: 620px;
  padding: 24px;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: #6b6b6b;
  background-color: #E4F5FF;
  border: 1px dashed #e2e1ee;
  border-radius: 24px;
}

/* ============================================================
   Responsive (ported from responsive.css)
   ============================================================ */
@media (max-width: 1200px) {
  .yc-ugc__badge {
    bottom: 72px;
    left: 2%;
    right: auto;
    width: 82px;
  }
}

@media (max-width: 992px) {
  .yc-ugc__container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .yc-ugc__title {
    font-size: 36px;
  }

  /* Real Families: horizontal swipeable slider on tablet + mobile.
     Must switch the grid to flex so flex-basis/scroll-snap take effect. */
  .yc-ugc__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
    /* Let a peeking tile bleed to the container edge for a clear "swipe" cue */
    scroll-padding-left: 0;
  }

  .yc-ugc__grid::-webkit-scrollbar {
    display: none;
  }

  .yc-ugc__tile {
    /* Tablet: ~2 tiles per view with a peek of the next.
       Viewport units (not %) so the width is definite inside the overflow-x
       scroll container, where % flex-basis collapses to min-content. */
    flex: 0 0 auto;
    width: 44vw;
    scroll-snap-align: start;
  }
}

@media (max-width: 640px) {
  .yc-ugc__container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .yc-ugc__title {
    font-size: 27px;
  }

  /* Mobile: 1 tile per view with a peek of the next (slider set up in ≤992) */
  .yc-ugc__tile {
    width: 82vw;
  }

  /* Section sticker accents crowd the copy at phone widths */
  .yc-ugc__sticker {
    display: none;
  }
}

@media (max-width: 380px) {
  .yc-ugc__title {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yc-ugc__tile,
  .yc-ugc__link,
  .yc-ugc__btn {
    transition: none;
  }

  .yc-ugc__grid {
    scroll-behavior: auto;
  }
}
/* END_SECTION:yc-ugc */

/* START_SECTION:yc-usage-calculator (INDEX:113) */
/* .calc-band — ice band with the checker motif on the bottom edge. */
  .yc-usage-calc-band {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--yc-uc-bg, #e4f5ff);
    /* The checker is 140px tall and sits on the bottom edge, so the default
       bottom value reserves exactly that much or the card runs into it. Both
       halves are merchant settings; the fallbacks are the reference's. */
    padding-block: var(--yc-uc-pt, 60px) var(--yc-uc-pb, 140px);
    /* The jump from the "Answer 3 questions" link should land the whole section
       on screen, not clip its head under the sticky header. */
    scroll-margin-top: 96px;
  }

  /* .container — flex column, so this gap is what separates the head from the
     card, on top of .section-head's own bottom margin. The product page wants
     both (48 + 40 = 88); the subscription page sets the head margin to 0 and
     lives on the gap alone. Its responsive steps come from responsive.css:
     --gutter 50 -> 20 (<=992) -> 16 (<=640), --container-width 1620 -> 100%
     (<=992), and .container's own gap 48 -> 32 (<=992). All three were missing
     here, so between 641 and 992 this band was a 1620px box with 50px gutters
     against the reference's full-width box with 20px ones. */
  .yc-usage-calc-band__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
    padding-inline: 50px;
  }

  /* .section-head — a centred flex column with a 16px rhythm, which is why
     neither the eyebrow nor the heading carries a bottom margin of its own. */
  .yc-usage-calc-band__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 660px;
    margin: 0 auto var(--yc-uc-head-mb, 40px);
    text-align: center;
  }

  .yc-usage-calc-band__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* The reference's glyph is a Phosphor <i>, so its box is one em of the
     eyebrow's own 12px type — 12x12, not 16. Same shape every other yc-*
     eyebrow uses; this section was the one hardcoding pixels, and it made the
     pill 4px wide. */
  .yc-usage-calc-band__eyebrow-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  /* h2 — --fs-h2 46px, --lh-heading 1.05, --ls-heading -0.03em. */
  .yc-usage-calc-band__heading {
    margin: 0;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* .section-subtitle — --fs-18, --lh-body 1.55, capped at 620px so it breaks
     one line earlier than the 660px heading above it. */
  .yc-usage-calc-band__subtitle {
    max-width: 620px;
    font-size: 18px;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-usage-calc-band__subtitle p {
    margin: 0;
  }

  /* .sticker.section-sticker--tl — z-index 1, matching the reference, which
     lets the container (also z-index 1, and later in the DOM) paint over it.
     Nothing is lost: the container has no background of its own. */
  .yc-usage-calc-band__badge {
    position: absolute;
    top: 40px;
    left: 3%;
    z-index: 1;
    width: 96px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    transform: rotate(-14deg);
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.18));
  }

  .yc-usage-calc-band__checker {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 140px;
    pointer-events: none;
  }

  .yc-usage-calc-band__checker--left {
    right: auto;
    left: 0;
  }

  /* Without this the SVG falls back to its intrinsic 840x253 ratio and spills
     out of the 140px band as two large blocks. `meet` then scales the artwork
     to the 140px height and pins it to the outer edge (xMax right / xMin left),
     which is what puts one small checker block in each bottom corner. */
  .yc-usage-calc-band__checker-svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .yc-usage-calc-band__checker-svg path {
    transform-box: fill-box;
    transform-origin: center;
  }

  /* --fs-h2 steps 46 -> 36 -> 27 -> 24 and the container steps above; only the
     640px stop existed here before, and at the wrong size (28, not 27). */
  @media screen and (max-width: 992px) {
    .yc-usage-calc-band__inner {
      gap: 32px;
      max-width: 100%;
      padding-inline: 20px;
    }

    .yc-usage-calc-band__heading {
      font-size: 36px;
    }
  }

  @media screen and (max-width: 640px) {
    .yc-usage-calc-band__inner {
      padding-inline: 16px;
    }

    .yc-usage-calc-band__heading {
      font-size: 27px;
    }

    .yc-usage-calc-band__checker,
    .yc-usage-calc-band__badge {
      display: none;
    }

    /* The checkers are hidden below 640px, so the clearance they reserved is no
       longer paying for anything — on the product page. The subscription page's
       reference drops it one stop later, at 600px, and to a different value
       (60px, not 48px), which leaves that page a deliberate 601-640px band
       where the padding is still the full 140px with no checker in it. Both
       rules are emitted and a setting picks the stop, because a media query
       cannot read a custom property. */
    .yc-usage-calc-band--checkers:not(.yc-usage-calc-band--mobile-pad-600) {
      padding-bottom: var(--yc-uc-pb-mobile, 48px);
    }
  }

  @media screen and (max-width: 600px) {
    .yc-usage-calc-band--checkers.yc-usage-calc-band--mobile-pad-600 {
      padding-bottom: var(--yc-uc-pb-mobile, 48px);
    }
  }

  @media screen and (max-width: 380px) {
    .yc-usage-calc-band__heading {
      font-size: 24px;
    }
  }
/* END_SECTION:yc-usage-calculator */

/* CSS from block stylesheet tags */
/* START_BLOCK:_announcement (INDEX:115) */
.announcement-bar__text--has-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.667em; /* 8px at the 12px prototype size; scales with font size */
  }

  /* Prototype: gift icon (16px) reads slightly larger than the 12px label. */
  .announcement-bar__icon {
    flex-shrink: 0;
    width: 1.333em;
    height: 1.333em;
  }
/* END_BLOCK:_announcement */

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

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

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

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

  .blog-post-item--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .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;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

    &:hover {
      color: var(--color-foreground-subdued);
    }
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:117) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }

  /* YC: base.css forces img { width: 100% }, which blows every inline article image up to the
     full column. Keep images at natural ratio, capped in height, centred, with theme radius. */
  .blog-post-content img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(75vh, 36rem);
    margin-inline: auto;
    border-radius: var(--style-border-radius-lg);
  }

  .blog-post-content :is(p, span, div):has(> img) {
    margin-block: var(--margin-4xl);
  }

  /* Two or more images in one line (placed side by side in the editor) become an even grid */
  .blog-post-content :is(p, span, div):has(> img + img) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--gap-md);
    align-items: start;
  }

  .blog-post-content :is(p, span, div):has(> img + img) > img {
    width: 100%;
    max-height: none;
  }

  .blog-post-content :is(p, span):has(> img + img) > br {
    display: none;
  }
/* END_BLOCK:_blog-post-content */

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

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:119) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    position: relative;
    display: block;
    width: var(--width);
    /* YC: align the hero image with the article text column instead of the full page width */
    max-width: var(--normal-content-width);
    margin-inline: auto;
    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 {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:120) */
.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:121) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:123) */
.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:124) */
.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:125) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:126) */
.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 {
    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      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);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: 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;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:127) */
.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;
    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:130) */
.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:132) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_featured-blog-posts-card (INDEX:136) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .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__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;

      flex-shrink: 0;
      height: auto;
    }
  }

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

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    gap: var(--gap);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:137) */
.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:139) */
.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:142) */
.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:143) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:144) */
.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-menu (INDEX:145) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

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

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

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

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

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

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

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

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

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

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

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

    display: flex;
    height: 100%;
  }

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

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

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

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

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

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

  /* Wraps a top-level link and its disclosure button. Positioned so the
     absolutely-positioned button can sit in the gap after the link without
     affecting the top-bar layout. */
  .menu-list__trigger {
    position: relative;
    display: flex;
    height: 100%;
  }

  .menu-list__disclosure {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(100% - var(--gap-xs));
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--padding-3xs);
    padding-block: var(--padding-sm);
    color: var(--menu-top-level-font-color);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    outline-offset: 0.1em;

    /* Hidden control must not intercept pointer events; hover-open is driven by
       the list item itself. */
    pointer-events: none;

    &:focus-visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .menu-list__disclosure-icon {
    display: block;
    width: var(--font-size--3xs);
    aspect-ratio: 10 / 6;
    fill: currentColor;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

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

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

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item[slot='more']:has(.menu-list__link[aria-expanded='true'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

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

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

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

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

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

  .overflow-menu {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

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

    background-color: transparent;
  }

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

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

    /* Bridge the gap (row bottom padding + border) so the pointer reaches the
       submenu; collapses to 0 when the padding does. */
    --submenu-gap: calc(var(--padding-block-end, var(--header-padding)) + var(--border-bottom-width, 0px));
    --submenu-clip-top: calc(var(--header-height) - var(--submenu-gap));

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    clip-path: rect(var(--submenu-clip-top) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  /* Keep the submenu transparent (color-custom paints an opaque bg) so the
     bridged band shows the header row; the underlay paints the dropdown. */
  .menu-list__list-item > .menu-list__submenu {
    background-color: transparent;
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      --submenu-clip-top: calc(var(--top-row-height) - var(--submenu-gap));
    }
  }

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

    visibility: visible;
  }

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

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

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

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

    display: contents;
    white-space: normal;

    /* The trigger becomes the left-column grid item, laying the link and its
       disclosure button out inline */

    .menu-list__trigger {
      grid-area: left;
      grid-row: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--gap-2xs);
    }

    .menu-list__disclosure {
      position: static;
      flex-shrink: 0;
      transform: none;
    }

    /* Point the chevron toward the content that opens to the right. */
    .menu-list__disclosure-icon,
    .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon {
      transform: rotate(-90deg);
    }

    .menu-list__link {
      /* Bare leaf links (no children) have no `.menu-list__trigger` wrapper, so
         they need explicit left-column placement themselves. On parent items the
         link is inside the trigger and this is simply ignored. */
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

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

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

    /* The disclosure button owns the expanded state; reveal the submenu when it
       is expanded (via the inline chevron, hover, or the More trigger). */
    &:has(.menu-list__disclosure[aria-expanded='true']) .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

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

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

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

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

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

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    width: 200px;
  }

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

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_product-details (INDEX:157) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

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

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:162) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

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

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

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

  /* The video paints over the poster, but carries no sources until it scrolls
     into view. Stay clear until there is a frame to hand over to — which also
     leaves the poster in place for a visitor we never load the video for. */
  .slide__image-container .slide__video {
    opacity: 0;
  }

  .slide__image-container .slide__video[data-video-state='loaded'] {
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .slide__image-container .slide__video {
      transition: opacity 0.3s ease;
    }
  }

  /*
   * 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:164) */
.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:_yc-alt-path-size (INDEX:165) */
/* The chip is the <li>'s only child and fills it, so the grid track sets
     the width and every chip in a row matches height. */
  .yc-alt-path-size {
    display: flex;
    min-width: 0;
  }

  /* `.alt-path__sizes a` — tokens resolved to literals:
       --color-ink #2e2e2e · --color-white #ffffff · --color-border #e2e1ee
       --color-purple #4036d6 · --color-muted #6b6b6b
       --space-8 8 · --space-4 4 · --fs-15 15 · --fs-11 11
       --fw-bold 700 · --fw-semibold 600 */
  .yc-alt-path-size__link {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
    color: #2e2e2e;
    text-decoration: none;
    background-color: #ffffff;
    border: 1.5px solid #e2e1ee;
    border-radius: 12px;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  }

  .yc-alt-path-size__link small {
    font-size: 11px;
    font-weight: 600;
    color: #6b6b6b;
    transition: color 0.18s ease;
  }

  .yc-alt-path-size__link:not(.yc-alt-path-size__link--static):hover,
  .yc-alt-path-size__link:not(.yc-alt-path-size__link--static):focus-visible {
    color: #ffffff;
    background-color: var(--yc-ap-accent, #4036d6);
    border-color: var(--yc-ap-accent, #4036d6);
  }

  .yc-alt-path-size__link:not(.yc-alt-path-size__link--static):hover small,
  .yc-alt-path-size__link:not(.yc-alt-path-size__link--static):focus-visible small {
    color: #ffffff;
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-alt-path-size__link,
    .yc-alt-path-size__link small {
      transition: none;
    }
  }
/* END_BLOCK:_yc-alt-path-size */

/* START_BLOCK:_yc-company-person (INDEX:167) */
/* .people-card (141-150): white card, 32/24 padding, centred, 0.18s lift. */
  .yc-company-person {
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .yc-company-person:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* .people-card__avatar (152-164): the ringed disc. The 5px ring is a spread
     shadow in the tile colour; the disc itself is the same colour, so an
     unassigned picker still shows a coloured ring rather than a hole. */
  .yc-company-person__avatar {
    display: block;
    width: 96px;
    height: 96px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 16px;
    overflow: hidden;
    background-color: var(--yc-tile, #f0eee3);
    border: 1px solid #e2e1ee;
    border-radius: 50%;
    box-shadow: 0 0 0 5px var(--yc-tile, #f0eee3);
  }

  .yc-company-person__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* `.people-card h4 { margin-bottom: 4px }` on the h4 base — Poppins 700,
     --fs-h4 24, 1.05, -0.03em, ink. */
  .yc-company-person__name {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* .people-card__role (171-183): 11px uppercase pill on peach. line-height is
     the body's 1.55, pinned so the pill's height does not depend on the theme. */
  .yc-company-person__role {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* .people-card__bio (184-189): 14px ink at 75% opacity. */
  .yc-company-person__bio {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: #2e2e2e;
    opacity: 0.75;
  }

  .yc-company-person__bio a {
    color: inherit;
  }

  /* .people-card__link (190-204): 13px pill, white, indigo on hover. */
  .yc-company-person__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    color: #2e2e2e;
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .yc-company-person__link:hover {
    background-color: #4036d6;
    color: #ffffff;
  }

  /* Not in the reference: the pill is a link and must show keyboard focus
     (WCAG 2.4.7). Indigo on white and on cream both clear 3:1. */
  .yc-company-person__link:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  /* `.people-card__link i` inherits the pill's 13px. */
  .yc-company-person__link-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* .tint--* (483-488). `auto` sets nothing — the section's rotation applies. */
  .yc-company-person--tint-sky {
    --yc-tile: #78c6ff;
  }

  .yc-company-person--tint-pink {
    --yc-tile: #ff92eb;
  }

  .yc-company-person--tint-green {
    --yc-tile: #0fb654;
  }

  .yc-company-person--tint-peach {
    --yc-tile: #ffc7ac;
  }

  .yc-company-person--tint-blue {
    --yc-tile: #8b89c8;
  }

  /* responsive.css: --fs-h4 24 -> 22 (<=992) -> 18 (<=640). */
  @media (max-width: 992px) {
    .yc-company-person__name {
      font-size: 22px;
    }
  }

  @media (max-width: 640px) {
    .yc-company-person__name {
      font-size: 18px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-company-person,
    .yc-company-person__link {
      transition: none;
    }
  }
/* END_BLOCK:_yc-company-person */

/* START_BLOCK:_yc-company-value (INDEX:168) */
/* .value-card (448-459) */
  .yc-company-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 16px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .yc-company-value:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* .value-card__icon (461-471): the disc takes the card's tint, falling back
     to the light-indigo tint the reference uses. */
  .yc-company-value__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 21px;
    color: #2e2e2e;
    background-color: var(--yc-tile, #ede9fd);
    border: 1px solid #e2e1ee;
    border-radius: 50%;
  }

  /* `.value-card__icon i` is 1em of the disc's 21px; Phosphor's line-height:1
     makes the glyph box exactly 21px, and so is this. */
  .yc-company-value__icon-svg {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* `.value-card h4 { margin: 4px 0 0; font-size: 17px }` on the h4 base:
     Poppins 700, --lh-heading 1.05, --ls-heading -0.03em, ink. */
  .yc-company-value__title {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* `.value-card p { font-size: 13px; line-height: 1.5; color: muted }` */
  .yc-company-value__text {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: #6b6b6b;
  }

  /* .tint--* (483-488) — the brand accents, one class per card. */
  .yc-company-value--tint-sky {
    --yc-tile: #78c6ff;
  }

  .yc-company-value--tint-pink {
    --yc-tile: #ff92eb;
  }

  .yc-company-value--tint-green {
    --yc-tile: #0fb654;
  }

  .yc-company-value--tint-peach {
    --yc-tile: #ffc7ac;
  }

  .yc-company-value--tint-blue {
    --yc-tile: #8b89c8;
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-company-value {
      transition: none;
    }
  }
/* END_BLOCK:_yc-company-value */

/* START_BLOCK:_yc-contact-badge (INDEX:170) */
/* contact.html .contact-badge */
  .yc-contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* `.contact-badge i { font-size: 17px; color: purple }` */
  .yc-contact-badge__icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: #4036d6;
  }

  /* Official branded badge in place of a generic icon (Design Brief §4).
     `.hero-chip__badge { width: 20px; height: 20px }`. Horizon's base.css sets
     `img { width: 100% }`, so both axes are pinned.

     Deliberately NOT `flex: 0 0 auto` (which the icon above does need). The
     reference leaves this image at the default `flex-shrink: 1`, and because a
     replaced element's min-content size is 0, that makes the chip row's
     min-content 20px narrower than its max-content. In the split-media hero
     that 20px is load-bearing: the row is the widest thing in the copy column,
     so its min-content is what sizes the `1fr` grid track. Freezing the image
     widened the column by exactly 20px and stole the same 20px from the media
     column at every width above 860px. Measured, not guessed. */
  .yc-contact-badge__image {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  /* ============================================================
     Chip variant — materials.html `.hero-chip`
     ============================================================
     Selected by the parent section's `badge_layout: "chips"`, which puts
     `.yc-faq-hero__badges--chips` on the row. The row's own flex behaviour
     lives in sections/yc-faq-hero.liquid; everything that belongs to the pill
     itself stays here, so the pill has one owner.

     Deltas from the Contact badge, all measured against the reference:
     8px gap (not 6), a 1.5px border (not 1), a 16px icon (not 17), and it
     never shrinks on one line. */
  .yc-faq-hero__badges--chips .yc-contact-badge {
    flex-shrink: 0;
    gap: 8px;
    white-space: nowrap;
    border-width: 1.5px;
  }

  .yc-faq-hero__badges--chips .yc-contact-badge__icon {
    width: 16px;
    height: 16px;
  }

  /* Phones: each chip takes half the row minus the gap, so the wrap point is
     fixed rather than left to the text width, and the type and padding step
     down so the longest label still fits its half on one line. */
  @media (max-width: 640px) {
    .yc-faq-hero__badges--chips .yc-contact-badge {
      flex: 0 1 calc(50% - 4px);
      justify-content: center;
      padding: 8px 12px;
      font-size: 12px;
    }

    .yc-faq-hero__badges--chips .yc-contact-badge__icon {
      width: 14px;
      height: 14px;
    }

    .yc-faq-hero__badges--chips .yc-contact-badge__image {
      width: 16px;
      height: 16px;
    }
  }

  /* Narrow phones: one more step down so the two longest labels still share
     the first row. */
  @media (max-width: 400px) {
    .yc-faq-hero__badges--chips .yc-contact-badge {
      gap: 4px;
      padding: 6px 8px;
      font-size: 11px;
    }
  }
/* END_BLOCK:_yc-contact-badge */

/* START_BLOCK:_yc-contact-channel (INDEX:171) */
/* .channel — a white bordered card, 12px padding, 24px radius. The
     resting shadow token is `none` in the current design system, so the
     hover shadow the reference declares resolves to nothing; only the lift
     and the light-indigo fill are visible. */
  .yc-channel {
    --yc-tile: #ede9fd;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 24px;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  }

  .yc-channel:not(.yc-channel--static):hover {
    transform: translateY(-3px);
    background-color: #ede9fd;
  }

  /* Reference: `a:focus-visible { outline: 3px solid purple; offset 2px }`
     (style.css:173). That rule also forces `border-radius: 4px`, which would
     snap this 24px card to sharp corners while focused — a cascade artefact,
     not a design; the ring is kept, the radius is not. Purple on white
     measures 7.73:1. */
  .yc-channel:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  /* Tints — one class per topic colour, shared by the tile and the tag. */
  .yc-channel--sky { --yc-tile: #78c6ff; }
  .yc-channel--peach { --yc-tile: #ffc7ac; }
  .yc-channel--green { --yc-tile: #0fb654; }
  .yc-channel--blue { --yc-tile: #8b89c8; }
  .yc-channel--pink { --yc-tile: #ff92eb; }

  /* .channel__icon — 36px circle in the tint, 17px ink glyph. */
  .yc-channel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: #2e2e2e;
    background-color: var(--yc-tile);
    border: 1px solid #2e2e2e;
    border-radius: 50%;
  }

  .yc-channel__glyph {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
  }

  /* .channel__body */
  .yc-channel__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  /* .channel__top */
  .yc-channel__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .yc-channel__top strong {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
  }

  /* .channel__tag — 10px/700 uppercase pill in the tint. */
  .yc-channel__tag {
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: var(--yc-tile);
    border-radius: 999px;
  }

  /* .channel__desc */
  .yc-channel__desc {
    font-size: 12px;
    line-height: 1.4;
    color: #2e2e2e;
    opacity: 0.7;
  }

  /* .channel__value — purple 13px/700 with the arrow on the same line. */
  .yc-channel__value {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    color: #4036d6;
    overflow-wrap: anywhere;
  }

  .yc-channel__arrow {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
  }

  /* .channel--static .channel__value — a sentence, not a value: block text,
     muted ink, with the icon inline at the start of the first line. */
  .yc-channel--static .yc-channel__value {
    display: block;
    font-weight: 600;
    line-height: 1.4;
    color: #2e2e2e;
    opacity: 0.75;
  }

  /* The reference declares `vertical-align: -1px` on an icon-FONT glyph,
     whose inline box is placed by the Phosphor font's own metrics. An
     inline-block SVG sits on the baseline instead, so the same -1px left it
     1px higher than the reference glyph at every width; -2px is the
     measured match (x, width and height were already identical). */
  .yc-channel__value-icon {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 4px;
    vertical-align: -2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-channel {
      transition: none;
    }
  }
/* END_BLOCK:_yc-contact-channel */

/* START_BLOCK:_yc-contact-promise (INDEX:172) */
/* .promise-row li */
  .yc-promise {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
    color: #2e2e2e;
    opacity: 0.8;
    list-style: none;
  }

  /* .promise-row i — 14px purple glyph; SVG sized to the same square box. */
  .yc-promise__icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: #4036d6;
  }
/* END_BLOCK:_yc-contact-promise */

/* START_BLOCK:_yc-faq-badge (INDEX:173) */
.yc-faq-badge {
    position: absolute;
    left: 24px;
    z-index: 1;
    /* Reference default, overridable per badge via the block's Width setting. */
    width: var(--yc-badge-w, 86px);
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    transform: rotate(var(--yc-badge-rotate, 0deg));
    filter: drop-shadow(3px 3px 0 rgba(46, 46, 46, 0.12));
  }

  .yc-faq-badge--right {
    left: auto;
    right: 24px;
  }

  /* The landscape artwork (Fit arrow, Presume Competence) is much shorter than
     the round seals, so at a shared width it reads as a thin sliver — give it
     more width to sit at a comparable visual weight. */
  .yc-faq-badge--wide {
    width: var(--yc-badge-w, 118px);
  }

  /* Cards are 880px wide, so the cream margin each side is (viewport-880)/2.
     Step the badges down to fit that shrinking margin, then drop them once
     there genuinely isn't room left beside the questions. */
  @media (max-width: 1240px) {
    .yc-faq-badge {
      /* --yc-badge-w-sm is the override scaled by the same ratio the reference
         uses here (86->72, 118->96), so a tuned badge shrinks in step with the
         untuned ones instead of staying full size as the margin closes. */
      width: var(--yc-badge-w-sm, 72px);
      left: 12px;
    }

    .yc-faq-badge--wide {
      width: var(--yc-badge-w-sm, 96px);
    }

    .yc-faq-badge--right {
      left: auto;
      right: 12px;
    }
  }

  @media (max-width: 1100px) {
    .yc-faq-badge {
      display: none;
    }
  }
/* END_BLOCK:_yc-faq-badge */

/* START_BLOCK:_yc-faq-cta-button (INDEX:174) */
/* .btn — 14px/700 pill, 16px/32px padding, 1px #e2e1ee border. */
  .yc-faq-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #ffffff;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .yc-faq-cta__btn--purple {
    color: #ffffff;
    background-color: #4036d6;
  }

  .yc-faq-cta__btn--white {
    color: #2e2e2e;
    background-color: #ffffff;
  }

  .yc-faq-cta__btn--ink {
    color: #ffffff;
    background-color: #2e2e2e;
  }

  .yc-faq-cta__btn--pink {
    color: #2e2e2e;
    background-color: #ff92eb;
  }

  .yc-faq-cta__btn--yellow {
    color: #2e2e2e;
    background-color: #ffc7ac;
  }

  /* Added, not in the reference: a keyboard user must be able to see which
     button they are on (WCAG 2.2 AA, 2.4.7). */
  .yc-faq-cta__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  /* .btn__icon — 18px, matching the reference's font-size: var(--fs-18) on the
     Phosphor glyph. yc-icon draws the same artwork on the same viewBox. */
  .yc-faq-cta__btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  /* responsive.css:759 puts `.btn { width: 100% }` inside the <=640px block, so
     the CTA row stacks into two full-width buttons on phones. The row itself is
     a fit-content flex item, so "100%" resolves to the width of both buttons
     side by side — which is exactly what makes them wrap. */
  @media (max-width: 640px) {
    .yc-faq-cta__btn {
      width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-faq-cta__btn {
      transition: none;
    }
  }
/* END_BLOCK:_yc-faq-cta-button */

/* START_BLOCK:_yc-faq-group (INDEX:175) */
/* The anchor has to land below the sticky header AND the sticky tab bar.
     The reference hardcodes 150px for its own 88px header; this theme measures
     its header into --header-height (snippets/measure-header-heights.liquid)
     and the section's JS measures the tab bar into --yc-faq-tabs-height, so
     the offset stays correct whatever the header is configured to. */
  .yc-faq-group {
    scroll-margin-top: calc(var(--header-height, 60px) + var(--yc-faq-tabs-height, 63px) + 16px);
  }

  /* Tint palettes. --yc-doodle is the line-art colour for the same topic and
     is not always --yc-tile: see the block doc above. */
  .yc-faq-group--sky {
    --yc-tile: #78c6ff;
    --yc-doodle: #78c6ff;
  }

  .yc-faq-group--green {
    --yc-tile: #0fb654;
    --yc-doodle: #0fb654;
  }

  .yc-faq-group--peach {
    --yc-tile: #ffc7ac;
    --yc-doodle: #ff92eb;
  }

  .yc-faq-group--blue {
    --yc-tile: #8b89c8;
    --yc-doodle: #8b89c8;
  }

  .yc-faq-group--pink {
    --yc-tile: #ff92eb;
    --yc-doodle: #ff92eb;
  }

  .yc-faq-group--yellow {
    --yc-tile: #ffc7ac;
    --yc-doodle: #4036d6;
  }

  /* ---------- Category bar (level 1) ---------- */
  .yc-faq-group__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 16px;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.18s ease;
  }

  .yc-faq-group__head::-webkit-details-marker {
    display: none;
  }

  .yc-faq-group__head::marker {
    content: '';
  }

  .yc-faq-group__head:hover {
    background-color: #ede9fd;
  }

  /* Added, not in the reference — the category bar is a control and needs a
     visible keyboard focus state (WCAG 2.2 AA, 2.4.7). */
  .yc-faq-group__head:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: -3px;
  }

  /* A closed category shows only its bar, so the bottom margin that separates
     the bar from its (hidden) list would add uneven gaps between bars. */
  .yc-faq-group:not([open]) .yc-faq-group__head {
    margin-bottom: 0;
  }

  .yc-faq-group__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    color: #2e2e2e;
    background-color: var(--yc-tile, #ede9fd);
    border: 1px solid #e2e1ee;
    border-radius: 16px;
  }

  /* 26px matches the reference's `font-size: 26px` on the Phosphor glyph —
     yc-icon draws the same artwork on the same 256-unit viewBox. */
  .yc-faq-group__icon-svg {
    width: 26px;
    height: 26px;
  }

  .yc-faq-group__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.05;
    color: #2e2e2e;
  }

  /* Sits between the title and the caret. The caret takes margin-left:auto, so
     the doodle stays tucked against the title rather than drifting to the
     middle of the bar. Decorative: it repeats nothing the title says. */
  .yc-faq-group__doodle {
    flex-shrink: 0;
    width: 56px;
    height: auto;
    overflow: visible;
    color: var(--yc-doodle, #4036d6);
    pointer-events: none;
  }

  /* The loop is a tall, tightly-wound mark rather than a wide low one, so at a
     shared width it reads much heavier than the other two. */
  .yc-faq-group__doodle--loop {
    width: 36px;
  }

  /* A dotted trail scaled to 56px leaves each dot barely a pixel across, so
     this one runs wider and on a heavier stroke than the solid marks. */
  .yc-faq-group__doodle--dash {
    width: 66px;
  }

  .yc-faq-group__caret {
    margin-left: auto;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #6b6b6b;
    transition: transform 0.18s ease;
  }

  .yc-faq-group[open] > .yc-faq-group__head .yc-faq-group__caret {
    transform: rotate(180deg);
  }

  /* Optional lead-in. Ink rather than the answers' #6b6b6b: it sits on the
     section's cream, where #6b6b6b drops to ~4.5:1 — too close to the line. */
  .yc-faq-group__intro {
    margin: 0 4px 16px;
    font-size: 15px;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-faq-group__intro > * {
    margin: 0;
  }

  .yc-faq-group__intro > * + * {
    margin-top: 8px;
  }

  .yc-faq-group__intro a {
    color: #4036d6;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---------- Answer list (level 2) ---------- */
  /* .faq — 4px between rows. */
  .yc-faq-group__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  /* style.css:5538 — a rotating coloured rule down the left edge of every
     question. Six long so it repeats cleanly however many questions a merchant
     adds.

     ⚠ The cycle is counted on the question's PARENT, not on `.yc-faq-qa`.
     The reference can write `.faq > .faq__item:nth-child(6n+2)` because its
     rows are direct children of the list. Here each question is a theme block,
     and Shopify wraps every one in its own `<shopify-block>` element — so
     `.yc-faq-group__list > .yc-faq-qa` matches nothing (the direct child is the
     wrapper) and every `.yc-faq-qa` is the only child of its wrapper, making
     `:nth-child` 1 for all of them. The result on the storefront was no rule at
     all, while the old hardcoded harness showed all six colours.

     `display: contents` is NOT a fix for this: it changes layout, not the DOM
     tree that `:nth-child` is resolved against.

     Both forms are kept so the cycle is correct whether or not a wrapper is
     present. */
  .yc-faq-group__list > .yc-faq-qa,
  .yc-faq-group__list > * > .yc-faq-qa {
    border-left: 4px solid #4036d6;
  }

  .yc-faq-group__list > .yc-faq-qa:nth-child(6n + 2),
  .yc-faq-group__list > *:nth-child(6n + 2) > .yc-faq-qa {
    border-left-color: #0fb654;
  }

  .yc-faq-group__list > .yc-faq-qa:nth-child(6n + 3),
  .yc-faq-group__list > *:nth-child(6n + 3) > .yc-faq-qa {
    border-left-color: #ffc7ac;
  }

  .yc-faq-group__list > .yc-faq-qa:nth-child(6n + 4),
  .yc-faq-group__list > *:nth-child(6n + 4) > .yc-faq-qa {
    border-left-color: #8b89c8;
  }

  .yc-faq-group__list > .yc-faq-qa:nth-child(6n + 5),
  .yc-faq-group__list > *:nth-child(6n + 5) > .yc-faq-qa {
    border-left-color: #ff92eb;
  }

  .yc-faq-group__list > .yc-faq-qa:nth-child(6n + 6),
  .yc-faq-group__list > *:nth-child(6n + 6) > .yc-faq-qa {
    border-left-color: #78c6ff;
  }

  /* ---------- Phones ---------- */
  /* Wrapping used to push the caret onto its own line under a long title;
     instead the row stays a single line and the icon, gaps and type scale down
     to make the title fit beside it. */
  @media (max-width: 640px) {
    .yc-faq-group__head {
      flex-wrap: nowrap;
      gap: 12px;
      padding: 12px;
    }

    .yc-faq-group__icon {
      width: 40px;
      height: 40px;
    }

    .yc-faq-group__icon-svg {
      width: 20px;
      height: 20px;
    }

    .yc-faq-group__title {
      min-width: 0;
      flex: 1 1 auto;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* `overflow: hidden` is needed for the ellipsis, but it also clips to the
         content box — and the heading's --lh-heading (1.05) makes that box
         shorter than the glyphs. Descenders lose their tails: the g in "Sizing",
         the pp/y in "Shipping & Delivery".

         Space below the baseline inside the box is (L/2 - 0.35)em. At L = 1.05
         that is 0.175em, less than the ~0.21em a Poppins descender needs. L must
         reach 1.4 for the box to clear the font's full descent.

         Costs nothing: the row is sized by the 40px icon, so the title growing
         from 16.8px to 22.4px leaves the bar's height and padding untouched.
         The reference has the same clipping — see context.md. */
      line-height: 1.4;
    }

    .yc-faq-group__caret {
      width: 18px;
      height: 18px;
    }

    /* The bar is a single non-wrapping line at this width, so the doodle would
       eat room the title needs before it starts to ellipsis. */
    .yc-faq-group__doodle {
      display: none;
    }
  }

  /* Narrow phones need one more step down for the longest titles
     ("Payment, FSA/HSA & Insurance") to stay on their single line. */
  @media (max-width: 420px) {
    .yc-faq-group__icon {
      width: 36px;
      height: 36px;
    }

    .yc-faq-group__icon-svg {
      width: 18px;
      height: 18px;
    }

    .yc-faq-group__title {
      font-size: 14px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-faq-group__head,
    .yc-faq-group__caret {
      transition: none;
    }
  }
/* END_BLOCK:_yc-faq-group */

/* START_BLOCK:_yc-faq-question (INDEX:176) */
/* .faq__item */
  .yc-faq-qa {
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 16px;
    overflow: hidden;
  }

  /* .faq__q */
  .yc-faq-qa__q {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
    color: #2e2e2e;
    cursor: pointer;
    list-style: none;
  }

  .yc-faq-qa__q::-webkit-details-marker {
    display: none;
  }

  .yc-faq-qa__q::marker {
    content: '';
  }

  /* Added, not in the reference: the summary is the control, and a keyboard
     user has to be able to see where they are (WCAG 2.2 AA, 2.4.7). Inset so
     the ring sits inside the rounded card rather than being clipped by it. */
  .yc-faq-qa__q:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: -3px;
  }

  /* .faq__icon — the plus rotates 45deg into an x when the row opens. */
  .yc-faq-qa__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: #4036d6;
    transition: transform 0.18s ease;
  }

  .yc-faq-qa[open] .yc-faq-qa__icon {
    transform: rotate(45deg);
  }

  /* .faq__a, with faq.html's page override (column + 12px gap). */
  .yc-faq-qa__a {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px 20px;
  }

  .yc-faq-qa__a > * {
    margin: 0;
  }

  .yc-faq-qa__a p,
  .yc-faq-qa__a li {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: #6b6b6b;
  }

  .yc-faq-qa__a ul,
  .yc-faq-qa__a ol {
    padding-left: 20px;
  }

  .yc-faq-qa__a li {
    list-style: inherit;
  }

  /* faq.html: answer copy is muted grey, so a link that only changed colour
     read as emphasis rather than something clickable — the underline is what
     makes it obviously a link (client note in the reference). */
  .yc-faq-qa__a a {
    color: #4036d6;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
  }

  .yc-faq-qa__a a:hover,
  .yc-faq-qa__a a:focus-visible {
    color: #2f2799;
    text-decoration-thickness: 2px;
  }

  /* contact.html `.faq-preview__more` — a 13px/700 purple link with a
     trailing arrow and NO underline, so it reads as a way onward rather than
     as an inline link in the prose. The selector carries the parent class to
     outrank the `.yc-faq-qa__a a` rule above, which would otherwise underline
     it. The reference declares no hover or focus state for it. */
  .yc-faq-qa__a a.yc-faq-qa__more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    color: #4036d6;
    text-decoration: none;
  }

  .yc-faq-qa__a a.yc-faq-qa__more:hover {
    color: #4036d6;
    text-decoration: none;
  }

  /* Added, not in the reference (WCAG 2.2 AA, 2.4.7). */
  .yc-faq-qa__a a.yc-faq-qa__more:focus-visible {
    color: #4036d6;
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* The reference's arrow is a Phosphor glyph inheriting the link's 13px,
     so it occupies a 13px square; the SVG is sized to the same box. */
  .yc-faq-qa__more-icon {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-faq-qa__icon {
      transition: none;
    }
  }
/* END_BLOCK:_yc-faq-question */

/* START_BLOCK:_yc-gift-door (INDEX:180) */
/* `.gift-door` — the row. Four columns: icon | copy | checklist | action.
     NO `position` — see the badge note in this file's header. */
  .yc-gift-doors__door {
    display: grid;
    grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 24px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 32px;
    box-shadow: 4px 4px 0 #2e2e2e;
    transition: transform 0.18s ease;
  }

  .yc-gift-doors__door:hover {
    transform: translateY(-3px);
  }

  /* `.sticker` (style.css:1068) with `.gift-door__badge`'s overrides on top:
     the base is 92px at z-index 3, this narrows it and lifts it to z-index 4.
     The artwork is taller than it is wide, so it has to hang high enough that
     its tip stops in the stack's top padding rather than on a button. */
  .yc-gift-doors__badge {
    position: absolute;
    z-index: 4;
    top: var(--yc-gift-door-badge-top, -58px);
    right: var(--yc-gift-door-badge-right, 20px);
    width: var(--yc-gift-door-badge-w, 50px);
    height: auto;
    pointer-events: none;
    transform: rotate(var(--yc-gift-door-badge-rotate, 10deg));
    filter: drop-shadow(3px 3px 0 rgb(46 46 46 / 18%));
  }

  /* A rounded square, not the circle the cards elsewhere use — at this size a
     circle floats in the row instead of anchoring its left edge. It also has
     NO border, unlike every other tinted tile on the page. */
  .yc-gift-doors__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    font-size: 40px;
    color: #2e2e2e;
    background-color: var(--yc-gift-door-tile, #ffc7ac);
    border-radius: 24px;
  }

  /* 1em against the tile's own font-size, exactly as the reference's icon-font
     glyph is — so the 40px -> 30px step at 780px carries the glyph with it. */
  .yc-gift-doors__icon-glyph {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  .yc-gift-doors__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* `.gift-door h3` — --fs-20, a FIXED token that does not move on the
     responsive ladder. Weight and tracking come from the h1-h6 base. */
  .yc-gift-doors__door-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* --fs-14, also fixed. Ink at 78% on white is 10.6:1. */
  .yc-gift-doors__text {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #2e2e2e;
    opacity: 0.78;
  }

  .yc-gift-doors__text a {
    color: inherit;
    text-decoration: none;
  }

  /* Added, not in the reference (WCAG 2.2 AA 2.4.7). Invisible at rest. */
  .yc-gift-doors__text a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Horizon has no list reset, so the UA's 40px indent and 1em block margin
     would otherwise appear where the prototype's own reset removed them. */
  .yc-gift-doors__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .yc-gift-doors__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: #2e2e2e;
    list-style: none;
  }

  .yc-gift-doors__tick {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--yc-gift-door-check, #0fb654);
  }

  /* Wide enough that the longest label stays on one line — a two-line button on
     one row and a one-line button on the other would make the paths unequal. */
  .yc-gift-doors__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: var(--yc-gift-door-foot, 222px);
  }

  /* `.btn` with `.gift-door__foot .btn`'s tighter side padding: the global 32px
     each side pushed the longer label onto a second line inside this column.
     An <a> button inherits the prototype's 1.55 body line-height, pinned here.
     The reference declares the transition but defines NO hover state for these
     variants, so the button genuinely does not change on hover. */
  .yc-gift-doors__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    white-space: nowrap;
    color: #ffffff;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .yc-gift-doors__btn--purple {
    color: #ffffff;
    background-color: #4036d6;
  }

  .yc-gift-doors__btn--white {
    color: #2e2e2e;
    background-color: #ffffff;
  }

  .yc-gift-doors__btn--ink {
    color: #ffffff;
    background-color: #2e2e2e;
  }

  /* Added. The reference's global focus rule would also snap the pill to a 4px
     radius; that cascade artefact is not reproduced, the ring is. */
  .yc-gift-doors__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-gift-doors__btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  /* --fs-12 on muted grey: 5.74:1 on white. */
  .yc-gift-doors__note {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    color: #6b6b6b;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* gifting.html 296-305 — the checklist drops under the copy rather than
     squeezing a fourth column into a width that cannot hold it. The icon and
     the action column each span both rows and centre against them. */
  @media (max-width: 1240px) {
    .yc-gift-doors__door {
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 16px;
    }

    .yc-gift-doors__body {
      align-self: end;
    }

    .yc-gift-doors__list {
      grid-column: 2;
    }

    .yc-gift-doors__icon {
      grid-row: span 2;
      align-self: center;
    }

    .yc-gift-doors__foot {
      grid-row: span 2;
      align-self: center;
    }
  }

  /* gifting.html 313-324 — fully stacked: icon and title on one line, then the
     checklist, then the action across the full width. The <=1240 block is still
     in force here, which is why `align-self` is not restated. */
  @media (max-width: 780px) {
    .yc-gift-doors__door {
      grid-template-columns: auto 1fr;
      gap: 16px;
      padding: 24px 20px;
    }

    .yc-gift-doors__icon {
      grid-row: auto;
      width: 64px;
      height: 64px;
      font-size: 30px;
    }

    .yc-gift-doors__list {
      grid-column: 1 / -1;
    }

    .yc-gift-doors__foot {
      grid-row: auto;
      grid-column: 1 / -1;
      align-items: stretch;
      width: 100%;
    }

    .yc-gift-doors__note {
      text-align: left;
    }
  }

  @media (max-width: 600px) {
    .yc-gift-doors__badge {
      display: none;
    }

    .yc-gift-doors__text {
      font-size: 13px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-gift-doors__door,
    .yc-gift-doors__btn {
      transition: none;
    }

    .yc-gift-doors__door:hover {
      transform: none;
    }
  }
/* END_BLOCK:_yc-gift-door */

/* START_BLOCK:_yc-gift-option (INDEX:181) */
/* `.gift-option` — the card. A flex column so the button can be pushed to the
     bottom with `margin-top: auto`, which is what keeps three cards of
     different content lengths ending on a shared baseline. */
  .yc-gift-options__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 32px;
    box-shadow: 4px 4px 0 #2e2e2e;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  /* The two dealt cards: tilted, dropped, and tucked behind the centre. The
     extra padding on the overlapped side is what keeps their copy clear of the
     card on top — without it the titles and ticks sit underneath it. */
  .yc-gift-options__card--side-left {
    z-index: 1;
    margin-right: -16px;
    padding-right: 48px;
    transform: rotate(-4deg) translateY(20px);
  }

  .yc-gift-options__card--side-right {
    z-index: 1;
    margin-left: -16px;
    padding-left: 48px;
    transform: rotate(4deg) translateY(20px);
  }

  /* Hover lifts a side card clear of the deck and straightens it, so a tilted
     card is never the only way to read one. */
  .yc-gift-options__card--side-left:hover,
  .yc-gift-options__card--side-right:hover {
    z-index: 4;
    box-shadow: 6px 6px 0 #2e2e2e;
  }

  .yc-gift-options__card--side-left:hover {
    transform: rotate(-1.5deg) translateY(10px);
  }

  .yc-gift-options__card--side-right:hover {
    transform: rotate(1.5deg) translateY(10px);
  }

  /* The card on top of the deck: larger padding, a deeper resting shadow, and
     the only one that is not rotated. */
  .yc-gift-options__card--featured {
    z-index: 3;
    padding: 32px;
    box-shadow: 6px 6px 0 #2e2e2e;
  }

  .yc-gift-options__card--featured:hover {
    transform: translateY(-4px);
  }

  /* `.gift-option__ribbon` — a 128px square clipped to the card's top-right
     radius, with the banner rotated 45deg inside it. */
  .yc-gift-options__ribbon {
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 4;
    width: 128px;
    height: 128px;
    overflow: hidden;
    border-top-right-radius: 32px;
    pointer-events: none;
  }

  .yc-gift-options__ribbon span {
    position: absolute;
    top: 26px;
    right: -38px;
    width: 168px;
    padding: 6px 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    color: #ffffff;
    background-color: var(--yc-gift-option-ribbon, #4036d6);
    border-top: 1px solid #2e2e2e;
    border-bottom: 1px solid #2e2e2e;
    transform: rotate(45deg);
  }

  /* `.gift-option__media` — a fixed-height tinted tile. */
  .yc-gift-options__media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--yc-gift-option-media-h, 130px);
    padding: 12px;
    background-color: var(--yc-gift-option-tile, #f0eee3);
    border: 1px solid #2e2e2e;
    border-radius: 24px;
    overflow: hidden;
  }

  /* Photo mode: the product shots sit on a near-white studio backdrop, so a
     tinted tile would letterbox them with a hard colour edge. These fill the
     tile instead and keep their own white — the reference's own reasoning. */
  .yc-gift-options__media--photo {
    padding: 0;
    background-color: #ffffff;
  }

  .yc-gift-options__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Pinned at 58px on every card — the featured tile is taller (160 vs 130) but
     its glyph is not larger. */
  .yc-gift-options__media-glyph {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    color: #2e2e2e;
  }

  /* --fs-19, a FIXED token. */
  .yc-gift-options__card-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* ⚠ THE FEATURED TITLE IS THE ONE LADDERED SIZE ON THIS CARD. It is --fs-h4,
     which responsive.css steps 24 -> 22 at <=992 -> 18 at <=640. Every other
     size here (--fs-11 / 12 / 13 / 18 / 19) is fixed and does not move. */
  .yc-gift-options__card--featured .yc-gift-options__card-title {
    font-size: 24px;
  }

  .yc-gift-options__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-gift-options__price small {
    font-size: 12px;
    font-weight: 400;
    color: #6b6b6b;
  }

  .yc-gift-options__amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .yc-gift-options__amount {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 999px;
  }

  .yc-gift-options__amount--on {
    color: #ffffff;
    background-color: #4036d6;
  }

  /* --fs-13, fixed. */
  .yc-gift-options__text {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #2e2e2e;
  }

  .yc-gift-options__text a {
    color: inherit;
    text-decoration: none;
  }

  /* Added, not in the reference (WCAG 2.2 AA 2.4.7). Invisible at rest. */
  .yc-gift-options__text a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Horizon has no list reset, so the UA's 40px indent and 1em block margin
     would otherwise appear where the prototype's own reset removed them.
     Note `align-items: flex-start` here, not the `center` the doors use — these
     items wrap to two lines and the tick has to stay on the first. */
  .yc-gift-options__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .yc-gift-options__list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #2e2e2e;
    list-style: none;
  }

  .yc-gift-options__tick {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--yc-gift-option-check, #0fb654);
  }

  /* `.gift-option .btn` — `margin-top: auto` pushes it to the card's foot and
     `align-self: stretch` fills the width, so three cards of different content
     lengths all end on the same button. */
  .yc-gift-options__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    align-self: stretch;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #ffffff;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .yc-gift-options__btn--purple {
    color: #ffffff;
    background-color: #4036d6;
  }

  .yc-gift-options__btn--white {
    color: #2e2e2e;
    background-color: #ffffff;
  }

  .yc-gift-options__btn--ink {
    color: #ffffff;
    background-color: #2e2e2e;
  }

  /* Added. The reference's global focus rule would also snap the pill to a 4px
     radius; that cascade artefact is not reproduced, the ring is. */
  .yc-gift-options__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-gift-options__btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* gifting.html 476-482 — the fan tightens as the deck narrows. */
  @media (max-width: 1240px) {
    .yc-gift-options__card {
      padding: 20px;
    }

    .yc-gift-options__card--side-left {
      margin-right: -10px;
      padding-right: 36px;
      transform: rotate(-3deg) translateY(14px);
    }

    .yc-gift-options__card--side-right {
      margin-left: -10px;
      padding-left: 36px;
      transform: rotate(3deg) translateY(14px);
    }

    .yc-gift-options__card--featured {
      padding: 24px;
    }
  }

  /* responsive.css --fs-h4 24 -> 22, which only this card's featured title
     uses. */
  @media (max-width: 992px) {
    .yc-gift-options__card--featured .yc-gift-options__card-title {
      font-size: 22px;
    }
  }

  /* gifting.html 484-503 — stacked, there is no fan to hold: the cards sit
     square and the gift card leads, since it is the one that needs no size. */
  @media (max-width: 900px) {
    .yc-gift-options__card--side-left,
    .yc-gift-options__card--side-right {
      margin: 0;
      padding: 24px;
      transform: none;
    }

    .yc-gift-options__card--side-left:hover,
    .yc-gift-options__card--side-right:hover,
    .yc-gift-options__card--featured:hover {
      transform: translateY(-4px);
    }

    .yc-gift-options__card--featured {
      order: -1;
    }
  }

  @media (max-width: 640px) {
    .yc-gift-options__card--featured .yc-gift-options__card-title {
      font-size: 18px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-gift-options__card,
    .yc-gift-options__btn {
      transition: none;
    }

    .yc-gift-options__card:hover {
      transform: none;
    }

    .yc-gift-options__card--side-left:hover {
      transform: rotate(-4deg) translateY(20px);
    }

    .yc-gift-options__card--side-right:hover {
      transform: rotate(4deg) translateY(20px);
    }
  }
/* END_BLOCK:_yc-gift-option */

/* START_BLOCK:_yc-gift-reason (INDEX:182) */
/* `.gift-card` — a tight white card, only as tall as its copy. */
  .yc-gift-reasons__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 24px;
    box-shadow: 4px 4px 0 #2e2e2e;
    transition: transform 0.18s ease;
  }

  .yc-gift-reasons__card:hover {
    transform: translateY(-4px);
  }

  /* A bordered 44px circle — not the deck's borderless rounded square, and not
     the door rows' 88px tile. */
  .yc-gift-reasons__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 22px;
    color: #2e2e2e;
    background-color: var(--yc-gift-reason-tile, #ffc7ac);
    border: 1px solid #2e2e2e;
    border-radius: 50%;
  }

  /* 1em against the disc's own font-size, exactly as the reference's icon-font
     glyph is. */
  .yc-gift-reasons__glyph {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* --fs-17, a FIXED token — it does not move on the responsive ladder. Weight
     and tracking come from the h1-h6 base. */
  .yc-gift-reasons__card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* --fs-13, also fixed. Ink at 82% on white is 11.1:1. */
  .yc-gift-reasons__text {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #2e2e2e;
    opacity: 0.82;
  }

  .yc-gift-reasons__text a {
    color: inherit;
    text-decoration: none;
  }

  /* Added, not in the reference (WCAG 2.2 AA 2.4.7). Invisible at rest. */
  .yc-gift-reasons__text a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-gift-reasons__card {
      transition: none;
    }

    .yc-gift-reasons__card:hover {
      transform: none;
    }
  }
/* END_BLOCK:_yc-gift-reason */

/* START_BLOCK:_yc-gift-step (INDEX:183) */
/* `.gift-step` — a white card, relative so the numbered coin can straddle its
     top edge. The top padding is what clears the coin, which overlaps 22px in. */
  .yc-gift-steps__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 24px 24px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 32px;
    box-shadow: 4px 4px 0 #2e2e2e;
    transition: transform 0.18s ease;
  }

  .yc-gift-steps__step:hover {
    transform: translateY(-4px);
  }

  /* `.gift-step__num` — straddles the card's top edge. Bordered, and NO shadow
     (unlike the subscription page's coin, which carries a 3px one). */
  .yc-gift-steps__num {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.55;
    color: #2e2e2e;
    background-color: var(--yc-gift-step-tint, #ffc7ac);
    border: 1px solid #2e2e2e;
    border-radius: 50%;
  }

  /* `.gift-step__icon` — the same tint as the coin, but a BORDERLESS rounded
     square at 90% opacity. The missing border is the reference's, not an
     oversight. */
  .yc-gift-steps__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 25px;
    color: #2e2e2e;
    background-color: var(--yc-gift-step-tint, #ffc7ac);
    border-radius: 16px;
    opacity: 0.9;
  }

  /* 1em against the tile's own font-size, as the reference's icon-font glyph. */
  .yc-gift-steps__glyph {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* --fs-17, a FIXED token. */
  .yc-gift-steps__step-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* --fs-13 capped at 300px. Ink at 80% on white is 10.4:1. */
  .yc-gift-steps__text {
    margin: 0;
    max-width: 300px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #2e2e2e;
    opacity: 0.8;
  }

  .yc-gift-steps__text a {
    color: inherit;
    text-decoration: none;
  }

  /* Added, not in the reference (WCAG 2.2 AA 2.4.7). Invisible at rest. */
  .yc-gift-steps__text a:focus-visible {
    outline: 2px solid #4036d6;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* `.gift-steps__link` — the connector. Its height comes from the viewBox
     ratio against whatever the fixed track leaves after the inline padding. */
  .yc-gift-steps__link {
    align-self: center;
    width: 100%;
    padding-inline: 16px;
    color: var(--yc-gift-steps-link, #4036d6);
    opacity: 0.55;
  }

  /* ---------- Responsive (reference breakpoints) ---------- */
  /* gifting.html 578-582 — tighter cards once the connector tracks narrow. */
  @media (max-width: 1080px) {
    .yc-gift-steps__step {
      padding: 32px 16px 20px;
    }

    .yc-gift-steps__text {
      font-size: 12px;
    }
  }

  /* gifting.html 583-589 — stacked, the connectors would run vertically between
     cards that already read in order, so they go. */
  @media (max-width: 860px) {
    .yc-gift-steps__link {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-gift-steps__step {
      transition: none;
    }

    .yc-gift-steps__step:hover {
      transform: none;
    }
  }
/* END_BLOCK:_yc-gift-step */

/* START_BLOCK:_yc-hero-pill (INDEX:184) */
.yc-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .yc-pill__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }
/* END_BLOCK:_yc-hero-pill */

/* START_BLOCK:_yc-material-card (INDEX:185) */
/* materials.html `.material-card`. The 1px border is INK, not the site's
     #e2e1ee: the reference notes it was rgba(46,46,46,0.1) and "10% ink read as
     no border at all", so it matches the spec cards and the home page's
     product cards.

     min-height, not height: the track is `align-items: stretch`, so every card
     already matches the tallest one. A minimum lets a long copy block grow the
     row instead of being clipped by the overflow rule. */
  .yc-material-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 450px;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 24px;
  }

  /* Fixed media band so the icon's seam position stays resolvable. */
  .yc-material-card__media {
    flex: 0 0 275px;
    height: 275px;
    overflow: hidden;
  }

  .yc-material-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .yc-material-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
  }

  /* Straddles the media/copy seam so each card is identifiable at a glance in
     the slider. Anchored to the card, not the media, because the media clips
     its overflow. Right-hand side so it never crowds the heading beneath it. */
  .yc-material-card__icon {
    position: absolute;
    top: calc(275px - 34px);
    right: 20px;
    left: auto;
    z-index: 2;
    width: 68px;
    height: 68px;
    padding: 6px;
    object-fit: contain;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 50%;
  }

  /* Reference `h4`: base ladder --fs-h4 24 -> 22 at <=992, --lh-heading 1.05,
     --ls-heading -0.03em, Poppins 700 ink. Rendered as h3 for hierarchy. */
  .yc-material-card__title {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-material-card__function {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.55;
    color: #2e2e2e;
    opacity: 0.8;
  }

  .yc-material-card__materials {
    margin: 0;
    padding-top: 16px;
    font-size: 14px;
    line-height: 1.55;
    color: #4036d6;
    border-top: 1px solid #e2e1ee;
  }

  .yc-material-card__materials strong {
    font-weight: 600;
    color: #2e2e2e;
  }

  @media (max-width: 1100px) {
    .yc-material-card__media {
      flex-basis: 240px;
      height: 240px;
    }

    .yc-material-card__icon {
      top: calc(240px - 30px);
      width: 60px;
      height: 60px;
    }
  }

  /* responsive.css --fs-h4 -> 22 at <=992. */
  @media (max-width: 992px) {
    .yc-material-card__title {
      font-size: 22px;
    }
  }

  /* One card per view. The photo, not the copy block, absorbs whatever height
     the tallest card sets: the media grows and the body is sized to its
     content, so a card with two lines of copy gets a taller image instead of a
     deep band of white above and below the text. The 450px desktop floor goes
     too — the track stretches every card to the tallest anyway. */
  @media (max-width: 860px) {
    .yc-material-card {
      height: auto;
      min-height: 0;
    }

    /* DELIBERATE DEVIATION FROM THE REFERENCE (client request, 2026-09-24).
       The reference is `flex: 1 1 200px; min-height: 200px; aspect-ratio: auto`,
       which lets the media shrink to whatever the tallest card leaves over. At
       tablet that is a 726 x 222 letterbox (3.3:1) against a 3:2 photo, so
       `object-fit: cover` throws away ~54% of the image and reads as a blurry
       close-up.

       `flex-basis: auto` + `aspect-ratio` gives the media a SHAPE FLOOR: its
       flex base size is now width / (16/9), so it can never be flatter than
       16:9. `flex-grow: 1` is kept, so the reference's intent still holds —
       the photo, not the copy block, absorbs whatever height the tallest card
       sets. `flex-shrink: 0` stops it being squeezed back below the floor.

       Only binds where the band would otherwise go flat: at 768 the media goes
       222 -> 408px. On phones it never binds (at 375 the floor is ~192px and
       the media is already ~242px), so phone layout is untouched. */
    .yc-material-card__media {
      flex: 1 0 auto;
      height: auto;
      min-height: 200px;
      aspect-ratio: 16 / 9;
    }

    .yc-material-card__body {
      flex: 0 0 auto;
      justify-content: flex-start;
      padding: 20px;
    }

    /* Parked on the photo's top-right corner, which holds at any media height
       now that the crop is a ratio rather than a fixed pixel band. */
    .yc-material-card__icon {
      top: 16px;
      right: 16px;
      bottom: auto;
      left: auto;
      width: 52px;
      height: 52px;
    }

    .yc-material-card__title {
      margin-bottom: 8px;
      font-size: 17px;
    }

    .yc-material-card__function {
      margin-bottom: 12px;
      font-size: 14px;
    }

    .yc-material-card__materials {
      padding-top: 12px;
      font-size: 13px;
    }
  }
/* END_BLOCK:_yc-material-card */

/* START_BLOCK:_yc-notinit-item (INDEX:188) */
/* materials.html `.not-in-it__list li` — white pill, ink hairline. */
  .yc-notinit__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 999px;
  }

  /* `.not-in-it__list i { font-size: 18px; color: purple }`. */
  .yc-notinit__item-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: #4036d6;
  }

  @media (max-width: 640px) {
    .yc-notinit__item {
      font-size: 13px;
    }
  }
/* END_BLOCK:_yc-notinit-item */

/* START_BLOCK:_yc-product-feature (INDEX:192) */
/* .pdp__featurelist-item — tokens resolved to literals:
       --color-border #e2e1ee · --color-ink #2e2e2e · --color-muted #6b6b6b
       --space-20 20 · --space-16 16 · --space-4 4
       --fs-15 15 · --fs-13 13 · --lh-body 1.55 */
  .yc-pf-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding-block: 20px;
    border-block-end: 1px solid #e2e1ee;
  }

  .yc-pf-item:last-child {
    border-block-end: none;
  }

  .yc-pf-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: contain;
  }

  .yc-pf-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Matches the reference's h6 rendering exactly; only the tag differs. */
  .yc-pf-body .yc-pf-heading {
    font-size: 15px;
    font-weight: 700;
    color: #2e2e2e;
    line-height: 1.2;
    margin: 0;
    letter-spacing: normal;
    text-transform: none;
  }

  .yc-pf-body p {
    font-size: 13px;
    font-weight: 400;
    color: #6b6b6b;
    line-height: 1.55;
    margin: 0;
  }
/* END_BLOCK:_yc-product-feature */

/* START_BLOCK:_yc-spec-card (INDEX:195) */
/* materials.html `.spec-card`. */
  /* The reference's own stack, pinned. Both `--font-primary` and
     `--font-heading` are `"Poppins","Segoe UI",system-ui,sans-serif`, but
     Shopify's `font_family` filter emits only `Poppins, sans-serif` for
     `poppins_n4`. The waist captions contain ″ (U+2033), which Poppins does
     not carry, so the two stacks fall back to DIFFERENT glyphs — visible in a
     pixel diff of the second card even though the text and its 278px width are
     identical. Pinning the reference's chain makes the fallback match on every
     platform. (The missing `Segoe UI` / `system-ui` fallbacks are theme-wide,
     a settings-level item for its own batch — see todo-materials.md.) */
  .yc-spec-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 20px;
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 24px;
    /* Resting shadow in the card's own accent; hover swaps it for the site's
       ink offset, the same lift every other card on the page uses. */
    box-shadow: 4px 4px 0 var(--yc-spec-tint, #ede9fd);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .yc-spec-card:hover {
    transform: translateY(-4px);
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* Icon and headline share a line — that alone takes ~44px off each card. */
  .yc-spec-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .yc-spec-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    font-size: 21px;
    color: #2e2e2e;
    background-color: var(--yc-spec-tint, #ede9fd);
    border: 1px solid #2e2e2e;
    border-radius: 50%;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  /* The reference's `<i>` is a 21px font glyph, so its box is 21x21. 1em of
     the 21px tile above puts the inline SVG on exactly the same box. */
  .yc-spec-card__glyph {
    width: 1em;
    height: 1em;
  }

  .yc-spec-card:hover .yc-spec-card__icon {
    color: #ffffff;
    background-color: #4036d6;
  }

  .yc-spec-card__value {
    display: block;
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #2e2e2e;
  }

  /* Pushed to the bottom so all four captions' baselines line up even when one
     runs to two lines and another to one. */
  .yc-spec-card__label {
    width: 100%;
    margin-top: auto;
    padding-top: 8px;
    /* Accent rule between the number and its caption. */
    border-top: 2px solid var(--yc-spec-tint, #ede9fd);
    font-size: 13px;
    line-height: 1.55;
    color: #2e2e2e;
    opacity: 0.75;
  }

  /* The reference has no reduced-motion handling; the lift is decorative. */
  @media (prefers-reduced-motion: reduce) {
    .yc-spec-card {
      transition: box-shadow 0.18s ease;
    }

    .yc-spec-card:hover {
      transform: none;
    }
  }
/* END_BLOCK:_yc-spec-card */

/* START_BLOCK:_yc-sub-benefit (INDEX:196) */
/* .benefit-card — z-index 1 keeps every card above the centre visual (z-0),
     which is what lets the row-2 pair overlap the cloud. */
  .yc-sub-benefit {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 22px;
    background-color: var(--yc-benefit-tile, #ffffff);
    border: 1px solid #2e2e2e;
    border-radius: 22px;
  }

  /* ---------- The six hand-placed tints ---------- */
  /* Each declares the plain-token fallback first, then the color-mix the
     reference actually renders. Values are the prototype's verbatim. */
  .yc-sub-benefit--purple {
    --yc-benefit-tile: #ede9fd;
    --yc-benefit-tile: color-mix(in srgb, #4036d6 12%, #fff);
    border-radius: 30px 16px 26px 20px;
    margin-top: -14px;
  }

  .yc-sub-benefit--green {
    --yc-benefit-tile: #e4f5ff;
    --yc-benefit-tile: color-mix(in srgb, #0fb654 14%, #fff);
    border-radius: 18px 28px 16px 26px;
    margin-top: 16px;
    margin-bottom: -18px;
  }

  .yc-sub-benefit--peach {
    --yc-benefit-tile: #ffc7ac;
    --yc-benefit-tile: color-mix(in srgb, #ffc7ac 45%, #fff);
    border-radius: 26px 20px 30px 16px;
    margin-top: -6px;
  }

  .yc-sub-benefit--sky {
    --yc-benefit-tile: #e4f5ff;
    --yc-benefit-tile: color-mix(in srgb, #78c6ff 28%, #fff);
    border-radius: 16px 26px 20px 30px;
    margin-top: 10px;
    margin-right: -26px;
  }

  /* Dusty purple rather than the yellow token, which resolves to the same
     peach and would have made two cards identical. */
  .yc-sub-benefit--blue {
    --yc-benefit-tile: #ede9fd;
    --yc-benefit-tile: color-mix(in srgb, #8b89c8 30%, #fff);
    border-radius: 28px 18px 24px 22px;
    margin-top: -10px;
    margin-left: -26px;
  }

  .yc-sub-benefit--pink {
    --yc-benefit-tile: #f0eee3;
    --yc-benefit-tile: color-mix(in srgb, #ff92eb 22%, #fff);
    border-radius: 22px 30px 18px 28px;
    margin-top: 6px;
  }

  /* ---------- Icon tile ---------- */
  /* The transition is the reference's, even though nothing triggers it — the
     cards have no hover state. Kept so the computed style matches. */
  .yc-sub-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    color: #2e2e2e;
    font-size: 24px;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .yc-sub-benefit__glyph {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  /* ---------- Copy ---------- */
  .yc-sub-benefit__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* .benefit-card h4 — 17px/1.2 on the heading base (Poppins 700,
     --ls-heading). Every value is set explicitly here, so the element can be
     an h3, an h4 or a p without the type changing. */
  .yc-sub-benefit__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-sub-benefit__text {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #2e2e2e;
    opacity: 0.78;
  }

  /* DELIBERATE DEVIATION, and it is an accessibility fix.

     The reference puts a link inside the promise card's copy
     ("See how it works") and the global reset is `a { color: inherit;
     text-decoration: none }`, with nothing anywhere targeting it. So in the
     reference that link has NO colour and NO underline — it is completely
     indistinguishable from the surrounding sentence and cannot be found by
     sight at all. That is a WCAG 2.2 AA failure under 1.4.1: link identity is
     conveyed by nothing, which is a stronger failure than the colour-alone case
     the SC is usually cited for.

     Fixed with an underline at a 3px offset — the reference's OWN idiom for an
     inline text link, lifted from `.manage-band__skip` (subscription.html:514)
     rather than invented. Colour stays inherited ink, measured at 6.11:1 once
     flattened through this paragraph's 0.78 opacity, so it comfortably clears
     4.5:1 and nothing else about the card changes. */
  .yc-sub-benefit__text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Not in the reference, which has no focus style here at all. Keyboard users
     must be able to see the link (WCAG 2.4.7). Ink on the pink tint, so the
     ring works on this card's own fill; keyboard-only, resting design intact. */
  .yc-sub-benefit__text a:focus-visible {
    outline: 2px solid #2e2e2e;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* The promise runs the full width beneath the orbit. */
  .yc-sub-benefit--wide {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 720px;
  }

  /* subscription.html 963-977 — without the centre column there is nothing to
     lean into, so every inward pull and vertical nudge goes. The uneven radii
     stay: they are the "hand-placed" character, not the layout. */
  @media (max-width: 1080px) {
    .yc-sub-benefit {
      margin-top: 0;
      margin-right: 0;
      margin-bottom: 0;
      margin-left: 0;
    }

    /* NOT in the reference, and NOT a port of anything — the reference has
       this exact same gap (client screenshot, iPad 768px) and it was never
       solved there either.

       ROOT CAUSE: the two-column grid here is `.yc-sub-benefits__orbit` with
       plain `grid-auto-flow: row` (no `dense`), sized for however many
       non-wide cards a merchant adds. With this section's five-then-one-wide
       preset, cards 1-4 fill two full rows, card 5 lands alone in column 1 of
       row 3, and the wide card can't fit beside it (it needs both columns) —
       so it drops to its own row 4, leaving row 3's second column empty.
       `grid-auto-flow: dense` does not fix this: there is no free two-column
       gap anywhere for the wide card to backfill into, only the one empty
       cell dense packing can't use.

       FIX: whichever normal card ends up immediately before a wide one — the
       exact card that goes on to sit alone — spans full width too and
       centres itself, the same treatment `.yc-sub-benefit--wide` already
       gets, so it reads as a deliberate single centred card instead of a
       stray one with a gap beside it. `:has()` targets it by relationship,
       not position, so this keeps working if a merchant adds or removes
       cards and the "odd one out" becomes a different card. Verified at
       390 / 641 / 768 / 820 / 992px (this rule) and 1440px (unaffected,
       outside the media query — three columns plus the centre visual have
       room for all six cards with no orphan). */
    .yc-sub-benefit:not(.yc-sub-benefit--wide):has(+ .yc-sub-benefit--wide) {
      grid-column: 1 / -1;
      justify-self: center;
    }
  }
/* END_BLOCK:_yc-sub-benefit */

/* START_BLOCK:_yc-sub-chip (INDEX:197) */
/* .sub-chip — white pill, 1px #e2e1ee border (--border-solid), 600 weight.
     line-height is pinned to the prototype's --lh-body rather than inherited,
     so the pill keeps its reference height whatever the theme's body
     line-height is. */
  .yc-sub-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
    white-space: nowrap;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
  }

  /* `.sub-chip i` is a Phosphor glyph sized by font-size; yc-icon draws the
     same artwork on the same 256-unit viewBox, so 1em is an exact match (the
     measurement recorded in context.md Batch 65). Colour is --color-purple. */
  .yc-sub-hero__chip-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    font-size: 14px;
    color: #4036d6;
  }

  /* subscription.html 947-952 — laptop widths squeeze the copy column
     hardest, so type and padding come down to keep all four chips on one
     line. Still in force at phone widths (see the doc note above). */
  @media (max-width: 1440px) {
    .yc-sub-hero__chip {
      padding: 8px 10px;
      font-size: 11px;
    }

    .yc-sub-hero__chip-icon {
      font-size: 13px;
    }
  }
/* END_BLOCK:_yc-sub-chip */

/* START_BLOCK:_yc-sub-cta-button (INDEX:198) */
/* .btn — 14px/700, 16/32 padding, pill radius, 1px #e2e1ee border. */
  .yc-sub-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #ffffff;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  /* The reference's only variant here: white fill, indigo label. 7.73:1. */
  .yc-sub-cta__btn--white {
    color: #4036d6;
    background-color: #ffffff;
  }

  .yc-sub-cta__btn--ink {
    color: #ffffff;
    background-color: #2e2e2e;
  }

  .yc-sub-cta__btn--purple {
    color: #ffffff;
    background-color: #4036d6;
  }

  /* Not in the reference, which gives its buttons no focus style at all.
     ⚠ WHITE, not the indigo every other yc-* section uses: these buttons sit on
     the indigo card, where an indigo ring is invisible (1:1). White measures
     7.73:1 against it. A focus ring colour cannot be carried between surfaces
     — the same trap as Batch 69's. */
  .yc-sub-cta__btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
  }

  /* .btn__icon — 18px glyph, matching the reference's <i> box. */
  .yc-sub-cta__btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  /* responsive.css 759 — `.btn { width: 100% }` on phones. Because the actions
     row is a wrapping flex container, "100%" resolves against the row's
     content width, which is what makes the two buttons break onto their own
     lines instead of sharing one. Batch 67 found this the hard way. */
  @media screen and (max-width: 640px) {
    .yc-sub-cta__btn {
      width: 100%;
    }
  }
/* END_BLOCK:_yc-sub-cta-button */

/* START_BLOCK:_yc-sub-hero-button (INDEX:199) */
/* .btn — 14px/700 pill, 16px/32px padding, 1px #e2e1ee border.
     line-height pinned to the prototype's --lh-body, which .btn inherits from
     body, so the button keeps its reference height in this theme. */
  .yc-sub-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #ffffff;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .yc-sub-hero__btn--purple {
    color: #ffffff;
    background-color: #4036d6;
  }

  .yc-sub-hero__btn--white {
    color: #2e2e2e;
    background-color: #ffffff;
  }

  .yc-sub-hero__btn--ink {
    color: #ffffff;
    background-color: #2e2e2e;
  }

  .yc-sub-hero__btn--green {
    color: #2e2e2e;
    background-color: #0fb654;
  }

  .yc-sub-hero__btn--pink {
    color: #2e2e2e;
    background-color: #ff92eb;
  }

  .yc-sub-hero__btn--yellow {
    color: #2e2e2e;
    background-color: #ffc7ac;
  }

  /* style.css:171-179 — the reference site's own keyboard focus ring, which
     already applies to these anchors there: 3px --color-purple, 2px offset.
     Ported explicitly for two reasons.

     1. Horizon's default is `outline: var(--focus-outline-width) solid
        currentcolor` (base.css:237). On the purple CTA `currentcolor` is
        white, and the 0.2em offset puts that white ring on the cream section
        background — 1.11:1, a WCAG 2.2 AA failure (1.4.11 / 2.4.11). The
        purple ring measures 6.64:1 against the same cream and passes.
     2. The reference's rule also sets `border-radius: --radius-xs`, which
        squares a pill off while focused. That is not reproduced here — it is
        the same unintended side effect subscription.html itself works around
        for `.manage__input` (page styles, "restate the pill here"). The
        resting design is untouched either way; this is keyboard-only. */
  .yc-sub-hero__btn:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  /* .btn__icon — 18px glyph. yc-icon draws the same artwork on the same
     256-unit viewBox, so 1em matches the Phosphor box exactly. */
  .yc-sub-hero__btn-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    font-size: 18px;
  }

  /* responsive.css 759-761 — buttons go full width on phones. */
  @media (max-width: 640px) {
    .yc-sub-hero__btn {
      width: 100%;
    }
  }
/* END_BLOCK:_yc-sub-hero-button */

/* START_BLOCK:_yc-sub-manage-item (INDEX:200) */
/* `.manage__list li` — base rule + the creative-pass pill treatment.
     list-style is restated because the prototype zeroes it globally on ul/ol
     and this theme does not. line-height pinned to the prototype's --lh-body
     so the pill keeps its reference height. */
  .yc-sub-manage__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    line-height: 1.55;
    list-style: none;
    color: #2e2e2e;
    background-color: #f0eee3;
    border: 1px solid #2e2e2e;
    border-radius: 999px;
  }

  /* `.manage__list i` — --color-green at --fs-20. yc-icon draws the same
     artwork on the same 256-unit viewBox, so 1em matches the Phosphor box. */
  .yc-sub-manage__item-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    font-size: 20px;
    line-height: 1;
    color: #0fb654;
  }
/* END_BLOCK:_yc-sub-manage-item */

/* START_BLOCK:_yc-sub-quote (INDEX:201) */
/* .testimonial (style.css:4069-4084) with the card-scale overrides from
     `.sub-tm-grid .testimonial` (subscription.html:468-471): the shared card is
     sized for one full-width hero quote, these sit three-up. --shadow-hard is
     `none` at rest, so the card carries no shadow. */
  .yc-sub-quote {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 48px 24px 32px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 32px;
  }

  /* .testimonial__mark — the coin hangs half off the card's top edge. 56px and
     20px here, against the shared card's 72px/34px. */
  .yc-sub-quote__mark {
    position: absolute;
    top: 0;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 20px;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .yc-sub-quote__mark-icon {
    width: 1em;
    height: 1em;
  }

  /* .testimonial__stars + .rating__stars, capped to 18px by
     `.sub-tm-grid .testimonial__stars`. Peach, not the ink the card uses. */
  /* No explicit height, and that was worth checking rather than assuming: the
     reference's stars are Phosphor <i>s, and the temptation is to reserve the
     1.55 line box they would occupy as inline text. They do not — Phosphor's
     own CSS puts `line-height: 1` on `.ph`, so each glyph is a flex item
     exactly 1em tall and the row measures 18px. An inline SVG at 1em measures
     the same, so nothing needs correcting here. Measured, not reasoned: the
     first attempt reserved 27.9px and made the whole section 9.9px too tall. */
  .yc-sub-quote__stars {
    display: inline-flex;
    font-size: 18px;
    color: #ffc7ac;
  }

  .yc-sub-quote__star {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  /* Visually hidden, still announced. */
  .yc-sub-quote__stars-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* .testimonial__quote at card scale — 18px rather than the shared 46px, and
     the 22ch cap lifted. Heading metrics, because it is set like a headline. */
  .yc-sub-quote__text {
    margin: 0;
    max-width: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  /* .testimonial__author — a row on the reference's desktop even though there
     is no avatar to sit beside; it becomes a column at 640. */
  .yc-sub-quote__author {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding-top: 8px;
  }

  .yc-sub-quote__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
  }

  .yc-sub-quote__name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.55;
    color: #2e2e2e;
  }

  .yc-sub-quote__role {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: #6b6b6b;
  }

  /* The featured card, above 600px only — `.sub-tm-grid .testimonial:nth-child(2)`
     lives inside the reference's `@media (min-width: 601px)`.

     ⚠ THE COLOUR IS NOT THE REFERENCE'S. It uses --color-blue (#8b89c8), on
     which white body copy measures 3.23:1 — a WCAG 1.4.3 failure for all three
     texts here (the quote is 18px bold, just under the 18.66px that would make
     it "large"; the name is 17px; the role is smaller still). #7270a4 is the
     same substitution already made on the manage band and the comparison
     table, and takes white to 4.60:1.

     The role's 0.85 opacity is NOT ported for the same reason — it would put
     that line back under the threshold on its own. It is the smallest text on
     the card, so it is the one that can least afford it. */
  @media screen and (min-width: 601px) {
    .yc-sub-quote--featured {
      background-color: var(--yc-sub-quote-featured, #7270a4);
    }

    .yc-sub-quote--featured .yc-sub-quote__text,
    .yc-sub-quote--featured .yc-sub-quote__name,
    .yc-sub-quote--featured .yc-sub-quote__role {
      color: #ffffff;
    }
  }

  /* responsive.css 644 — the author block stacks. The card's own padding is
     NOT the 48/20/32 responsive.css sets on `.testimonial`, because
     `.sub-tm-grid .testimonial` is one class more specific and wins. */
  @media screen and (max-width: 640px) {
    .yc-sub-quote__author {
      flex-direction: column;
      text-align: center;
    }
  }
/* END_BLOCK:_yc-sub-quote */

/* START_BLOCK:_yc-sub-step (INDEX:202) */
/* .sub-step — white card, relative so the numbered coin can straddle its
     top edge. */
  .yc-sub-how__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 38px 20px 24px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #2e2e2e;
    border-radius: 24px;
  }

  /* .sub-step__num — the coin straddling the middle of the top edge, with a
     hard 3px offset shadow. The fill comes from the SATURATED global tints. */
  .yc-sub-how__num {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--yc-step-coin, #ffc7ac);
    border: 1px solid #2e2e2e;
    box-shadow: 3px 3px 0 #2e2e2e;
    color: #2e2e2e;
    font-size: 18px;
    font-weight: 700;
  }

  /* The three saturated brand tints, straight from the prototype's global
     `.tint--*` rules (subscription.html:73-77) — deliberately NOT the
     color-mix pastels the benefits orbit uses. */
  .yc-sub-how__step--sky {
    --yc-step-coin: #78c6ff;
  }

  .yc-sub-how__step--green {
    --yc-step-coin: #0fb654;
  }

  .yc-sub-how__step--peach {
    --yc-step-coin: #ffc7ac;
  }

  .yc-sub-how__step--blue {
    --yc-step-coin: #8b89c8;
  }

  .yc-sub-how__step--pink {
    --yc-step-coin: #ff92eb;
  }

  /* .sub-step__icon — 34px glyph, line-height 1.

     The explicit height is load-bearing and it is measured, not guessed. In the
     reference this wrapper is a blockified flex item containing an inline
     Phosphor <i>, and the <i>'s INLINE CONTENT AREA is 34.4px at a 34px
     font-size — taller than the 34px strut — so the line box grows and the
     wrapper measures 36.4px, not 34px. An inline <svg> produces no such line
     box, so the wrapper collapsed to exactly 34px.

     That 2.4px is not cosmetic: it set the step card's height, which cascaded
     into the steps grid, the body column and the vertical position of every
     element below — 495 measured differences from this one box.

     Written as a flat 36.4px rather than the equivalent 1.070588em: the em form
     evaluates to 36.39999 and Chrome quantises lengths to 1/64px, which left a
     0.012px residue that propagated into every height below it. The font-size
     is a fixed 34px declared in this same rule, so there is no scaling case to
     protect against.

     This is the same class of font-metric dependency as the tag-pill baseline
     in section 2 — but unlike a synthesized baseline, which CSS gives no handle
     on, a height is directly settable. So here it is fixable, and fixed. */
  /* flex-start, not center: the reference's glyph box sits at -0.8px inside
     this wrapper (essentially top-aligned, overflowing very slightly above),
     so top-aligning the SVG lands the drawn artwork within 0.8px of it.
     Centring it in the 36.4px box would put it 1.8px low. Measured both. */
  .yc-sub-how__step-icon {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    height: 36.4px;
    font-size: 34px;
    line-height: 1;
    color: #2e2e2e;
  }

  .yc-sub-how__step-glyph {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  /* .sub-step h4 — sets ONLY margin and font-size, so the line-height stays
     the heading base --lh-heading (1.05). Note this differs from the benefits
     orbit's card title, which overrides it to 1.2. Set explicitly so the
     element can be an h3, h4 or p without the type changing. */
  .yc-sub-how__step-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
  }

  .yc-sub-how__step-text {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #2e2e2e;
    opacity: 0.78;
  }

  /* DELIBERATE DEVIATION — the same accessibility fix as the benefits orbit.
     Step 1's copy links "Sizing Pack sample", and the prototype's global reset
     is `a { color: inherit; text-decoration: none }` with nothing targeting it,
     so that link has no colour AND no underline and cannot be found by sight
     (WCAG 2.2 AA, 1.4.1). Underlined at a 3px offset — the reference's own
     inline-link idiom, from `.manage-band__skip`. Colour stays inherited ink. */
  .yc-sub-how__step-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Not in the reference, which has no focus style here. Keyboard users must
     be able to see the link (WCAG 2.4.7). Ink on the step's white card. */
  .yc-sub-how__step-text a:focus-visible {
    outline: 2px solid #2e2e2e;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* .sub-steps__arrow — a grid item in its own auto column, vertically centred
     against the row. */
  .yc-sub-how__arrow {
    align-self: center;
    width: 74px;
    height: 44px;
    max-width: none;
    color: #2e2e2e;
    opacity: 0.55;
  }

  /* Each step emits a connector, so the trailing one has to go. Hiding it
     removes it from the grid entirely, which is what keeps the track count
     right (see the section's generated grid-template-columns). */
  .yc-sub-how__arrow:last-child {
    display: none;
  }

  /* subscription.html 333 — arrows need horizontal room to read as a curve. */
  @media (max-width: 1100px) {
    .yc-sub-how__arrow {
      display: none;
    }
  }
/* END_BLOCK:_yc-sub-step */

/* START_BLOCK:_yc-trust-badge (INDEX:203) */
/* materials.html `.trust-badge`. */
  .yc-trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 128px;
    text-align: center;
  }

  /* Both axes pinned: Horizon's base.css sets `img { width: 100%; height: auto }`,
     which would otherwise stretch the badge to its 128px column. */
  .yc-trust-badge__image {
    width: 84px;
    height: 84px;
    object-fit: contain;
  }

  .yc-trust-badge__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
    color: #6b6b6b;
  }
/* END_BLOCK:_yc-trust-badge */

/* START_BLOCK:comparison-slider (INDEX:212) */
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);
    color: var(--handle-color, var(--color-foreground));
    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:213) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:214) */
.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:disclosures (INDEX:216) */
.disclosures__container {
      width: 100%;
    }

    .disclosures__container:has(> [shopify-block-empty]) {
      display: none;
    }

    .disclosures {
      --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1));

      display: block;
      color: var(--color, inherit);
      width: 100%;
      container-type: inline-size;
    }

    .disclosures.accordion--dividers accordion-custom:first-child .details {
      border-block-start: var(--style-border-width) solid var(--color-border);
    }

    .disclosures.accordion--dividers accordion-custom:last-child .details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .disclosures__heading {
      margin-block-end: var(--margin-lg);
    }

    .disclosures .details__header {
      padding-block: var(--padding-xl);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .disclosures .details__header > .svg-wrapper {
      margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2);
    }

    .disclosures details[open] .details__header {
      padding-block-end: var(--padding-xs);
    }

    .disclosures__summary-content {
      flex: 1 1 0%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--gap-xs);
      min-width: 0;
    }

    .disclosures__summary-item {
      display: flex;
      flex-direction: column;
      row-gap: var(--gap-xs);
      min-width: 0;
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      width: max-content;
      max-width: none;
      visibility: hidden;
      white-space: nowrap;
      pointer-events: none;
      contain: layout style;
    }

    .disclosures__summary-item-row {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      min-width: 0;
      vertical-align: middle;
    }

    .disclosures__summary-item-title {
      font-weight: var(--font-weight-normal, normal);
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-title {
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .disclosures .details__icon {
      display: inline-block;
      flex-shrink: 0;
      width: auto;
      max-inline-size: 100%;
      height: var(--disclosures-icon-size);
      margin: 0;
      object-fit: contain;
      vertical-align: middle;
    }

    .disclosures__summary-item-row:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title {
      grid-column: 2;
    }

    .disclosures details[open] > summary .disclosures__summary-item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__summary-item-extra {
      display: block;
    }

    .disclosures__separator {
      display: none;
      flex-shrink: 0;
      padding-inline: var(--padding-xs);
      line-height: 1;
    }

    @container (min-width: 701px) {
      .disclosures:where([data-summary-layout='inline']) .details__header {
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper {
        margin-block-start: 0;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item {
        display: block;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row {
        display: inline-flex;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) {
        display: inline-grid;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra {
        display: inline-flex;
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__separator {
        display: inline-block;
      }
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row {
      display: inline-flex;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) {
      display: inline-grid;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-extra {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__separator {
      display: inline-block;
    }

    .disclosures details[open] .disclosures__summary-item-extra {
      display: none;
    }

    .disclosures__item {
      display: flex;
    }

    .disclosures__item + .disclosures__item {
      margin-block-start: var(--spacing-lg);
    }

    .disclosures__item-left {
      flex: 0 1 auto;
      min-width: 0;
      cursor: default;
    }

    .disclosures__item-right {
      flex: 1;
      cursor: pointer;
    }

    .disclosures__item-header {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      margin-block-end: var(--spacing-xs);
      padding-block-end: var(--padding-xs);
    }

    .disclosures__item-title {
      margin: 0;
    }

    .disclosures__item-header:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__item-header:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__item-header:has(> .details__icon) > .disclosures__item-title {
      grid-column: 2;
    }

    .disclosures details[open] .disclosures__item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__item-content {
      max-width: var(--normal-content-width);
      padding-block-end: var(--padding-2xl);
    }

    .disclosures details[open] .details-content {
      padding-block-end: 0;
    }
/* END_BLOCK:disclosures */

/* START_BLOCK:email-signup (INDEX:217) */
.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 {
    color: var(--color, inherit);
    padding-block: var(--padding-sm);
  }

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

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

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

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

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

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

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      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 {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-rgb) / var(--opacity-70));
    cursor: pointer;
  }

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

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

/* START_BLOCK:featured-collection (INDEX:218) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:219) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

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

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

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

    @media screen and (min-width: 750px) {
      padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    }
  }

  .facets--horizontal {
    display: none;

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

  .facets--vertical {
    display: none;

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

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-subdued);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

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

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--theme-drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--theme-drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets--drawer .theme-drawer__title {
    --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;
    }
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

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

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

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

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);

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

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-copyright (INDEX:221) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:222) */
.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:icon (INDEX:225) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

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

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

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

/* START_BLOCK:logo (INDEX:228) */
.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:229) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page-content (INDEX:230) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:231) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:232) */
.payment-icons {
    width: 100%;
  }

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

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:233) */
.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-custom-property (INDEX:236) */
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-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:238) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:239) */
.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:review (INDEX:242) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .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:244) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:245) */
/* 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 0 auto;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:246) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:249) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* START_BLOCK:yc-alt-path (INDEX:250) */
/* `.alt-path` */
  .yc-alt-path {
    position: relative;
    overflow: hidden;
    margin: 0 0 32px;
    padding: 20px 20px 20px 24px;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgb(46 46 46 / 5%);
    line-height: 1.55;
  }

  /* The accent rail down the left edge. */
  .yc-alt-path::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background-color: var(--yc-ap-accent, #4036d6);
  }

  .yc-alt-path__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .yc-alt-path__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    color: var(--yc-ap-accent, #4036d6);
    background-color: var(--yc-ap-icon-bg, #ede9fd);
    border-radius: 50%;
  }

  /* The prototype sizes the Phosphor web-font glyph with font-size: 20px;
     the inline SVG takes the same 20px as a box. */
  .yc-alt-path__icon-svg {
    width: 20px;
    height: 20px;
  }

  .yc-alt-path__copy {
    min-width: 0;
  }

  .yc-alt-path__lead {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #2e2e2e;
  }

  .yc-alt-path__sub {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: #6b6b6b;
  }

  .yc-alt-path__sub strong {
    color: #2e2e2e;
    font-weight: 700;
  }

  /* `.alt-path__sizes` — a <ul> here, so the list bullets and padding the
     theme's base stylesheet applies are reset explicitly. */
  .yc-alt-path__sizes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
  }

  .yc-alt-path__sizes:empty {
    display: none;
  }

  .yc-alt-path__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--yc-ap-accent, #4036d6);
    text-decoration: none;
  }

  .yc-alt-path__link:hover {
    text-decoration: underline;
  }

  .yc-alt-path__arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
  }

  .yc-alt-path__link:hover .yc-alt-path__arrow {
    transform: translateX(3px);
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-alt-path__arrow {
      transition: none;
    }
  }
/* END_BLOCK:yc-alt-path */

/* START_BLOCK:yc-hero-proof (INDEX:251) */
.yc-hero-proof {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .yc-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .yc-rating__stars {
    display: inline-flex;
    gap: 0;
    /* Prototype: rating stars use --color-yellow (retired to peach #FFC7AC). */
    color: #ffc7ac;
  }

  .yc-rating__star {
    width: 18px;
    height: 18px;
  }

  .yc-rating__text {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  }

  .yc-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
/* END_BLOCK:yc-hero-proof */

/* START_BLOCK:yc-product-features (INDEX:252) */
/* .pdp__featurelist — the top rule; each row draws its own bottom rule,
     and the last row drops it (see _yc-product-feature.liquid). */
  .yc-pf-list {
    display: flex;
    flex-direction: column;
    border-block-start: 1px solid #e2e1ee;
  }
/* END_BLOCK:yc-product-features */

/* START_BLOCK:yc-size-waitlist (INDEX:253) */
/* Card: same surface as the PDP size cards / cream quantity card. */
  .yc-waitlist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 16px;
    box-sizing: border-box;
  }

  /* `hidden` must win over the flex display above. */
  .yc-waitlist[hidden] {
    display: none;
  }

  .yc-waitlist__copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .yc-waitlist__heading {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #2e2e2e;
  }

  .yc-waitlist__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #4a4a4a;
  }

  .yc-waitlist__consent {
    font-size: 13px;
    line-height: 1.5;
    color: #4a4a4a;
  }

  .yc-waitlist__consent p {
    margin: 0;
  }

  .yc-waitlist__consent a {
    color: #2e2e2e;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Klaviyo renders its form with inline styles, so the few hard accessibility
     requirements are enforced here with !important: 16px inputs (no iOS zoom),
     44px targets, a visible focus ring with 3:1 contrast. Everything else — label,
     colours, copy — is set in the Klaviyo form builder. */
  .yc-waitlist__form input[type='email'],
  .yc-waitlist__form input[type='text'] {
    font-size: 16px !important;
    min-height: 44px !important;
    box-sizing: border-box;
    /* Klaviyo's default border (#949596) is 2.9:1 on white; #6b6b6b is 5.3:1 (WCAG 1.4.11 ≥ 3:1). */
    border-color: #6b6b6b !important;
  }

  .yc-waitlist__form button {
    min-height: 44px !important;
    min-width: 44px !important;
    font-size: 16px !important;
    cursor: pointer;
  }

  .yc-waitlist__form :is(input, button):focus-visible {
    outline: 3px solid #4036d6 !important;
    outline-offset: 2px !important;
  }

  /* Reflow: nothing inside may force a horizontal scroll at 320px. */
  .yc-waitlist__form,
  .yc-waitlist__form * {
    max-width: 100%;
  }

  @media screen and (max-width: 640px) {
    .yc-waitlist {
      padding: 16px;
    }

    .yc-waitlist__heading {
      font-size: 20px;
    }
  }
/* END_BLOCK:yc-size-waitlist */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:254) */
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);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &: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;
          }
        }
      }
    }
  }

  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:accordion-styles (INDEX:255) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:accordion-styles */

/* START_SNIPPET:add-to-cart-button-styles (INDEX:256) */
/* Add to cart button */
  .button[id^='BuyButtons-ProductSubmitButton-'] {
    position: relative;
    overflow: hidden;
  }

  .add-to-cart-button {
    --text-speed: 0.26;
    --base-delay: calc(var(--text-speed) * 0.25);
    --tick-speed: 0.1;
    --ring-speed: 0.2;
    --check-speed: 0.2;
    --burst-speed: 0.32;
    --step-delay: 3;
    --speed: 1;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    user-select: none;
    transition-property: color, box-shadow, background-color, scale, translate;
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--ease-out-cubic);

    &:active {
      scale: 0.99;
      translate: 0 1px;
    }
  }

  .add-to-cart-button .svg-wrapper .checkmark-burst {
    width: 30px;
    height: 30px;
  }

  .add-to-cart-text {
    --atc-opacity: 0;
    --atc-destination: -1em;

    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .add-to-cart__added {
    --atc-opacity: 1;
    --atc-destination: 0px;

    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }

  .add-to-cart__added-icon {
    width: 32px;
    height: 32px;
  }

  [data-added='true'] .add-to-cart-text,
  [data-added='true'] .add-to-cart__added {
    animation-name: atc-slide;
  }

  .checkmark-burst {
    opacity: 0;
    overflow: visible;

    .burst {
      rotate: 20deg;
    }

    .check {
      opacity: 0.2;
      scale: 0.8;
      filter: blur(2px);
      transform: translateZ(0);
    }

    :is(.ring, .line, .check, .burst, .tick) {
      transform-box: fill-box;
      transform-origin: center;
    }

    :is(.line) {
      stroke-dasharray: 1.5 1.5;
      stroke-dashoffset: -1.5;
      translate: 0 -180%;
    }

    g {
      transform-origin: center;
      rotate: calc(var(--index) * (360 / 8) * 1deg);
    }
  }

  .add-to-cart-button[data-added='true'] .checkmark-burst {
    opacity: 1;
  }

  .add-to-cart-button[data-added='true'] {
    color: transparent;

    .check {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }

    .tick {
      scale: 1.75;
    }

    .ring {
      opacity: 0;
      scale: 1;
    }

    .line {
      stroke-dashoffset: 1.5;
    }

    .add-to-cart__added {
      color: var(--button-color);
    }

    .add-to-cart-text {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: circle(0% at 50% 50%);
      filter: blur(2px);
      opacity: 0;
      translate: 0 4px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .add-to-cart-button[data-added='true'] {
      .check {
        transition-property: opacity, scale, filter;
        transition-duration: calc(calc(var(--check-speed) * 1s));
        transition-delay: calc((var(--base-delay) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .tick {
        transition-property: scale;
        transition-duration: calc((calc(var(--tick-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
        transition-timing-function: ease-out;
      }

      .ring {
        transition-property: opacity, scale;
        transition-duration: calc((calc(var(--ring-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .line {
        transition-property: stroke-dashoffset;
        transition-duration: calc((calc(var(--burst-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-cubic);
      }
    }

    .add-to-cart-text {
      transition-property: clip-path, opacity, filter, translate;
      transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
      transition-timing-function: ease-out;
    }
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(100% at 50% 50%);
  }

  @keyframes atc-slide {
    to {
      opacity: var(--atc-opacity, 1);
      translate: 0px var(--atc-destination, 0px);
    }
  }
/* END_SNIPPET:add-to-cart-button-styles */

/* START_SNIPPET:background-media (INDEX:258) */
.background-image-container {
    overflow: hidden;
    position: absolute;
    inset: 0;
    opacity: var(--image-opacity);
  }

  .background-image-container img,
  .background-image-container svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .background-image-fit img,
  .background-image-fit svg {
    object-fit: contain;
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:259) */
.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:260) */
.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:buy-buttons-styles (INDEX:265) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

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

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .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-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .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%;
    color: var(--color, var(--color-foreground));
  }

  .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);
    padding-inline: var(--theme-drawer-padding);
    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__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, var(--color-foreground));
    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: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

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

  .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:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:266) */
.card-gallery {
    position: relative;
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  @container (max-width: 70px) {
    .card-gallery:hover .quick-add__button {
      display: none;
    }
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @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:card-hover-effect-styles (INDEX:267) */
.product-card:hover,
  .collection-card:hover,
  .predictive-search-results__card:hover {
    z-index: var(--layer-raised);
  }
/* END_SNIPPET:card-hover-effect-styles */

/* START_SNIPPET:cart-bubble (INDEX:268) */
.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(--cart-bubble-text, var(--cart-bubble-text-fallback));
    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(--cart-bubble-background, var(--cart-bubble-background-fallback));
    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-disclosure-tooltip (INDEX:269) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer (INDEX:270) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  /* ============================================================
     YC: cart drawer design — match the prototype (index.html .cart-drawer +
     style.css). Scoped to #cart-drawer so the cart page and other drawers are
     unaffected. Tokens resolved to literals per the yc-* convention:
       ink #2e2e2e · muted #6b6b6b · purple #4036d6 · green #0FB654
       cream #f0eee3 · yellow #ffc7ac · border #e2e1ee · white #fff · pink #ff92eb
     ============================================================ */

  /* Panel — prototype max-width 440px, hairline left border */
  #cart-drawer .theme-drawer__dialog {
    --theme-drawer-width: 440px;
    border-left: 1px solid #e2e1ee;
  }

  /* Dim overlay so the drawer clearly overlaps the page (prototype .overlay:
     rgba(46,46,46,0.55)). The drawer opens NON-modal, so no native ::backdrop
     renders — this element provides the dim. It sits just below the panel,
     fades in/out with the open/close, and closes the drawer on click. The
     ::backdrop rule is kept in case the drawer is ever opened modally. */
  #cart-drawer .theme-drawer__dialog::backdrop {
    background: rgba(46, 46, 46, 0.55);
  }

  /* Lock the page scroll while the drawer is open so the page can't scroll
     behind it (the page scrolls in .page-wrapper; the drawer is non-modal so it
     doesn't lock natively). This is what makes it overlap like the menu drawer
     — no background scrollbar, no scroll-through. */
  body:has(#cart-drawer .theme-drawer__dialog[open]) .page-wrapper {
    /* overflow: hidden; */
    /* Reserve the scrollbar's space while locked so removing it doesn't shift
       the page — a true overlap with no resize/jump when the drawer opens. */
    /* scrollbar-gutter: stable; */
  }

  /* Hide the floating "Sizing Pack sample" side tab while the drawer is open,
     so it doesn't peek over the panel's right edge (prototype has no tab over
     the drawer). The tab returns when the drawer closes. */
  body:has(#cart-drawer .theme-drawer__dialog[open]) .yc-sample-tab {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  /* Hide the subscription purchase-agreement / installments text in the drawer
     (Shopify's <shopify-payment-terms>, rendered via the form's payment_terms filter).
     The prototype's drawer doesn't show it; the subscription terms are still
     presented and agreed to at checkout. Scoped to the drawer only. */
  #cart-drawer .cart-totals__installments,
  #cart-drawer shopify-payment-terms {
    display: none;
  }

  /* Hide the accelerated/express checkout buttons (Shop Pay, Google Pay) in the
     drawer — the prototype shows only the single Checkout button. Scoped to the
     drawer, so the cart page keeps them. */
  #cart-drawer .additional-checkout-buttons {
    display: none;
  }

  /* Raise the drawer above the sticky header (which sits at
     --layer-menu-drawer = 18). Otherwise the header renders over the drawer.
     The backdrop sits just under the panel but still above the header, so the
     header is dimmed too. */
  #cart-drawer .theme-drawer__dialog {
    z-index: calc(var(--layer-menu-drawer) + 2 + var(--drawer-stack-order, 0));
  }

  #cart-drawer .yc-cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--layer-menu-drawer) + 1 + var(--drawer-stack-order, 0));
    background: rgba(46, 46, 46, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* delay the visibility change so the dim stays through the fade-out */
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  }

  #cart-drawer:has(.theme-drawer__dialog[open]) .yc-cart-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.28s ease;
  }

  /* Fade the dim out in step with the drawer's slide-out */
  #cart-drawer:has(.theme-drawer__dialog--closing) .yc-cart-backdrop {
    opacity: 0;
  }

  /* --- Header (.cart-drawer__head) --- */
  #cart-drawer .theme-drawer__header {
    padding: 24px;
    border-bottom: 1px solid #2e2e2e;
  }

  #cart-drawer .theme-drawer__title {
    align-items: baseline;
    gap: 8px;
    font-weight: 700;
    color: #2e2e2e;
  }

  /* "(N)" as plain muted text beside the title, not a chip */
  #cart-drawer .theme-drawer__badge {
    min-width: 0;
    height: auto;
    padding: 0;
    background: none;
    border-radius: 0;
    color: #6b6b6b;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9em;
  }

  /* Close button — 40px circle, ink border, hover yellow */
  #cart-drawer .theme-drawer__close-button {
    --private-button-size: 40px;

    width: 40px;
    height: 40px;
    border: 1px solid #2e2e2e;
    border-radius: 50%;
    background-color: #fff;
    color: #2e2e2e;
    box-shadow: none;
  }

  #cart-drawer .theme-drawer__close-button:hover:not(:active) {
    background-color: #ffc7ac;
  }

  /* --- 45-Day Promise banner (.cart-drawer__free) --- */
  #cart-drawer .yc-cart-promise {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: #0fb654;
    color: #2e2e2e;
    font-size: 13px;
    font-weight: 600;
  }

  #cart-drawer .yc-cart-promise strong {
    font-weight: 700;
  }

  #cart-drawer .yc-cart-promise__icon {
    display: inline-flex;
  }

  #cart-drawer .yc-cart-promise__icon svg {
    width: 18px;
    height: 18px;
  }

  /* Gift confirmation banner sits between the promise bar and the items list.
     The promise bar is edge-to-edge; this one is inset to match .cart-drawer__items. */
  #cart-drawer .gift-confirmation {
    margin-block-start: 16px;
    margin-inline: 24px;
  }

  /* --- Items list (.cart-drawer__body / .cart-item) --- */
  #cart-drawer .cart-drawer__items {
    padding: 24px;
    gap: 20px;
  }

  #cart-drawer .cart-items {
    --cart-items-gap: 20px;
  }

  /* Row layout: media | (name / variant / qty+price); trash lifted top-right */
  #cart-drawer .cart-items__table-row {
    position: relative;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      'media details  details'
      'media variants variants'
      'media quantity price';
    column-gap: 16px;
    row-gap: 12px;
    align-items: start;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0eee3;
  }

  #cart-drawer .cart-items__table-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* Media box — 88px, cream, bordered, rounded, contained */
  #cart-drawer .cart-items__media {
    grid-area: media;
  }

  #cart-drawer .cart-items__media-container {
    width: 88px;
    height: 88px;
    /* stylelint-disable-next-line declaration-no-important */
    aspect-ratio: 1 !important;
    padding: 8px;
    background-color: #f0eee3;
    border: 1px solid #2e2e2e;
    border-radius: 16px;
    overflow: hidden;
  }

  #cart-drawer .cart-items__media-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Neutralise the per-image inline border; the box carries the border */
    /* stylelint-disable-next-line declaration-no-important */
    border: none !important;
  }

  /* Name */
  #cart-drawer .cart-items__product-info {
    grid-area: details;
  }

  #cart-drawer .cart-items__title {
    font-size: 15px;
    font-weight: 700;
    color: #2e2e2e;
  }

  /* Variant / plan line(s) */
  #cart-drawer .cart-items__variants-wrapper {
    grid-area: variants;
  }

  #cart-drawer .cart-items__variants-wrapper,
  #cart-drawer .cart-items__variants-wrapper * {
    font-size: 12px;
    font-weight: 500;
    color: #6b6b6b;
  }

  /* The prototype item has no separate unit-price line */
  #cart-drawer .cart-items__unit-price-wrapper {
    display: none;
  }

  /* Trash — lifted out of the quantity cell to the row's top-right */
  #cart-drawer .cart-items__remove {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    color: #6b6b6b;
  }

  #cart-drawer .cart-items__remove:hover {
    color: #ff92eb;
  }

  #cart-drawer .cart-items__remove svg {
    width: 18px;
    height: 18px;
  }

  /* Quantity pill (bottom-left) */
  #cart-drawer .cart-items__quantity {
    grid-area: quantity;
    margin: 0;
    justify-self: start;
    align-self: center;
  }

  #cart-drawer .cart-items__quantity .quantity-selector {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    padding: 4px 8px;
    border: 1px solid #2e2e2e;
    border-radius: 999px;
    background: transparent;
  }

  #cart-drawer .cart-items__quantity .quantity-selector button {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #f0eee3;
    color: #2e2e2e;
    box-shadow: none;
  }

  #cart-drawer .cart-items__quantity .quantity-selector button:hover {
    background-color: #ffc7ac;
  }

  #cart-drawer .cart-items__quantity .quantity-selector button svg {
    width: 12px;
    height: 12px;
  }

  #cart-drawer .cart-items__quantity .quantity-selector input {
    min-width: 20px;
    width: 24px;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: #2e2e2e;
  }

  /* Price (bottom-right) — purple bold */
  #cart-drawer .cart-items__price {
    grid-area: price;
    align-self: center;
    justify-self: end;
    min-width: 0;
    text-align: end;
    font-size: 16px;
    font-weight: 700;
    color: #4036d6;
  }

  /* --- Summary / footer (.cart-drawer__foot) --- */
  #cart-drawer .cart-drawer__summary {
    gap: 12px;
    padding: 24px;
    border-top: 1px solid #2e2e2e;
    background-color: #f0eee3;
    /* stylelint-disable-next-line declaration-no-important */
    mask-image: none;
  }

  /* Drop Horizon's own summary top border/padding — the footer owns the chrome */
  #cart-drawer .cart-drawer__summary .cart-totals {
    gap: 12px;
    /* stylelint-disable declaration-no-important */
    border-block-start: none !important;
    padding-block-start: 0 !important;
    /* stylelint-enable declaration-no-important */
  }

  #cart-drawer .yc-cart-subtotal {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    color: #2e2e2e;
  }

  /* Prototype line item shows no per-unit ("$X each") line */
  #cart-drawer .cart-items__price-unit {
    display: none;
  }

  /* Estimated total */
  #cart-drawer .cart-totals__total {
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #e2e1ee;
  }

  #cart-drawer .cart-totals__total-label,
  #cart-drawer .cart-totals__total-value {
    font-size: 18px;
    font-weight: 700;
    color: #2e2e2e;
  }

  /* Taxes/shipping note */
  #cart-drawer .cart-totals__tax-note,
  #cart-drawer .cart-totals__tax-note * {
    font-size: 12px;
    color: #6b6b6b;
  }

  /* Checkout — purple pill with a trailing arrow */
  #cart-drawer .cart__checkout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: auto;
    padding: 16px 32px;
    background-color: #4036d6;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
  }

  #cart-drawer .cart__checkout-button::after {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* Reassurance row (.cart-drawer__secure) */
  #cart-drawer .yc-cart-secure {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 4px;
  }

  #cart-drawer .yc-cart-secure span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #6b6b6b;
  }

  #cart-drawer .yc-cart-secure svg {
    width: 16px;
    height: 16px;
    color: #0fb654;
  }

  /* Continue shopping (.cart-drawer__continue) */
  #cart-drawer .yc-cart-continue {
    align-self: center;
    padding: 4px 0 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    color: #2e2e2e;
  }

  #cart-drawer .yc-cart-continue:hover {
    color: #4036d6;
  }

  /* ============================================================
     YC: cart drawer open/close animation — match the old prototype
     (verceldesign-youthcrews .cart-drawer): a GPU-composited
     `transform: translateX()` slide instead of animating the `right`
     offset. The panel is a modal <dialog> opened with showModal(), so it
     already overlaps the page in the top layer — it never pushes or resizes
     the page — and keeps the theme-drawer z-index. Scoped to #cart-drawer so
     every other theme-drawer keeps Horizon's default animation.
     theme-drawer.js toggles --opening/--closing and waits for animationend,
     so these remain keyframe animations (not transitions) to preserve that
     open/close timing. Only the animation changes; markup, content, styling
     and behaviour are untouched.
     ============================================================ */
  #cart-drawer .theme-drawer__dialog {
    right: 0;
    transform: translateX(100%);
  }

  #cart-drawer .theme-drawer__dialog[open] {
    right: 0;
    transform: translateX(0);
  }

  /* Duration + easing match the old prototype exactly: `transform 0.28s ease`.
     Horizon's --animation-speed (0.125s) was too fast to read as a slide. */
  #cart-drawer .theme-drawer__dialog--opening {
    animation: cart-drawer-slide-in 0.28s ease;
  }

  #cart-drawer .theme-drawer__dialog--closing {
    animation: cart-drawer-slide-out 0.28s ease forwards;
  }

  #cart-drawer .theme-drawer__dialog-instant {
    animation: none;
  }

  /* Accessibility: keep the slide near-instant for reduced-motion users
     (animationend still fires, so theme-drawer.js open/close timing holds). */
  @media (prefers-reduced-motion: reduce) {
    #cart-drawer .theme-drawer__dialog--opening,
    #cart-drawer .theme-drawer__dialog--closing {
      animation-duration: 0.01ms;
    }
  }

  @keyframes cart-drawer-slide-in {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes cart-drawer-slide-out {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(100%);
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:271) */
.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),
    html:active-view-transition-type(fill-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:272) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-items__wrapper--drawer-empty {
    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-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .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.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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 > * + *,
  .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-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .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);
    margin-inline: auto;
    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-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__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-button-block-size: var(--height-buy-buttons);
    --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:273) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .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-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 rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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);
  }

  /* iOS zooms into any input under 16px on focus; touch devices only. */
  @media (pointer: coarse) {
    .cart-discount__input {
      font-size: 16px;
    }
  }

  .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-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%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:cart-typography-styles (INDEX:274) */
.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);
  }
/* END_SNIPPET:cart-typography-styles */

/* START_SNIPPET:chat-drawer (INDEX:275) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:checkbox-styles (INDEX:276) */
.checkbox {
    --checkbox-path-opacity: 0;
    --checkbox-cursor: pointer;

    position: relative;
    display: flex;
    align-items: center;

    &.checkbox--disabled {
      --checkbox-cursor: not-allowed;
    }
  }

  .checkbox:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  .checkbox__input {
    position: absolute;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;

    /* Outline is on the SVG instead, to allow it to have border-radius */
    &:focus-visible {
      outline: none;
    }
  }

  .checkbox__label {
    position: relative;
    display: inline-flex;
    cursor: var(--checkbox-cursor);
    line-height: var(--checkbox-size);
    min-width: var(--minimum-touch-target);
  }

  .checkbox .icon-checkmark {
    height: var(--checkbox-size);
    width: var(--checkbox-size);
    flex-shrink: 0;
    border: var(--checkbox-border);
    border-radius: var(--checkbox-border-radius);
    background-color: var(--color-background);
  }

  .checkbox__input:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  .checkbox__input:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }

  .checkbox__label-text {
    padding-inline-start: var(--checkbox-label-padding);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .checkbox .icon-checkmark path {
    stroke: var(--color-background);
    opacity: var(--checkbox-path-opacity);
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .checkbox__input:disabled + .checkbox__label {
    color: var(--input-disabled-text-color);
  }
/* END_SNIPPET:checkbox-styles */

/* START_SNIPPET:collection-card (INDEX:278) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
    height: 100%;
    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__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    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 {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--gap);
  }

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

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }

    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:collection-wrapper-styles (INDEX:279) */
/* ------------------------------------------------------------------------------ */

  /* Collection Wrapper - Shared layout CSS for collection and search pages */

  /* ------------------------------------------------------------------------------ */

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;

      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  /* Make product media go edge-to-edge by using negative margins */
  :is(.collection-wrapper--full-width) .card-gallery,
  :is(.collection-wrapper--full-width-on-mobile) .card-gallery {
    @media screen and (max-width: 749px) {
      margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
      margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
    }
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }

  .collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }
/* END_SNIPPET:collection-wrapper-styles */

/* START_SNIPPET:deferred-media-product-model-styles (INDEX:284) */
.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;
      }
    }
  }

  .product-media product-model {
    position: absolute;
  }

  .product-media-container--model {
    /* Usefull when view in your space is shown */
    flex-direction: column;
  }

  .shopify-model-viewer-ui__controls-area {
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  /* If the product media is already providing an image cover, hide images provided by sibling product-model */
  .product-media__image ~ product-model .deferred-media__poster-image {
    display: none;
  }

  /* If the product model is playing, hide the preview image */
  .product-media-container:has(product-model .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  product-model {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  product-model model-viewer,
  product-model > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  product-model > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  product-model > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .button-shopify-xr {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-md);
  }

  .button-shopify-xr > svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-inline-end: var(--margin-md);
  }

  .button-shopify-xr[data-shopify-xr-hidden] {
    display: none;
  }

  product-model .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  product-model .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:deferred-media-product-model-styles */

/* START_SNIPPET:deferred-media-video-styles (INDEX:285) */
.product-media deferred-media {
    position: absolute;
  }

  /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
  .product-media__image ~ deferred-media .deferred-media__poster-image {
    display: none;
  }

  /* If the product media video is playing, hide the preview image */
  .product-media-container:has(deferred-media .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  deferred-media {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;

    /* The overflow hidden in the deferred-media won't let the button show the focus ring */
    &:has(:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    @supports not selector(:focus-visible) {
      &:has(:focus) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: var(--focus-outline-offset);
      }
    }
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  deferred-media > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  deferred-media.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  deferred-media > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  deferred-media > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  deferred-media img {
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
  }

  deferred-media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  deferred-media[data-media-loaded] img {
    opacity: 0;
  }

  deferred-media .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  deferred-media .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }

  deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    /* only apply this on the video block not product media */
    object-fit: cover;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  .video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:deferred-media-video-styles */

/* START_SNIPPET:dialog-styles (INDEX:286) */
.dialog-modal {
    border: none;
    box-shadow: var(--shadow-popover);

    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      max-width: var(--normal-content-width);
    }

    @media screen and (max-width: 749px) {
      max-width: 100%;
      max-height: 100%;
      height: 100dvh;
      width: 100dvw;
      padding: var(--padding-md);
    }
  }

  .dialog-modal::backdrop {
    transition: backdrop-filter var(--animation-speed) var(--animation-easing);
    backdrop-filter: brightness(1);
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  :where(.dialog-modal)[open] {
    animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
      transition: opacity var(--animation-speed) var(--animation-easing);
    }
  }

  :where(.dialog-modal).dialog-closing {
    animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      opacity: 0;
    }
  }

  /* stylelint-disable value-keyword-case */
  .dialog-drawer {
    --dialog-drawer-opening-animation: move-and-fade;
    --dialog-drawer-closing-animation: move-and-fade;
  }
  /* stylelint-enable value-keyword-case */

  .dialog-drawer[open] {
    --start-x: var(--custom-transform-from, 100%);
    --end-x: var(--custom-transform-to, 0px);
    --start-opacity: 1;

    animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
  }

  .dialog-drawer[open].dialog-closing {
    --start-x: 0px;
    --end-x: 100%;
    --start-opacity: 1;
    --end-opacity: 1;

    animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:dialog-styles */

/* START_SNIPPET:divider (INDEX:287) */
.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:288) */
.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:289) */
.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:290) */
.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%;
    }

    /* Single-media cards skip the slideshow wrappers, so stretch the plain
     * media container directly to fill the editorial cell. The multi-media
     * container sits under slideshow-component and is unaffected. */
    .card-gallery > a > .product-media-container {
      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:291) */
/* 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:fly-to-cart-styles (INDEX:292) */
/* Fly to cart animation */
  fly-to-cart {
    --offset-y: 10px;

    position: fixed;
    width: var(--width, 40px);
    height: var(--height, 40px);
    left: 0;
    top: 0;
    z-index: calc(infinity);
    pointer-events: none;
    border-radius: var(--style-border-radius-buttons-primary);
    overflow: hidden;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    opacity: 0;
    background-color: var(--color-foreground);
    translate: var(--start-x, 0) var(--start-y, 0);
    transform: translate(-50%, -50%);
    animation-name: travel-x, travel-y, travel-scale;
    animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
    animation-duration: 0.6s;
    animation-composition: accumulate;
    animation-fill-mode: both;
  }

  fly-to-cart.fly-to-cart--main {
    --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
    --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
    --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
  }

  fly-to-cart.fly-to-cart--quick {
    --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
    --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);

    animation-duration: 0.6s;
  }

  fly-to-cart.fly-to-cart--sticky {
    --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
    --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
    --radius: var(--style-border-radius-buttons-primary);

    @media screen and (max-width: 749px) {
      --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
    }

    animation-duration: 0.8s;
  }

  @keyframes travel-scale {
    0% {
      opacity: var(--start-opacity, 1);
    }

    5% {
      opacity: 1;
    }

    100% {
      border-radius: 50%;
      opacity: 1;
      transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
    }
  }

  @keyframes travel-x {
    to {
      translate: var(--travel-x, 0) 0;
    }
  }

  @keyframes travel-y {
    to {
      translate: 0 var(--travel-y, 0);
    }
  }
/* END_SNIPPET:fly-to-cart-styles */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:297) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    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;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:gift-confirmation-banner (INDEX:299) */
.gift-confirmation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--margin-2xs);
    padding-block: var(--padding-xs);
    padding-inline: var(--padding-sm);
    border-radius: var(--style-border-radius-buttons-secondary);
    background-color: rgb(from var(--color-success) r g b / 0.1);
    color: var(--color-success);
    font-size: var(--font-size--sm);
    /* 600 matches the sibling .yc-cart-promise banner in the drawer */
    font-weight: 600;
    line-height: var(--font-paragraph--line-height);
    text-align: center;
  }

  /* The hidden attribute loses to the flex display above without this */
  .gift-confirmation[hidden] {
    display: none;
  }

  .gift-confirmation__icon {
    flex: none;
  }
/* END_SNIPPET:gift-confirmation-banner */

/* START_SNIPPET:grid-density-controls (INDEX:300) */
.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-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-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:301) */
.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:302) */
/* YC: match the prototype header — semibold nav + action labels, and size the
     inline-SVG (yc-icon) account glyph the way the old fixed-size svg was. */
  .menu-list__link {
    font-weight: 600;
  }

  .header-actions {
    font-weight: 600;
  }

  .account-button__icon {
    width: 20px;
    height: 20px;
  }

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

  /* YC: keep the account icon + label inline with a consistent gap (icon-only on mobile). */
  .account-button__signed-out {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .account-button__icon-wrap {
    display: inline-flex;
    align-items: center;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  /* ============================================================
     YC: referral pill in the header — matches the prototype .referral-btn
     (pink pill, ink text, uppercase gift CTA). Fixed colors so it stays the
     pink pill in every header state (transparent over the hero + solid),
     exactly like the reference. Desktop-only: the tight mobile header is
     logo + actions + hamburger.
     ============================================================ */
  .header-actions__referral {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    color: #2e2e2e;
    background-color: #ff92eb;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .header-actions__referral:hover {
    color: #2e2e2e;
    transform: translateY(-2px);
  }

  .header-actions__referral-icon {
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
  }

  /* id-scoped so it beats Horizon's base .header-actions__action svg sizing */
  #header-component .header-actions__referral-icon svg {
    width: 16px;
    height: 16px;
  }

  /* Scoped to the actions cluster so only the desktop pill drops out below the
     hamburger breakpoint — the drawer renders the same button and must stay. */
  @media screen and (max-width: 989px) {
    header-actions .header-actions__referral {
      display: none;
    }
  }

  header-actions {
    display: flex;
    /* YC: centre the actions so the referral pill keeps its natural height
       instead of stretching to the full cluster height (Horizon leaves
       align-items at stretch). Matches the prototype .header__actions. */
    align-items: center;
    gap: 16px;

    @media screen and (max-width: 989px) {
      justify-self: flex-end;
      /* YC: client wants the mobile header icons tight together — no gap. */
      gap: 0;
    }
  }

  @media screen and (min-width: 990px) {
    /* YC: match the prototype .header__actions gap (16px) between Log in + Cart
       (Horizon's --gap-xl is 20px). Icon->label gap stays --gap-xs = 8px, which
       already matches the prototype .icon-btn gap. */
    .header-actions--text {
      gap: 16px;
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 990px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }

    /* YC: count sits inline in text mode on desktop, so drop the donut mask
       that notches the icon for an overlapping bubble. */
    .header-actions__cart-icon--text.header-actions__cart-icon--has-cart svg {
      mask: none;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  /*.header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }*/

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 990px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }

  /* ============================================================
     YC: mobile menu drawer — match the prototype (.nav drawer):
     right-side slide-in (right→left open, left→right close), 320px,
     64/24/24 padding, soft left shadow, 16/600 links with cream hover.
     Scoped with .header-drawer for specificity so open/close stays correct;
     desktop is untouched (drawer is mobile-only).
     ============================================================ */
  .header-drawer .menu-drawer {
    left: auto;
    right: 0;
    width: min(82vw, 320px);
    max-width: none;
    gap: 8px;
    padding: 64px 24px 24px;
    border-right: none;
    box-shadow: -14px 0 40px rgba(46, 46, 46, 0.18);
    /* Closed: parked off-screen to the RIGHT */
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.32s ease, opacity 0.32s ease;
  }

  @media screen and (min-width: 750px) {
    /* Neutralize Horizon's 25rem desktop width (drawer only shows < 750) */
    .header-drawer .menu-drawer {
      width: min(82vw, 320px);
    }
  }

  /* Open: slide in from the right → left */
  .header-drawer .menu-open > .menu-drawer {
    transform: translateX(0);
  }

  /* Backdrop — prototype dim (was Horizon's brightness filter) */
  .header-drawer .menu-drawer__backdrop {
    backdrop-filter: none;
    background-color: rgba(46, 46, 46, 0.45);
  }

  /* Menu links — prototype .nav__link (16/600, pill hover in cream) */
  .header-drawer .menu-drawer__menu {
    gap: 2px;
    padding: 0px;
  }

  .header-drawer .menu-drawer__menu-item--mainlist {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;
    color: #2e2e2e;
    padding: 12px;
    border-bottom: none;
    border-radius: 16px;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  @media (hover: hover) {
    .header-drawer .menu-drawer__menu-item--mainlist:hover {
      background-color: #f0eee3;
      color: #2e2e2e;
    }
  }

  /* Active / current-page link — cream pill + purple text (prototype drawer
     active state). Mobile drawer only. */
  .header-drawer .menu-drawer__menu-item--mainlist[aria-current='page'] {
    background-color: #f0eee3;
    color: #4036d6;
  }

  /* Close button — circular, top-right (prototype .nav__close). Horizon's
     .close-button forces border-radius:0, so !important is needed to round it. */
  .header-drawer .menu-drawer__close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50% !important;
    background-color: #f0eee3;
    color: #2e2e2e;
  }

  /* YC: the header's "Get $25 Off" referral CTA mirrored into the drawer — the
     desktop pill is hidden with the actions cluster ≤989px, so mobile had no
     way into /pages/refer. Same snippet, same pink pill, stretched full-width
     so it reads as the drawer's primary action and clears the touch target. */
  .header-drawer .menu-drawer__referral {
    margin-block-start: 16px;
  }

  .header-drawer .header-actions__referral--drawer {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: var(--minimum-touch-target);
    padding: 14px 16px;
  }

  /* "MENU" label above the drawer links (prototype .nav__heading) */
  .header-drawer .menu-drawer__navigation::before {
    content: 'Menu';
    display: block;
    padding: 0 0 16px 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b6b6b;
  }

  /* YC: hamburger drawer now engages up to 989px — keep the header actions
     icon-only across that whole range (Horizon's mobile:hidden only hides
     ≤749px). Labels return at ≥990 with the desktop menu. */
  @media screen and (max-width: 989px) {
    header-actions .mobile\:hidden {
      display: none !important;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:303) */
.icon-caret--forward svg {
    transform: rotate(-90deg);
  }

  .icon-caret--backward svg {
    transform: rotate(90deg);
  }

  .header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

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

  /* Submenu header with a centered, clickable title flanked by the back and
     close controls. */
  .menu-drawer__nav-buttons--with-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .menu-drawer__title {
    justify-self: center;
    min-width: 0;
    padding: var(--padding-md) var(--padding-sm);
    color: var(--color-foreground);
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-3xs);
  }

  .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__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

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

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--margin-3xs);
  }
  .menu-drawer__close-button .svg-wrapper{
    width: var(--icon-size-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;
  }

  /* Match the menu links' focus style: a rectangular outline in the current color.
     These buttons sit flush against the drawer edges, so inset the outline to keep
     it from being clipped. */
  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    border-radius: 0;
    outline-offset: calc(var(--padding-2xs) * -1);
  }

  /* Safari < 16.4 draws the close focus ring via a pseudo-element; keep it
     rectangular there too. */
  .menu-drawer__close-button:focus-visible::after {
    border-radius: 0;
  }

  .menu-drawer__nav-buttons--with-title .menu-drawer__back-button {
    width: fit-content;
    padding: var(--padding-lg);
    justify-self: start;
  }

  .menu-drawer__nav-buttons--with-title .menu-drawer__close-button {
    justify-self: end;
  }

  .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-lg);
    height: var(--icon-size-lg);
  }

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

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

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

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

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

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

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:312) */
.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:lazy-video (INDEX:314) */
/* Keeps the <video> the direct layout child of the caller's container, so the
     caller's sizing and object-fit rules resolve as they did for a bare tag. */
  .lazy-video {
    display: contents;
  }
/* END_SNIPPET:lazy-video */

/* START_SNIPPET:list-filter (INDEX:316) */
.facets__bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--variant-picker-swatch-height) / 1.5);
    min-width: 20px;
    padding: 0 6px;
    border-radius: 20px;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .facets__bubble svg {
    width: 12px;
    height: 12px;
  }

  .show-more__button {
    color: var(--color-foreground);
    cursor: pointer;
  }

  .show-more__button:hover {
    @media screen and (min-width: 750px) {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
    }
  }

  .show-more__label {
    text-align: start;
    font-size: var(--font-size--body-md);
    font-family: var(--font-paragraph--family);
  }

  .show-more__button .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .show-more[data-expanded='true'] .show-more__label--more,
  .show-more[data-expanded='false'] .show-more__label--less {
    display: none;
  }

  .show-more__button .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }

  .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: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: var(--color-foreground-subdued);
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .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:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .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:317) */
/* 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-foreground);
    --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-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-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: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .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--top-shadow::before {
    content: '';
    box-shadow: 0 0 10px var(--color-shadow);
    position: absolute;
    z-index: var(--layer-lowest);
    inset: 0;
    clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-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:322) */
.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:327) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:336) */
.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;
    isolation: isolate;
  }

  .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:337) */
.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:payment-terms-styles (INDEX:338) */
form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_SNIPPET:payment-terms-styles */

/* START_SNIPPET:pills-styles (INDEX:350) */
/* Pills (used in facets and predictive search) */

  .pills__pill {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

    color: var(--color-foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 48px;
    padding: 6px 12px;
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
    background-color: var(--pills-pill-background-color);
    transition: background-color var(--animation-speed) var(--animation-easing);

    &:hover {
      --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    }

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

  .pills__pill > .svg-wrapper {
    --close-icon-opacity: 0.4;
    --icon-stroke-width: 1px;

    color: var(--color-foreground);
  }

  .pills__pill--swatch {
    @media screen and (max-width: 749px) {
      padding-inline-start: var(--padding-sm);
    }
  }

  .pills__pill--swatch .swatch {
    margin-right: -4px;
  }

  .pills__pill--desktop-small {
    @media screen and (min-width: 750px) {
      font-size: var(--font-size--xs);
    }
  }
/* END_SNIPPET:pills-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:354) */
/* 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__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .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: var(--color-foreground-subdued);
  }

  .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:355) */
/* 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 {
    color: var(--color-foreground-muted);
    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:price-styles (INDEX:356) */
.price,
  .compare-at-price,
  .unit-price {
    white-space: nowrap;
  }

  .unit-price {
    display: block;
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note.tax-note.tax-note {
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note:empty {
    display: none;
  }

  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
    margin-block: 0;
  }

  /* Volume pricing note should match unit-price styling (small, grey text) */
  product-price .volume-pricing-note,
  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
    display: block;
    font-family: var(--font-body--family);
    font-weight: normal;
    font-size: var(--font-size--xs);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .compare-at-price {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    text-decoration-line: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
  }

  .price-item__group {
    display: inline-block;
  }
/* END_SNIPPET:price-styles */

/* START_SNIPPET:product-badges-styles (INDEX:358) */
.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-gallery-zoom-details-styles (INDEX:359) */
.product-grid-view-zoom-out--details {
    display: none;
  }

  .product-grid-view-zoom-out--details .h4,
  .product-grid-view-zoom-out--details span,
  .product-grid-view-zoom-out--details s {
    font-size: var(--font-size--xs);
    font-family: var(--font-paragraph--family);
  }

  .product-grid-view-zoom-out--details span {
    font-weight: 500;
  }

  .product-grid-view-zoom-out--details .h4 {
    line-height: 1.3;
    font-weight: 400;
  }

  .product-grid-view-zoom-out--details > span.h6,
  .product-grid-view-zoom-out--details > div.h6 > product-price {
    display: inline-block;
    line-height: 0;
    margin-top: var(--margin-2xs);
  }

  .product-grid-view-zoom-out--details > span.h6 > *,
  .product-grid-view-zoom-out--details > div.h6 > * > * {
    line-height: 1.2;
  }
/* END_SNIPPET:product-card-gallery-zoom-details-styles */

/* START_SNIPPET:product-card-styles (INDEX:360) */
.product-grid__card.product-grid__card {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--product-card-gap);
    align-items: var(--product-card-alignment);
    text-decoration: none;
    color: var(--color, var(--color-foreground));
    padding-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    overflow: hidden;
  }

  .product-grid__card .group-block > * {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  /* Collection and product list cards have equal heights */
  :is(.product-grid__item, .resource-list__item) .product-card {
    display: grid;
    height: 100%;
  }

  /* Product card title truncation - applied on mobile regardless of view */
  @media screen and (max-width: 749px) {
    :is(.product-card, .product-grid__card) :is(h4, .h4) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
    }
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card-styles */

/* START_SNIPPET:product-grid (INDEX:362) */
/* Product grid */
  .product-grid-container {
    display: block;
    width: 100%;
    padding-block: var(--padding-block-start) var(--padding-block-end);

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

  [product-grid-view='default'] {
    --product-grid-gap: 16px;
    --padding-block-start: 24px;
    --padding-block-end: 24px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
  }

  .product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--product-grid-gap);
    margin: auto;
    padding: 0;
    list-style: none;
    isolation: isolate;

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

      grid-template-columns: var(--product-grid-columns-desktop);
    }
  }

  .product-grid :is(h3, p) {
    margin: 0;
  }

  .product-grid__item {
    border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
  }

  [product-grid-view='default'] .product-grid__item {
    padding-block: 0;
  }

  .product-grid--organic[product-grid-view='default'] .product-grid__item {
    height: fit-content;
  }

  [product-grid-view='zoom-out'] .product-grid__card.product-grid__card {
    row-gap: var(--padding-xs);
  }

  [product-grid-view='mobile-single'],
  .product-grid-mobile--large {
    @media screen and (max-width: 749px) {
      grid-template-columns: 1fr;
    }
  }

  ul[product-grid-view='zoom-out'] .product-grid__card > * {
    display: none;
  }

  [product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(
      10,
      minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    :root:active-view-transition-type(product-grid) {
      details[open] floating-panel-component {
        view-transition-name: panel-content;

        .checkbox *,
        .facets__pill-label {
          transition: none;
        }

        .facets--vertical & {
          view-transition-name: none;
        }
      }

      .product-grid {
        view-transition-name: product-grid;
      }

      footer {
        view-transition-name: footer;
      }

      .product-grid__item,
      floating-panel-component {
        transition: none;
      }
    }
  }

  ::view-transition-group(panel-content) {
    z-index: 1;
  }

  ::view-transition-new(product-grid) {
    animation-delay: 150ms;
    animation-name: fadeInUp;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  results-list[initialized] {
    .product-grid__item {
      transition: opacity var(--animation-speed) var(--animation-easing),
        transform var(--animation-speed) var(--animation-easing);

      @starting-style {
        opacity: 0;
        transform: translateY(10px);
      }
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Product card title truncation - applied only to zoom-out view */
  [product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }

  .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:363) */
.product-information {
    gap: var(--gap) 0;
  }

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

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

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

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles.
     Breakpoint is 992px, not Horizon's usual 749px: the Youth Crews design
     stacks the product columns at 992 (verceldesign-youthcrews/responsive.css
     line 87), so 750-992px must be the stacked layout, not a squeezed 2-col. */
  @media screen and (max-width: 992px) {
    /* Stay inside the page grid's central column, aligned with the details
       column. The reference keeps the stacked gallery within the container
       (responsive.css: .pdp__gallery { width: 100% } inside .container), and
       "extend media to screen edge" is off. Horizon full-bled unconditionally
       here, so honour the setting instead and keep the bleed available below. */
    .product-information__media {
      grid-column: 2 / 3;
    }

    .product-information__grid:has(.media-gallery--extend) .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }

    /* Once the columns stack they are two grid rows, so they need a row gap of
       their own — the section's --gap only separates the section's own rows, and
       without this the gallery's thumbnails butt straight up against the title.
       40px is the reference's stacked value (responsive.css: .pdp { gap:
       var(--space-40) } at <=992). */
    .product-information__grid {
      row-gap: 40px;
    }
  }

  /* Desktop styles. Paired with the 992px mobile query above. */
  @media screen and (min-width: 993px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }

  /* ==========================================================================
     Youth Crews PDP info column
     Reference: verceldesign-youthcrews/product.html  .pdp__info
                style.css  .pdp--split .pdp__info / .pdp__title / .pdp__rating /
                           .pdp__reviews / .pdp__desc / .pdp__starting
     `.pdp--split` strips the card treatment, so the column is plain: no padding,
     border, radius or shadow. Tokens resolved to literals per the yc-* pattern:
       --color-ink/-body #2e2e2e · --color-muted #6b6b6b · --color-green #0FB654
       --fs-h2 46/36/27/24 · --lh-heading 1.05 · --ls-heading -0.03em
       --font-heading Poppins · --fw-extrabold 700 · --fw-semibold 600
     ========================================================================== */

  /* .pdp__title — the h1 inside the details column (h2 in the home buy box, so
     the page keeps a single h1). Targeted by role rather
     than block id so it survives the block being removed and re-added.
     Three classes beats base.css's `.text-block.h3 :is(h1,…)` (0,2,1). */
  .product-information .product-details .text-block :is(h1, h2) {
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #2e2e2e;
    margin: 0;
  }

  /* .pdp__rating — stars + review count on one row, gap 8 */
  .product-information .product-details .rating-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  /* .pdp__rating .rating__stars { color: var(--color-green); font-size: 18px } */
  .product-information .product-details .rating-wrapper .rating {
    /* Horizon draws the stars as SVGs filled from --star-fill-color (and uses
       currentcolor for the half-star gradient and outline variant), so set both
       the custom property and `color` to cover every path. */
    --star-fill-color: #0fb654;
    --star-fill-color-rgb: 15 182 84;
    color: #0fb654;
    font-size: 18px;
  }

  /* The review block sets --star-size inline (calc(--font-paragraph--size * 1.1)
     ≈ 15.4px), and an inline custom property beats any stylesheet rule for the
     same property — so size the star SVGs directly to hit the reference's 18px. */
  .product-information .product-details .rating-wrapper .rating svg.stars {
    width: 18px;
    height: 18px;
  }

  /* .pdp__reviews — underlined muted link through to the reviews section */
  .product-information .product-details .rating-wrapper .rating-count {
    font-size: 14px;
    font-weight: 600;
    color: #6b6b6b;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin: 0;
  }

  .product-information .product-details .rating-wrapper .rating-count:hover {
    color: #2e2e2e;
  }

  /* .pdp__desc — 16px regular body copy. No responsive step in the reference.
     `:not(.yc-pdp-starting)` matters: the price block also renders as a
     `.text-block.paragraph`, so without it this rule (4 classes) out-specifies
     the .yc-pdp-starting rule below (3 classes) and steals its 700 weight. */
  .product-information .product-details .text-block.paragraph p:not(.yc-pdp-starting) {
    font-size: 16px;
    font-weight: 400;
    color: #2e2e2e;
    margin: 0;
  }

  /* .pdp__starting — "Starting at $90 per box" */
  .product-information .product-details .yc-pdp-starting {
    font-size: 16px;
    font-weight: 700;
    color: #2e2e2e;
    margin: 0;
  }

  /* ---- .sample-price — the Sizing Pack's price pair ----
     Reference: sizing-pack.html page styles, lines 135-153. Opt-in via the
     price block's `yc_sample_price` setting, so every other price in the
     theme is untouched.

     `--fs-24` is NOT a token in style.css (the scale stops at 20); the
     reference declares `var(--fs-24, 24px)` and the fallback is what renders.
     24px is ported directly.

     The container is the price snippet's own `[ref="priceContainer"]` <div>
     — the only stable hook it exposes. Without the flex row the two figures
     are adjacent inline-blocks separated by a text space, not the 12px gap. */
  /* "Just pay shipping" tag (price block `yc_price_note`). Same warm peach as
     the result tile in the usage calculator, with the ink text kept for
     contrast (#2e2e2e on #fff1e8 ≈ 12.9:1). It sits on the price row and
     wraps under it when the column is too narrow. */
  /* Direction and justification stated outright: something upstream turns
     the price block into a centred column, which stacked and centred the
     price and the tag. */
  .product-information .product-details .text-block:has(> .yc-pdp-price-note) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    column-gap: 16px;
    row-gap: 8px;
  }

  /* The price container would otherwise take the whole row and push the tag
     onto its own line. */
  .product-information .product-details .text-block:has(> .yc-pdp-price-note) > [ref='priceContainer'] {
    flex: 0 0 auto;
    width: auto;
    justify-content: flex-start;
    margin-inline: 0;
  }

  /* width: fit-content, not auto: the pill rendered full column width, and an
     explicit width is the one thing stretch (flex or grid) can't override. */
  .product-information .product-details .yc-pdp-price-note {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin-inline: 0;
    padding: 4px 12px;
    background-color: #fff1e8;
    border: 1px solid #ffc7ac;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: #2e2e2e;
  }

  .product-information .product-details .yc-pdp-price-note__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #4036d6;
  }

  .product-information .product-details .yc-pdp-sample-price [ref='priceContainer'] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }

  .product-information .product-details .yc-pdp-sample-price .price,
  .product-information .product-details .yc-pdp-sample-price .compare-at-price {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.55;
  }

  .product-information .product-details .yc-pdp-sample-price .price {
    color: #2e2e2e;
  }

  /* price-styles.liquid strikes the compare-at price at 1.5px in a 30%-opacity
     colour. The reference uses a plain `text-decoration: line-through` — full
     weight, same grey as the text — so both are reset here. */
  .product-information .product-details .yc-pdp-sample-price .compare-at-price {
    color: #6b6b6b;
    text-decoration-line: line-through;
    text-decoration-thickness: auto;
    text-decoration-color: currentcolor;
  }

  /* ---- Size picker — reference .pdp__field / .pdp__sizes / .pdp__size ----
     Scoped to the opt-in `yc-pdp-*` classes, so every other variant picker in
     the theme (quick add, product cards) is untouched. */

  /* .pdp__field-head — label and helper link on one baseline row.
     Sits outside the fieldset (see variant-main-picker.liquid), so the 12px
     .pdp__field gap is a margin rather than a flex gap. */
  .product-information .product-details .yc-pdp-field-head {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 0 12px;
  }

  /* .pdp__label + .pdp__label--lg */
  .product-information .product-details .yc-pdp-label {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
  }

  /* .pdp__link */
  .product-information .product-details .yc-pdp-link {
    font-size: 13px;
    font-weight: 600;
    color: #4036d6;
    text-decoration: underline;
    cursor: pointer;
  }

  .product-information .product-details .yc-pdp-link:hover {
    color: #2f2799;
  }

  /* .pdp__sizes — the button row. Horizon lays these out with its own
     equal-width grid, so reset to the reference's wrapping flex row. */
  .product-information .product-details fieldset:has(.yc-pdp-size) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    border: none;
    padding: 0;
    margin: 0;
  }

  /* .pdp__size — the card itself is the <label> wrapping the radio */
  .product-information .product-details .variant-option__button-label:has(.yc-pdp-size) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1 1 0;
    min-width: 96px;
    padding: 12px 16px;
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  }

  /* .pdp__size:hover { box-shadow: var(--shadow-hard-lg) } */
  .product-information .product-details .variant-option__button-label:has(.yc-pdp-size):hover {
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* Horizon paints an absolutely-positioned ink-coloured "pill" over the selected
     option (its sliding selection indicator). The reference has no such element —
     .pdp__size.is-active is simply a purple background — and the pill sits on top
     of that background, so it has to go in size-cards mode. */
  .product-information
    .product-details
    .variant-option__button-label:has(.yc-pdp-size)
    .variant-option__button-label__pill {
    display: none;
  }

  /* .pdp__size.is-active — purple fill, and --shadow-hard-sm is `none` */
  .product-information
    .product-details
    .variant-option__button-label:has(.yc-pdp-size):has(input:checked) {
    background-color: #4036d6;
    box-shadow: none;
  }

  .product-information
    .product-details
    .variant-option__button-label:has(.yc-pdp-size):has(input:checked)
    :is(.yc-pdp-size-num, .yc-pdp-size-sub) {
    color: #ffffff;
  }

  .product-information .product-details .yc-pdp-size {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 2px;
  }

  /* .pdp__size-num — --fs-h4 24 / 22 @992 / 18 @640 */
  .product-information .product-details .yc-pdp-size-num {
    font-size: 24px;
    font-weight: 700;
    color: #2e2e2e;
    line-height: 1;
  }

  /* .pdp__size-sub */
  .product-information .product-details .yc-pdp-size-sub {
    font-size: 12px;
    font-weight: 400;
    color: #6b6b6b;
  }

  /* Waitlist tag on a size whose variant metafield custom.waitlist is true
     (blocks/yc-size-waitlist.liquid). Text, not colour, carries the state;
     ink on cream reads 11.6:1, white on the selected purple 8.6:1. */
  .product-information .product-details .yc-pdp-size-tag {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #fff4e5;
    color: #2e2e2e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .product-information
    .product-details
    .variant-option__button-label:has(.yc-pdp-size):has(input:checked)
    .yc-pdp-size-tag {
    background-color: rgb(255 255 255 / 0.18);
    color: #ffffff;
  }

  /* "Coming soon" look for a waitlist size: a subtle blur on the size number and
     waist/weight lines only. The card border, focus ring and Waitlist tag stay
     crisp so the state remains readable; the radio's aria-label already carries it. */
  .product-information
    .product-details
    .variant-option__button-label:has(.yc-pdp-size):has(input[data-yc-waitlist='true'])
    :is(.yc-pdp-size-num, .yc-pdp-size-sub) {
    filter: blur(1.5px);
  }
 /* .pdp__note */
  .product-information .product-details .yc-pdp-note {
    font-size: 14px;
    font-weight: 600;
    color: #4036d6;
    margin: 12px 0 0;
  }

  /* ---- Accordion — reference .pdp__accordion / .faq__item ----
     Reuses Horizon's accordion + _accordion-row blocks; only the chrome is
     restyled. `icon: plus` and `dividers: false` are set on the block, so
     Horizon already hides the caret and drops its own dividers.
     Tokens: --color-border #e2e1ee · --color-ink #2e2e2e · --color-muted #6b6b6b
             --color-purple #4036d6 · --radius-md 16 · --shadow-hard-sm is `none` */
  .product-information .product-details .accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  /* .faq__item — each row is its own card */
  .product-information .product-details .accordion .details {
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
  }

  /* .faq__q, with .pdp__accordion's compact padding (12/16) and 15px override */
  .product-information .product-details .accordion .details__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #2e2e2e;
    cursor: pointer;
    list-style: none;
  }

  .product-information .product-details .accordion .details__header::-webkit-details-marker {
    display: none;
  }

  /* .faq__icon — the plus rotates 45deg into a cross when the row opens */
  .product-information .product-details .accordion .details__header .icon-plus {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #4036d6;
    transition: transform 0.18s ease;
  }

  /* Rotate the inner <svg>, not the .svg-wrapper span. Something in Horizon's
     cascade keeps resetting the wrapper's transform to rotate(0deg), so the
     wrapper rotation silently computed to identity; the svg is uncontested and
     the visual result is the same. */
  .product-information .product-details .accordion .details[open] .details__header .icon-plus > svg {
    transform: rotate(45deg);
    transition: transform 0.18s ease;
  }

  /* Horizon animates the two bars into a minus (it rotates .horizontal and fades
     .vertical out). The reference instead rotates the whole plus into a cross, so
     both bars must stay put and visible — otherwise the 45deg rotation above
     produces a single diagonal line. */
  .product-information
    .product-details
    .accordion
    .details__header
    .icon-plus
    :is(.horizontal, .vertical) {
    transform: none;
    opacity: 1;
  }

  /* .faq__a — .pdp__accordion tightens this to 0 16px 16px */
  .product-information .product-details .accordion .details-content {
    display: flex;
    padding: 0 16px 16px;
  }

  /* The row body is a nested `text` block, so it also matches the .pdp__desc rule
     above (both 4 classes). `.text-block` in the chain makes this the more
     specific of the two, otherwise the blurb's 16px/#2e2e2e wins on source order. */
  .product-information .product-details .accordion .details-content .text-block p {
    font-size: 14px;
    font-weight: 400;
    color: #6b6b6b;
    margin: 0;
  }

  /* ---- Add to cart — reference .btn.btn--ink.btn--block.pdp__add ----
     Ink pill. `.pdp__add` overrides `.btn`'s 14px with 15px, and the prototype
     defines no `.btn:hover`, so there is deliberately no hover state change.

     2026-09-02 revision: no longer half width. It shares the buy row with the
     stepper and takes whatever that leaves
     (`.pdp--split .pdp__buy-row .pdp__add { width: auto; flex: 1 1 auto }`), so
     it fills its flex parent instead of claiming a fixed 50%. */
  .product-information .product-details .add-to-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 32px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    background-color: #2e2e2e;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  /* The reference's main Add to cart carries no icon (only its sticky bar does).
     Horizon's success checkmark is a different element and is kept, so the
     "added" feedback still works. */
  .product-information .product-details .add-to-cart-button .add-to-cart-icon {
    display: none;
  }

  /* ---- Quantity row — reference .pdp--split .pdp__qty-row ----
     `.pdp--split` strips the card treatment the home-page buy box uses: no
     padding, background, border or radius. Label and stepper sit on one row
     24px apart, with three separate 48px circular controls 20px apart.
     Scoped to the PDP details column, so cart and quick-add steppers are
     untouched. No wrapper element is introduced: buy-buttons-styles.liquid
     sizes every direct child of .product-form-buttons that is not on its
     exclusion list, so an extra div would get button flex sizing. */
  /* 2026-09-02 revision: `.pdp__buy-row` puts the stepper and Add to Cart on
     one line (gap 16px) and drops the "Quantity" label, so the 24px gap that
     separated label from stepper is gone with it. */
  .product-information .product-details .product-form-buttons {
    column-gap: 16px;
    /* .pdp__info { gap: var(--space-20) } — the reference puts 20px between the
       fields in the buy column. Horizon's 5.6px left the quantity row almost
       touching the order-type heading. This only affects boundaries between
       flex *lines*; the quantity label and stepper share a line, so their 24px
       column gap is untouched. */
    row-gap: 20px;
    align-items: center;
  }

  /* Horizon gives the label its own full-width flex line; the reference keeps it
     inline with the stepper. .pdp__label (not --lg): 14px. */
  .product-information .product-details .quantity-label {
    flex: 0 0 auto;
    width: auto;
    margin-block-end: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
  }

  .product-information .product-details .quantity-selector-wrapper {
    flex: 0 0 auto;
  }

  /* Everything that is not part of the quantity row starts a new line, so the
     stepper sits alone as it does in the reference. */
  .product-information
    .product-details
    .product-form-buttons
    > *:not(
      .quantity-selector-wrapper,
      .quantity-label,
      .quantity-rules,
      .volume-pricing,
      .product-form-text__error,
      :has(add-to-cart-component)
    ) {
    flex-basis: 100%;
  }

  /* …except Add to Cart, which now shares the stepper's line and takes whatever
     it leaves (`.pdp--split .pdp__buy-row .pdp__add { width: auto; flex: 1 1 auto }`).
     Horizon wraps the button in an unclassed <span>, so it is matched by the
     component it contains. Accelerated checkout stays full width underneath. */
  .product-information .product-details .product-form-buttons > span:has(add-to-cart-component) {
    flex: 1 1 auto;
    flex-basis: auto;
    min-width: 0;
  }

  /* .pdp--split .pdp__qty-row .qty — no container chrome, 20px between controls */
  .product-information .product-details .quantity-selector {
    gap: 20px;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    overflow: visible;
  }

  /* .qty__btn — 48px circles with the hard offset shadow */
  .product-information
    .product-details
    .quantity-selector
    :is(.quantity-minus, .quantity-plus) {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    border: 1px solid #e2e1ee;
    background-color: #ffffff;
    color: #2e2e2e;
    font-size: 20px;
    box-shadow: 3px 3px 0 #2e2e2e;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  /* Hover nudges the button into its own shadow (3px -> 2px offset) */
  .product-information
    .product-details
    .quantity-selector
    :is(.quantity-minus, .quantity-plus):hover {
    background-color: #ffffff;
    color: #2e2e2e;
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 #2e2e2e;
  }

  /* .qty__value — Horizon uses a number input where the reference uses a span */
  .product-information .product-details .quantity-selector input {
    min-width: 24px;
    width: 24px;
    /* The reference's .qty__value is an inline-flex span that stretches to the
       48px control height; match it so the digit sits on the same baseline. */
    height: 48px;
    padding: 0;
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    appearance: textfield;
  }

  .product-information .product-details .quantity-selector input::-webkit-outer-spin-button,
  .product-information .product-details .quantity-selector input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  /* Reference title steps: responsive.css --fs-h2 36 @992 / 27 @640 / 24 @380 */
  @media screen and (max-width: 992px) {
    .product-information .product-details .text-block :is(h1, h2) {
      font-size: 36px;
    }

    /* --fs-h4 22px @992 */
    .product-information .product-details .yc-pdp-size-num {
      font-size: 22px;
    }

    /* (The half-width desktop rule is gone as of the 2026-09-02 revision — the
       button is full width inside the buy row at every size now, so the old
       @992 override that reset it is no longer needed.) */
  }

  @media screen and (max-width: 640px) {
    .product-information .product-details .text-block :is(h1, h2) {
      font-size: 27px;
    }

    /* --fs-h4 18px @640 */
    .product-information .product-details .yc-pdp-size-num {
      font-size: 18px;
    }

    /* Two per row, centred — four sizes make a tidy 2x2 instead of 3 + orphan.
       Reference: responsive.css @640 .pdp__size */
    .product-information .product-details .variant-option__button-label:has(.yc-pdp-size) {
      align-items: center;
      text-align: center;
      flex: 0 0 calc(50% - 12px / 2);
      min-width: 0;
    }
  }

  @media screen and (max-width: 380px) {
    .product-information .product-details .text-block :is(h1, h2) {
      font-size: 24px;
    }
  }

  /* ==========================================================================
     Purchase options — Loop Subscriptions' widget skinned to the reference
     (product.html .pdp__plans--ref). Enabled by the buy-buttons block's
     `yc_po_skin` setting; turning it off restores Loop's stock look.

     This is CSS only. Loop's markup, ids, classes and JS are untouched, so the
     app keeps full ownership of the widget and nothing here can desynchronise
     from it. Copy comes from block settings via custom properties, so it stays
     merchant-editable; where a property is unset the pseudo-element resolves to
     `content: none` and is not generated at all.

     Loop's stylesheet declares almost everything `!important` and is emitted
     later in <head> than this compiled stylesheet, so the overrides below need
     `!important` too — the `.yc-po` scope is what wins them (0,2,0 vs 0,1,0).

     Two of Loop's rules are deliberately NOT overridden:
       · `.loop-...-radio:not(:checked) ~ ...selling-plans-container` (0,3,0)
         still collapses the frequency picker when subscribe isn't selected;
       · `.loop-display-none` still wins on the badge, via `:not()` below.
     ========================================================================== */

  .product-information .product-details .yc-po {
    width: 100%;
  }

  /* Same rule as the other numbered step headings, so they match exactly. */
  .product-information .product-details .yc-po__label {
    display: block;
    margin: 0 0 12px;
  }

  .yc-po .loop-subscription-container {
    display: block;
  }

  /* Replaced by .yc-po__label, which matches the other step headings. */
  .yc-po .loop-purchase-options-label {
    display: none !important;
  }

  /* 2026-09-02 reference revision: the cards STACK full width now. They were
     two columns until the design update, but the reference's own note explains
     the change — side by side, the one-time card had to match the height of the
     subscribe card (which carries the frequency row, the reassurance line and
     now the calculator link) and "sat under a well of empty white". Stacked,
     each card is only as tall as its own content and both get the full column
     width for their name and price. */
  .yc-po .loop-selling-plan-fieldset {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* Flatten Loop's wrappers so the two cards become siblings in that grid.
     Loop drives variant visibility with an inline `display: block` / `none` on
     the variant wrappers. An `!important` author rule outranks inline styles,
     so this matches only the wrapper Loop has explicitly shown — never the
     hidden ones, which would otherwise be revealed. If Loop ever switches to a
     different display value the skin quietly falls back to its stacked layout
     rather than leaking every variant. */
  .yc-po [id^='loop-product-variant-'][style*='block'] {
    display: contents !important;
  }

  .yc-po [id^='loop-selling_plan_group-'] {
    display: contents;
  }

  .yc-po .loop-selling-plan-allocation,
  .yc-po .loop-one-time-purchase-option-position {
    display: contents !important;
  }

  /* --- the two cards (.pdp__plan) --------------------------------------- */

  .yc-po .loop-subscription-group,
  .yc-po .loop-one-time-purchase-option {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr auto;
    /* Content-height rows: the cards no longer stretch to match each other,
       so nothing needs a 1fr spacer to push the note down. */
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      'ribbon ribbon'
      'name   price'
      'freq   freq'
      'note   note';
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 16px !important;
    background-color: #ffffff;
    border: 1px solid #e2e1ee !important;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .yc-po .loop-subscription-group:hover,
  .yc-po .loop-one-time-purchase-option:hover {
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  .yc-po .loop-subscription-group:has(.loop-subscription-group-radio:checked),
  .yc-po .loop-one-time-purchase-option:has(.loop-one-time-purchase-option-radio:checked) {
    border-color: #4036d6 !important;
  }

  .yc-po .loop-subscription-group:has(input:focus-visible),
  .yc-po .loop-one-time-purchase-option:has(input:focus-visible) {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  /* --- ribbon (.pdp__plan-tag) ------------------------------------------ */

  /* 38px tall: in the reference the chip (21.6px) is a flex item inside the
     ribbon and drives its height. Here the chip is taken out of flow so it can
     sit over a pseudo-element, so that height is restated explicitly. */
  .yc-po .loop-subscription-group::before,
  .yc-po .loop-one-time-purchase-option::before {
    content: var(--yc-po-once-tag, none);
    grid-area: ribbon;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e;
    background-color: #f0eee3;
    border-bottom: 1px solid #e2e1ee;
    /* Matches the card's own 0.2s so the ribbon and the border recolour as one
       movement when the visitor switches option. */
    transition: background-color 0.2s ease, color 0.2s ease, border-bottom-color 0.2s ease;
  }

  .yc-po .loop-subscription-group::before {
    content: var(--yc-po-popular, none);
  }

  /* Ribbon colour tracks SELECTION, not which card it is.
     It used to be hard-coded blue on the subscription card and cream on the
     one-time card, so the subscription ribbon read as "selected" even when the
     visitor had chosen One Time Purchase — the blue bar is the loudest thing in
     the group, and it never moved. Now whichever card is checked wears the blue;
     the other falls back to the shared cream ribbon above.
     Same `:has(... :checked)` pair as the card border rule further up — keep the
     two in step, they describe one state between them. */
  .yc-po .loop-subscription-group:has(.loop-subscription-group-radio:checked)::before,
  .yc-po .loop-one-time-purchase-option:has(.loop-one-time-purchase-option-radio:checked)::before {
    color: #ffffff;
    background-color: #4036d6;
    border-bottom-color: #4036d6;
  }

  /* Loop's discount badge, moved into the ribbon (.pdp__plan-chip). The
     `:not()` keeps `.loop-display-none` in charge of the one-time card's empty
     badge and of variants with no discount. `pointer-events: none` lets a click
     on the chip fall through to the card. Ribbon box is 30px tall
     (8 + 14 + 8), chip is 22px (1 + 4 + 12 + 4 + 1), so top: 4px centres it. */
  .yc-po .loop-subscription-group-discount-badge:not(.loop-display-none) {
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 2;
    display: flex !important;
    align-items: center;
    width: max-content;
    padding: 4px 8px 4px 24px !important;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 12px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e2e2e !important;
    background-color: #ffc7ac !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%232e2e2e'%3E%3Cpath d='M243.31 136 144 36.69A15.86 15.86 0 0 0 132.69 32H40a8 8 0 0 0-8 8v92.69A15.86 15.86 0 0 0 36.69 144L136 243.31a16 16 0 0 0 22.63 0l84.68-84.68a16 16 0 0 0 0-22.63ZM84 96a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 12px 12px;
    border: 1px solid #2e2e2e;
    border-radius: 999px !important;
    white-space: nowrap;
    pointer-events: none;
  }

  /* --- name + price row (.pdp__plan-main) -------------------------------- */

  .yc-po .loop-subscription-group-text {
    grid-area: name;
    display: flex !important;
    align-items: flex-start;
    min-width: 0;
    padding: 16px 0 0 16px;
  }

  .yc-po .loop-subscription-group-label,
  .yc-po .loop-one-time-purchase-option-label {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    color: #2e2e2e !important;
  }

  /* The one-time label is the grid item itself, so it carries the padding the
     subscribe card gets from its .loop-subscription-group-text wrapper. Needs
     !important to beat the `padding: 0 !important` in the shared rule above —
     without it the name sits flush against the card border. */
  .yc-po .loop-one-time-purchase-option-label {
    grid-area: name;
    padding: 16px 0 0 16px !important;
  }

  /* .pdp__plans--ref .pdp__plan--sub .pdp__plan-name */
  .yc-po .loop-subscription-group-label {
    color: #4036d6 !important;
  }

  .yc-po .loop-subscription-group-price-container,
  .yc-po .loop-one-time-purchase-option-price-container {
    grid-area: price;
    padding: 16px 16px 0 12px;
    text-align: right;
  }

  .yc-po .loop-subscription-group-price-amount,
  .yc-po .loop-one-time-purchase-option-price-amount {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    color: #2e2e2e !important;
    white-space: nowrap;
  }

  /* Per-unit line (.pdp__plan-price small). Value is computed in Liquid from
     the variant's diaper_count metafield — see blocks/buy-buttons.liquid. */
  .yc-po .loop-subscription-group-price-container::after,
  .yc-po .loop-one-time-purchase-option-price-container::after {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    color: #6b6b6b;
    white-space: nowrap;
  }

  .yc-po .loop-subscription-group-price-container::after {
    content: var(--yc-po-sub-per, none);
  }

  .yc-po .loop-one-time-purchase-option-price-container::after {
    content: var(--yc-po-once-per, none);
  }

  /* --- frequency picker (.pdp__plan-freq-inline) ------------------------- */

  /* z-index lifts the picker above the card-wide click overlay below, so the
     <select> stays operable. */
  /* Label and select share one line now that the card is full width; the
     reference drops back to stacked below 480px, where the label and a full
     date range no longer fit together. Its per-row bottom padding is gone too —
     the card's 12px grid gap is enough separation at this width. */
  .yc-po .loop-subscription-group-selling-plans-container {
    grid-area: freq;
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    width: auto !important;
    margin: 8px 0 0 !important;
    padding: 0 16px !important;
  }

  @media screen and (max-width: 480px) {
    .yc-po .loop-subscription-group-selling-plans-container {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }
  }

  .yc-po .loop-selling-plan-selector-label {
    display: block;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
    color: #2e2e2e !important;
  }

  @media screen and (max-width: 480px) {
    .yc-po .loop-selling-plan-selector-label {
      margin: 0 0 8px !important;
    }
  }

  /* Loop puts the selling plan's *option name* here ("Frequency"); the reference
     reads "Pick your frequency:". When the block setting supplies a replacement,
     collapse Loop's text and paint the setting in its place.

     The <label> is deliberately kept in the DOM rather than hidden: it is what
     gives the <select> its accessible name, and an unlabelled combobox is a worse
     outcome than a label a screen reader reads twice over. Renaming the option in
     the Loop admin and clearing the setting removes the redundancy. */
  .yc-po--own-freq .loop-selling-plan-selector-label {
    font-size: 0 !important;
  }

  .yc-po .loop-selling-plan-selector-label::before {
    content: var(--yc-po-freq, none);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    color: #2e2e2e;
  }

  /* The reference's inline frequency box has no caret
     (.pdp__plan-freq-inline .pdp__freq-select i { display: none }). */
  /* width:100% would set the flex base to the full row and force a wrap, so
     the select is sized by flex-grow on the shared line instead. */
  .yc-po .loop-selling-plan-selector {
    flex: 1 1 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.55;
    color: #2e2e2e !important;
    background-color: #f0eee3 !important;
    background-image: none !important;
    border: 1px solid #e2e1ee !important;
    border-radius: 8px !important;
    cursor: pointer;
  }

  /* Shown only when the subscribe note setting is left empty. */
  .yc-po .loop-selling-plan-selector-description {
    margin: 8px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #6b6b6b !important;
    opacity: 1 !important;
  }

  .yc-po--own-note .loop-selling-plan-selector-description {
    display: none !important;
  }

  /* --- card notes (.pdp__plan-note) -------------------------------------- */

  .yc-po .loop-subscription-group::after,
  .yc-po .loop-one-time-purchase-option::after {
    grid-area: note;
    display: flex;
    align-items: center;
    margin-top: 8px;
    padding: 0 16px 0 37px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    color: #2e2e2e;
    background-repeat: no-repeat;
    background-position: 16px 3px;
    background-size: 13px 13px;
  }

  .yc-po .loop-subscription-group::after {
    content: var(--yc-po-sub-note, none);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%234036d6'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm45.66 85.66-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
  }

  /* .pdp__plan-note--muted */
  .yc-po .loop-one-time-purchase-option::after {
    content: var(--yc-po-once-note, none);
    font-weight: 400;
    color: #6b6b6b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%236b6b6b' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 80l96 48 96-48'/%3E%3Cpath d='M128 128v96'/%3E%3Cpath d='M219.6 68.9l-88-40.5a8 8 0 0 0-7.2 0l-88 40.5A8 8 0 0 0 32 76.2v103.6a8 8 0 0 0 4.4 7.3l88 40.5a8 8 0 0 0 7.2 0l88-40.5a8 8 0 0 0 4.4-7.3V76.2a8 8 0 0 0-4.4-7.3Z'/%3E%3C/svg%3E");
  }

  /* --- selection ---------------------------------------------------------
     The reference makes the whole card a click target. Loop's <label for>
     already points at its radio, so stretching the label's ::before over the
     card gives that for free — no JS, and Loop still sees an ordinary change
     event. The radio itself is hidden visually but stays focusable, so the
     cards remain keyboard-operable as a radio group. */

  .yc-po .loop-subscription-group-radio,
  .yc-po .loop-one-time-purchase-option-radio {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
  }

  .yc-po .loop-subscription-group-label::before,
  .yc-po .loop-one-time-purchase-option-label::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-container-styles (INDEX:364) */
:where(:not(.dialog-zoomed-gallery)) > .product-media-container {
    --slide-width: 100%;

    display: flex;
    aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
    max-height: var(--constrained-height);
    width: var(--slide-width, 100%);

    /* Relative position needed for video and 3d models */
    position: relative;
    overflow: hidden;

    &:where(.constrain-height) {
      /* arbitrary offset value based on average theme spacing and header height */
      --viewport-offset: 400px;
      --constrained-min-height: 300px;
      --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

      margin-right: auto;
      margin-left: auto;
    }

    @supports (--test: round(up, 100%, 1px)) {
      /* width and overflow forces children to shrink to parent width */
      --slide-width: round(up, 100%, 1px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-media-container.constrain-height {
      max-height: none;
    }
  }

  @media screen and (min-width: 750px) {
    .product-media-container.constrain-height {
      --viewport-offset: var(--header-height, 100px);
      --constrained-min-height: 500px;
    }

    body:has(header-component[transparent]) .product-media-container.constrain-height {
      --viewport-offset: 0px;
    }
  }

  .product-media-container img {
    aspect-ratio: inherit;
    object-fit: contain;
  }

  .product-media-container.media-fit-contain img {
    object-position: center center;
  }

  .product-media-container.media-fit {
    --product-media-fit: cover;

    img {
      object-fit: var(--product-media-fit);
    }
  }
/* END_SNIPPET:product-media-container-styles */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:365) */
/* Product Media */
  media-gallery {
    display: block;
    width: 100%;
  }

  :where(media-gallery, .product-grid__item) {
    .media-gallery__grid {
      grid-template-columns: 1fr;
      gap: var(--image-gap);
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--large-first-image .product-media-container:first-child,
    .media-gallery--two-column .product-media-container:only-child {
      /* First child spans 2 columns */
      grid-column: span 2;
    }
  }

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

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

  .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:366) */
.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-current='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-current='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-current='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-current='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] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .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: 750px) {
    .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;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

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

  /* ==========================================================================
     Youth Crews PDP gallery
     Reference: verceldesign-youthcrews/product.html  .pdp__gallery--stacked
                verceldesign-youthcrews/style.css    .pdp__stage / .pdp__main /
                                                     .pdp__thumbs / .pdp__thumb
     Scoped to .product-information so product cards, quick-add and any other
     gallery consumer are unaffected.
     Prototype tokens resolved to literals, matching the yc-* section pattern:
       --color-white #ffffff · --color-border #e2e1ee · --color-ink #2e2e2e
       --color-purple #4036d6 · --radius-lg 24 · --radius-md 16 · --radius-sm 8
       --radius-xs 4 · --space-16 16 · --space-12 12 · --space-4 4
       --shadow-hard / --shadow-hard-sm: none · --shadow-hard-lg: 4px 4px 0 ink
       --transition 0.18s ease
     ========================================================================== */

  /* .pdp__gallery { position: sticky; top: 36px } */
  .product-information media-gallery.sticky-content {
    top: 36px;
  }

  /* .pdp__stage — white card, hairline border, radius 24, no resting shadow */
  .product-information slideshow-slide.product-media-container {
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 24px;
    overflow: hidden;
  }

  /* .pdp__main { border-radius: var(--radius-md) } */
  .product-information slideshow-slide.product-media-container
    :is(img, video, iframe, .deferred-media__poster-image) {
    border-radius: 16px;
  }

  /* .pdp__gallery gap 16px between stage and rail. Horizon ships 11.2px of
     symmetric block padding on the rail; replace it with the reference's
     single 16px lead so the measured gap is exact. */
  .product-information .slideshow-controls__thumbnails {
    gap: 12px;
    padding-block: 16px 0;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Let the thumb hover shadow render instead of being clipped by the
     horizontal scroller (desktop rail wraps, so it never needs to scroll). */
  .product-information .slideshow-controls__thumbnails-container {
    overflow: visible;
  }

  /* .pdp__thumb — 76x76 comes from --thumbnail-width; this is the chrome.
     Horizon styles these via nested `.slideshow-controls__thumbnails
     .slideshow-control` rules that land ~2000 lines later in the compiled
     bundle, so an equal-specificity selector would lose on source order.
     The three-class chain below wins on specificity instead of !important. */
  .product-information .slideshow-controls__thumbnails .slideshow-controls__thumbnail {
    box-sizing: border-box;
    /* Horizon scales thumbs with clamp(44px, 7vw, --thumbnail-width), which
       shrinks them to the 44px floor below ~1090px. The reference thumb is a
       fixed 76x76 at every width (style.css .pdp__thumb), scrolling rather than
       shrinking on phones, so pin it to the setting. */
    width: var(--thumbnail-width);
    background-color: #ffffff;
    border: 1px solid #e2e1ee;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
  }

  /* .pdp__thumb img { border-radius: var(--radius-xs) } */
  .product-information .slideshow-controls__thumbnails .slideshow-controls__thumbnail img {
    border-radius: 4px;
  }

  /* .pdp__thumb:hover { box-shadow: var(--shadow-hard-lg) } */
  .product-information .slideshow-controls__thumbnails .slideshow-controls__thumbnail:hover {
    box-shadow: 4px 4px 0 #2e2e2e;
  }

  /* .pdp__thumb.is-active — purple border only; --shadow-hard-sm is `none`.
     Horizon marks the selected thumb with an `outline` as well; the reference
     conveys selection with the border alone, so the outline is dropped here and
     restored for :focus-visible below so keyboard focus stays visible. */
  .product-information .slideshow-controls__thumbnails .slideshow-controls__thumbnail[aria-current='true'] {
    border: 1px solid #4036d6;
    outline: none;
    box-shadow: none;
  }

  .product-information .slideshow-controls__thumbnails .slideshow-controls__thumbnail:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: calc(var(--focus-outline-offset) / 2);
  }

  /* The reference stage carries no carousel arrows — the thumbnail rail is the
     only control. Thumbs are real <button>s with "Slide N of M" labels, so
     keyboard and screen-reader navigation is preserved. */
  .product-information slideshow-arrows {
    display: none;
  }

  /* Once the columns stack the gallery stops sticking.
     Reference: responsive.css @992 .pdp__gallery { position: static; top: auto }
     `relative` rather than `static` so it stays the containing block for the
     absolutely positioned stage badges; with no offsets it lays out identically. */
  @media screen and (max-width: 992px) {
    .product-information media-gallery.sticky-content {
      position: relative;
      top: auto;
    }
  }

  /* ---- Stage badges — reference .pdp__stage-badges / .pdp__coin / .pdp__flag ----
     Anchored to <media-gallery>, whose top edge is the stage's top edge.
     pointer-events: none keeps the click-to-zoom target intact underneath. */
  .product-information .yc-pdp-stage-badges {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
  }

  /* .pdp__coin + .pdp__coin--purple; --shadow-hard-sm is `none` */
  .product-information .yc-pdp-coin {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 1px solid #e2e1ee;
    background-color: #4036d6;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.05;
    text-align: center;
  }

  /* .pdp__coin strong */
  .product-information .yc-pdp-coin strong {
    font-size: 16px;
    font-weight: 700;
  }

  /* .pdp__coin--badge */
  .product-information .yc-pdp-coin-badge {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 1px solid #e2e1ee;
    object-fit: cover;
  }

  /* .pdp__flag inherits .badge, but resets the -6deg tilt to sit square
     against the gallery frame. --color-yellow is the retired-yellow peach. */
  .product-information .yc-pdp-flag {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #2e2e2e;
    background-color: #ffc7ac;
    border: 1px solid #e2e1ee;
    border-radius: 999px;
    transform: none;
    pointer-events: none;
  }

  /* Phones: rail becomes a swipeable snap track.
     Reference: responsive.css @640 .pdp__thumbs / .pdp__gallery--stacked .pdp__thumbs */
  @media screen and (max-width: 640px) {
    .product-information .slideshow-controls__thumbnails-container {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .product-information .slideshow-controls__thumbnails-container::-webkit-scrollbar {
      display: none;
    }

    .product-information .slideshow-controls__thumbnails {
      flex-wrap: nowrap;
      justify-content: flex-start;
      padding-block-end: 4px;
    }

    .product-information .slideshow-controls__thumbnail {
      flex-shrink: 0;
      scroll-snap-align: start;
    }
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-recommendations-styles (INDEX:368) */
.product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }
/* END_SNIPPET:product-recommendations-styles */

/* START_SNIPPET:quantity-selector-styles (INDEX:369) */
/* Quantity selector */
  .quantity-selector {
    --quantity-selector-width: 124px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    flex: 1 1 var(--quantity-selector-width);
    align-self: stretch;
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
    border-radius: var(--style-border-radius-buttons-secondary);
  }

  .quantity-selector :is(.quantity-minus, .quantity-plus) {
    /* Unset button styles */
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
    color: var(--color-input-text);
  }

  .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-inputs);
    border-end-start-radius: var(--style-border-radius-inputs);
  }

  .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-inputs);
    border-end-end-radius: var(--style-border-radius-inputs);
  }

  .product-details .quantity-selector,
  .quick-add-modal .quantity-selector {
    border-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-minus,
  .quick-add-modal .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-buttons-primary);
    border-end-start-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-plus,
  .quick-add-modal .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-buttons-primary);
    border-end-end-radius: var(--style-border-radius-buttons-primary);
  }

  .quantity-selector .svg-wrapper {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .quantity-selector svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  :is(.quantity-minus, .quantity-plus):active .svg-wrapper {
    transform: scale(0.9);
  }

  .quantity-selector input[type='number'] {
    margin: 0;
    text-align: center;
    border: none;
    appearance: none;
    max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
    border-radius: var(--style-border-radius-buttons);
    color: var(--color-input-text);
    background-color: transparent;
  }

  /* Chrome, Safari, Edge, Opera */
  .quantity-selector input[type='number']::-webkit-inner-spin-button,
  .quantity-selector input[type='number']::-webkit-outer-spin-button {
    appearance: none;
  }

  /* Firefox */
  .quantity-selector input[type='number'] {
    appearance: textfield;
  }
/* END_SNIPPET:quantity-selector-styles */

/* START_SNIPPET:quantity-selector (INDEX:370) */
.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:371) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @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:373) */
/* 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));
    --quick-add-inset-inline-end: max(
      var(--quick-add-right),
      calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg)))
    );
    --quick-add-inset-block-end: max(
      var(--quick-add-bottom),
      calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg)))
    );

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

  /* Hide "Add" button when "Choose" button is shown */
  [data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  /* Hide "Choose" button when "Add" button is shown */
  [data-quick-add-button='add'] .quick-add__button--choose {
    display: none;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;

    &:disabled {
      opacity: var(--opacity-muted-text);
    }
  }

  button.quick-add__button {
    --quick-add-collapsed-width: var(--button-size-md);
    --quick-add-icon-width: calc(var(--button-size-md) - 4px);
    --quick-add-expanded-width: max-content;

    display: var(--quick-add-mobile-display, none);
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: linear-gradient(var(--quick-add-background, 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);
    width: var(--quick-add-collapsed-width);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    pointer-events: all;
    position: absolute;
    inset-inline-end: var(--quick-add-inset-inline-end);
    inset-block-end: var(--quick-add-inset-block-end);
    max-inline-size: calc(100% - var(--quick-add-inset-inline-end));
    min-inline-size: 0;
    white-space: nowrap;
    backdrop-filter: blur(20px) saturate(180%);
    interpolate-size: allow-keywords;

    &: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: flex;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;

      /* Explicit "disabled" rule is needed to beat the `.button:disabled { opacity: 0.5 }` rule in base.css */
      &:disabled {
        opacity: 0;
      }
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button > .add-to-cart-icon {
    flex-shrink: 0;
    width: var(--quick-add-icon-width);
    height: 100%;
  }

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

  @media screen and (min-width: 750px) {
    .quick-add__button:is(:hover, :focus-visible) {
      width: var(--quick-add-expanded-width);
      padding-inline-end: var(--padding-sm);
    }
  }

  .quick-add__button[data-added='true'] {
    width: var(--quick-add-collapsed-width);
    color: transparent;
  }

  .quick-add__button[data-added='true'] > .add-to-cart-icon {
    opacity: 0;
  }

  .quick-add__button[data-added='true'] .add-to-cart__added {
    color: var(--quick-add-foreground, var(--color-foreground));
  }

  @media (prefers-reduced-motion: no-preference) {
    button.quick-add__button {
      transition-property: scale, translate, opacity, width;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:376) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .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-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-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:377) */
.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:378) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), 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, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .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__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * 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:resource-list-styles (INDEX:379) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list(min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-modal (INDEX:382) */
/* 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);
    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-foreground);
    }
  }

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

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.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-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-foreground-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:383) */
.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:384) */
.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)
    )
    #MainContent
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:386) */
.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:388) */
.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:389) */
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:390) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-current='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-current='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-current='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* 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:392) */
/*
   * 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:394) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:summary-icon-styles (INDEX:400) */
details[open] > summary .icon-animated > svg {
    transform: rotate(180deg);
  }

  summary .svg-wrapper {
    margin-inline-start: auto;
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  /* Shared plus/minus icon animations */
  summary .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  details[open] > summary .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  details[open] > summary .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }
/* END_SNIPPET:summary-icon-styles */

/* START_SNIPPET:swatch-styles (INDEX:401) */
/* Swatches */
  .swatch {
    --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
    --min-width-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height: 16px;
    --min-width: 16px;

    /* mobile values */
    --scaling-factor: 0.5;
    --max-swatch-size: 28px;
    --max-pill-size: 20px;
    --max-filter-size: 32px;

    /* From the settings */
    --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
    --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

    /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
    --offset-scaled-width: calc(
      var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
    );
    --offset-scaled-height: calc(
      var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
    );
    --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

    /* width = min(m + sU, (m + s * W'/H' * M'), M) */
    --swatch-width: min(
      calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
      calc(var(--min-width) + var(--offset-scaled-width)),
      var(--max-swatch-size)
    );

    /* height = min(m + sV, (m + s * H'/W' * M'), M) */
    --swatch-height: min(
      calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
      calc(var(--min-height) + var(--offset-scaled-height)),
      var(--max-swatch-size)
    );

    display: block;
    background: var(--swatch-background);
    background-position: var(--swatch-focal-point, center);
    border-radius: var(--variant-picker-swatch-radius);
    border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
    width: var(--swatch-width);
    height: var(--swatch-height);

    /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
    background-size: var(--swatch-width) var(--swatch-height);

    &.swatch--unavailable {
      border-style: dashed;
    }

    &.swatch--unscaled {
      /* for when you want fixed sizing (e.g. pdp) */
      --swatch-width: var(--variant-picker-swatch-width);
      --swatch-height: var(--variant-picker-swatch-height);
    }

    &.swatch--filter {
      --swatch-width: var(--max-filter-size);
      --swatch-height: var(--max-filter-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    &.swatch--pill {
      --swatch-width: var(--max-pill-size);
      --swatch-height: var(--max-pill-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    /* swatches in filters and pills always have a border  */
    &.swatch--filter,
    &.swatch--pill {
      --style-border-swatch-width: var(--variant-picker-border-width);
      --style-border-swatch-style: var(--variant-picker-border-style);
      --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
    }

    &.swatch--variant-image {
      background-size: cover;
    }

    @media screen and (min-width: 750px) {
      /* desktop values */
      --max-swatch-size: 32px;
      --max-pill-size: 16px;
      --max-filter-size: 28px;
      --scaling-factor: 0.65;
    }
  }
/* END_SNIPPET:swatch-styles */

/* START_SNIPPET:text-block-styles (INDEX:404) */
.text-block {
    width: var(--width, 100%);
  }

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

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

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

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

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

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

  /* Hide underline unless text is using paragraph styles. The doubled class beats the global paragraph-link styles in base.css. */
  .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      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);
  }

  /* The doubled class lets these edge resets beat heading/paragraph margins without relying on source order. */
  .text-block.text-block > *:last-child,
  .text-block.text-block > *:has(+ *:last-child:empty) {
    margin-block-end: 0;
  }

  .text-block.text-block > style + *,
  .text-block.text-block > *:first-child,
  .text-block.text-block > *:first-child:empty + * {
    margin-block-start: 0;
  }
/* END_SNIPPET:text-block-styles */

/* START_SNIPPET:text-component-shimmer-styles (INDEX:405) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

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

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */

/* START_SNIPPET:text (INDEX:406) */
:root {
    --text-align-default: left;
  }

  /* Base text-block sizing, spacing, wrapping, and helper classes live in text-block-styles.liquid. */
  .text-block {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  [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, 100%);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:408) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-picker-styles (INDEX:421) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .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);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .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;
    background-color: var(--color-variant-background);
    color: inherit;
    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-picker .variant-option--buttons label:has(.swatch) {
    border-radius: var(--variant-picker-swatch-radius);
  }

  /* Variant option component */
  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;

    overflow-list::part(list) {
      padding-block: var(--overflow-list-padding-block, 0);
      padding-inline: var(--overflow-list-padding-inline, 0);
    }
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media screen and (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option--buttons legend,
  .variant-option--dropdowns > label,
  .variant-option[data-testid='variant-option-single'] {
    color: var(--variant-option-label-color, var(--color-foreground));
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued));
  }

  @media (prefers-reduced-motion: no-preference) {
    .variant-option__button-label,
    .variant-option__select-wrapper,
    .variant-option__button-label::before,
    .variant-option__button-label::after,
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }

    .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label::after {
      transition-property: clip-path;
    }

    .variant-option__button-label::before {
      transition-property: border-color;
    }

    .variant-option__select-wrapper,
    .variant-option__button-label {
      transition-property: background-color, border-color, color;
    }
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    cursor: pointer;
    display: flex;
    flex: 0 0 3.25em;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    overflow: clip;
    justify-content: center;
    min-height: 3.25em;
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    gap: 0;

    &:hover,
    &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
      --variant-picker-stroke-color: var(--color-variant-hover-border);

      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

    /* so instead use the layered background image trick */
    &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
      border-width: 0;
    }

    /* ::after/::before act as a fake border for the button style variant */

    /* ::after is the unavailable variant border that clips in */
    &:not(.variant-option__button-label--has-swatch)::before,
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: var(--options-border-width) solid var(--color-selected-variant-border);
      border-radius: inherit;
      pointer-events: none;
      z-index: 2;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
    }

    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
      inset: 0;
    }

    &:not(.variant-option__button-label--has-swatch)::before {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(0 0 0 0);
      border-color: var(--color-variant-border);
      inset: calc(var(--options-border-width) * -1);
    }

    &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
      border-color: var(--color-selected-variant-border);
    }

    /* setting left/right accounts for variant buttons of different widths */
    &:not(:has(:checked)):has(~ label > :checked),
    &:has(:checked):has(~ label > [data-previous-checked='true']) {
      .variant-option__button-label__pill {
        right: 0;
        left: unset;
      }
    }

    &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
    &:has(:checked) ~ label {
      .variant-option__button-label__pill {
        left: 0;
        right: unset;
      }
    }

    &:not(:has(:checked)):has(~ label > :checked) {
      --pill-offset: calc(100% + 1px);
    }

    &:has(:checked) ~ label {
      --pill-offset: calc(-100% - 1px);
    }

    &:has([data-current-checked='true']):first-of-type
      ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
    &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
      --clip: 0 0 0 100%;
    }

    &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
        .variant-option__button-label--has-swatch
      ),
    &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
      --clip: 0 100% 0 0;
    }

    &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  /* wrap around only for 3 or more variants in a row */

  /* the more complex selector rules here produce the wrap around effect for first/last variants */
  .variant-option--buttons:has(:nth-of-type(3)) {
    .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
      --pill-offset: calc(100% + 1px);
    }

    .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
        ~ label:last-of-type > :checked
      ) {
      --pill-offset: calc(-100% - 1px);
    }
  }

  .variant-option__button-label__pill {
    background: var(--color-selected-variant-background);
    position: absolute;
    top: calc(var(--options-border-width) * -1);
    bottom: calc(var(--options-border-width) * -1);
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    transform: translateX(var(--pill-offset, 0));
  }

  .variant-option__button-label__text {
    pointer-events: none;
    text-align: start;
    text-wrap: auto;
    z-index: 2;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);

    padding: 0;
    border: none;
    flex-basis: auto;
    min-height: auto;
  }

  /* Override global label:has(input) display rule with higher specificity */
  .variant-option__button-label--has-swatch:has(input) {
    display: block;
  }

  .variant-option__button-label:has(:checked) {
    --variant-picker-stroke-color: var(--color-selected-variant-border);

    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label:has(:checked):hover {
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);

    .variant-option__button-label__pill {
      background-color: var(--color-selected-variant-hover-background);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid var(--color-variant-hover-border);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg,
  .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
    stroke: rgb(var(--color-variant-text-rgb) / var(--opacity-subdued-text));
  }

  /* Disable the duplicate overlay line so the subdued stroke doesn't double up */
  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg line:last-of-type {
    stroke: none;
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-selected-variant-border);

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-strikethrough-color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));

    background-color: var(--color-selected-variant-background);
    color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked):hover {
    background-color: var(--color-selected-variant-hover-background);
    color: var(--color-selected-variant-hover-text);
  }

  .variant-option__button-label input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .variant-option__button-label svg {
    position: absolute;
    left: var(--options-border-width);
    top: var(--options-border-width);
    height: calc(100% - (var(--options-border-width) * 2));
    width: calc(100% - (var(--options-border-width) * 2));
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
    stroke: var(--variant-strikethrough-color, rgb(var(--color-variant-text-rgb) / var(--opacity-60)));

    line {
      stroke-width: var(--options-border-width);
    }

    /* The second stroke line exists for "motion overlay". Disabled for swatches, remove line to avoid overlapping lines  */
    line:last-of-type {
      stroke: none;
    }
  }

  /* Override for swatch labels to maintain block display */
  .variant-option__button-label--has-swatch:has(input[type='radio']) {
    display: block;
  }

  /* Swatches do not take a background-color since a transparent or missing swatch would end up filled */
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked),
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked):hover {
    background-color: inherit;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:422) */
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-background-styles (INDEX:423) */
.video-background,
  .video-background * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .video-background--cover * {
    object-fit: cover;
  }

  .video-background--contain * {
    object-fit: contain;
  }

  @media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:video-background-styles */

/* START_SNIPPET:video-placeholder-styles (INDEX:424) */
.video-placeholder-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  :not(deferred-media) > .video-placeholder-wrapper {
    width: var(--video-placeholder-width);
  }

  .video-placeholder-wrapper > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .video-placeholder-wrapper.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  .video-placeholder-wrapper__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-placeholder-wrapper__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:video-placeholder-styles */

/* START_SNIPPET:volume-pricing-info (INDEX:426) */
.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-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-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */

/* START_SNIPPET:yc-checker-motif (INDEX:428) */
/* style.css `.sg-checker` — pinned to the host's bottom edge, behind the
     content (the host's container carries z-index 1). */
  .yc-checker {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 140px;
    pointer-events: none;
  }

  .yc-checker--left {
    right: auto;
    left: 0;
  }

  /* style.css `.checker-svg`. Horizon's base.css sets `svg { max-width: 100% }`,
     which is what this already wants, but the size is stated outright so the
     band cannot collapse if that reset changes. */
  .yc-checker__svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* responsive.css: "decorative shapes add clutter on small screens". */
  @media (max-width: 640px) {
    .yc-checker {
      display: none;
    }
  }
/* END_SNIPPET:yc-checker-motif */

/* START_SNIPPET:yc-judgeme-styles (INDEX:434) */
/* ---- Judge.me's own theming tokens ------------------------------------
     The widget colours its text with INLINE `color: var(--jm-…)` styles, which
     no ordinary stylesheet rule can outrank. Those vars are its supported
     theming hook, so the palette is set through them rather than by overriding
     every text rule.

     Judge.me declares ~45 of these tokens INLINE on .jm-review-widget, fed from
     the widget customiser in its admin, so they must be overridden on that same
     element — declaring them on the container is shadowed by the nearer inline
     declaration. `!important` is what beats a non-important inline one.

     NOTE: these five are really Judge.me *settings*. Setting them in the app's
     widget customiser instead would apply everywhere the widget appears and let
     this block be deleted. Overridden here so the PDP matches the reference
     without waiting on the app. */
  #judgeme_product_reviews .jm-review-widget {
    --jm-review-widget-text-color: #2e2e2e !important;
    /* The reference uses #9a9a9a here, which is only 2.81:1 on white at 11px —
       a WCAG 2.1 AA failure (1.4.3 needs 4.5:1 for normal text), and this var
       also colours each review's location/date line. Darkened to the lightest
       grey that clears AA (4.55:1). Deliberate one-step deviation from the
       reference: the brief mandates AA, and the difference is imperceptible. */
    --jm-review-widget-lighter-text-color: #767676 !important;
    --jm-review-widget-star-and-histogram-color: #0fb654 !important;
    --jm-review-widget-button-color: #1c1c1c !important;
    --jm-review-widget-bar-chart-height: 7px !important;
  }

  /* ---- header ---------------------------------------------------------- */

  /* Reference centres the whole header block. */
  #judgeme_product_reviews .jm-review-widget-header__summary-section,
  #judgeme_product_reviews .jm-review-widget-header__main-content {
    justify-content: center;
  }

  #judgeme_product_reviews .jm-review-widget-header__main-content {
    gap: 64px;
  }

  /* 4.6 — 30px/700; "902 reviews" — 15px muted. Both are <p class="jm-text">
     siblings of the star rating, so they are told apart by type index. */
  #judgeme_product_reviews .jm-average-rating-display p.jm-text:nth-of-type(1) {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #2e2e2e;
  }

  #judgeme_product_reviews .jm-average-rating-display p.jm-text:nth-of-type(2) {
    font-size: 15px;
    font-weight: 400;
    color: #6b6b6b;
  }

  /* Star size is per-context in the reference — one big star beside the score,
     small ones in the histogram rows, mid-size on each review. Sizing
     `.jm-star-rating` alone would blow up the histogram and wrap its rows. */
  #judgeme_product_reviews .jm-star-rating {
    font-size: 13px;
  }

  #judgeme_product_reviews .jm-average-rating-display .jm-star-rating {
    font-size: 26px;
  }

  #judgeme_product_reviews .jm-review-item .jm-star-rating {
    font-size: 15px;
  }

  /* ---- rating histogram ------------------------------------------------ */

  /* The reference's bar block is 315px wide; Judge.me's is ~250px, which is too
     narrow for a fixed 190px track and makes every row wrap.
     Width, not flex-basis: under 768px Judge.me stacks the header into a
     column, where a 315px basis became the histogram's height and left a
     ~90px gap under the bars. `flex: 0 0 auto` still overrides Judge.me's own
     flex value so the width is honoured in the desktop row. */
  #judgeme_product_reviews .jm-histogram {
    flex: 0 0 auto;
    width: 315px;
    gap: 4px;
    max-width: 100%;
  }

  #judgeme_product_reviews .jm-histogram-row {
    flex-wrap: nowrap;
    gap: 12px;
  }

  /* Track is a flat grey pill in the reference, not a tinted green one.
     It is a flex item with `flex: 1 1 0%`, so a plain `width` is ignored —
     the fixed 190px has to come through flex-basis. */
  #judgeme_product_reviews .jm-progress-bar {
    flex: 0 0 190px;
    height: 7px;
    background-color: #ececec;
    border-radius: 999px;
    overflow: hidden;
  }

  #judgeme_product_reviews .jm-progress-bar__fill {
    height: 7px;
    background-color: #0fb654;
    border-radius: 999px;
  }

  #judgeme_product_reviews .jm-histogram-row__frequency {
    font-size: 13px;
    color: #2e2e2e;
  }

  /* ---- buttons --------------------------------------------------------- */

  /* "Write a review" and "Show more": near-black pills, 14px/600. */
  #judgeme_product_reviews .jm-action-buttons .jm-button,
  #judgeme_product_reviews .jm-load-more-pagination .jm-button {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background-color: #1c1c1c;
    border: 1px solid #1c1c1c;
    border-radius: 999px;
  }

  #judgeme_product_reviews .jm-action-buttons .jm-button .jm-text,
  #judgeme_product_reviews .jm-load-more-pagination .jm-button .jm-text {
    font-size: 14px;
    font-weight: 600;
  }

  /* ---- AI summary ------------------------------------------------------ */

  /* Judge.me puts the disclaimer before the title in the DOM; the reference
     reads title-left / note-right, so the row is reversed rather than the
     nodes moved (this file never touches Judge.me's DOM). */
  #judgeme_product_reviews .jm-ai-insights__header {
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }

  #judgeme_product_reviews .jm-ai-insights__header > p.jm-text {
    font-size: 16px;
    font-weight: 700;
    color: #2e2e2e;
  }

  #judgeme_product_reviews .jm-ai-disclaimer,
  #judgeme_product_reviews .jm-ai-disclaimer .jm-text {
    font-size: 11px;
    color: #767676; /* AA-safe grey — see the token block above */
  }

  #judgeme_product_reviews .jm-ai-insights > .jm-box > .jm-stack > p.jm-text {
    font-size: 13px;
    line-height: 1.7;
    color: #2e2e2e;
  }

  /* ---- toolbar --------------------------------------------------------- */

  /* Judge.me right-aligns the toolbar; the reference centres it. The wrapper is
     what carries `justify-content: flex-end`, so centring .jm-filters alone
     only centres it inside an already right-aligned block. */
  #judgeme_product_reviews .jm-review-widget-header__filters-wrapper {
    justify-content: center;
  }

  #judgeme_product_reviews .jm-filters {
    justify-content: center;
    gap: 12px;
  }

  #judgeme_product_reviews .jm-search-bar {
    width: 300px;
    max-width: 100%;
    height: 38px;
    padding: 0 16px;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
  }

  #judgeme_product_reviews .jm-search-bar__input {
    font-size: 13px;
    color: #2e2e2e;
    background-color: transparent;
    border: 0;
  }

  /* "Filters" and the sort dropdown: white outlined pills. */
  #judgeme_product_reviews .jm-custom-answer-filter,
  #judgeme_product_reviews .jm-sort-filter {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 8px 16px;
    font-size: 13px;
    color: #2e2e2e;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
  }

  #judgeme_product_reviews .jm-custom-answer-filter .jm-text,
  #judgeme_product_reviews .jm-sort-filter__select {
    font-size: 13px;
    color: #2e2e2e;
  }

  /* The select carries Judge.me's own block padding, which pushes its text off
     the pill's vertical centre once the pill is given a fixed 38px height. */
  #judgeme_product_reviews .jm-sort-filter__select {
    height: auto;
    padding-block: 0;
    line-height: 1.4;
    background-color: transparent;
    border: 0;
  }

  /* ---- review list ----------------------------------------------------- */

  /* Reference rules every row top and bottom in a light grey; Judge.me only
     draws a heavier bottom border. */
  #judgeme_product_reviews .jm-review-item {
    padding: 20px 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
  }

  #judgeme_product_reviews .jm-review-item + .jm-review-item {
    border-top: 0;
  }

  #judgeme_product_reviews .jm-reviewer-info__details {
    font-size: 14px;
  }

  #judgeme_product_reviews .jm-review-content {
    font-size: 14px;
    color: #2e2e2e;
  }

  /* The variant chip under each review — pink in the reference. */
  #judgeme_product_reviews .jm-product-variant-card {
    padding: 8px 12px;
    background-color: #fdeef5;
    border: 0;
    border-radius: 6px;
  }

  #judgeme_product_reviews .jm-product-variant-card__variant-title {
    font-size: 13px;
    color: #2e2e2e;
    text-transform: none;
  }

  #judgeme_product_reviews .jm-product-variant-card__thumbnail {
    width: 34px;
    height: 34px;
  }

  #judgeme_product_reviews .jm-product-variant-card__thumbnail img {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }

  /* ---- responsive ------------------------------------------------------ */

  @media screen and (max-width: 749px) {
    #judgeme_product_reviews .jm-review-widget-header__main-content {
      gap: 24px;
    }

    #judgeme_product_reviews .jm-progress-bar {
      flex-basis: 140px;
    }

    #judgeme_product_reviews .jm-search-bar {
      width: 100%;
    }
  }
/* END_SNIPPET:yc-judgeme-styles */

/* START_SNIPPET:yc-scroll-carousel-arrows (INDEX:436) */
/* Centred on the track, above its 15px bottom gutter. White on 70% ink
     reads >= 4.5:1 over any photo; the ring is the focus indicator. */
  .yc-carousel-arrow {
    position: absolute;
    top: calc(50% - 7.5px);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #ffffff;
    background-color: rgb(46 46 46 / 70%);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
  }

  .yc-carousel-arrow[hidden] {
    display: none;
  }

  .yc-carousel-arrow:disabled {
    visibility: hidden;
  }

  .yc-carousel-arrow:hover {
    background-color: rgb(46 46 46 / 90%);
  }

  .yc-carousel-arrow:focus-visible {
    outline: 3px solid #4036d6;
    outline-offset: 2px;
  }

  .yc-carousel-arrow--prev {
    left: 20px;
  }

  .yc-carousel-arrow--next {
    right: 20px;
  }

  .yc-carousel-arrow__icon {
    width: 20px;
    height: 20px;
  }
/* END_SNIPPET:yc-scroll-carousel-arrows */

/* START_SNIPPET:yc-verified-badge (INDEX:438) */
.yc-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
  }

  .yc-verified__icon {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    color: #ff92eb;
  }
/* END_SNIPPET:yc-verified-badge */

/* START_SNIPPET:yc-wave-divider (INDEX:440) */
/* .wave-divider (531-538) */
  .yc-wave {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
  }

  /* .wave-divider__svg (540-545). max-width: none undoes Horizon's global
     `svg { max-width: 100% }` (base.css) — the reference has no such reset, and
     the 200% width is the whole point. */
  .yc-wave__svg {
    display: block;
    width: 200%;
    max-width: none;
    height: 90px;
    animation: yc-wave-slide 14s linear infinite;
  }

  .yc-wave__svg path {
    fill: var(--yc-wave-fill, #ffffff);
  }

  /* .wave-divider--top (550-554): on the top edge, flipped to curve upward. */
  .yc-wave--top {
    top: -1px;
    bottom: auto;
    transform: scaleY(-1);
  }

  /* .wave-divider--top::before (562-570): the seam cover. The element is
     flipped, so `bottom` is visually the top. */
  .yc-wave--top::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 14px;
    background-color: var(--yc-wave-fill, #ffffff);
  }

  .yc-wave--static .yc-wave__svg {
    animation: none;
  }

  @keyframes yc-wave-slide {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yc-wave__svg {
      animation: none;
    }
  }
/* END_SNIPPET:yc-wave-divider */