/** Shopify CDN: Minification failed

Line 5727:2 Unexpected "{"
Line 5727:3 Expected identifier but found "%"
Line 5728:10 Unexpected "901px"
Line 5744:3 Expected identifier but found "%"

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

  [data-header-rows='single'] .header__underlay-closed {
    background: var(--color-background-top-row);
  }

  [data-header-rows='single'] .header__underlay-open {
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-submenu) var(--top-row-height) 100%
    );
  }

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

      /* Match the page gutter so edge icons visually align with in-flow content.
         --page-margin already includes the larger safe-area inset at this breakpoint. */
      padding-inline: var(--page-margin);

      .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__icon--menu {
        justify-content: flex-start;
        padding-inline: 0;
      }

      header-actions {
        grid-area: rightB;
        justify-content: flex-end;
      }
    }
  }

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

    /* Match the page gutter so edge icons visually align with in-flow content.
       --page-margin already includes the larger safe-area inset at this breakpoint. */
    padding-inline: var(--page-margin);

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

    /* Pin glyphs to the content edge of the 44px bookend; keep the full tap target */
    .header__icon--menu {
      justify-content: flex-start;
      padding-inline: 0;
    }

    header-actions {
      grid-area: rightB;
      justify-content: flex-end;
    }
  }

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

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

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

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

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

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

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

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

  .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. Keep a class at the end of this selector: a `*` there
  gives the browser nothing to filter on, and it then recalculates the styles of every
  element below. */
  body:has(#header-component[transparent]) #header-group > .shopify-section: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);
  }
/* 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;
  }

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

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

    /*
     * App blocks own their interactive markup, and an app is free to render it into a shadow
     * root that no selector here can reach. Restoring pointer events on the app block wrapper
     * covers both cases, because pointer-events inherits into the shadow tree.
     */
    .shopify-app-block {
      pointer-events: auto;
    }
  }

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

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

  .hero__blurred-image--mobile {
    display: block;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX: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 */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

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

    /* Keep the responsive image sizes above in sync with this gap. */
    --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:26) */
.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:27) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

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

/* START_SECTION:product-hotspots (INDEX:30) */
/* 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:31) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: max(20px, var(--safe-area-inset-bottom));
    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;

      /* Full-bleed bar touches the physical bottom edge (viewport-fit=cover); keep the
         controls above the home indicator while the background fills the safe area */
      padding-block-end: calc(var(--padding-sm) + var(--safe-area-inset-bottom));

      &::before {
        --border: 1px;
      }
    }

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

    .sticky-add-to-cart__info[data-has-image='false'] {
      padding-left: 0;
    }

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

    .sticky-add-to-cart__button {
      width: var(--height-buy-buttons);
    }

    sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
      display: initial;
    }

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:pruvit-announcements (INDEX:34) */
/* The bar's height, published while it is on screen, so the bands that rise
     under the chrome rise under this too and pad their content clear of it.
     Fixed, not measured: one line by design, so there is nothing to wait for
     and nothing moves on load. */
  /* The band is the box plus the air above it: 8px + 44px, 6px + 40px on a
     phone. A contained, rounded box rather than a full-width strip -- Craig,
     2026-10-14, "so it feels less like a jarring break below the menu". */
  html:has([data-pruvit-ann]:not([hidden])) {
    --pruvit-ann-h: 52px;
    --pruvit-ann-gap: 8px;
  }

  @media screen and (max-width: 749px) {
    html:has([data-pruvit-ann]:not([hidden])) {
      --pruvit-ann-h: 46px;
      --pruvit-ann-gap: 6px;
    }
  }

  /* Above the band that rises under it; below the pinned header group (70),
     which it scrolls up behind. */
  .pruvit-ann {
    position: relative;
    z-index: 3;
    height: var(--pruvit-ann-h, 44px);
    overflow: hidden;
  }

  .pruvit-ann[hidden],
  .pruvit-ann__item[hidden],
  .pruvit-ann__b[hidden] {
    display: none;
  }

  /* The band itself paints nothing: whatever is behind the page -- the hero
     rising under the chrome, or the page ground -- shows round the box. */
  .pruvit-ann__item {
    width: min(72rem, 100% - var(--page-margin, 16px) * 2);
    height: calc(100% - var(--pruvit-ann-gap, 8px));
    margin: var(--pruvit-ann-gap, 8px) auto 0;
    border-radius: var(--r-sm);
    overflow: hidden;
    animation: pruvit-ann-in 0.35s ease;
  }

  @keyframes pruvit-ann-in {
    from {
      opacity: 0;
    }
  }

  .pruvit-ann__in {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding-inline: 16px 10px;
    font-size: 14px;
    line-height: 1.3;
  }

  .pruvit-ann__i {
    flex: none;
    display: grid;
    place-items: center;
  }

  .pruvit-ann__i svg {
    width: 18px;
    height: 18px;
  }

  /* One line. Centred when it fits; a message that does not fit scrolls
     (pruvit-announcements.js), or ends in an ellipsis where motion is off. */
  .pruvit-ann__msg {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
  }

  .pruvit-ann__msg.is-marquee {
    text-align: start;
    text-overflow: clip;
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }

  .pruvit-ann__text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .pruvit-ann__msg.is-marquee .pruvit-ann__text {
    display: inline-flex;
    gap: 48px;
    animation: pruvit-ann-marquee var(--ann-dur, 12s) linear infinite;
  }

  /* Held (pointer or focus inside) stops the text without touching the
     button, whose icon shows only what the visitor chose. */
  .pruvit-ann.is-paused .pruvit-ann__text,
  .pruvit-ann.is-held .pruvit-ann__text {
    animation-play-state: paused;
  }

  @keyframes pruvit-ann-marquee {
    to {
      transform: translateX(var(--ann-shift, -50%));
    }
  }

  /* Space Mono, the theme's technical-label face -- Craig, 2026-10-14, "for
     some variety". The label is set as the other mono labels are (uppercase,
     small, spaced); the digits are monospaced already, so they no longer
     need tabular figures to stop the line twitching every second. */
  .pruvit-ann__cd {
    flex: none;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono--family);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0.02em;
  }

  /* Bold digits, regular label: the time is the news, the label is the
     caption. Space Mono 700 is self-hosted for this (pruvit-fonts). */
  .pruvit-ann__cd-v {
    font-weight: 700;
  }

  .pruvit-ann__cd-l {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
  }

  .pruvit-ann__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding-inline: 14px;
    border-radius: 999px;
    font-family: var(--font-heading--family);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  .pruvit-ann__ctl {
    flex: none;
    display: inline-flex;
    gap: 2px;
    margin-inline-end: -6px;
  }

  .pruvit-ann__b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.8;
    cursor: pointer;
  }

  .pruvit-ann__b:hover,
  .pruvit-ann__b:focus-visible {
    opacity: 1;
    background: rgb(0 0 0 / 0.08);
  }

  .pruvit-ann__b svg {
    width: 16px;
    height: 16px;
  }

  .pruvit-ann__b .pruvit-ann__pl,
  .pruvit-ann.is-paused .pruvit-ann__b .pruvit-ann__pz {
    display: none;
  }

  .pruvit-ann.is-paused .pruvit-ann__b .pruvit-ann__pl {
    display: block;
  }

  /* ---- the four presets ----
     Text first: every pair below is AA for body text, measured against the
     tokens. The button is the strongest thing in each, so it is the action. */

  /* Offer: the survey's offer box. Navy on --flag-soft 13.45. */
  .pruvit-ann--offer {
    background: var(--flag-soft);
    color: var(--color-foreground);
  }

  .pruvit-ann--offer .pruvit-ann__i {
    color: var(--flag-ink);
  }

  /* Info: navy on --ice 12.5; the icon in the accent's text shade. */
  .pruvit-ann--info {
    background: var(--ice);
    color: var(--color-foreground);
  }

  .pruvit-ann--info .pruvit-ann__i {
    color: var(--accent-1-ink);
  }

  .pruvit-ann--offer .pruvit-ann__btn,
  .pruvit-ann--info .pruvit-ann__btn {
    background: var(--color-foreground);
    color: #fff;
  }

  /* Brand: the accent fill with its own label colour, so it follows a
     referrer's palette (white on Royal, near-black on periwinkle) and stays
     readable on every one of them. */
  .pruvit-ann--brand {
    background: var(--accent-1);
    color: var(--accent-1-on);
  }

  .pruvit-ann--brand .pruvit-ann__btn {
    background: var(--accent-1-on);
    color: var(--accent-1);
  }

  /* Dark: white on navy 16.13; the accent as it reads on navy. */
  .pruvit-ann--dark {
    background: #16203a;
    color: #fff;
  }

  .pruvit-ann--dark .pruvit-ann__i {
    color: var(--accent-1-bright);
  }

  .pruvit-ann--dark .pruvit-ann__btn {
    background: var(--accent-1);
    color: var(--accent-1-on);
  }

  .pruvit-ann--dark .pruvit-ann__b:hover,
  .pruvit-ann--dark .pruvit-ann__b:focus-visible {
    background: rgb(255 255 255 / 0.14);
  }

  /* A phone: the line is the message. The icon and the countdown's label go,
     the digits stay; the button stays because it is the point. */
  @media screen and (max-width: 749px) {
    .pruvit-ann__in {
      gap: 8px;
      padding-inline: 12px 6px;
      font-size: 13px;
    }

    .pruvit-ann__i,
    .pruvit-ann__cd-l {
      display: none;
    }

    .pruvit-ann__btn {
      min-height: 26px;
      padding-inline: 10px;
      font-size: 12px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-ann__item {
      animation: none;
    }
  }
/* END_SECTION:pruvit-announcements */

/* START_SECTION:pruvit-cart-page (INDEX:35) */
.pruvit-cart-page {
    min-height: 420px;
    padding-block: 20px 72px;
  }
/* END_SECTION:pruvit-cart-page */

/* START_SECTION:pruvit-cart-referrer (INDEX:36) */
.pruvit-cref[hidden] {
    display: none;
  }

  .pruvit-cref {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 28px 0;
  }

  .pruvit-cref__av {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ice, #d9e2ef);
    color: var(--navy, #16203a);
    font-size: 15px;
    font-weight: 600;
  }

  .pruvit-cref__av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pruvit-cref__t {
    margin: 0;
    font-size: 15px;
    color: var(--slate, #5d6b82);
  }

  .pruvit-cref__t b {
    font-weight: 600;
    color: var(--navy, #16203a);
  }
/* END_SECTION:pruvit-cart-referrer */

/* START_SECTION:pruvit-close (INDEX:37) */
/* isolation is load-bearing here for the same reason it is on the band
     wrapper: the photo and the scrim are positioned children, and without a
     stacking context of their own they paint over the section below. */
  .pruvit-close {
    isolation: isolate;
    position: relative;
    overflow: hidden;
    min-height: clamp(440px, 52vw, 580px);
    display: grid;
    align-items: center;
    background: var(--pruvit-scrim);
    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);
    padding-block-end: var(--r-md);
  }

  /* Off-centre on both axes: the sachets sit right of frame and the court line
     runs low, so a centred crop loses both. */
  .pruvit-close__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 54%;
  }

  /* The scrim is the band's ground, not a darkening layer. It runs from nearly
     opaque under the words to nothing at the far edge, so the photograph is
     only ever visible where no text is over it. */
  .pruvit-close::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      95deg,
      rgb(var(--pruvit-scrim-rgb) / 0.95) 0%,
      rgb(var(--pruvit-scrim-rgb) / 0.88) 34%,
      rgb(var(--pruvit-scrim-rgb) / 0.34) 68%,
      rgb(var(--pruvit-scrim-rgb) / 0) 100%
    );
  }

  .pruvit-close__in {
    position: relative;
    z-index: 2;
    padding-block: 70px;
  }

  .pruvit-close__heading {
    font-family: var(--font-heading--family);
    font-size: clamp(30px, 4.4vw, 54px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-wrap: balance;
    max-width: 20ch;
    margin: 0;
  }

  .pruvit-close__heading :is(em, i) {
    font-family: var(--font-accent--family);
    font-style: var(--font-accent--style);
    font-weight: var(--font-accent--weight);
    font-size: 1.06em;
    letter-spacing: -0.005em;
  }

  .pruvit-close__text {
    margin: 18px 0 0;
    max-width: 52ch;
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    text-wrap: pretty;
  }

  .pruvit-close__cta {
    margin-block-start: 32px;
  }

  .pruvit-close__alt {
    margin: 20px 0 0;
    max-width: 66ch;
    font-size: 14.5px;
    color: var(--ink-soft);
    text-wrap: pretty;
  }

  .pruvit-close__alt a {
    color: var(--accent-1-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .pruvit-close__alt a:hover {
    color: var(--color-foreground);
  }

  /* On a phone the words fill the width, so a horizontal fade would put the
     last line of the paragraph over bare photograph. The gradient turns
     vertical and nearly flat, and the crop drops to keep the sachets in frame
     above the text rather than behind it. */
  @media screen and (max-width: 760px) {
    .pruvit-close__photo {
      object-position: 72% 86%;
    }

    .pruvit-close::after {
      background: linear-gradient(
        180deg,
        rgb(var(--pruvit-scrim-rgb) / 0.94) 0%,
        rgb(var(--pruvit-scrim-rgb) / 0.92) 100%
      );
    }

    .pruvit-close__heading,
    .pruvit-close__text,
    .pruvit-close__alt {
      max-width: none;
    }
  }
/* END_SECTION:pruvit-close */

/* START_SECTION:pruvit-collection (INDEX:38) */
.pruvit-coll {
    padding-block: var(--sec-pad);
  }

  /* Only when the page opens with breadcrumbs.

     The section padding is tuned for a band that opens with a heading. A line
     of breadcrumbs is not content, it is navigation continuing from the menu
     above it, so it belongs near that menu — a band's worth of air above it
     reads as a gap rather than as rhythm.

     Kept off the plain case on purpose: with breadcrumbs switched off the
     heading is the first thing again, and it wants the full measure. */
  .pruvit-coll[data-crumbs] {
    padding-block-start: clamp(18px, 2vw, 28px);
  }

  /* Breadcrumbs: quiet, small, and above the title rather than beside it. */
  .pruvit-crumbs {
    /* The air the wrapper above gave up moves here, between the crumbs and the
       title, so the line sits by the menu without the heading sitting on it. */
    margin-block-end: clamp(20px, 2.6vw, 34px);
  }

  .pruvit-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--slate);
  }

  .pruvit-crumbs li {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  /* The separator is drawn, not written. As a character it would be read out
     between the two names and could be selected along with them; as a rotated
     corner it is punctuation the page draws and the reader never hears. */
  .pruvit-crumbs li + li::before {
    content: '';
    flex: none;
    width: 5px;
    height: 5px;
    border-inline-end: 1.5px solid currentColor;
    border-block-start: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
  }

  .pruvit-crumbs a {
    color: inherit;
    text-decoration: none;
    transition: color 0.16s ease;
  }

  .pruvit-crumbs a:hover {
    color: rgb(var(--color-foreground-rgb));
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* The page you are on is stated rather than linked, so it carries the weight
     and no hover. */
  .pruvit-crumbs [aria-current='page'] {
    color: rgb(var(--color-foreground-rgb));
    font-weight: 600;
  }

  .pruvit-coll__head {
    max-width: 58ch;
    /* The gap between what the page says it is and the controls for narrowing
       it. At 28px the description and the filter row read as one block; the
       toolbar is a different kind of thing and wants to be seen as one.
       Scales a little, so a phone does not spend 40px on a seam. */
    margin-block-end: clamp(32px, 3.2vw, 44px);
  }

  /* Matched to the landing page rather than set on its own. pruvit-close and
     pruvit-marquee, the two band headings a visitor meets on the way here, both
     run to about 52-54px at 700 with tracking near -0.025em. This was capped at
     46px and set at 800, so it arrived smaller and denser than the headings it
     follows — a page title that reads as subordinate to the bands above it. */
  .pruvit-coll__h {
    color: inherit;
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(32px, 4.8vw, 54px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
  }

  .pruvit-coll__desc {
    margin-block-start: 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  .pruvit-coll__desc > :first-child {
    margin-block-start: 0;
  }

  .pruvit-coll__desc > :last-child {
    margin-block-end: 0;
  }

  .pruvit-coll__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-block-end: 22px;
  }

  .pruvit-coll__left,
  .pruvit-coll__right {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .pruvit-coll__filter {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
  }

  .pruvit-coll__filter:hover {
    border-color: var(--slate);
  }

  .pruvit-coll__filter svg {
    width: 16px;
    height: 16px;
  }

  /* The result count, off screen but still in the accessibility tree. Clipped
     rather than display: none, which would take it out of both. */
  /* Pagination. The markup is Shopify's default_pagination, which emits
     span.page / span.page > a / span.next, so the rules have to target both the
     span and the link inside it.

     This had no styling at all until the search page went in. Nothing was
     visibly wrong because the one collection on this store fits on a single
     page, so the nav never rendered — search is the first page here with more
     results than fit, and it arrived as a bare "1 2 Next »" run of text. */
  .pruvit-coll__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-block-start: clamp(32px, 4vw, 52px);
  }

  .pruvit-coll__pages .page,
  .pruvit-coll__pages .prev,
  .pruvit-coll__pages .next {
    display: inline-flex;
  }

  /* 40px of target on every one of them, which a bare anchor around a digit
     does not give a thumb. */
  .pruvit-coll__pages :is(.page, .prev, .next) > a,
  .pruvit-coll__pages .page.current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    transition: background 0.18s ease;
  }

  .pruvit-coll__pages :is(.page, .prev, .next) > a:hover {
    background: var(--ice-soft);
  }

  .pruvit-coll__pages .page.current {
    background: #16203a;
    color: #fff;
  }

  .pruvit-coll__pages :is(.page, .prev, .next) > a:focus-visible {
    outline: 2px solid var(--accent-1);
    outline-offset: 2px;
  }

  .pruvit-coll__count {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Filters, Show SmartShip pricing and the chosen sort are three controls in
     one row, and they were speaking in three different voices: 14px/600 ink,
     13.5px/normal slate, and 14px/normal ink. One voice for all three — the
     Filters button's, since it is the one with a border around it and therefore
     the one that sets the row's weight. */
  .pruvit-coll__ss-l {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
  }

  .pruvit-coll__ss {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }

  /* The VIP's statement, where everyone else gets the switch.

     Borrows the card's applied-note language deliberately — same green, same
     check drawn the same way — so the toolbar and the cards under it are
     making one statement rather than two that happen to agree. Sized to the
     toolbar's voice, 14/600, rather than the card's 12.

     A span, not a disabled button. A disabled switch looks pressable, refuses
     the press, and is either a tab stop that does nothing or is skipped by a
     keyboard entirely. There is no state here to change, so there is no
     control. */
  .pruvit-coll__vip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--save-ink);
  }

  .pruvit-coll__vip::before {
    content: '';
    flex: none;
    width: 13px;
    height: 13px;
    background: currentColor;
    /* The same check the card's note uses, as a mask so it takes the line's
       own colour without a second colour to keep in step. */
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .pruvit-coll__sort {
    display: inline-flex;
    align-items: center;
  }

  /* Two background images rather than an icon element, because nothing can be
     placed inside a select — it renders its own selected option and ignores
     any markup you put around it. The existing chevron was already drawn this
     way, so the glyph joins it: sort on the left, chevron on the right, and
     the padding opens up to clear both.

     Three descending rules, deliberately not another funnel. The Filters
     button beside it is a funnel, and at 16px two line icons of the same
     family are told apart by silhouette before anything else. */
  .pruvit-coll__sort select {
    appearance: none;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background-color: #fff;
    padding: 10px 34px 10px 40px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    /* inherit, the way .pruvit-coll__filter does it. --ink was never a token in
       this theme — only --slate is, built from --color-foreground-rgb — so
       var(--ink) was invalid and fell through to whatever it inherited. */
    color: inherit;
    cursor: pointer;
    background-image:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B84' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316203A' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 6.5h14M4 12h9M4 17.5h5'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: right 12px center, left 14px center;
    background-size: 14px, 16px;
  }

  /* On a phone both controls drop to their glyph.

     "Filters" plus "Sort by" plus whichever sort is current was most of the
     row, for two controls a shopper touches once if at all, and the glyphs are
     what the eye goes to first anyway. 44px square is the tap-target floor,
     and squaring them makes the pair the same size as each other, which pills
     sized by their own text never are.

     Same 900px line the card disc uses, so the whole grid changes character at
     one width rather than three. */
  @media screen and (max-width: 900px) {
    .pruvit-coll__filter-l {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .pruvit-coll__filter {
      justify-content: center;
      gap: 0;
      width: 44px;
      height: 44px;
      padding: 0;
    }

    .pruvit-coll__sort select {
      width: 44px;
      height: 44px;
      padding: 0;
      /* The current sort is the select's own content, not markup, so there is
         nothing to hide — it goes transparent and the glyph, being a
         background, stays. */
      color: transparent;
      /* Chevron dropped. There is no room for it beside the glyph at 44px, and
         at this size the control reads as a button rather than a field. */
      background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316203A' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 6.5h14M4 12h9M4 17.5h5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 18px;
    }

    /* Chromium hands the popup list the select's own colour, so the
       transparent text above would have taken every option with it and left a
       dropdown of blank rows. */
    .pruvit-coll__sort option {
      color: rgb(var(--color-foreground-rgb));
    }

    /* The VIP line is wider than the switch it replaces, and at 360px — a
       Galaxy and most mid-range Androids — it put the toolbar onto two rows by
       seven pixels. Which would have meant a VIP getting a differently shaped
       toolbar from everyone else, the precise thing this line exists to avoid.
       A point off the type and one off the gap is enough. */
    .pruvit-coll__vip {
      font-size: 13px;
      gap: 6px;
    }
  }

  /* ---- filter drawer ---- */
  .pruvit-filt[hidden] {
    display: none;
  }

  .pruvit-filt__bd {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--scrim-drawer, rgba(14, 20, 32, 0.42));
    backdrop-filter: var(--scrim-blur, blur(3px));
    opacity: 0;
    transition: opacity 0.26s ease;
  }

  .pruvit-filt.is-open .pruvit-filt__bd {
    opacity: 1;
  }

  .pruvit-filt__panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 91;
    width: min(390px, 88vw);
    display: flex;
    flex-direction: column;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    overscroll-behavior: contain;
  }

  .pruvit-filt.is-open .pruvit-filt__panel {
    transform: translateX(0);
    box-shadow: 30px 0 80px -40px rgba(14, 20, 32, 0.5);
  }

  /* The menu's geometry, since it comes from the same side. */
  @media screen and (min-width: 901px) {
    .pruvit-filt__panel {
      top: 12px;
      bottom: 12px;
      left: 12px;
      width: 390px;
      border-radius: var(--r-lg);
      overflow: hidden;
      transform: translateX(calc(-100% - 14px));
    }

    .pruvit-filt.is-open .pruvit-filt__panel {
      box-shadow: var(--shadow-lg);
    }
  }

  .pruvit-filt__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-block-end: 1px solid var(--line);
  }

  .pruvit-filt__h {
    color: inherit;
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  /* The cart's and the menu's close button, not a third one. Those two are
     transparent at rest and take the wash on hover; these two carried it
     permanently, which made the same control look heavier in some drawers than
     in others. 38px and a pill radius for the same reason. */
  .pruvit-filt__x,
  .pruvit-opt__x {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.18s ease;
  }

  .pruvit-filt__x:hover,
  .pruvit-opt__x:hover {
    background: rgb(22 32 58 / 0.06);
  }

  .pruvit-filt__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }

  .pruvit-filt__foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px 20px;
    border-block-start: 1px solid var(--line);
  }

  .pruvit-filt__clear {
    font-size: 14px;
    color: var(--slate);
  }

  .pruvit-filt__done {
    margin-inline-start: auto;
    padding: 13px 26px;
  }

  .pruvit-coll__fset {
    border: 0;
    margin: 0 0 16px;
    padding: 0;
  }

  .pruvit-coll__fset legend {
    font-family: var(--font-mono--family);
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--slate);
    margin-block-end: 8px;
  }

  /* One filter to a line. They used to flow inline and wrap, which packed
     thirteen options into nine rows of one or two — the eye had no column to
     run down, and where two happened to share a line they read as a pair
     rather than as two of a list. */
  .pruvit-coll__fopt {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    font-size: 14px;
    cursor: pointer;
  }

  /* A rounded square, not a circle.

     The theme's inputs_border_radius is 12px and these boxes are 16px, so the
     global setting was rounding them into discs — and a disc reads as a radio,
     which promises you may pick only one. Overridden here rather than in the
     setting, which every other input on the store is using correctly.

     Only the radius changes. The fill and the tick are the theme's own and
     work; the tick is positioned with a translate tied to the 16px box, so
     resizing it here would push the mark off centre. */
  .pruvit-coll__fopt input {
    border-radius: 5px;
  }

  .pruvit-coll__fopt i {
    font-style: normal;
    color: var(--slate);
  }

  /* The row gap carries more than the column gap by design: a card is a stack
     of title, price, SmartShip line and swatches with no border around it, so
     what separates one card from the one below it is space alone, while the
     columns are already separated by the image edges. Both came in when the
     cards were 333px; at 261 the same gutters read as too much air around too
     little product, so both come down and the relationship between them is
     kept.

     The minimum decides the column count and the number is not arbitrary. With
     a 28px gap against the 1152 measure, four columns need a floor of at most
     267 — four cards of 267 plus three gaps is exactly 1152 — and more than
     208 to refuse a fifth. 256 sits inside that band with 11px of headroom,
     rather than near the boundary where a scrollbar or a subpixel could drop
     the row to three.

     The narrower gutter is also what buys the card its width back: the four
     columns share whatever the gaps do not take, so 36 to 28 moves each card
     from 261 to 267.

     It was 266, tuned when the measure was 1440 and four cards were 333px
     wide. At 1152 that floor yielded three columns of 360, and four of 261 is
     what this asks for instead. Worth knowing that 261 is close to the 259 a
     five-column layout would have given at 1440, which was rejected then on
     the grounds that the extra width should go to the product. Same trade,
     reached from the other direction.

     Tuned to 1152 specifically. If the measure widens again this wants
     revisiting: at 1440 a 256 floor gives five columns, not four.

     Still auto-fill, so the ladder holds itself — 1152 gives four, a 1024
     viewport gives three. Below 901 the floor is wider than the whole column,
     so auto-fill yields one and the phone gets a single stack — which is what
     the rule below overrides. */
  .pruvit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
    gap: 44px 28px;
  }

  /* Two on a phone. One column gave each card the full 358px, which is more
     picture than a pack shot needs and put one product on screen at a time on
     a list of seventeen; two at 172px shows four.

     Stated as two columns rather than by lowering the floor, because the floor
     is a desktop measure — at 172 it would also start allowing three across a
     tablet, which is not what this is for.

     The gaps halve with the columns and keep the desktop rule's 2:1 ratio. 28
     down the page rather than 44, because nine rows of 44 is a lot of scrolling
     between products, and 14 across rather than 28, because at this width the
     gutter is competing with the product for the same pixels.

     Measured at 390px: cards come out 172 wide, titles stay within two lines,
     the 46px add disc still sits inside its frame, and nothing overflows the
     document. KETO//OS NAT's eight flavour dots need 227px against a 172px row
     and wrap to a second line inside the card, which .pruvit-card__swatches
     already allows for. */
  @media screen and (max-width: 900px) {
    .pruvit-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px 14px;
    }
  }

  /* And back to one where two stops paying. Walked down in 10px steps against
     the real cards: 340 is the last width holding every title to two lines at
     147px a card, and 330 is where the longest of them — MITO//PLEX® Citrus
     Variety Pack — takes a third. So the line is 339, not the 320 that started
     this: 320 is where the problem was noticed, 330 is where it begins.

     Nothing was overflowing at either width. This is about a card being too
     narrow to read comfortably, not about it breaking. */
  @media screen and (max-width: 339px) {
    .pruvit-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---- card ---- */
  .pruvit-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* The image box, and the positioning context for the action over it.

     --card-inset is one number for both things that float on the picture, so
     the badge's top left and the button's bottom left sit on the same edge. It
     was 10px on each, written separately, which read as nearly touching once
     the frame grew and the pack gained 30px of air inside it. */
  .pruvit-card__frame {
    --card-inset: 18px;

    position: relative;
  }

  /* Now the frame's proportion is stated outright and the padding insets the
     pack inside it. Back to border-box for that: aspect-ratio applies to the
     border box, so the frame is 4:5 whatever the padding is, and the air can
     change on all four sides without the shape moving with it.
     4:5 at a 230px column is 288px, which is where the vertical-only version
     landed — the shape Craig approved, held deliberately rather than as a
     by-product of the arithmetic. */
  .pruvit-card__media {
    --card-air: 30px;
    position: relative;
    display: block;
    box-sizing: border-box;
    aspect-ratio: 4 / 5;
    padding: var(--card-air);
    border-radius: var(--r-md);
    /* Back to --ice-soft. Craig, 2026-09-29.

       This was cream from 2026-09-18, and the reason was real at the time: the
       packs carried mix-blend-mode: multiply, so the ground was doing the work
       of a colour grade rather than filling a box, and cool ice gave the foils
       and the oranges a blue lift. The blend mode is gone -- see the note below
       on .pruvit-card__img, where sampling five packs found every corner fully
       transparent, so there was never a plate to hide. With nothing multiplying
       onto it the ground grades nothing, and cream was left being warm for a
       reason that had expired. */
    background: var(--ice-soft);
    overflow: hidden;
  }

  /* No blend mode. It was multiply, to keep a cut-out pack off a white plate —
     but every pack image on this store is genuinely cut out: sampled the four
     corners of five of them and each read 0,0,0,0, fully transparent. So there
     was no plate to hide, and multiplying was darkening the pack against the
     ground for nothing. On the cream it also pulled the foils warm-grey, which
     is the opposite of what the warmer ground was for. */
  .pruvit-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* A little more room around the pack once the grid is at its full measure, so
     the extra width lands as space rather than as a bigger picture.

     Placed after .pruvit-card__media rather than before it. Both rules are one
     class, so the media query does not outrank anything — it only wins by
     coming later, and written above it the value was simply overwritten and the
     air stayed at 30. */
  @media screen and (min-width: 1400px) {
    .pruvit-card__media {
      --card-air: 36px;
    }
  }

  /* Where the add control is permanent, the pack has to centre in what is left
     of the frame rather than in the frame.

     The rule below .pruvit-card__act says the control "arrives on hover where
     there is hover. On touch it is simply always there." True, and the part not
     accounted for: on touch it then sits over the bottom of every frame for the
     whole visit. Measured on a 375px viewport, 2026-09-25 — frame 206 tall,
     control's footprint 64 (46 high at an 18 inset), so it covers 142..206 and
     overlapped the pack by 13px. The pack was centred at 104 in a frame whose
     visible area centres at 71, which is what reads as sitting low.

     Shifting the content box up by half that footprint puts it right. Half of
     64 is 32 and there are only 30 of top air, so the top goes to 0 and the
     bottom carries the rest: the pack keeps its full size and lands within a
     pixel of the visible centre. Scales with the column, because the control's
     footprint is fixed in px while the frame grows. Sides are untouched. */
  @media (pointer: coarse) {
    .pruvit-card__media {
      padding-block: 0 calc(var(--card-air) + 32px);
    }

    /* The card says "Sold out" twice on a phone. The add control is permanent
       where there is no hover -- see the note on .pruvit-card__act -- so it is
       already sitting there reading "Sold out" under a badge saying the same
       thing. The badge is the one that goes: the control is the thing you
       would have pressed, so it is the one that has to explain why you cannot.
       Craig, 2026-09-28.

       Scoped to coarse rather than to a width on purpose. The badge is
       redundant exactly where the control is permanent, and that is the same
       condition, so the two cannot drift apart at some breakpoint. */
    .pruvit-card__label--out {
      display: none;
    }
  }

  /* The second shot ignores the padding on purpose. Being positioned, it is
     placed against the padding box, so inset:0 is the frame's own edge — the
     pack sits in its pool of air and the hover picture bleeds to the corners.
     cover rather than contain, because filling a 4:5 frame with a photo shot
     square means cropping it; contain would letterbox and the bleed would be
     the one thing it failed to do.
     It carried mix-blend-mode: normal only to escape the multiply on
     .pruvit-card__img, which it also matches. With that gone the override has
     nothing left to override, so it goes too. */
  .pruvit-card__img--hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.26s ease;
  }

  /* Hover only where there is a pointer that hovers. On a touch screen the
     second shot would either never show or show on tap, and a tap is meant to
     open the product. */
  /* The whole card is the hover target, not the picture. A shopper reading the
     title or the price is still considering this product, and having the image
     drop back and the button vanish while their pointer sits on the name reads
     as the card losing interest in them. The picture is simply where the
     response happens. */
  @media (hover: hover) {
    .pruvit-card:hover .pruvit-card__img--hover {
      opacity: 1;
    }

    /* And the first one goes. The rule is still needed with the blend modes
       gone — the first shot is contained inside the padding and the second
       bleeds to the corners, so painting both leaves the pack floating on top
       of the photograph. Only one at a time. */
    .pruvit-card:hover .pruvit-card__img:not(.pruvit-card__img--hover) {
      opacity: 0;
    }

    .pruvit-card__img:not(.pruvit-card__img--hover) {
      transition: opacity 0.26s ease;
    }
  }

  .pruvit-card__labels {
    position: absolute;
    inset-block-start: var(--card-inset);
    inset-inline-start: var(--card-inset);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 6px;
  }

  /* Stated rather than styled away. The card keeps its picture, its price and
     its link — someone may still want to look, or to know what it costs when
     it returns — and the badge is what carries the news. */
  .pruvit-card__label--out {
    --label: rgb(var(--color-foreground-rgb) / 0.62);
  }

  /* Drained rather than faded. A pack at 45% opacity reads as one that has not
     finished loading; the same pack with its colour taken out and raised
     toward the ground reads as one that is not for sale. The label above it
     stays at full strength, which is what keeps the treatment from looking
     like a failure state.

     Scoped to the first shot, which it was not. `.pruvit-card__frame
     [data-sold-out] .pruvit-card__img` is three classes, and it was beating
     the second shot's own `opacity: 0` at one — so on a sold-out card the
     hover picture was painted at 0.45 permanently, one pack ghosted through
     the other, with no hover involved at all. */
  .pruvit-card__frame[data-sold-out] .pruvit-card__img:not(.pruvit-card__img--hover) {
    filter: grayscale(1) brightness(1.06) opacity(0.62);
  }

  /* And the second shot stays down. It is a flourish, and there is nothing to
     flourish about a pack nobody can buy. */
  .pruvit-card__frame[data-sold-out] .pruvit-card__img--hover {
    display: none;
  }

  /* Without this the first shot still fades out on hover — the swap rule above
     has nothing left to swap to, so a sold-out card would empty its own frame
     when a pointer crossed it. */
  @media (hover: hover) {
    .pruvit-card:hover .pruvit-card__frame[data-sold-out] .pruvit-card__img:not(.pruvit-card__img--hover) {
      opacity: 1;
    }
  }

  /* The chip dims, not the button. This was on .pruvit-card__sw--out, and the
     tooltip is inside that button — a child cannot be more opaque than its
     parent, so the one thing that explains why a swatch is dimmed was the one
     thing you could not read. The line through the chip stays at full strength
     too: it is the state, not the decoration. */
  .pruvit-card__sw--out::before {
    opacity: 0.4;
  }

  /* A line through the disc, so the state survives being seen in greyscale or
     by someone who does not read the dimming as meaning anything. */
  .pruvit-card__sw--out::after {
    content: '';
    position: absolute;
    width: 19px;
    height: 1.5px;
    background: rgb(var(--color-foreground-rgb));
    transform: rotate(-45deg);
  }

  .pruvit-card__label {
    --label: var(--accent-1);

    padding: 5px 11px;
    border-radius: 999px;
    background: var(--label);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  /* The control sits over the image, and arrives on hover where there is
     hover. On touch it is simply always there — the alternative is an action
     nobody can reach. */
  .pruvit-card__act {
    position: absolute;
    inset-inline: var(--card-inset);
    inset-block-end: var(--card-inset);
    z-index: 2;
    pointer-events: none;
  }

  .pruvit-card__add {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 10px 12px 18px;
    border: none;
    border-radius: 999px;
    background: #fff;
    /* Was var(--ink), which this theme has never defined — it only defines
       --ink-soft and --slate, both built from --color-foreground-rgb. The
       declaration was invalid and the button took whatever it inherited, which
       happened to be the same colour. Right by luck is not right. */
    color: rgb(var(--color-foreground-rgb));
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 8px 22px -12px rgba(14, 20, 32, 0.5);
    transition: opacity 0.2s ease, transform 0.2s ease;

    /* The periwinkle arrives as a wipe from the disc outward, rather than the
       disc simply changing colour. The disc is where the pointer is going and
       where the click will land, so starting the fill there makes the button
       look like it is responding to the cursor rather than repainting.

       A scaled pseudo-element, not a background-position trick: scaleX is
       composited, so the wipe costs nothing per frame, and transform-origin
       right is what aims it at the disc. */
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .pruvit-card__add::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent-1);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* The accent sweeps in behind the label, so the label takes the colour that
     reads on it: --accent-1-on, navy for periwinkle, white for a dark palette.
     Without it a Royal card would hover navy-on-blue at 2.3. */
  .pruvit-card__add:hover,
  .pruvit-card__add:focus-visible {
    color: var(--accent-1-on);
  }

  .pruvit-card__add:hover::before,
  .pruvit-card__add:focus-visible::before {
    transform: scaleX(1);
  }

  /* The disc inverts as the fill passes it, so it stays the brightest thing on
     the button instead of disappearing into the colour it just handed over. */
  .pruvit-card__add:hover .pruvit-card__plus,
  .pruvit-card__add:focus-visible .pruvit-card__plus {
    background: #fff;
    color: rgb(var(--color-foreground-rgb));
  }

  /* Moved down from above .pruvit-card__add, where every line of it lost.

     Both selectors are one class, so source order decided, and the base class
     came second — which meant a sold-out card has been rendering as a white
     pill with a shadow and a pointer cursor, indistinguishable from one you
     can buy. Exactly what these five declarations were written to prevent.
     Nothing is changed here; it is the same block, somewhere it applies. */
  .pruvit-card__add--out {
    background: rgb(var(--color-foreground-rgb) / 0.06);
    color: var(--slate);
    box-shadow: none;
    justify-content: center;
    cursor: default;
  }

  /* No wipe on something that cannot be pressed. */
  .pruvit-card__add--out::before {
    content: none;
  }

  .pruvit-card__plus {
    transition: background 0.24s ease, color 0.24s ease;
  }

  .pruvit-card__plus {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #16203a;
    color: #fff;
  }

  .pruvit-card__plus svg {
    width: 15px;
    height: 15px;
  }

  /* Both icons ship; one shows. The plus belongs to the labelled pill, where
     the words already say what the button does and the disc is punctuation.
     The bag takes over once the words are gone. */
  .pruvit-card__ico {
    display: grid;
    place-items: center;
  }

  .pruvit-card__ico--cart {
    display: none;
  }

  /* Waiting happens on the control that was pressed, not in the panel it is
     about to open. The plus becomes a spinner in place: same 28px disc, same
     position, so the thing under the cursor answers immediately and the drawer
     arrives already filled instead of opening onto the word "Loading".
     No markup for it — the disc is already a circle, so a rotating arc drawn on
     a pseudo-element is the whole spinner. */
  .pruvit-card__add.is-loading .pruvit-card__plus svg {
    opacity: 0;
  }

  /* currentColor, not white. The disc inverts on hover — white ground, navy ink
     — so a white spinner vanished the moment the periwinkle wipe reached it,
     which is exactly when someone is most likely to be clicking. An arc rather
     than a ring with a faint track, because a track would need a second colour
     that also has to invert. */
  .pruvit-card__add.is-loading .pruvit-card__plus::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: pruvit-card-spin 0.6s linear infinite;
  }

  @keyframes pruvit-card-spin {
    to {
      transform: rotate(1turn);
    }
  }

  /* Reduced motion gets a pulse rather than a spin: the point is "something is
     happening", and that does not require rotation. */
  @media (prefers-reduced-motion: reduce) {
    .pruvit-card__add.is-loading .pruvit-card__plus::after {
      animation: pruvit-card-pulse 1.1s ease-in-out infinite;
      background: currentColor;
      border: none;
      width: 9px;
      height: 9px;
    }

    @keyframes pruvit-card-pulse {
      0%,
      100% {
        opacity: 0.35;
      }
      50% {
        opacity: 1;
      }
    }
  }

  @media (hover: hover) {
    .pruvit-card__add {
      opacity: 0;
      transform: translateY(6px);
    }

    .pruvit-card:hover .pruvit-card__add,
    .pruvit-card__add:focus-visible {
      opacity: 1;
      transform: none;
    }
  }

  /* On a phone the pill becomes a disc in the corner of the picture.

     It was always visible here already — it has to be, or the action is
     unreachable without hover — but at a 343px card it runs the full width of
     the pack shot and is the loudest thing in the cell. A disc in the
     bottom-right corner is the pattern Pebble uses and it is the right one:
     one thumb-sized target, the picture left alone, and the price and title
     below reading as the card's content rather than competing with a button.

     Width as well as hover, because this gets reviewed by narrowing a desktop
     window as often as on a handset, and a reviewer who cannot see the change
     will reasonably conclude it did not ship. Placed after the (hover: hover)
     block above deliberately: that one sets opacity 0, a media query carries no
     specificity of its own, and source order is therefore what decides. */
  @media screen and (max-width: 900px), (hover: none) {
    button.pruvit-card__add {
      /* 46px, not the 28px the inner disc has always been: this is the whole
         target now, and a tap target wants 44 at the very least. */
      width: 46px;
      height: 46px;
      /* The action box still spans the frame, so the disc is pushed to the
         end of it rather than the box being re-anchored. Everything else that
         floats on the picture keeps measuring from --card-inset. */
      margin-inline-start: auto;
      padding: 0;
      justify-content: center;
      gap: 0;
      border-radius: 50%;
      background: #16203a;
      color: #fff;
      /* Undoes the hover-reveal above for a narrow window that can hover. */
      opacity: 1;
      transform: none;
    }

    /* Clipped, not display: none. Once the words are off screen they are the
       button's only accessible name, and display: none would take them out of
       the accessibility tree along with the layout — leaving a round button
       that announces itself as nothing at all. */
    button.pruvit-card__add .pruvit-card__addt {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    /* The button is the disc now, so the inner disc stops being one and just
       carries the icon. It keeps filling the button rather than shrinking, so
       the loading arc still lands dead centre. */
    button.pruvit-card__add .pruvit-card__plus {
      width: 100%;
      height: 100%;
      background: none;
      color: inherit;
    }

    button.pruvit-card__add .pruvit-card__ico--plus {
      display: none;
    }

    button.pruvit-card__add .pruvit-card__ico--cart {
      display: grid;
    }

    /* The bag needs more room than the plus did: the plus is two strokes and
       reads at 15px, the bag has a handle and a body and closes up. */
    button.pruvit-card__add .pruvit-card__ico--cart svg {
      width: 20px;
      height: 20px;
    }

    /* A sold-out card keeps its words. There is nothing to press, so a disc
       would be a button that is not one — and a bag icon on it would invite
       the tap it cannot answer. It shrinks to the same corner on the same
       inset instead, so the grid keeps its rhythm without lying. */
    .pruvit-card__add--out {
      /* fit-content, not auto. auto on a block-level box means "fill the
         line", which is what it was already doing — the pill stayed 307px
         wide and the corner treatment did nothing. */
      width: fit-content;
      margin-inline-start: auto;
      padding: 10px 16px;
    }
  }

  .pruvit-card__t {
    margin-block-start: 10px;
    font-family: var(--font-heading--family);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
  }

  .pruvit-card__t:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* font-variant-numeric: tabular-nums removed, and it was DEAD, not merely
     unwanted. Say so plainly, because the obvious reading of this change --
     that it tightened the card prices -- is wrong and the next person should
     not repeat the measurement to find that out.

     Card prices are set in Inter, the body face, not Inter Tight. The Inter
     the theme loads carries no `tnum` feature: measured 2026-09-28 with
     font-feature-settings forced, "tnum" 1 and "tnum" 0 both render $111.11
     at 46.94px, and $150.80 is 61.47px with the declaration and 61.47px
     without it. Inter Tight does have it, which is why the same removal on
     .pruvit-buy__cta-r b was worth 4.71px and this one is worth nothing.

     Removed anyway. A declaration that reads as intent and does nothing is
     worse than no declaration: it tells the next reader these prices are
     tabular, and they are not, and it would silently start changing the
     layout the day the body face is swapped for one that has the feature.

     Which leaves the real inconsistency, unaddressed here on purpose: this
     price is Inter and the buy box's is Inter Tight, about 2.2px apart at
     15.5px/700. That is a question about which face a price belongs in, not
     about figures, and it changes how the collection page looks. */
  .pruvit-card__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .pruvit-card__now {
    font-size: 15.5px;
    font-weight: 700;
  }

  .pruvit-card__now.is-cut {
    color: var(--save-ink);
  }

  .pruvit-card__was {
    font-size: 13.5px;
    color: var(--slate);
  }

  .pruvit-card__note {
    font-size: 12px;
    font-weight: 700;
    color: var(--save-ink);
  }

  .pruvit-card__note--quiet {
    font-weight: 500;
    color: var(--slate);
  }

  /* The savings note is a reassurance, not an offer. It reads lighter than the
     price notes beside it and carries a tick, which is the same shape the
     drawer uses for the same sentence — a shopper meets one mark and one phrase
     whether they are scanning the grid or looking at the form.

     The tick is a pseudo-element because the script swaps these notes by
     textContent, and an icon in the markup would be wiped on the first switch. */
  .pruvit-card__note--applied {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
  }

  .pruvit-card__note--applied::before {
    content: '';
    flex: none;
    width: 11px;
    height: 11px;
    background: currentColor;
    /* The same check the icon snippet draws, as a mask so it takes the note's
       own colour without a second colour to keep in step. */
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .pruvit-card__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-block-start: 2px;
  }

  /* The swatch row is the one part of the card that can be pointed at without
     leaving it, so it is given room to be hit: the chip stays 15px but the
     control around it is 24px, which is the difference between a colour and a
     target on a touch screen. Negative margins keep the row visually where it
     was. */
  .pruvit-card__sw {
    position: relative;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin: -4px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .pruvit-card__sw::before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--sw);
    box-shadow: inset 0 0 0 1px rgb(22 32 58 / 0.14);
    transition: box-shadow 0.14s ease, transform 0.14s ease;
  }

  .pruvit-card__sw:hover::before {
    transform: scale(1.12);
  }

  /* The ring is drawn outside the chip rather than around it, so the selected
     colour is still 15px of colour — a border would eat into the only part of
     the control that carries the information. */
  .pruvit-card__sw[aria-pressed='true']::before {
    box-shadow:
      inset 0 0 0 1px rgb(22 32 58 / 0.14),
      0 0 0 2px #fff,
      0 0 0 3.5px rgb(var(--color-foreground-rgb));
  }

  .pruvit-card__sw:focus-visible {
    outline: none;
  }

  .pruvit-card__sw:focus-visible::before {
    box-shadow:
      inset 0 0 0 1px rgb(22 32 58 / 0.14),
      0 0 0 2px #fff,
      0 0 0 3.5px rgb(var(--color-foreground-rgb));
  }

  /* Its own tooltip rather than the title attribute: title waits about a
     second, cannot be styled, and never appears for a keyboard at all. This
     one is instant, matches the chrome, and shows on focus as well as hover. */
  .pruvit-card__swt {
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    z-index: 3;
    padding: 4px 8px;
    border-radius: 7px;
    background: #16203a;
    color: #fff;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 3px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
  }

  .pruvit-card__sw:hover .pruvit-card__swt,
  .pruvit-card__sw:focus-visible .pruvit-card__swt {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-card__sw::before,
    .pruvit-card__swt {
      transition: none;
    }

    .pruvit-card__sw:hover::before {
      transform: none;
    }
  }

  /* ---- options panel ---- */
  .pruvit-opt[hidden] {
    display: none;
  }

  .pruvit-opt__bd {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--scrim-drawer, rgba(14, 20, 32, 0.42));
    backdrop-filter: var(--scrim-blur, blur(3px));
    opacity: 0;
    transition: opacity 0.26s ease;
  }

  .pruvit-opt.is-open .pruvit-opt__bd {
    opacity: 1;
  }

  .pruvit-opt__panel {
    /* Published because the rail sizes itself against the panel, and a
       percentage could not: the body carries a scrollbar and a head that once had
       its own padding, so 100% inside it did not mean the panel's width. */
    --opt-w: min(480px, 92vw);

    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 91;
    width: var(--opt-w);
    display: flex;
    flex-direction: column;
    background: #fff;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    overscroll-behavior: contain;
  }

  .pruvit-opt.is-open .pruvit-opt__panel {
    transform: translateX(0);
    box-shadow: -30px 0 80px -40px rgba(14, 20, 32, 0.5);
  }

  /* A sheet from the bottom on a phone.
     ---------------------------------------------------------------------
     Craig, 2026-09-23, referencing Pebble: on mobile a panel of choices
     belongs at the bottom of the screen, full width, with the page still
     visible above it. A side drawer on a 390px screen is a full-screen
     takeover wearing a drawer's animation, and it puts the controls under the
     hand that is holding the phone rather than near the thumb.

     The panel is already a flex column that scrolls its body, so only the
     geometry changes: released from the top, pinned to the bottom, and the
     slide swings from X to Y. 56px of the page stays visible, which is what
     tells you it is a sheet over something rather than a new page.

     --opt-w stays a length rather than becoming 100%, because the add-ons
     rail sizes itself against it and a percentage there measured the wrong
     box — the note on the declaration says so. */
  @media screen and (max-width: 749px) {
    .pruvit-opt__panel {
      --opt-w: 100vw;

      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      /* svh, not dvh. A sheet pinned to the bottom grows upward, so anything
         that makes it taller than the visible viewport pushes its own header
         off the top of the screen -- and the header is the part you cannot
         scroll back to, because the scrolling happens inside the body below
         it. dvh follows the browser chrome and on iOS it lags a toolbar that
         is on its way out, which is exactly the moment a sheet opens. svh is
         the height with the chrome shown: never larger than what is visible,
         so the top of the sheet cannot leave the screen. */
      max-height: calc(100svh - 56px);
      border-start-start-radius: var(--r-md);
      border-start-end-radius: var(--r-md);
      transform: translateY(100%);
    }

    .pruvit-opt.is-open .pruvit-opt__panel {
      transform: translateY(0);
      box-shadow: 0 -24px 60px -30px rgba(14, 20, 32, 0.45);
    }
  }

  /* Inset and rounded from 901px up, which is the geometry the cart and the
     menu already use — same offsets, same radius, and the same trick of
     folding the offset into the closed transform so it starts fully off
     screen rather than 12px short of it. */
  @media screen and (min-width: 901px) {
    .pruvit-opt__panel {
      --opt-w: 480px;

      top: 12px;
      bottom: 12px;
      right: 12px;
      width: var(--opt-w);
      border-radius: var(--r-lg);
      overflow: hidden;
      transform: translateX(calc(100% + 14px));
    }

    .pruvit-opt.is-open .pruvit-opt__panel {
      box-shadow: var(--shadow-lg);
    }
  }

  .pruvit-opt__x {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 2;
  }

  .pruvit-opt__body {
    flex: 1;
    overflow-y: auto;
    /* No bottom padding: the add button provides it by sticking to the floor,
       and 22px under a stuck element is a gap the shopper scrolls into. */
    padding: 22px 22px 0;
  }

  /* ---- the drawer's own heading ---- */
  /* The cart's line, essentially: a 64px square and the words beside it. Same
     size, radius, ground and contain-and-multiply, so the drawer identifies a
     product the way the cart does rather than inventing a third treatment.

     This replaced a rail of 240x300 shots. The rail was handsome and cost 300px
     of a 744px drawer before the shopper reached a single control, to show
     pictures of the thing they had just clicked a picture of. The panel's job
     is choosing; the identification should be the smallest thing that does it. */
  .pruvit-qb__head {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-block-end: 22px;
    /* Clears the close button. On the head now that nothing inside it wants the
       full width — it was on the words while the rail needed the edge. */
    padding-inline-end: 44px;
  }

  /* The same ground as the card, and it moves when the card moves. This
     thumbnail is the pack from the card the drawer was opened from, shown a
     second later, so the two disagreeing about their background is the one
     place the difference would be noticed. */
  .pruvit-qb__thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--r-xs);
    background: var(--ice-soft);
    overflow: hidden;
    display: grid;
    place-items: center;
  }

  /* Same as the card, for the same reason: this is that card's pack. */
  .pruvit-qb__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* The step labels read light, and the weight is not the lever available.
     Space Mono is self-hosted here at 400 only — the store avoids Google Fonts
     because it sells into the EU under Consentmo, so a second weight means two
     more woff2 files in assets, not a number change. font-weight:700 without
     them is a browser-synthesised bold, which smears a mono face at 12px.
     Contrast does the same work honestly: --slate is the foreground at 55%,
     --ink-soft the same ink at 72%. */
  .pruvit-opt__body .pruvit-fset__label {
    color: var(--ink-soft);
  }

  .pruvit-qb__labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: 7px;
  }

  /* The head already provides the gap. .pruvit-fset carries a 26px top margin
     to separate one step from the next, which on the first step stacked with
     the head's 22px and put 48px of nothing above "Flavor". */
  .pruvit-opt__body .pruvit-buy__form > :first-child {
    margin-block-start: 0;
  }

  .pruvit-qb__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
  }

  /* The add button holds the floor when the form is taller than the drawer.
     Sticky rather than fixed, so it does exactly nothing when everything fits
     — no measuring, no class to toggle, and it returns to the flow at the
     bottom of the scroll where the reassurance lines sit below it.

     The negative side margins and matching padding are what make the white
     band reach the panel edges; without them the form scrolls past either side
     of the pill. */
  /* The same footer the filter drawer has: a rule across the top, the button
     below it, and the panel's own padding around the pair. Both drawers slide
     from the same edge and end in the same commitment, so they should not
     resolve that differently.

     The rule shows only while the footer is actually holding the floor. There is
     no CSS test for that, so the script sets is-stuck from whether the body can
     still be scrolled — which is the same question. The border is declared
     transparent rather than absent so nothing shifts by a pixel when it
     appears. */
  .pruvit-opt__body .pruvit-buy__foot {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-block-start: 26px;
    margin-inline: -22px;
    padding: 16px 22px 20px;
    border-block-start: 1px solid transparent;
    background: #fff;
    transition: border-color 0.18s ease;
  }

  .pruvit-opt__body .pruvit-buy__foot.is-stuck {
    border-block-start-color: var(--line);
  }

  /* The gap above the button is the footer's padding now, not the button's own
     margin — otherwise it would sit inside the white, below the rule, and the
     rule would be hard against the content above it. */
  .pruvit-opt__body .pruvit-buy__foot .pruvit-buy__cta {
    margin-block-start: 0;
  }

  .pruvit-opt__body .pruvit-buy__error {
    margin-block-start: 12px;
  }

  .pruvit-opt__wait {
    color: var(--slate);
  }

















  @media (prefers-reduced-motion: reduce) {
    .pruvit-opt__panel,
    .pruvit-opt__bd,
    .pruvit-filt__panel,
    .pruvit-filt__bd,
    .pruvit-card__img--hover,
    .pruvit-card__add,
    .pruvit-card__add::before,
    .pruvit-card__plus {
      transition: none;
    }

    /* No wipe, but the colour still answers. The point of the hover is that the
       button responds; the sweep is only how it says so. */
    .pruvit-card__add:hover::before,
    .pruvit-card__add:focus-visible::before {
      transform: scaleX(1);
    }
  }
/* END_SECTION:pruvit-collection */

/* START_SECTION:pruvit-float-cta (INDEX:39) */
.pruvit-fcta {
    position: fixed;
    inset-block-end: 22px;
    inset-inline-start: 50%;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 27px;
    border-radius: 999px;
    background: var(--color-foreground);
    color: var(--color-background);
    text-decoration: none;
    font-family: var(--font-heading--family);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    white-space: nowrap;
    box-shadow: 0 18px 44px -16px rgba(14, 20, 32, 0.6);
    /* Parked below the fold rather than faded out: it arrives from where it
       lives, and a pill that fades in over content reads as an interruption
       where one that rises from the edge reads as a tool coming to hand. */
    transform: translate(-50%, 180%);
    transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1), background 0.18s ease;
  }

  /* [hidden] is a UA rule at (0,0,0) and loses to the display above, so it is
     restated here. Sixth time in this theme. */
  .pruvit-fcta[hidden] {
    display: none;
  }

  .pruvit-fcta.is-on {
    transform: translate(-50%, 0);
  }

  .pruvit-fcta:hover {
    background: var(--color-foreground);
  }

  .pruvit-fcta:hover .pruvit-btn__arw {
    transform: translateX(3px);
  }

  .pruvit-fcta .pruvit-btn__arw {
    transition: transform 0.18s ease;
  }

  @media screen and (max-width: 420px) {
    .pruvit-fcta {
      padding: 13px 24px;
      font-size: 15.5px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-fcta {
      transition: none;
    }
  }
/* END_SECTION:pruvit-float-cta */

/* START_SECTION:pruvit-footer (INDEX:40) */
.pruvit-foot {
    position: relative;
    background: var(--navy-deep);
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    line-height: 1.6;
    padding-block-end: 104px;
    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);
    margin-block-start: calc(var(--r-md) * -1);
  }

  .pruvit-foot a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .pruvit-foot a:hover {
    color: #fff;
  }

  .pruvit-foot__brand {
    padding-block: clamp(44px, 5.5vw, 68px) clamp(28px, 3.5vw, 40px);
  }

  .pruvit-foot__brand-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .pruvit-foot__logo,
  .pruvit-foot__mark {
    height: clamp(34px, 4.5vw, 46px);
    width: auto;
    opacity: 0.95;
  }

  /* Same mask as the header's, so the footer needs no white variant of the
     file — it simply inherits a lighter ink here. */
  .pruvit-foot__mark {
    display: block;
    aspect-ratio: 227.42 / 71.44;
    background: #fff;
    -webkit-mask: var(--pruvit-logo) center / contain no-repeat;
    mask: var(--pruvit-logo) center / contain no-repeat;
  }

  .pruvit-foot__social {
    display: flex;
    gap: 8px;
  }

  .pruvit-foot__social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease;
  }

  .pruvit-foot__social a:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }

  .pruvit-foot__social svg {
    width: 17px;
    height: 17px;
  }

  .pruvit-foot__marquee {
    overflow: hidden;
    padding-block-end: clamp(26px, 3.5vw, 40px);
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }

  .pruvit-foot__track {
    display: flex;
    width: max-content;
    opacity: 0.14;
    animation: pruvit-foot-marquee 60s linear infinite;
  }

  .pruvit-foot__track span {
    font-family: var(--font-heading--family);
    font-size: clamp(54px, 11vw, 116px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.08;
    color: #fff;
    white-space: nowrap;
    padding-inline-end: 0.4em;
  }

  @keyframes pruvit-foot-marquee {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  .pruvit-foot__marquee:hover .pruvit-foot__track {
    animation-play-state: paused;
  }

  .pruvit-foot__util {
    padding-block-start: 32px;
    display: grid;
    gap: 16px;
  }

  .pruvit-foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
  }

  /* Six links wrapping to three rows on a phone at 21px tall. The row is the
     target, not the text. */
  .pruvit-foot__links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  .pruvit-foot__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .pruvit-foot__pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: border-color 0.16s ease, color 0.16s ease;
  }

  .pruvit-foot a.pruvit-foot__pill,
  .pruvit-foot a.pruvit-foot__pill:hover {
    text-decoration: none;
  }

  .pruvit-foot__pill:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
  }

  .pruvit-foot__pill--withdraw svg {
    width: 14px;
    height: 14px;
    flex: none;
  }

  .pruvit-foot__pill .pruvit-tool__flag {
    width: 18px;
    height: 18px;
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-foot__track {
      animation: none;
    }
  }
/* END_SECTION:pruvit-footer */

/* START_SECTION:pruvit-gate (INDEX:41) */
/* The gate's ground goes on the body, not just on the gate.
     ---------------------------------------------------------------------
     There is a transparent header above this now, and it sits on whatever the
     body is — which is white, against the gate's cream. Measured: a 58px white
     strip across the top, with the seam running the full width. The header has
     no ground of its own on purpose, so the page has to be the right colour
     underneath it.

     :has() rather than a body class, because the question is literally "is the
     gate on this page" and the DOM can answer it. The same reasoning as the
     header group's :has(.pruvit-snav). */
  body:has(.pruvit-gate) {
    background: var(--cream, #f7f5f0);
  }

  /* The header floats over this rather than sitting above it — the rule is in
     snippets/pruvit-minimal-header.liquid, because it turned out to be true of
     the Create account page too.
     ---------------------------------------------------------------------
     It was in the flow, which gave the page a 66px strip at the top that
     belonged to neither: the header is transparent by design, so whatever was
     behind it showed through, and Craig reported that strip reading as a dark
     band with the wordmark invisible in it. Every computed style said the
     strip was cream and the mark navy, which is a good reason to stop
     arguing with the screen and remove the strip instead.

     Absolute, so the gate starts at the top of the viewport and paints its own
     ground edge to edge. There is nothing left to show through, the panel
     centres in the whole viewport again rather than in what is left below a
     header, and the wordmark sits on the gate's cream where it was always
     meant to. */
  /* A whole screen, and the footer below it.
     ---------------------------------------------------------------------
     This briefly shared the viewport with the minimal footer so both fitted
     without scrolling. Craig, 2026-09-23: squashed, and the footer is not
     something anyone needs on load — it is there to satisfy the legal team,
     not to be read. So the panel gets the screen it was composed for and the
     policies wait below the fold for whoever goes looking. */
  .pruvit-gate {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 24px var(--page-margin, 16px);
    background: var(--cream, #f7f5f0);
    /* Clip sideways only.
       ---------------------------------------------------------------------
       `overflow: hidden` was here to stop the veil's blurred fields — inset
       -20%, so they extend past every edge — from adding horizontal scroll.
       It also cut them off dead level with the bottom of the gate, which drew
       a hard line across the page: below it the minimal footer sat on flat
       cream that read as a band of its own, which is the background Craig
       asked to have removed.

       overflow-x: clip keeps the horizontal scroll away and lets the fields
       bleed down behind the footer, so there is no edge and the footer sits on
       the page rather than on a block. */
    overflow-x: clip;
    overflow-y: visible;
  }

  /* Three soft fields, blurred past recognition. This is the "blurred page"
     of the brief without a page behind it: the look, none of the exposure. */
  .pruvit-gate__veil {
    position: absolute;
    inset: -20%;
    filter: blur(90px);
    opacity: 0.5;
    pointer-events: none;
  }

  .pruvit-gate__veil span {
    position: absolute;
    display: block;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .pruvit-gate__veil span:nth-child(1) {
    inset-block-start: 4%;
    inset-inline-start: 2%;
    background: var(--accent-1, #99a2f3);
  }

  .pruvit-gate__veil span:nth-child(2) {
    inset-block-end: 0;
    inset-inline-end: 4%;
    background: #d9e2ef;
  }

  .pruvit-gate__veil span:nth-child(3) {
    inset-block-start: 30%;
    inset-inline-start: 40%;
    background: #fff;
  }

  @media (prefers-reduced-motion: no-preference) {
    .pruvit-gate__veil span {
      animation: pruvit-gate-drift 22s ease-in-out infinite alternate;
    }

    .pruvit-gate__veil span:nth-child(2) {
      animation-delay: -7s;
    }

    .pruvit-gate__veil span:nth-child(3) {
      animation-delay: -14s;
    }
  }

  @keyframes pruvit-gate-drift {
    to {
      transform: translate3d(4%, -5%, 0) scale(1.08);
    }
  }

  .pruvit-gate__stack {
    position: relative;
    width: min(100%, 520px);
  }

  .pruvit-gate__panel {
    position: relative;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(28px, 4vw, 44px);
    text-align: center;
  }

  .pruvit-gate__logo {
    display: block;
    width: 148px;
    height: 34px;
    /* 28, not 20. Craig, 2026-09-21: it should read as the panel's header
       rather than as the first line of the copy, and the gap is what does
       that — there is no rule and it does not need one. */
    margin: 0 auto 28px;
    background: currentColor;
    color: #16203a;
    -webkit-mask: var(--pruvit-logo) center / contain no-repeat;
    mask: var(--pruvit-logo) center / contain no-repeat;
  }

  .pruvit-gate__kicker {
    margin: 0 0 10px;
    font-family: var(--font-mono--family);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
  }

  /* Zero, because the kicker above is optional and carries its own bottom
     margin. A top margin here would double up when the kicker is present and
     look arbitrary when it is not. */
  .pruvit-gate__h {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(27px, 3.6vw, 36px);
    /* 700 at -0.025em is the house heading setting, declared on
       .pruvit-h-xl/lg/md in pruvit-tokens and repeated by every component
       heading in the theme — .pruvit-tri-card__heading at 22px uses the same
       pair as the 54px display type. One weight, one tracking, whatever the
       size. This had drifted to 800 at -0.03. */
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
  }

  .pruvit-gate__p {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  /* Referred by. Reserved, then filled — see the note in the markup for why
     the reservation is conditional. */
  /* On the band, under the panel. 24px: 18 cleared the shadow but sat close
     enough to read as part of it. */
  .pruvit-gate__ref {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-block-start: 24px;
    min-height: 34px;
  }

  /* [hidden] against a flex display, which is the trap this theme keeps
     meeting: the attribute is a UA rule at (0,0,0) and loses. */
  .pruvit-gate__ref[hidden] {
    display: none;
  }

  .pruvit-gate__ref-av {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    /* A ring, because the avatar now sits on the band rather than on the
       panel's white and needs its own edge to read as a portrait. */
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9);
    background: rgb(22 32 58 / 0.1);
    background-size: cover;
    background-position: center;
  }

  .pruvit-gate__ref-t {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
  }

  /* The skeleton. A bar the width of a plausible name rather than of the
     empty element, so the fade-in does not change the panel's height. */
  .pruvit-gate__ref.is-loading .pruvit-gate__ref-t {
    width: 132px;
    height: 13px;
    border-radius: 999px;
    background: rgb(22 32 58 / 0.1);
  }

  .pruvit-gate__ref.is-loading .pruvit-gate__ref-av,
  .pruvit-gate__ref.is-loading .pruvit-gate__ref-t {
    animation: pruvit-gate-pulse 1.4s ease-in-out infinite;
  }

  @keyframes pruvit-gate-pulse {
    50% {
      opacity: 0.45;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-gate__ref.is-loading .pruvit-gate__ref-av,
    .pruvit-gate__ref.is-loading .pruvit-gate__ref-t {
      animation: none;
    }
  }

  .pruvit-gate__ref.is-ready {
    animation: pruvit-gate-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes pruvit-gate-in {
    from {
      opacity: 0;
    }
  }

  .pruvit-gate__go {
    margin-block-start: 22px;
    width: 100%;
  }

  .pruvit-gate__alt {
    display: inline-block;
    margin-block-start: 16px;
    font-family: var(--font-heading--family);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--accent-mark, var(--accent-1-ink, #3f47a0));
  }

  .pruvit-gate__more {
    margin-block-start: 0;
    text-align: start;
  }

  /* The summary is the primary button, so the marker has to go — a disclosure
     triangle beside a call to action reads as a control that might not do
     what it says. */
  .pruvit-gate__more > summary {
    cursor: pointer;
    list-style: none;
    text-align: center;
  }

  .pruvit-gate__more > summary::-webkit-details-marker {
    display: none;
  }

  .pruvit-gate__more[open] > summary {
    display: none;
  }

  .pruvit-gate__form {
    margin-block-start: 18px;
  }

  .pruvit-gate__fine {
    margin: 18px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--slate);
  }
/* END_SECTION:pruvit-gate */

/* START_SECTION:pruvit-header (INDEX:42) */
/* Published for the hero, which slides under this bar and has to pay its
     height back as padding. One number, declared once. */
  :root {
    --pruvit-gnav-h: 66px;
  }

  /* The group is what sticks, not the bars inside it.

     A sticky element only sticks within its containing block, and
     #header-group is only as tall as the bars it holds — so `position: sticky`
     on the header pinned it for about 159px and then let it scroll away with
     everything else. It had looked right in every screenshot taken near the top
     of the page.

     Pinning the group and offsetting it by the referrer bar's height gives the
     prototype's behaviour in one rule: the bar scrolls out of view and the
     header holds at the top. The offset is measured by pruvit-header.js,
     because that bar's copy can wrap. */
  .header-group-sticky {
    position: sticky;
    top: calc(var(--pruvit-topbar-h, 42px) * -1);
    z-index: 70;
  }

  /* The header stays. Every page, all the way down.
     ---------------------------------------------------------------------
     This used to vary: where there was a section nav — the home page — the
     group was offset far enough that the header scrolled away and only the
     nav survived, on the grounds that two rows of pinned chrome was 117px on
     a page that gives the hero to the fold.

     Craig retired that on 2026-09-23 along with the bar's auto-hide. The
     offset is the referrer bar's height everywhere now: that bar scrolls out
     of view and the menu holds at the top, which is the one thing a shopper
     goes looking for.

     The section nav still costs its 51px, but only once the hero is behind
     you — see sections/pruvit-section-nav.liquid. It is not on screen during
     the part of the page this offset was written to protect. */

  .pruvit-gnav {
    position: relative;
    z-index: 2;
    height: var(--pruvit-gnav-h);
    background: transparent;
    border-block-end: 1px solid transparent;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease,
      box-shadow 0.25s ease;
  }

  /* A band that rises under the chrome and paints a dark ground.
     ---------------------------------------------------------------------
     The bar is transparent at rest, so its ink is the page's foreground —
     navy. Over the quiz's navy that measured 1:1: not poor contrast, none at
     all. The logo, the tools and the menu button were all still there, in
     exactly the colour of what was behind them.

     What flips is the token, not each thing that uses it. The tools set
     `color: var(--color-foreground)` themselves and the hover wash and the
     flag's ring are built from --color-foreground-rgb, so overriding the pair
     here carries every one of them without naming any.

     Only while the bar is still glass. Once it is scrolled it paints white and
     the navy ink is right again — which is why this is :not(.is-scrolled)
     rather than a page-level theme.

     The class goes on a band that sits *under* the chrome, which in practice
     means the first one: the sections that carry it also carry the negative
     margin that lifts them up there. */
  .page-wrapper:has(.pruvit-chrome-dark) .pruvit-gnav:not(.is-scrolled),
  .page-wrapper:has(.pruvit-chrome-dark) .pruvit-snav:not(.is-scrolled) {
    --color-foreground: #fff;
    --color-foreground-rgb: 255 255 255;

    color: #fff;
  }

  /* Chrome only appears once content is actually passing underneath. Over the
     hero the bar is glass with nothing behind it. */
  .pruvit-gnav.is-scrolled {
    background: rgb(255 255 255 / 0.88);
    backdrop-filter: blur(14px);
    border-block-end-color: var(--line);
    box-shadow: 0 6px 24px -18px rgba(14, 20, 32, 0.5);
  }

  /* The same formula every band uses, rather than a number of its own. It was
     max-width:1200 with 24px of padding inside it, which put the bar's content
     at 1152 — the measure exactly, but by arithmetic that happened to agree
     rather than by saying so. At 72rem nobody noticed; at 90rem the bar would
     have stopped 120px short of the content on each side. */
  .pruvit-gnav__in {
    width: min(var(--pruvit-measure), 100% - var(--page-margin, 24px) * 2);
    margin-inline: auto;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
  }

  .pruvit-gnav__left {
    display: flex;
    justify-content: flex-start;
    margin-inline-start: -10px;
  }

  .pruvit-gnav__logo {
    justify-self: center;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
  }

  .pruvit-gnav__logo-img {
    display: block;
    height: auto;
    max-height: 30px;
    width: auto;
  }

  .pruvit-gnav__mark {
    display: block;
    height: 30px;
    aspect-ratio: 227.42 / 71.44;
    background: currentColor;
    -webkit-mask: var(--pruvit-logo) center / contain no-repeat;
    mask: var(--pruvit-logo) center / contain no-repeat;
  }

  @media screen and (max-width: 420px) {
    .pruvit-gnav__mark {
      height: 26px;
    }
  }

  .pruvit-gnav__tools {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    margin-inline-end: -10px;
  }

  .pruvit-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    min-width: 40px;
    padding-inline: 10px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 999px;
    color: var(--color-foreground);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease;
  }

  .pruvit-tool:hover {
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .pruvit-tool svg {
    width: 22px;
    height: 22px;
    flex: none;
  }

  /* The flag is artwork, not a stroked glyph, so it gets its own footprint and
     an inset hairline to sit it off a white bar. 24px, two up on the stroked
     glyphs beside it: a filled disc next to an outline reads small at the same
     size, and the avatar matches it (Craig, 2026-10-15). */
  .pruvit-tool__flag {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb) / 0.16);
    background-size: cover;
    background-position: center;
  }

  /* The signed-in avatar, sized to the flag beside it (Craig, 2026-10-15: "I
     feel like they should be the same"). MV Qore writes it into the account
     anchor as <img class="referrer-avatar"> -- or initials in a div when there
     is no photo -- with width and height of 32px INLINE, so only !important
     reaches them. Scoped to this anchor: the same class is the referrer's
     picture elsewhere and keeps MV Qore's size there. The ring is the flag's,
     drawn as an outline because an inset shadow paints under an image. */
  .pruvit-tool--account .referrer-avatar,
  .pruvit-tool--account .referrer-initials {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50%;
    flex: none;
    outline: 1px solid rgb(var(--color-foreground-rgb) / 0.16);
    outline-offset: -1px;
  }

  .pruvit-tool--account .referrer-avatar {
    display: block;
    object-fit: cover;
  }

  .pruvit-tool--account .referrer-initials {
    display: grid;
    place-items: center;
    font-size: 10px !important;
    line-height: 1;
  }

  .pruvit-tool__cart-icon {
    display: block;
    position: relative;
    line-height: 0;
  }

  /* Horizon paints the bubble on a child element, .cart-bubble__background, and
     documents --cart-bubble-background / --cart-bubble-text as the hook. Setting
     a background on .cart-bubble itself left both painting — ours over Horizon's
     fallback, which is the page text colour — and that dark disc under the
     accent one is what showed while the count loaded.

     Tabular figures: the count sits in a fixed circle and 11 must not be
     narrower than 88. */
  /* Duranta, not periwinkle. Craig, 2026-09-23: "wouldn't hurt to make that pop
     a little separate to the periwinkle." It is the one warm colour in this
     palette and the count is the one thing in the header that changes on its
     own, so the exception is earned — the same argument the flag slot makes
     for it on the partner page.

     Measured, the swap is not free and it goes both ways:

       the digit   5.67 on periwinkle-deep  ->  13.43 on Duranta
       the disc    3.25 on white            ->   1.37 on white
                   2.98 on cream            ->   1.26 on cream

     So the number becomes far easier to read and the badge nearly stops being
     a badge: Duranta is a light colour (L .715 against periwinkle's .391) and
     a 1.37 disc on a white header is a dark numeral floating with no shape
     around it. That is the opposite of popping.

     Hence the ring below. It is the rule HANDOFF already states — neither
     accent can carry a boundary on a light ground, so an edge supplies one —
     in --flag-edge, Duranta's own hue at V 56%: 3.52 on white and 3.15 on
     ice-soft, the hero tint this header floats over.

     It was --flag-ink first, at 6.62, and Craig was right that it was too
     dark. A ring is a non-text graphical object and owes 3:1; the ink is
     built for the flag as TYPE, which owes 4.5:1, so borrowing it darkened
     the edge by a whole level for no requirement. --flag-edge is the lightest
     step on this hue that still clears 3:1 on both grounds the badge sits on.
     Same hue either way, so it reads as a deeper shade of the badge rather
     than an outline drawn around it. */
  /* A circle, not a pill. .pruvit-tool is shaped for the menu button, which
     carries a text label beside its glyph and wants 10px of side padding and a
     999px radius -- on that, a pill. The account tool holds one round thing and
     nothing else, so the same padding made it 42 wide against 40 tall and the
     hover ground came out an oblong a couple of pixels wider than the avatar
     inside it. Craig, 2026-09-28.

     aspect-ratio rather than a fixed width, because what sits in here is not
     ours: MV Qore replaces the anchor's contents with an avatar or initials at
     its own bootstrap, so the box is squared against its own height and stays
     square whatever they put in it.

     The cart tool gets the same treatment and its badge does not care, which
     is worth writing down because it looks like it should. The bubble's
     containing block is not this box: its offsetParent is
     .pruvit-tool__cart-icon, a 22px wrapper hugging the glyph, so the -9/-7
     offsets below are measured from the ICON's edges and nothing this rule
     does to the tool's padding can reach them. Measured before and after:
     the badge sits 9px right and 7px above the icon either way, exactly. */
  /* The country tool joined them 2026-10-15 (Craig): with the side padding
     its 24px flag made it 44 x 40, an oval hover ground beside two circles. */
  .pruvit-tool--country,
  .pruvit-tool--account,
  .pruvit-tool--cart {
    padding-inline: 0;
    aspect-ratio: 1;
  }

  .pruvit-tool--cart {
    --cart-bubble-background: var(--flag);
    --cart-bubble-text: var(--flag-on);
  }

  /* On the background element, which is the disc: .cart-bubble itself is the
     flex box that centres the digit, and Horizon paints the fill on the child.
     Inset, so the ring is drawn inside the 20px and the badge does not grow. */
  .pruvit-tool--cart .cart-bubble__background {
    box-shadow: inset 0 0 0 1px var(--flag-edge);
  }

  /* 20px and 11px, up from 17 and 10.5.

     The complaint was that it was hard to read and the instinct was to make the
     number white. Measured, that was backwards on the periwinkle this used to
     be: the dark ink was 5.67:1 there and white would have been 3.25:1, which
     fails AA — a mid-tone ground takes dark text better than light.

     So the contrast was never the problem. Ten pixels at weight 800 in a 17px
     circle is simply small, and size is the lever that was actually available.
     The offsets grow with it so the bubble expands outward from the icon rather
     than further over it. (White on Duranta is 1.37 and not a question.) */
  .pruvit-tool--cart .cart-bubble {
    position: absolute;
    top: -7px;
    inset-inline-end: -9px;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  /* Nothing until the count is known. Horizon marks an empty cart
     visually-hidden server-side; this covers the other case — a cached page
     whose number is stale until the script has been to /cart.js. */
  .pruvit-tool--cart .cart-bubble[hidden],
  .pruvit-tool--cart .cart-bubble.visually-hidden {
    display: none;
  }

  /* The menu reads as a control, not a bare hamburger. */
  .pruvit-tool__label {
    letter-spacing: 0.01em;
  }

  @media screen and (max-width: 900px) {
    :root {
      --pruvit-gnav-h: 58px;
    }

    /* Region moves into the menu panel; cart and account stay in reach. The
       menu label goes with it — the glyph is unambiguous once the row is
       this tight. */
    .pruvit-gnav__tools .pruvit-tool--country {
      display: none;
    }

    .pruvit-tool--menu .pruvit-tool__label {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-gnav {
      transition: none;
    }
  }

  /* ---- the two panels ---------------------------------------------------
     The same object from opposite sides. On desktop both float clear of every
     edge rather than butting the chrome. */
  .pruvit-menu-bd,
  .pruvit-cart-bd {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--scrim-drawer, rgba(14, 20, 32, 0.42));
    backdrop-filter: var(--scrim-blur, blur(3px));
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .pruvit-menu-bd.is-open,
  .pruvit-cart-bd.is-open {
    opacity: 1;
  }

  /* A class selector outranks the UA rule, so the attribute needs restating or
     a closed panel stays in the layout. */
  .pruvit-menu[hidden],
  .pruvit-cart[hidden],
  .pruvit-menu-bd[hidden],
  .pruvit-cart-bd[hidden] {
    display: none;
  }

  .pruvit-menu,
  .pruvit-cart {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 91;
    background: #fff;
    color: #16203a;
    display: flex;
    flex-direction: column;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    overscroll-behavior: contain;
    --color-foreground-rgb: 22 32 58;
    --ink-soft: rgb(22 32 58 / 0.72);
    --slate: rgb(22 32 58 / 0.55);
  }

  {%- comment -%}
    Below 901px the drawers are flush to their own edge and full height, so
    only the leading edge — the one that travels into the page — is a visible
    corner. Rounding it is what makes the panel read as an object sliding over
    the page rather than a screen replacing it. The three edges against the
    viewport stay square, because a radius there is a gap, not a corner.

    Physical properties, not logical, and deliberately: these sit beside
    `left: 0` and `right: 0` on the same selectors. Mixing the two would mean
    a future RTL locale flipped the radius while the positioning stayed put,
    and rounded the trailing edge. Neither is right on its own — if the
    drawers are ever made logical, both lines move together. No RTL locale is
    published today (the nine are de, en, es, fr, it, ja, pt-PT, zh-CN,
    zh-TW), so this is a note for whoever adds one.

    --r-lg is what the desktop rule below uses on all four corners, so a
    drawer keeps the same corner at every width; only the count changes.
  {%- endcomment -%}
  .pruvit-menu {
    left: 0;
    width: min(480px, 92vw);
    transform: translateX(-100%);
    overflow-y: auto;
    border-top-right-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
  }

  .pruvit-cart {
    right: 0;
    width: min(480px, 92vw);
    transform: translateX(100%);
    border-top-left-radius: var(--r-lg);
    border-bottom-left-radius: var(--r-lg);
    /* The menu clips already — overflow-y: auto makes it a scroll container.
       The cart scrolls on .pruvit-cart__scroll instead, so its root needs
       telling, or the head and the checkout panel square off the corners
       they sit in. */
    overflow: hidden;
  }

  .pruvit-menu.is-open,
  .pruvit-cart.is-open {
    transform: translateX(0);
  }

  .pruvit-menu.is-open {
    box-shadow: 30px 0 80px -40px rgba(14, 20, 32, 0.5);
  }

  /* ---- the cart page ------------------------------------------------------
     The drawer moved into /cart by pruvit-panels.js (sections/pruvit-cart-
     page.liquid). Everything inside is the drawer's own; only the frame
     changes: in the page's flow, not fixed, not sliding, no close button.
     overflow: clip rather than hidden keeps the rounded corners without
     making a scroll container, which would stop the summary sticking. */
  .pruvit-cart.pruvit-cart--page,
  .pruvit-cart.pruvit-cart--page.is-open {
    position: relative;
    inset: auto;
    z-index: auto;
    width: auto;
    transform: none;
    transition: none;
    box-shadow: none;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: clip;
  }

  .pruvit-cart--page [data-pruvit-cart-close] {
    display: none;
  }

  .pruvit-cart--page .pruvit-cart__head h3 {
    font-size: 24px;
  }

  .pruvit-cart--page .pruvit-cart__scroll {
    flex: none;
    overflow: visible;
  }

  @media screen and (min-width: 901px) {
    .pruvit-cart.pruvit-cart--page,
    .pruvit-cart.pruvit-cart--page.is-open {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 380px;
      grid-template-areas:
        'head head'
        'scroll foot';
      align-items: start;
    }

    .pruvit-cart--page .pruvit-cart__head {
      grid-area: head;
    }

    .pruvit-cart--page .pruvit-cart__scroll {
      grid-area: scroll;
      min-width: 0;
    }

    /* The summary beside the lines and in view while they scroll, as a cart
       page's checkout column usually is. */
    .pruvit-cart--page .pruvit-cart__foot {
      grid-area: foot;
      position: sticky;
      top: calc(var(--pruvit-gnav-h, 66px) + var(--pruvit-snav-h, 0px) + 16px);
      border-block-start: 0;
      border-inline-start: 1px solid var(--line);
      padding: 22px 24px 24px;
    }

    .pruvit-cart--page .pruvit-addons {
      margin-block-end: 0;
    }
  }

  .pruvit-cart.is-open {
    box-shadow: -30px 0 80px -40px rgba(14, 20, 32, 0.5);
  }

  @media screen and (min-width: 901px) {
    .pruvit-menu,
    .pruvit-cart {
      top: 12px;
      bottom: 12px;
      border-radius: var(--r-lg);
      overflow: hidden;
    }

    .pruvit-menu {
      left: 12px;
      width: 480px;
      transform: translateX(calc(-100% - 14px));
    }

    .pruvit-cart {
      right: 12px;
      width: 480px;
      transform: translateX(calc(100% + 14px));
    }

    .pruvit-menu.is-open,
    .pruvit-cart.is-open {
      box-shadow: var(--shadow-lg);
    }

    .pruvit-menu__body {
      overflow-y: auto;
    }
  }

  /* ---- the menu as a dropdown -------------------------------------------
     Craig, 2026-09-23: "on desktop, try making it a hover state of hovering
     the Menu button, where it appears below that button."

     Gated on the pointer, not on the width. A hover trigger is useless to
     anything that cannot hover, and >901px includes a Surface, a touchscreen
     laptop and an iPad with a keyboard — all of which report a wide viewport,
     none of which has a hover state or an Escape key. Those keep the drawer
     and keep its close button, which is why the X below hides on the same
     query rather than on a breakpoint.

     --dd-gap is the air between the bar and the panel. Craig, 2026-09-24,
     asked for it; it started at 0 because a gap is where a hover dropdown
     goes wrong — the pointer leaves the button, lands on neither, and the
     panel closes under a hand that was travelling towards it.

     What makes a gap safe here is the 300ms close delay in pruvit-panels.js,
     and this changes that delay's job: it was belt-and-braces over a panel
     that touched its trigger, and it is now the mechanism. 10px is crossed in
     a few milliseconds and the timer forgives thirty times that. The usual
     alternative, an invisible bridge element, is not available anyway — the
     panel sets overflow: hidden above 901px and would clip a pseudo-element.

     The veil still starts at the bar, not at the panel, so the gap shows
     dimmed page through it and the panel reads as floating below the bar
     rather than hanging off it.

     Anchored from JS: --dd-x is the Menu button's left edge and --dd-y the
     header's bottom, both measured rather than assumed, because the header
     moves under the referrer bar and the page gutter changes with the
     viewport. The fallbacks are only for the frame before the first
     measurement. */
  @media screen and (min-width: 901px) and (hover: hover) and (pointer: fine) {
    .pruvit-menu.is-dd {
      --dd-gap: 10px;

      top: calc(var(--dd-y, 78px) + var(--dd-gap));
      bottom: auto;
      left: var(--dd-x, 12px);
      width: 440px;
      /* --dd-max is measured from the bar, so the gap comes off it here —
         otherwise a full-height panel would hang the gap's worth below the
         fold. */
      max-height: calc(var(--dd-max, calc(100vh - 96px)) - var(--dd-gap));
      border-radius: var(--r-lg);
      /* Down and in, not across: it belongs to the button above it now. */
      transform: translateY(-10px);
      opacity: 0;
      transition:
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.16s ease;
    }

    .pruvit-menu.is-dd.is-open {
      transform: none;
      opacity: 1;
      box-shadow: var(--shadow-lg);
    }

    /* The head held the region button and the X. The region button has been
       display:none above 900px since it was written, and the X goes here, so
       what is left is an empty 66px bar above the search field. */
    .pruvit-menu.is-dd .pruvit-menu__head {
      display: none;
    }

    .pruvit-menu.is-dd .pruvit-menu__body {
      padding-block-start: 22px;
    }

    /* The veil starts where the bar ends.
       Craig: "can we add the page blur/darken effect behind it on hover?
       Header menu and ref bar would be unaffected."

       Nothing new to build — the drawer's backdrop is already this exact
       effect, 42% ink over a 3px blur, and it was only being hidden here. All
       it needs is a top edge: at the bar's bottom the header keeps its own
       ground and the referrer bar above it is never in range. Pushing the
       header above the backdrop instead would have blurred the hero THROUGH
       it, because the bar is transparent over the hero on the home page.

       --dd-y comes from the same measurement that places the panel, which is
       why it is set on the root rather than on the panel: these two are
       siblings, and a custom property on one of them does not reach the other.

       Lighter than the drawer's, which stays at 0.42. That number is tuned for
       a takeover you deliberately opened; this one fires on hover, so grazing
       the Menu button should not drop the page two stops. Craig, 2026-09-24,
       after seeing 0.42 on a real screen. The blur is untouched — it is the
       blur that separates the panel from the page, and the ink only has to
       take the page's contrast down far enough to stop it competing.

       The page behind is no longer clickable while this is up, which is what a
       veil means. Clicking it closes the menu, as it does for the drawer. The
       scroll lock stays off, though — that belongs to the modal path. */
    .pruvit-menu-bd.is-dd {
      top: var(--dd-y, 78px);
      background: rgba(14, 20, 32, 0.28);
    }

    /* Craig: "Hide the X close button in this desktop view (unnecessary)."
       Agreed here and only here. Moving off it closes it, Escape closes it,
       and the button that opened it closes it — three ways out, none of them
       needing a fourth drawn on the panel. It is inside this query rather than
       a breakpoint because a pointer that cannot hover has none of the three.

       Two classes and an element beats .pruvit-menu__x on its own, so this
       does not need !important — see the note on that rule about losing a
       specificity race to the rule above it. */
    .pruvit-menu.is-dd .pruvit-menu__x {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-menu.is-dd {
      transition: none;
    }
  }

  .pruvit-menu__head,
  .pruvit-cart__head {
    display: flex;
    align-items: center;
    height: var(--pruvit-gnav-h, 66px);
    flex: none;
  }

  .pruvit-menu__head {
    justify-content: flex-end;
    padding: 0 16px 0 20px;
  }

  .pruvit-cart__head {
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px 0 22px;
    border-block-end: 1px solid var(--line);
  }

  .pruvit-cart__head h3 {
    font-family: var(--font-heading--family);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
  }

  .pruvit-cart__head-actions {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  /* The share control: the close button, widened to hold a label.
     ---------------------------------------------------------------------
     It is .pruvit-menu__x with everything that makes it one kept — the bare
     ground, the hover wash, the pill radius, the icon at its own 24px, so the
     two glyphs in this header are the same size and read as siblings.

     Only the box changes. The base is a fixed 38px square laid out with
     `place-items`, which centres a lone glyph and has nothing to say about a
     glyph beside text; inline-flex and an auto width are what let the label
     sit next to it.

     A bordered pill was tried first and was too loud: a secondary action
     became the heaviest thing in the header, next to the cart title it is
     supposed to sit under. The label alone does the work the border was
     being asked to do.

     The weight is 600, not the 700 of everything else in this theme. At
     13.5px beside an 18px/700 title, 700 made two headings out of a heading
     and a control.

     Scoped to the head, and that is load-bearing rather than tidy: this rule
     sits ABOVE .pruvit-menu__x in the file, so at one class each the base won
     `width` and `display` on source order and the button stayed a 38px square
     with the label crushed inside it. The font size and weight landed, because
     the base does not set those — which is exactly what makes this kind of
     miss look like a styling opinion rather than a cascade bug. Two classes
     settle it wherever either rule ends up. */
  .pruvit-cart__head .pruvit-cart__share {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-inline: 9px 12px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  /* The cart hides this while it is empty, and `hidden` alone cannot do it:
     [hidden] is a UA rule at (0,0,0) and both .pruvit-menu__x and the rule
     above set `display`. Fifth time in this theme. */
  .pruvit-cart__head .pruvit-cart__share[hidden] {
    display: none;
  }

  /* The share sheet. Ported from the prototype's .share-sheet, including its
     own reason for existing: inline in the footer it squeezed the scrollable
     body to about 170px and hid the add-ons rail, so it covers the drawer
     instead. */
  .pruvit-share {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  /* [hidden] is a UA rule at (0,0,0) and loses to any class that sets display.
     Stated here for the fifth time in this theme. */
  .pruvit-share[hidden] {
    display: none;
  }

  .pruvit-share__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--pruvit-gnav-h, 66px);
    flex: none;
    padding: 0 14px 0 22px;
    border-block-end: 1px solid var(--line);
  }

  .pruvit-share__t {
    font-family: var(--font-heading--family);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .pruvit-share__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 22px;
    scrollbar-width: thin;
    scrollbar-color: rgb(22 32 58 / 0.22) transparent;
  }

  .pruvit-share__lede {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--slate);
  }

  /* 168px holds a shortened link comfortably — 33 modules at about 5px each.
     It would not hold an unshortened one; see assets/pruvit-share.js for the
     measurements and why that matters if the shortener is ever turned off. */
  .pruvit-share__qr {
    width: 168px;
    height: 168px;
    margin: 20px auto 10px;
    padding: 8px;
    border-radius: var(--r-xs);
    background: var(--ice-soft);
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  .pruvit-share__qr[hidden] {
    display: none;
  }

  .pruvit-share__qr svg {
    width: 100%;
    height: 100%;
  }

  .pruvit-share__hint {
    max-width: 300px;
    margin: 0 auto 18px;
    text-align: center;
    text-wrap: pretty;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--slate);
  }

  .pruvit-share__row {
    display: flex;
    gap: 8px;
  }

  .pruvit-share__url {
    flex: 1;
    min-width: 0;
    border: 1.5px solid var(--line);
    border-radius: var(--r-xs);
    padding: 9px 11px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--slate);
    background: var(--ice-soft);
    text-overflow: ellipsis;
  }

  .pruvit-share__btn {
    flex: none;
    border: 1.5px solid var(--color-foreground);
    background: var(--color-foreground);
    color: #fff;
    border-radius: var(--r-xs);
    padding: 0 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* 44px, not the prototype's 41. The prototype's row was drawn at desktop
       and measured 41px tall with a 40px icon button — under the 44px minimum
       touch target, which is where this sheet is most used, since scanning a
       QR and sending a link are both phone jobs. The row is display:flex with
       the default stretch, so raising the buttons brings the input up with
       them and the three stay the same height. */
    min-height: 44px;
    transition: background 0.16s ease, border-color 0.16s ease;
  }

  /* Confirmation in the accent rather than a toast: the button is where the
     eye already is, and there is nowhere in a drawer for a toast to go that
     is not on top of something else. */
  .pruvit-share__btn.is-ok {
    background: var(--accent-1);
    border-color: var(--accent-1);
    color: var(--accent-1-on);
  }

  .pruvit-share__btn--icon {
    padding: 0 11px;
    min-width: 44px;
  }

  .pruvit-share__btn--icon[hidden] {
    display: none;
  }

  .pruvit-share__btn svg {
    width: 15px;
    height: 15px;
  }

  .pruvit-share__note {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--slate);
  }

  .pruvit-share__note[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-share__btn {
      transition: none;
    }
  }

  .pruvit-menu__flag {
    display: none;
    margin-inline-start: -10px;
  }

  /* The country and currency beside the flag. No display of its own: it
     inherits the button's, which is already the thing that appears below
     900px, so the label cannot get out of step with the button holding it.
     nowrap because "United Kingdom (GBP £)" would otherwise break across two
     lines inside a 58px head. */
  .pruvit-menu__region {
    white-space: nowrap;
  }

  @media screen and (max-width: 900px) {
    .pruvit-menu__head {
      justify-content: space-between;
    }

    .pruvit-menu__flag {
      display: inline-flex;
    }
  }

  .pruvit-menu__x {
    width: 38px;
    height: 38px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: inherit;
    transition: background 0.18s ease;
  }

  .pruvit-menu__x:hover {
    background: rgb(22 32 58 / 0.06);
  }

  .pruvit-menu__x svg {
    width: 20px;
    height: 20px;
  }

  .pruvit-menu__body {
    padding: 22px 24px 30px;
    display: grid;
    gap: 34px;
    align-content: start;
  }

  /* Search leads the panel rather than sharing the header row: a field wedged
     between the flag and the close button would be ~200px on a phone and would
     fight the close target. */
  .pruvit-menu__search {
    position: relative;
    display: block;
  }

  .pruvit-menu__search input {
    width: 100%;
    height: 46px;
    border-radius: var(--r-xs);
    border: none;
    background: rgb(22 32 58 / 0.055);
    padding: 0 40px 0 42px;
    font-family: inherit;
    font-size: 14.5px;
    color: inherit;
    transition: background 0.16s ease, box-shadow 0.16s ease;
  }

  .pruvit-menu__search input:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 1.5px #16203a;
  }

  /* The native control renders as a blue gradient in WebKit. */
  .pruvit-menu__search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .pruvit-menu__mag {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate);
    pointer-events: none;
    line-height: 0;
  }

  .pruvit-menu__mag svg {
    width: 17px;
    height: 17px;
  }

  /* Craig, 2026-09-24: "The X is too thin and hard to see." Two faults, and
     the thin one was doing most of the damage.

     THIN. The close glyph is drawn on a 24-unit viewBox at stroke 2.2 and was
     scaled to 9px, which renders the stroke at 2.2 x 9/24 = 0.83 device pixels
     — under one pixel, so the browser had to anti-alias it into a partial
     alpha grey. It was not a thin line, it was a fraction of one. 12px and a
     stroke of 2.6 put it at 1.30, over the threshold and crisp.

     The stroke-width is set here rather than in pruvit-icon because that file
     draws the close used by three dialogs at their own sizes, where 2.2 is
     right; CSS beats the presentation attribute, so only this instance moves.

     HARD TO SEE. White on a 25% navy disc measured 1.86:1. A non-text
     graphical object owes 3:1 — the same rule as the cart badge's ring. The
     disc goes to 55%, which puts the glyph at 4.01 and the disc itself at 3.61
     against the field. Considered a dark glyph on a pale disc instead, which
     measures 11.5 on the glyph, but the disc then sits at 1.26 and the control
     reads as an X floating with no button under it.

     44px of hit area from the ::after, on a 22px button. The visible disc
     should stay small inside a 46px field; the thing a thumb has to find
     should not. */
  .pruvit-menu__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgb(22 32 58 / 0.55);
    color: #fff;
    display: grid;
    place-items: center;
    transition: background 0.16s ease;
  }

  .pruvit-menu__clear::after {
    content: '';
    position: absolute;
    inset: -11px;
    border-radius: 50%;
  }

  .pruvit-menu__clear:hover,
  .pruvit-menu__clear:focus-visible {
    background: rgb(22 32 58 / 0.72);
  }

  .pruvit-menu__clear svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.6;
  }

  .pruvit-menu__clear[hidden] {
    display: none;
  }

  /* Search shortcuts, under the box. */
  .pruvit-menu__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-start: 10px;
  }

  .pruvit-menu__tags button {
    border: none;
    background: rgb(22 32 58 / 0.055);
    border-radius: 999px;
    cursor: pointer;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate);
    transition: background 0.16s ease, color 0.16s ease;
  }

  .pruvit-menu__tags button:hover {
    background: rgb(22 32 58 / 0.1);
    color: var(--ink);
  }

  /* Results take over the panel body while a query is active. */
  .pruvit-menu__results {
    display: none;
    margin-block-start: 14px;
  }

  .pruvit-menu.is-searching .pruvit-menu__results {
    display: block;
  }

  /* The shortcuts go with the menu they belong to: once there is a query they
     have done their job, and leaving them up offers a way to replace a search
     the reader is in the middle of reading. */
  .pruvit-menu.is-searching .pruvit-menu__tags,
  .pruvit-menu.is-searching .pruvit-menu__primary,
  .pruvit-menu.is-searching .pruvit-menu__secondary {
    display: none;
  }

  .pruvit-sres {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 8px;
    border-radius: var(--r-xs);
    text-decoration: none;
    color: inherit;
    transition: background 0.14s ease;
  }

  .pruvit-sres:hover {
    background: rgb(22 32 58 / 0.055);
  }

  /* The multiply on the three thumbnails below stays, and deliberately.

     It was taken off the collection card because those packs are cut out —
     transparent PNG and WebP, corners 0,0,0,0. These three show whatever
     product a shopper searched for, put in their cart, or was offered as an
     add-on, and that includes the gear: hoodies, shorts, leggings, bras. Those
     are JPEGs, so they cannot be cut out, and their corners sampled
     255,255,255,255 — an opaque white plate.

     multiply is what makes that plate disappear into the pale ground. Without
     it each gear thumbnail is a white box on --ice-soft. Checked side by side
     in the browser before leaving it alone, not assumed. */
  .pruvit-sres__img {
    width: 44px;
    height: 44px;
    border-radius: var(--r-2xs);
    background: var(--ice-soft);
    overflow: hidden;
    display: grid;
    place-items: center;
  }

  .pruvit-sres__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .pruvit-sres__t {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
  }

  .pruvit-sres__m {
    display: block;
    font-size: 12px;
    color: var(--slate);
    margin-block-start: 2px;
  }

  .pruvit-sres__none {
    padding: 16px 8px;
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.5;
  }

  .pruvit-menu__primary {
    display: grid;
    gap: 2px;
  }

  .pruvit-menu__primary a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-decoration: none;
    color: #16203a;
    font-family: var(--font-heading--family);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.025em;
    padding: 11px 0;
    transition: color 0.18s ease;
  }

  /* Sized in em so it tracks the link's type rather than needing a second
     value at the mobile breakpoint, where the label drops from 25px to 22. */
  .pruvit-menu__arw {
    display: flex;
    flex: none;
    width: 0.92em;
    height: 0.92em;
    color: var(--accent-1-deep);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pruvit-menu__arw svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .pruvit-menu__primary a:hover .pruvit-menu__arw {
    opacity: 1;
    transform: translateX(0);
  }

  .pruvit-menu__primary a[aria-current='page'] {
    color: var(--accent-1-ink);
  }

  .pruvit-menu__secondary {
    display: grid;
    gap: 1px;
  }

  .pruvit-menu__secondary a {
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 500;
    padding: 9px 0;
    transition: color 0.18s ease;
  }

  .pruvit-menu__secondary a:hover {
    color: #16203a;
  }

  /* ---- cart body ---- */
  /* The scroller is the wrapper, not the item list, so the add-ons rail scrolls
     away with the items instead of holding a band of height above the checkout
     panel. On a short screen that band was most of the room the items had. */
  .pruvit-cart__scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(22 32 58 / 0.22) transparent;
  }

  .pruvit-cart__body {
    padding: 18px 22px 8px;
  }

  /* The prototype's .cart-empty. It had a bag, a line telling you what to do
     and the control to do it; the theme shipped the sentence alone, which
     tells someone their cart is empty and leaves them in a drawer with a
     close button. */
  .pruvit-cart__empty {
    padding: 52px 22px;
    text-align: center;
  }

  /* margin-inline: auto, not the text-align on the wrapper. base.css sets
     `svg { display: block }` for the whole theme, and a block box ignores
     text-align — so the prototype's rule, which centred an inline svg, left
     this one against the wrapper's start edge. The two lines below it are
     text and centre fine, which is what made it look like only the icon was
     wrong rather than the rule being inapplicable. */
  .pruvit-cart__empty svg {
    width: 44px;
    height: 44px;
    color: var(--slate);
    margin: 0 auto 14px;
  }

  .pruvit-cart__empty h4 {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 19px;
    /* -0.025em, the house tracking, not the prototype's -0.02. The size and
       the weight came from .cart-empty h4 and are right; the tracking was
       the one number in it that disagreed with every other heading in the
       theme, and 0.005em is invisible alone and is exactly how a scale stops
       being one. */
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #16203a;
  }

  .pruvit-cart__empty p {
    margin: 7px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
  }

  .pruvit-cart__empty-cta {
    margin-block-start: 18px;
  }

  /* The gap between lines is doing the separating, so it has to be noticeably
     larger than the internal spacing of a single line. */
  .pruvit-cline {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
  }

  .pruvit-cline + .pruvit-cline {
    margin-block-start: 28px;
  }

  .pruvit-cline__img {
    width: 64px;
    height: 64px;
    border-radius: var(--r-xs);
    background: var(--ice-soft);
    overflow: hidden;
    display: grid;
    place-items: center;
  }

  .pruvit-cline__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .pruvit-cline__t {
    display: block;
    font-family: var(--font-heading--family);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
  }

  .pruvit-cline__v,
  .pruvit-cline__p,
  .pruvit-cline__plan {
    display: block;
    font-size: 12.5px;
    color: var(--slate);
    margin-block-start: 3px;
  }

  /* A bundle's selections run to several lines, so they get the leading a
     variant line does not need, and the step name carries the weight so the
     eye can find where one step ends and the next begins. */
  .pruvit-cline__p {
    line-height: 1.45;
  }

  .pruvit-cline__p b {
    font-weight: 600;
    color: var(--ink-soft);
  }

  .pruvit-cline__plan {
    color: var(--accent-1-ink);
    font-weight: 600;
  }

  .pruvit-cline__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: 10px;
  }

  .pruvit-qty {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 2px;
  }

  .pruvit-qty button {
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 999px;
    font-size: 15px;
    line-height: 1;
    color: inherit;
    transition: background 0.16s ease;
    /* Grid so the minus character and the trash icon both land in the middle
       of a 26px circle without either needing its own alignment. */
    display: grid;
    place-items: center;
  }

  /* The SVG carries only a viewBox, so without a size it would draw at the
     default 300x150 and burst the button. */
  .pruvit-qty button svg {
    width: 13px;
    height: 13px;
  }

  .pruvit-qty button:hover {
    background: rgb(22 32 58 / 0.06);
  }

  .pruvit-qty span {
    min-width: 22px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .pruvit-cline__price {
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .pruvit-cart__foot {
    flex: none;
    border-block-start: 1px solid var(--line);
    padding: 16px 22px 20px;
    background: #fff;
  }

  .pruvit-crow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .pruvit-crow__l {
    font-family: var(--font-mono--family);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
  }

  .pruvit-crow__v {
    font-family: var(--font-heading--family);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
  }

  .pruvit-cart__tax {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--slate);
  }

  /* The checkout button's waiting state.
     ---------------------------------------------------------------------
     Same treatment as the buy box CTA, for the same reason its comment gives:
     it keeps most of its colour, because the press was accepted and something
     is being done about it. Refused would be a different look.

     Both lines are laid over each other rather than swapped in the DOM, so the
     button does not change width mid-press — "Taking you to checkout…" is
     longer than "Continue to checkout" and the pill would jump.

     visibility, not display: a hidden-by-display label has no width, so the
     grid would collapse to the busy line's measure and back again. */
  .pruvit-cart__checkout {
    position: relative;
  }

  .pruvit-cart__checkout-busy {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    visibility: hidden;
  }

  .pruvit-cart__checkout[loading] {
    opacity: 0.9;
    box-shadow: none;
    cursor: progress;
  }

  .pruvit-cart__checkout[loading] .pruvit-cart__checkout-in {
    visibility: hidden;
  }

  .pruvit-cart__checkout[loading] .pruvit-cart__checkout-busy {
    visibility: visible;
  }

  /* No lift while it is working. The hover transform on .pruvit-btn reads as
     "press me" under a cursor that is already waiting. */
  .pruvit-cart__checkout[loading]:hover {
    transform: none;
    background: var(--accent-1);
  }

  .pruvit-cart__checkout-in {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .pruvit-cart__checkout {
    width: 100%;
    margin-block-start: 14px;
  }

  .pruvit-cart__checkout svg {
    width: 17px;
    height: 17px;
    flex: none;
  }

  .pruvit-cart__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
  }

  .pruvit-cart__trust li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--slate);
  }

  .pruvit-cart__trust svg {
    width: 14px;
    height: 14px;
  }

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

  @media screen and (max-width: 430px) {
    .pruvit-menu {
      width: min(390px, 92vw);
    }

    .pruvit-menu__primary a {
      font-size: 22px;
    }

    .pruvit-menu__body {
      padding: 22px 20px 28px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-menu,
    .pruvit-cart,
    .pruvit-menu-bd,
    .pruvit-cart-bd,
    .pruvit-menu__arw {
      transition: none;
    }
  }

  /* ---- cart line extras -------------------------------------------------- */

  /* One badge recipe for the discount's name, a solid one for the money. The
     eye finds the number without parsing the discount's name first. */
  .pruvit-cline__discs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-block-start: 7px;
  }

  /* Type matches the buy box's .pruvit-save badge -- 11.5px, 700, normal
     tracking. It was 10.5 / 800 / +0.04em, and beside the buy box's badges
     the cart's read spaced out and heavier (Craig, 2026-10-16). Taller than
     that badge on purpose: 24px, fixed by line height and padding rather
     than left to the drawer's line height (Craig tried 18 and kept 24). */
  .pruvit-disc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 14px;
    color: var(--save-ink);
    background: var(--save-soft);
    padding: 5px 8px;
    border-radius: 999px;
  }

  .pruvit-disc--amt {
    color: var(--save-on);
    background: var(--save);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* The multi-buy nudge: the offer in the savings ink, and the one press that
     takes it, in the solid savings fill the amount badge uses. */
  .pruvit-cline__mb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-block-start: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--save-ink);
  }

  .pruvit-cline__mb button {
    min-height: 28px;
    padding: 4px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--save);
    color: var(--save-on);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }

  .pruvit-cline__mb button:disabled {
    opacity: 0.6;
    cursor: default;
  }

  .pruvit-cline__ss {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 7px;
  }

  .pruvit-ss {
    flex: none;
    width: 30px;
    height: 18px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    padding: 0;
    background: var(--ice);
    position: relative;
    transition: background 0.2s ease;
  }

  /* The hit area is larger than the track without the track growing. */
  .pruvit-ss::before {
    content: '';
    position: absolute;
    inset: -7px -5px;
  }

  .pruvit-ss__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(14, 20, 32, 0.35);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pruvit-ss[aria-checked='true'] {
    background: var(--accent-1-deep);
  }

  .pruvit-ss[aria-checked='true'] .pruvit-ss__knob {
    transform: translateX(12px);
  }

  .pruvit-ss__lbl {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--slate);
    line-height: 1.3;
  }

  .pruvit-ss[aria-checked='true'] + .pruvit-ss__lbl {
    color: var(--accent-1-ink);
  }

  .pruvit-cline__price s {
    color: var(--slate);
    font-weight: 500;
    margin-inline-end: 6px;
    font-size: 13px;
  }

  .pruvit-cline__price.is-saved {
    color: var(--save-ink);
  }

  /* ---- add-ons rail ------------------------------------------------------
     Full-bleed out of the cart's padding so the rail reads as scrollable
     rather than as a boxed row that happens to be cut off. */
  .pruvit-addons {
    /* No flex sizing any more — it is inside the scroller, after the last
       item, and takes the height its contents need. The ground and the rule
       above it stay: they are what separate the upsell from the cart rather
       than what pinned it to the bottom. */
    padding-block: 16px 18px;
    margin-block-start: 8px;
    background: var(--ice-soft);
    border-block-start: 1px solid var(--line);
  }

  .pruvit-addons[hidden] {
    display: none;
  }

  .pruvit-addons__h {
    font-family: var(--font-mono--family);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--slate);
    margin: 0 0 11px;
    padding-inline: 22px;
  }

  .pruvit-addons__rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 0 4px 22px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 22px;
  }

  .pruvit-addons__rail::after {
    content: '';
    flex: none;
    width: 22px;
  }

  .pruvit-addons__rail::-webkit-scrollbar {
    display: none;
  }

  /* The card is sized by what the button has to say. Once the price moved onto
     it the label is "Add to cart | $150.80", which does not fit beside an 88px
     image in a 345px drawer — so the card takes a little more of the rail and
     the image gives way first. The cap keeps it from swallowing the peek of the
     next card, which is the only thing saying the rail scrolls. */
  .pruvit-acard {
    flex: none;
    width: min(86%, 340px);
    scroll-snap-align: start;
    border: 1px solid rgb(22 32 58 / 0.07);
    border-radius: var(--r-sm);
    padding: 11px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(14, 20, 32, 0.05);
    display: grid;
    grid-template-columns: clamp(72px, 28%, 88px) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .pruvit-acard__img {
    height: 88px;
    border-radius: var(--r-2xs);
    background: var(--ice-soft);
    overflow: hidden;
    display: grid;
    place-items: center;
  }

  .pruvit-acard__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .pruvit-acard__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .pruvit-acard__t {
    font-family: var(--font-heading--family);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
  }

  /* The chooser: the native select, restyled. A custom listbox here would have
     to reinvent keyboard and mobile behaviour inside a scrolling rail inside a
     drawer, and would be worse at all three. */
  .pruvit-acard__sel {
    width: 100%;
    appearance: none;
    border: 1.5px solid var(--line);
    border-radius: var(--r-2xs);
    background-color: #fff;
    padding: 7px 28px 7px 10px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--ink);
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B84' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 13px;
    text-overflow: ellipsis;
  }

  .pruvit-acard__sel:hover {
    border-color: var(--slate);
  }

  .pruvit-acard__add {
    border: none;
    background: #16203a;
    border-radius: 999px;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 9px 10px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.16s ease, opacity 0.16s ease;
  }

  .pruvit-acard__bar {
    opacity: 0.45;
    margin-inline: 2px;
    font-weight: 400;
  }

  .pruvit-acard__add [data-pruvit-addon-price] {
    font-variant-numeric: tabular-nums;
  }

  /* Both labels occupy the same cell, so the button never changes width when
     the working state takes over. */
  .pruvit-acard__add-in,
  .pruvit-acard__add-busy {
    grid-area: 1 / 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pruvit-acard__add-busy {
    visibility: hidden;
  }

  .pruvit-acard__add.is-busy .pruvit-acard__add-in {
    visibility: hidden;
  }

  .pruvit-acard__add.is-busy .pruvit-acard__add-busy {
    visibility: visible;
  }

  .pruvit-acard__add:hover {
    background: var(--navy-mid);
  }

  .pruvit-acard__add[disabled] {
    opacity: 0.55;
    cursor: wait;
  }

  /* Narrower than an iPhone SE the price no longer fits beside the image, and
     truncating it would defeat the point of moving it onto the button. Below
     that width the button takes the whole card instead — which also makes the
     one thing worth tapping the easiest thing to hit. `display: contents` lifts
     the body's children into the card's own grid so the button can span it
     without the markup changing shape. */
  @media (max-width: 374px) {
    .pruvit-acard {
      grid-template-columns: 72px minmax(0, 1fr);
      grid-template-areas:
        'img text'
        'img opt'
        'add add';
      row-gap: 10px;
    }

    .pruvit-acard__img {
      grid-area: img;
    }

    .pruvit-acard__body {
      display: contents;
    }

    .pruvit-acard__t {
      grid-area: text;
      align-self: end;
    }

    .pruvit-acard__sel {
      grid-area: opt;
      align-self: start;
    }

    .pruvit-acard__add {
      grid-area: add;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-ss,
    .pruvit-ss__knob {
      transition: none;
    }
  }

  /* ---- pending states ----------------------------------------------------
     The click is already answered by the time any of this shows: the number has
     moved, the switch has flipped. So none of it is a "working" indicator in
     the usual sense — it says the figures beside it are not settled yet, which
     is why the line stays readable and only the prices go quiet. */
  .pruvit-cline.is-busy {
    cursor: progress;
  }

  .pruvit-cline.is-busy .pruvit-cline__price,
  .pruvit-cline.is-busy .pruvit-cline__discs,
  .pruvit-cart__foot.is-busy .pruvit-crow__v {
    opacity: 0.45;
    transition: opacity 0.14s ease;
  }

  /* The switch keeps its full contrast while it settles — it is showing the
     state the reader just chose, and dimming it would read as "did not take". */
  .pruvit-cline.is-busy .pruvit-ss {
    opacity: 1;
  }

  /* Only the controls stop responding. Blocking the whole line would also
     block selecting the text on it. */
  .pruvit-cline.is-busy .pruvit-qty,
  .pruvit-cline.is-busy .pruvit-ss {
    pointer-events: none;
  }

  /* A figure that is not merely settling but genuinely not known yet — the
     price of a line Shopify has confirmed but not yet costed, and the subtotal
     of a cart that has changed underneath it. The text keeps its box so nothing
     moves when the real number lands, and visibility:hidden keeps the stale
     figure away from screen readers as well as eyes. */
  .pruvit-unsettled {
    visibility: hidden;
    position: relative;
  }

  .pruvit-unsettled::after {
    visibility: visible;
    content: '';
    position: absolute;
    inset-block: 0.18em;
    inset-inline: 0;
    border-radius: 999px;
    background: rgb(22 32 58 / 0.1);
    animation: pruvit-settling 1.1s ease-in-out infinite;
  }

  @keyframes pruvit-settling {
    50% {
      opacity: 0.4;
    }
  }

  /* A cart being fetched for the first time, rather than one being changed. */
  .pruvit-cart__body.is-loading {
    min-height: 120px;
    position: relative;
  }

  .pruvit-cart__body.is-loading::after {
    content: '';
    position: absolute;
    top: 40px;
    left: 50%;
    width: 22px;
    height: 22px;
    margin-inline-start: -11px;
    border-radius: 50%;
    border: 2px solid rgb(22 32 58 / 0.15);
    border-block-start-color: #16203a;
    animation: pruvit-spin 0.7s linear infinite;
  }

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

  .pruvit-acard__add[disabled] {
    cursor: progress;
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-cart__body.is-loading::after {
      animation-duration: 2s;
    }

    .pruvit-cline.is-busy .pruvit-cline__price,
    .pruvit-cart__foot.is-busy .pruvit-crow__v {
      transition: none;
    }

    .pruvit-unsettled::after {
      animation: none;
    }
  }
/* END_SECTION:pruvit-header */

/* START_SECTION:pruvit-hero (INDEX:43) */
/* The hero rises under the whole pinned group, not just the bar. Clearing
     only --pruvit-gnav-h left the section nav's height of page showing above
     it, and a transparent bar over white page is just a white bar — which also
     made the tools look badly centred, because the band a reader sees was the
     bar plus that strip and the tools are centred in the bar alone. The topbar
     is excluded on purpose: it is opaque and owns its own ground. */
  /* Every band rides --r-md up over the one above it, and the band above is
     what fills its corner notches. The hero is the first band and has nothing
     to ride over: the topbar is inside the pinned group, which paints above the
     hero rather than behind it, so there is nothing for the radius to cut into
     and the corners were being carved out of white on white.

     The ground the hero would have revealed is continued here instead — the
     topbar's own navy, for exactly the depth of the radius, on the one ancestor
     that is behind both. `local` so it travels with the content: .page-wrapper
     is the scroller at 990px and up, and a fixed strip would sit at the top of
     the viewport after the page had scrolled past it. */
  .page-wrapper {
    background-image: linear-gradient(
      #16203a 0 calc(var(--pruvit-topbar-h, 42px) + var(--r-md)),
      transparent 0
    );
    background-repeat: no-repeat;
    background-attachment: local;
  }

  /* Every page gets the notch, not only the ones with a hero. Where a band
     slides under the chrome it carries the radius itself; everywhere else the
     header bar is the first thing below the topbar, so it takes it — which is
     why the collection page had square corners while the home page did not.

     Only while the bar is still glass. Once it is scrolled the topbar has gone
     and the bar sits against the top of the window, where a rounded corner
     would be cutting into nothing. */
  .page-wrapper:not(:has(.pruvit-under-chrome)) .pruvit-gnav:not(.is-scrolled) {
    background: #fff;
    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);
  }

  .pruvit-hero {
    isolation: isolate;
    padding-block: calc(clamp(40px, 6vw, 72px) + var(--pruvit-gnav-h, 66px) + var(--pruvit-snav-h, 0px) + var(--pruvit-ann-h, 0px))
      calc(var(--sec-pad) + var(--r-md));
    background: #fff;
    background-image: radial-gradient(
      1100px 620px at 88% 150px,
      var(--ice-soft) 0%,
      rgb(var(--ice-soft-rgb) / 0) 62%
    );
  }

  /* A flat 40px above the content from 941px up, deliberately off the page's
     own rhythm: the number that works here is set by the transparent bar above
     it, not by the section rhythm, and should not drift when that rhythm is
     retuned. */
  @media screen and (min-width: 941px) {
    .pruvit-hero {
      padding-block-start: calc(40px + var(--pruvit-gnav-h, 66px) + var(--pruvit-snav-h, 0px) + var(--pruvit-ann-h, 0px));
    }
  }

  .pruvit-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(28px, 4vw, 66px);
    align-items: center;
  }

  .pruvit-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px 8px 12px;
    border-radius: 999px;
    background: var(--ice-soft);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.008em;
  }

  .pruvit-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-1-deep);
    box-shadow: 0 0 0 4px rgb(var(--accent-1-deep-rgb) / 0.26);
  }

  .pruvit-hero__h1 {
    margin-block-start: 20px;
  }

  .pruvit-hero__lede {
    margin-block-start: 20px;
    max-width: 46ch;
  }

  .pruvit-hero__cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 30px);
    margin-block-start: 30px;
  }

  /* The touch target is an overlay rather than padding: padding-bottom would
     push the 2px rule away from the glyphs. */
  .pruvit-link-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading--family);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-foreground);
    text-decoration: none;
    border-block-end: 2px solid rgb(var(--accent-1-rgb) / 0.55);
    padding-block-end: 2px;
    transition: border-color 0.18s ease, color 0.18s ease;
  }

  .pruvit-link-cta::after {
    content: '';
    position: absolute;
    inset: -10px -6px;
  }

  .pruvit-link-cta:hover {
    color: var(--accent-1-ink);
    border-block-end-color: var(--accent-1-deep);
  }

  .pruvit-link-cta .pruvit-btn__arw {
    transition: transform 0.18s ease;
  }

  .pruvit-link-cta:hover .pruvit-btn__arw {
    transform: translateX(3px);
  }

  .pruvit-hero__note {
    margin-block-start: 16px;
    margin-block-end: 0;
    font-size: 13px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pruvit-hero__note svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--slate);
  }

  .pruvit-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
  }

  .pruvit-hero__trust li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 600;
  }

  .pruvit-hero__tick {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--color-foreground);
    color: var(--accent-1-bright);
    display: grid;
    place-items: center;
    flex: none;
  }

  .pruvit-hero__tick svg {
    width: 11px;
    height: 11px;
  }

  .pruvit-hero__media {
    position: relative;
  }

  .pruvit-hero__photo {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-lg);
    background: var(--ice-soft);
  }

  /* Both layers are absolute so they stack. The scrim below is also absolute
     with z-index auto, which puts it in the same paint step as the video —
     resolved by tree order, so being last keeps it on top of both. */
  .pruvit-hero__photo img,
  .pruvit-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* The reveal waits for 'playing' to fire rather than assuming it will. That
     is what makes Low Power Mode fall back cleanly: autoplay is refused, the
     event never comes, and the still simply stays. */
  .pruvit-hero__video {
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .pruvit-hero__video.is-playing {
    opacity: 1;
  }

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

  .pruvit-hero__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      190deg,
      rgba(22, 32, 58, 0.16) 0%,
      rgba(22, 32, 58, 0) 34%,
      rgba(22, 32, 58, 0.3) 100%
    );
  }

  .pruvit-chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.94);
    color: #16203a;
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px -14px rgba(14, 20, 32, 0.6);
  }

  .pruvit-chip svg {
    width: 15px;
    height: 15px;
  }

  .pruvit-chip--1 {
    top: 26px;
    inset-inline-start: -16px;
  }

  .pruvit-chip--2 {
    bottom: 104px;
    inset-inline-end: -14px;
  }

  .pruvit-chip--dark {
    background: #16203a;
    color: #fff;
  }

  /* 20px above the picture on a phone, down from the clamp's 40px floor.
     ---------------------------------------------------------------------
     Craig, 2026-09-23: that space is above the fold, and on a phone the fold
     is the whole argument -- the picture is the first thing anyone sees and
     every pixel spent over it is a pixel of the headline they do not.

     Only the clamp's share moves. The gnav term stays, because it is not
     spacing: the header is transparent and painted over this section, and
     that term is the hero paying back the height it borrows. Take it out and
     the menu sits on the picture. */
  @media screen and (max-width: 749px) {
    .pruvit-hero {
      padding-block-start: calc(20px + var(--pruvit-gnav-h, 66px) + var(--pruvit-snav-h, 0px) + var(--pruvit-ann-h, 0px));
    }
  }

  @media screen and (max-width: 940px) {
    .pruvit-hero__grid {
      grid-template-columns: 1fr;
      gap: 36px;
    }

    /* Picture first once the two columns become two rows. Side by side the
       headline leads because it is the left column and the eye starts there;
       stacked, leading with the pill means the product is below the fold on a
       phone and the first thing anyone sees is a line of small type.

       Done with order rather than by moving the markup, because the source
       order is the reading order the headline wants on desktop and in a screen
       reader — and on a phone the picture is decorative enough that seeing it
       first visually costs nothing to follow. */
    .pruvit-hero__media {
      order: -1;
    }

    .pruvit-hero__photo {
      aspect-ratio: 3 / 2;
    }
  }

  /* Below ~520px the two pills wrap and stack at different widths, which reads
     as ragged. Everything from the button down is centred, with the full-width
     button as the pivot; the headline and lede keep their left rag above it. */
  @media screen and (max-width: 520px) {
    .pruvit-hero__cta {
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .pruvit-hero__cta .pruvit-btn {
      width: 100%;
    }

    .pruvit-hero__trust {
      justify-content: center;
    }

    /* Block rather than centred flex: the sentence wraps to two lines here, and
       as a flex row the icon and text are one pair being centred — with the
       text nearly full width that strands the icon at the far left. */
    .pruvit-hero__note {
      display: block;
      text-align: center;
    }

    .pruvit-hero__note svg {
      display: inline-block;
      vertical-align: -3px;
      margin-inline-end: 6px;
    }
  }
/* END_SECTION:pruvit-hero */

/* START_SECTION:pruvit-marquee (INDEX:44) */
/* The bottom padding pays for the overlap. Content centres against
     min-height with no bottom padding otherwise, so once the copy runs taller
     than min-height the last line sits flush on the band's bottom edge — and
     the section below then rides the radius up over exactly that strip and
     cuts the line in half. align-items:center re-centres inside the padding
     box, so nothing moves where there was no problem. */
  .pruvit-marquee {
    background: #16203a;
    isolation: isolate;
    position: relative;
    min-height: clamp(380px, 52vw, 560px);
    display: grid;
    align-items: center;
    overflow: hidden;
    padding-block-end: var(--r-md);
    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);
  }

  .pruvit-marquee__still,
  .pruvit-marquee__loop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pruvit-marquee__still {
    object-position: 50% 60%;
  }

  .pruvit-marquee__loop {
    z-index: 0;
  }

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

  .pruvit-marquee::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(14, 20, 32, 0.8) 0%,
      rgba(14, 20, 32, 0.55) 46%,
      rgba(14, 20, 32, 0.18) 100%
    );
  }

  .pruvit-marquee__in {
    position: relative;
    z-index: 2;
    padding-block: 60px;
  }

  .pruvit-marquee__quote {
    font-family: var(--font-heading--family);
    font-size: clamp(28px, 4.2vw, 52px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
    max-width: 16ch;
    margin: 0;
    text-wrap: balance;
  }

  .pruvit-marquee__text {
    margin: 22px 0 0;
    max-width: 44ch;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    text-wrap: pretty;
  }

  /* Below about 680px the band is taller than the source is wide, so cover
     flips from cropping top and bottom to cropping the sides. Bias left so the
     subject sits right of centre and the sea stays behind the copy. */
  @media screen and (max-width: 680px) {
    .pruvit-marquee__still {
      object-position: 35% 50%;
    }
  }
/* END_SECTION:pruvit-marquee */

/* START_SECTION:pruvit-partner-hero (INDEX:45) */
.pruvit-phero {
    isolation: isolate;
    padding-block: calc(clamp(34px, 5vw, 60px) + var(--pruvit-gnav-h, 66px) + var(--pruvit-snav-h, 0px) + var(--pruvit-ann-h, 0px))
      calc(var(--sec-pad) + var(--r-md));
    background: #fff;
    background-image: radial-gradient(1000px 560px at 84% 140px, var(--ice-soft) 0%, transparent 62%);
  }

  /* The reel gets the wider column, which is the prototype's split and the
     opposite of what this had. It was 1.04 / 0.96 in the copy's favour; the
     prototype is 1 / 1.06 in the film's, on a narrower gap that grows more
     slowly. Measured at 1440: the reel goes from 522x294 to 563x317, which is
     41px of width and 16% of area, and the film is the thing this band is for.

     No further room in the container — the prototype's wrap is 1200 less 24px
     gutters, and this measures the same 1152 across. The split and the gap were
     the whole difference. */
  .pruvit-phero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: clamp(30px, 4vw, 58px);
    align-items: center;
  }

  /* 700 and -0.025em are the house display values, set once in pruvit-tokens
     for .pruvit-h-xl and its siblings. This was 800 at -0.038em, which is the
     only heading on the site carrying either — and both push the same way, so
     it read heavier than every other hero rather than a little heavier. The
     tighter tracking does as much of that as the weight does.

     The size clamp stays as it is: 6.4vw to 72px against the token's 6.2vw to
     74px is this hero's own composition, and it is not what looked wrong. */
  .pruvit-phero__h {
    /* Longhand start margin became shorthand when this became an h1: the UA
       gives an h1 0.67em below, which a div never had. */
    margin: 20px 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(40px, 6.4vw, 72px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.02;
    text-wrap: balance;
  }

  .pruvit-phero__h p {
    margin: 0;
  }

  /* The two beats are separate blocks so the turn lands on its own line in any
     language. Within a beat, wrapping is expected — balance picks the break.
     No <br>: this text gets translated. */
  .pruvit-phero__h strong {
    display: block;
    font-weight: inherit;
  }

  .pruvit-phero__h em {
    font-family: var(--font-accent--family);
    font-style: italic;
    font-weight: 400;
    color: var(--accent-1-deep);
  }

  .pruvit-phero__lede {
    margin-block-start: 20px;
    max-width: 46ch;
  }

  .pruvit-phero__cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 26px;
    margin-block-start: 30px;
  }

  /* The quiet closing line. Same size and ink as the reassurance line it
     sits under, so the two small lines read as one register. */
  .pruvit-phero__sub {
    margin: 14px 0 0;
    max-width: 52ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--slate);
  }

  .pruvit-phero__micro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-block: 18px 0;
    font-size: 13px;
    color: var(--slate);
  }

  .pruvit-phero__micro span + span::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    margin-inline-end: 10px;
    vertical-align: middle;
    background: currentColor;
    opacity: 0.55;
  }

  /* The callout form: the landing hero's trust line, restated — 14.5px at
     600 in the page ink, each item led by a navy disc with a periwinkle
     tick. Restated rather than borrowing .pruvit-hero__trust across files,
     so this section's shape does not depend on the landing hero's
     stylesheet; the numbers are the same by intent (19px disc, 11px glyph),
     and if one changes the other should. Craig, 2026-09-24. Only when a
     qualifier follows; the dots go, the tick is the separator now. */
  .pruvit-phero__micro--lead {
    margin-block-start: 24px;
    gap: 10px 22px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-foreground);
  }

  .pruvit-phero__micro--lead span + span::before {
    display: none;
  }

  .pruvit-phero__micro--lead > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }

  .pruvit-phero__tick {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--color-foreground);
    color: var(--accent-1-bright);
    display: grid;
    place-items: center;
    flex: none;
  }

  .pruvit-phero__tick svg {
    width: 11px;
    height: 11px;
  }

  /* The frame. pruvit-media-poster says it plainly — "each band sets the
     frame; everything inside the frame is here" — because the poster button is
     absolute inset 0 and .pruvit-media is only position: relative. This class
     is passed into the snippet so it lands on .pruvit-media itself; on a
     wrapper around it the ratio never reached the positioned element and the
     reel computed to 509x0 with nothing visible in it.

     16/9 matches the film's own 1920x1080 and the prototype's .reel. The navy
     is what the frame shows before the poster arrives and behind the iframe
     once it does — the same pair pruvit-tri uses for its film. */
  .pruvit-phero__reel {
    aspect-ratio: 16 / 9;
    background: #16203a;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }

  /* The still. 4:5 like the landing hero's photo, with the same scrim, so a
     photograph in either hero is framed the same way — deliberately restated
     here rather than borrowing .pruvit-hero__photo across files, which would
     tie this section's shape to that section's stylesheet. */
  .pruvit-phero__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ice-soft);
    box-shadow: var(--shadow-lg);
  }

  .pruvit-phero__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* The stills stack; the one wearing is-on is visible. 0.9s is the fade the
     announcement bar uses, so the two rotators on the site move alike. The
     scrim (::after below) sits over all of them, so a fade never shows a
     brighter frame between two darkened ones. */
  .pruvit-phero__still {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
  }

  .pruvit-phero__still.is-on {
    opacity: 1;
  }

  /* A focus ring on the rotator, because focusing it is how a keyboard user
     pauses it. Inset, so the rounded frame keeps its shape. */
  .pruvit-phero__photo[data-pruvit-rotate]:focus-visible {
    outline: 3px solid var(--accent-1-deep);
    outline-offset: -3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-phero__still {
      transition: none;
    }
  }

  .pruvit-phero__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(190deg, rgba(22, 32, 58, 0.16) 0%, rgba(22, 32, 58, 0) 34%, rgba(22, 32, 58, 0.3) 100%);
  }

  /* A product render is not a photograph: it sits on the soft ground with
     room around it and no scrim, and the frame is square because the renders
     are. Covering would crop the pack; a scrim would grey it. */
  .pruvit-phero__photo--product {
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadow-md);
  }

  .pruvit-phero__photo--product img {
    object-fit: contain;
    padding: 8%;
  }

  .pruvit-phero__photo--product::after {
    display: none;
  }

  @media screen and (max-width: 989px) {
    .pruvit-phero:not(.pruvit-phero--still) .pruvit-phero__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Still mode takes the landing hero's frame, not the film's.
     ---------------------------------------------------------------------
     The split and the gap above were tuned for a 16:9 reel that wanted the
     wider column; a 4:5 photograph is the landing hero's case, and Craig
     asked (2026-09-24) for the Pro page to sit on the same measures as the
     home page. So: the same 1.02/0.98 split, the same clamp(28px, 4vw, 66px)
     gap, the same flat 40px above the content from 941px up and the same
     940px stack point. Measured against the home page at 1024: photo top
     moves from 187 to 176, the frame from 465 to 446 wide. The Partner page
     has a film, so none of this reaches it. */
  .pruvit-phero--still {
    padding-block-start: calc(clamp(40px, 6vw, 72px) + var(--pruvit-gnav-h, 66px) + var(--pruvit-snav-h, 0px) + var(--pruvit-ann-h, 0px));
  }

  @media screen and (min-width: 941px) {
    .pruvit-phero--still {
      padding-block-start: calc(40px + var(--pruvit-gnav-h, 66px) + var(--pruvit-snav-h, 0px) + var(--pruvit-ann-h, 0px));
    }
  }

  .pruvit-phero--still .pruvit-phero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(28px, 4vw, 66px);
  }

  @media screen and (max-width: 940px) {
    .pruvit-phero--still .pruvit-phero__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* On a phone this hero read as a left rag all the way down while the landing
     hero pivots at the button. Same shape restated, not borrowed across files,
     for the reason given on .pruvit-phero__micro--lead: everything from the
     button down is centred, with the full-width button as the pivot, and the
     headline and lede keep their left rag above it. Craig, 2026-09-25. If
     pruvit-hero's 520px block changes, this should too. */
  @media screen and (max-width: 520px) {
    .pruvit-phero__cta {
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .pruvit-phero__cta .pruvit-btn {
      width: 100%;
    }

    .pruvit-phero__micro {
      justify-content: center;
    }

    /* Centring the text is not enough on its own: 52ch is about 338px at 13px,
       so the box itself can be narrower than the column and would sit left. */
    .pruvit-phero__sub {
      text-align: center;
      margin-inline: auto;
    }
  }
/* END_SECTION:pruvit-partner-hero */

/* START_SECTION:pruvit-quiz (INDEX:47) */
/* The stage carries --qc, the colour of whoever is winning. Declared here so
     it has a value before a single answer, and rewritten by the script as the
     score moves — answering should feel cumulative rather than blind. */
  .pruvit-quiz {
    --qc: 123 134 236;

    position: relative;
    isolation: isolate;
    padding-block: calc(clamp(36px, 5vw, 64px) + var(--pruvit-gnav-h, 66px) + var(--pruvit-snav-h, 0px) + var(--pruvit-ann-h, 0px))
      calc(var(--sec-pad) + var(--r-md));
    background: #16203a;
    color: #fff;
    overflow: hidden;
  }

  .pruvit-quiz::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(900px 520px at 50% 0%, rgb(var(--qc) / 0.3), transparent 72%);
    transition: background 0.5s ease;
  }

  .pruvit-quiz__stage {
    position: relative;
    min-height: 520px;
    display: grid;
  }

  /* Every screen occupies the same cell, so the stage does not jump between
     them and the height is whatever the tallest needs. */
  .pruvit-qscreen {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    transition: opacity 0.28s ease;
  }

  .pruvit-qscreen.is-on {
    visibility: visible;
    opacity: 1;
  }

  /* The shared pill is dressed for a light ground: a pale wash carrying the
     page's navy ink. On this stage it inherited white type and kept the pale
     wash — 1.12:1, which is the pill visible and the words inside it not. */
  .pruvit-quiz .pruvit-pill {
    background: rgb(255 255 255 / 0.08);
    border-color: rgb(255 255 255 / 0.16);
  }

  .pruvit-quiz .pruvit-pill__dot {
    background: var(--accent-1);
  }

  .pruvit-quiz__h {
    font-family: var(--font-heading--family);
    font-size: clamp(38px, 7vw, 66px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.02;
    margin: 0;
  }

  .pruvit-quiz__h p {
    margin: 0;
  }

  .pruvit-quiz__h em {
    font-family: var(--font-accent--family);
    font-style: italic;
    font-weight: 400;
    color: rgb(var(--qc));
  }

  .pruvit-quiz__lede {
    max-width: 54ch;
    color: rgb(255 255 255 / 0.76);
  }

  /* The four faces, overlapped, before any question. */
  .pruvit-quiz__faces {
    display: flex;
    justify-content: center;
  }

  .pruvit-quiz__faces i {
    display: block;
    width: clamp(60px, 14vw, 88px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgb(255 255 255 / 0.18);
    background: #0e1420;
    margin-inline-start: -14px;
  }

  .pruvit-quiz__faces i:first-child {
    margin-inline-start: 0;
  }

  .pruvit-quiz__faces img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pruvit-quiz__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    font-size: 13px;
    color: rgb(255 255 255 / 0.66);
  }

  .pruvit-quiz__meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .pruvit-quiz__meta svg {
    width: 14px;
    height: 14px;
    color: rgb(var(--qc));
  }

  /* ---- the question screen ---- */
  .pruvit-q__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(420px, 100%);
  }

  .pruvit-q__back {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 50%;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: background 0.16s ease, opacity 0.16s ease;
  }

  .pruvit-q__back:hover {
    background: rgb(255 255 255 / 0.1);
  }

  .pruvit-q__back[disabled] {
    opacity: 0.3;
    cursor: default;
  }

  .pruvit-q__track {
    flex: 1;
    display: flex;
    gap: 5px;
  }

  .pruvit-q__track i {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.16);
    transition: background 0.25s ease;
  }

  .pruvit-q__track i.is-done {
    background: rgb(var(--qc));
  }

  .pruvit-q__count {
    flex: none;
    font-family: var(--font-mono--family);
    font-size: 12px;
    color: rgb(255 255 255 / 0.6);
  }

  .pruvit-q {
    display: contents;
  }

  .pruvit-q[hidden] {
    display: none;
  }

  .pruvit-q__ask {
    font-family: var(--font-heading--family);
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
    max-width: 22ch;
    margin: 0;
    color: inherit;
  }

  .pruvit-q__opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: min(620px, 100%);
  }

  .pruvit-qopt {
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: start;
    padding: 16px 18px;
    border: 1.5px solid rgb(255 255 255 / 0.16);
    border-radius: var(--r-sm);
    background: rgb(255 255 255 / 0.04);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
  }

  .pruvit-qopt:hover {
    border-color: rgb(var(--qc));
    background: rgb(var(--qc) / 0.14);
    transform: translateY(-1px);
  }

  .pruvit-qopt.is-picked {
    border-color: rgb(var(--qc));
    background: rgb(var(--qc) / 0.22);
  }

  .pruvit-qopt__e {
    font-size: 22px;
    line-height: 1;
  }

  /* ---- the shuffle ---- */
  .pruvit-quiz__shuffle-h {
    font-family: var(--font-heading--family);
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
    color: inherit;
  }

  .pruvit-quiz__reels {
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  .pruvit-quiz__reel {
    width: clamp(64px, 16vw, 104px);
    opacity: 0.32;
    transition: opacity 0.14s ease, transform 0.14s ease;
  }

  .pruvit-quiz__reel img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
  }

  .pruvit-quiz__reel .nm {
    display: block;
    margin-block-start: 8px;
    font-size: 12px;
    font-weight: 700;
  }

  .pruvit-quiz__reel.is-lit {
    opacity: 1;
    transform: translateY(-4px);
  }

  .pruvit-quiz__reel.is-lit img {
    border-color: rgb(var(--fcr, 255 255 255));
  }

  /* ---- the reveal ---- */
  .pruvit-qreveal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .pruvit-qreveal__hit {
    font-family: var(--font-mono--family);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.6);
    margin: 0;
  }

  .pruvit-qreveal__face {
    width: clamp(132px, 30vw, 188px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgb(var(--fcr, 255 255 255) / 0.9);
    background: #0e1420;
  }

  .pruvit-qreveal__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pruvit-qreveal__name {
    font-family: var(--font-heading--family);
    font-size: clamp(32px, 6vw, 52px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    margin: 0;
    color: rgb(var(--fcl, 255 255 255));
  }

  .pruvit-qreveal__persona {
    margin: 0;
    font-size: clamp(19px, 3vw, 25px);
  }

  .pruvit-qreveal__persona em {
    font-family: var(--font-accent--family);
    font-style: italic;
  }

  .pruvit-qreveal__note {
    margin: 0;
    max-width: 46ch;
    color: rgb(255 255 255 / 0.78);
  }

  .pruvit-qreveal__why {
    margin: 0;
    font-size: 14px;
    color: rgb(255 255 255 / 0.6);
  }

  .pruvit-qreveal__why:empty {
    display: none;
  }

  .pruvit-qreveal__acts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-block-start: 6px;
  }

  .pruvit-qreveal__cue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-size: 13px;
    color: rgb(255 255 255 / 0.58);
  }

  .pruvit-qreveal__cue svg {
    width: 15px;
    height: 15px;
  }

  /* Thrown from the middle of the reveal, behind it, so nothing it does can
     cover the name it is celebrating. */
  .pruvit-qreveal__confetti {
    position: absolute;
    inset-block-start: 30%;
    inset-inline-start: 50%;
    z-index: -1;
    pointer-events: none;
  }

  .pruvit-qreveal__confetti b {
    position: absolute;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    opacity: 0;
    animation: pruvit-q-confetti 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  }

  @keyframes pruvit-q-confetti {
    0% {
      opacity: 1;
      transform: translate(0, 0) rotate(0deg);
    }

    100% {
      opacity: 0;
      transform: translate(var(--cx), var(--cy)) rotate(var(--cr));
    }
  }

  @media screen and (max-width: 749px) {
    .pruvit-q__opts {
      grid-template-columns: minmax(0, 1fr);
    }

    .pruvit-quiz__stage {
      min-height: 440px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-qscreen,
    .pruvit-quiz::before,
    .pruvit-qopt,
    .pruvit-quiz__reel {
      transition: none;
    }

    .pruvit-qreveal__confetti {
      display: none;
    }
  }
/* END_SECTION:pruvit-quiz */

/* START_SECTION:pruvit-referrer-bar (INDEX:48) */
/* ---- the bar ----------------------------------------------------------
     #16203a is the palette foreground, written as a literal here for the same
     reason the header file writes it: there is no --navy token, and this bar
     has to be navy whatever ground the page around it resolved to. */
  .pruvit-rbar {
    background: #16203a;
    color: #fff;
    /* 44, not the 42 the app block's bar used: the 26px avatar plus 9px of
       padding either side is 44, so 42 would be a floor the "has" state always
       clears and the prompt state never reaches — and the bar would change
       height by a pixel the moment someone entered a code. Measured both. */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 24px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
  }

  /* [hidden] on a flex container loses to display:flex without this — the UA
     sheet's [hidden] { display: none } is a single type-less rule and the class
     above it wins on specificity. */
  .pruvit-rbar[hidden] {
    display: none;
  }

  /* Every state is in the DOM; the bar carries whichever applies. __note is
     the signed-in one and never shares a page with the other two, but it is
     listed here so the pattern holds if that ever changes. */
  .pruvit-rbar__ask,
  .pruvit-rbar__has,
  .pruvit-rbar__note {
    display: none;
  }

  .pruvit-rbar[data-state='note'] .pruvit-rbar__note {
    display: inline-block;
  }

  /* An announcement is the one state here that can carry a link. Same
     treatment as the prompt's call to action, so a link in this band reads the
     same wherever it appears. */
  .pruvit-rbar__note a {
    color: var(--accent-1-bright);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .pruvit-rbar[data-state='none'] .pruvit-rbar__ask {
    display: inline-block;
  }

  .pruvit-rbar[data-state='has'] .pruvit-rbar__has {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pruvit-rbar__ask {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    padding: 4px 0; /* 24px target without changing the bar's height */
  }

  /* The two states' call to action, styled once. The script wraps the prompt's
     action phrase in a <b> and the partner's name in a <span> — different
     elements, the same thing to a reader: the part of the sentence you can act
     on. Kept as one rule because they were written as two and immediately
     disagreed, the name periwinkle and the prompt inheriting white.

     The prompt half only started matching once the string became ours. MV
     Qore's arrived as one flat sentence with no emphasis in it.

     Periwinkle on the navy measures 6.79:1, so it carries body text here even
     though the same token is only 2.38 on white. */
  .pruvit-rbar__ask :is(b, strong),
  .pruvit-rbar__name span {
    color: var(--accent-1-bright);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .pruvit-rbar__ask:hover :is(b, strong),
  .pruvit-rbar__name:hover span {
    color: #fff;
  }

  .pruvit-rbar__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: none;
    overflow: hidden;
    background: var(--navy-mid);
    color: var(--accent-1-bright);
    display: grid;
    place-items: center;
    font-family: var(--font-heading--family);
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 0 0 1.5px rgb(var(--accent-1-rgb) / 0.5);
  }

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

  .pruvit-rbar__name {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    /* 24px target, pulled back out so the label does not shift the bar. */
    padding: 4px 3px;
    margin: -4px -3px;
  }

  .pruvit-rbar :is(.pruvit-rbar__ask, .pruvit-rbar__name):focus-visible {
    outline: 2px solid var(--accent-1);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* ---- the loading state ------------------------------------------------- */

  /* Same display-none pattern as the two real states: all three live in the
     DOM and the bar wears whichever one applies. */
  .pruvit-rbar__spin {
    display: none;
  }

  .pruvit-rbar[data-state='loading'] .pruvit-rbar__spin {
    display: block;
  }

  .pruvit-rbar__spin {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgb(255 255 255 / 0.25);
    border-top-color: rgb(255 255 255 / 0.85);
    /* Two animations on purpose. The spin runs from the start; the fade has a
       300ms delay with `both` fill, which holds opacity at 0 through the
       delay. A load that resolves inside 300ms therefore shows no spinner at
       all — the space is still reserved, so nothing moves either way. */
    animation:
      pruvit-rbar-spin 0.7s linear infinite,
      pruvit-rbar-spin-in 0.2s ease-out 0.3s both;
  }

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

  @keyframes pruvit-rbar-spin-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* A stopped spinner reads as a broken one, so reduced motion gets an even
     ring that breathes instead of a ring with a bright top that does not. */
  @media (prefers-reduced-motion: reduce) {
    .pruvit-rbar__spin {
      border-color: rgb(255 255 255 / 0.4);
      animation: pruvit-rbar-spin-pulse 1.4s ease-in-out 0.3s infinite both;
    }

    @keyframes pruvit-rbar-spin-pulse {
      0%,
      100% {
        opacity: 0.25;
      }
      50% {
        opacity: 0.7;
      }
    }
  }

  @media screen and (max-width: 600px) {
    .pruvit-rbar {
      font-size: 13px;
      padding-inline: 16px;
    }
  }

  /* ---- the modal --------------------------------------------------------- */
  .pruvit-rmodal {
    border: none;
    padding: 0;
    background: none;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .pruvit-rmodal::backdrop {
    background: var(--scrim-modal, rgba(14, 20, 32, 0.55));
    backdrop-filter: var(--scrim-blur, blur(3px));
  }

  .pruvit-rmodal:not([open]) {
    display: none;
  }

  .pruvit-rmodal__panel {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    color: var(--color-foreground);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
  }

  /* A sheet from the bottom on a phone, the same as the options panel.
     ---------------------------------------------------------------------
     Craig, 2026-09-23, referencing Pebble. A centred box on a 390px screen is
     a card floating in the middle of nowhere with the keyboard about to cover
     it; pinned to the bottom it sits where the thumb is and the page stays
     visible above.

     The panel is position: fixed inside the <dialog>, so only its own
     placement changes — the dialog and its backdrop are untouched. The
     centring transform has to be cleared explicitly, or the panel would sit
     half a panel below the fold.

     Animated here because this one has no transition of its own: a <dialog>
     has no intermediate state to hang one on, so the slide is a keyframe that
     runs on open. Honoured reduced-motion below. */
  @media screen and (max-width: 749px) {
    .pruvit-rmodal__panel {
      inset-block-start: auto;
      /* Above the keyboard, not under it.
         ------------------------------------------------------------------
         Craig, 2026-09-24: "the slide up drawer for Referrer code input gets
         hidden behind the keyboard."

         `position: fixed` resolves against the LAYOUT viewport, and iOS does
         not shrink that when the keyboard comes up — it leaves the layout
         viewport full height and covers the bottom of it. So a sheet pinned to
         `bottom: 0` is pinned underneath the keyboard, and this sheet opens the
         keyboard itself: showModal() focuses the first control, which is the
         code field, which is the whole point of the panel.

         --pruvit-kb is how much of the bottom is covered, measured from
         window.visualViewport in pruvit-referrer.js. It is 0 with no keyboard,
         so this reads as `bottom: 0` until there is something to clear.

         No transition on it. iOS fires visualViewport resize events all the way
         through the keyboard's own animation, so the sheet already rides it;
         a transition on top would lag behind the keyboard rather than track it.

         PADDING, NOT OFFSET. The first version lifted the whole sheet by
         --pruvit-kb, which cleared the keyboard but left a strip of page
         showing between the sheet and the keyboard's top — Craig, 2026-09-24:
         "I wonder if you can extend the white to the top of the actual
         keyboard?" That strip is Safari's own furniture: with the keyboard up
         it draws a compact URL pill and a form accessory bar, and neither is
         inside visualViewport.height, so the sheet was lifted past them and
         the page showed through underneath.

         So the sheet stays at the bottom of the layout viewport and pushes its
         CONTENT up instead. The white then runs all the way down behind the
         keyboard and the bars, and the measurement stops being load-bearing:
         if --pruvit-kb is a little large or small the content moves a little,
         but there is never a gap to see through. The panel is its own scroll
         container, so the padding is inside the scrollable area and content
         scrolls to rest exactly at the keyboard's top edge. */
      inset-block-end: 0;
      padding-block-end: var(--pruvit-kb, 0px);
      inset-inline-start: 0;
      transform: none;
      width: 100%;
      /* --pruvit-vvh is the visual viewport's height, which is what is actually
         visible once the keyboard has taken its share. It falls back to svh,
         which is the right answer when no script has measured anything: svh is
         the height with the browser chrome shown, so it is never larger than
         what is visible. dvh would be wrong here — it follows the chrome and on
         iOS it lags a toolbar on its way out, which is exactly the moment a
         sheet opens. A sheet pinned to the bottom grows upward, so anything
         taller than the visible area pushes its own header off the top, where
         nothing can scroll it back. */
      /* The visible allowance plus the hidden apron: the box now reaches the
         bottom of the layout viewport, so its height is what can be seen plus
         what the keyboard is covering. Without the second term the sheet would
         be capped as though the apron had to fit on screen too, and the top of
         it would be pulled down over the content. */
      max-height: calc(var(--pruvit-vvh, 100svh) - 56px + var(--pruvit-kb, 0px));
      border-radius: var(--r-md) var(--r-md) 0 0;
    }

    .pruvit-rmodal[open] .pruvit-rmodal__panel {
      animation: pruvit-rmodal-up 0.34s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes pruvit-rmodal-up {
      from {
        transform: translateY(100%);
      }
      to {
        transform: translateY(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pruvit-rmodal[open] .pruvit-rmodal__panel {
        animation: none;
      }
    }
  }

  .pruvit-rmodal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 0 24px;
  }

  .pruvit-rmodal__title {
    font-family: var(--font-heading--family);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
  }

  .pruvit-rmodal__body {
    padding: 14px 24px 24px;
  }

  /* One mode at a time, set on the dialog. */
  .pruvit-rmodal__entry,
  .pruvit-rmodal__card {
    display: none;
  }

  .pruvit-rmodal[data-mode='entry'] .pruvit-rmodal__entry,
  .pruvit-rmodal[data-mode='card'] .pruvit-rmodal__card {
    display: block;
  }

  .pruvit-rmodal__lede {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 16px;
  }

  .pruvit-rform {
    display: flex;
    gap: 8px;
  }

  .pruvit-rform__in {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: #fff;
    color: var(--color-foreground);
    font-family: inherit;
    font-size: 15px;
  }

  .pruvit-rform__in:focus-visible {
    outline: 2px solid var(--accent-1-deep);
    outline-offset: -1px;
    border-color: transparent;
  }

  .pruvit-rform__go {
    flex: none;
    padding: 12px 22px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: #16203a;
    color: #fff;
    font-family: var(--font-heading--family);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .pruvit-rform__go:hover {
    background: var(--navy-mid);
  }

  .pruvit-rform__go:disabled {
    opacity: 0.55;
    cursor: default;
  }

  .pruvit-rmodal__err {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--err);
    margin: 10px 0 0;
  }

  /* Empty until it fails, and an empty <p> with margin still pushes. */
  .pruvit-rmodal__err:empty {
    display: none;
  }

  /* ---- the partner card -------------------------------------------------- */
  .pruvit-rcard__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-block-end: 20px;
  }

  .pruvit-rcard__avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    flex: none;
    overflow: hidden;
    background: #16203a;
    color: var(--accent-1-bright);
    display: grid;
    place-items: center;
    font-family: var(--font-heading--family);
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
  }

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

  .pruvit-rcard__name {
    display: block;
    font-family: var(--font-heading--family);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .pruvit-rcard__role {
    display: block;
    font-size: 13px;
    color: var(--slate);
    margin-block-start: 2px;
  }

  .pruvit-rcard__contact {
    display: grid;
    gap: 8px;
  }

  /* The value is plain text and the action is a button beside it, so what is
     tappable looks tappable. Filled rows read as disabled inputs instead. */
  .pruvit-rc {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 10px 10px 15px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: #fff;
  }

  .pruvit-rc > svg {
    width: 17px;
    height: 17px;
    flex: none;
    color: var(--slate);
  }

  .pruvit-rc__v {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pruvit-rc__acts {
    display: flex;
    gap: 6px;
    flex: none;
  }

  .pruvit-rc__act {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    background: #16203a;
    color: #fff;
    font-family: var(--font-heading--family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .pruvit-rc__act:hover {
    background: var(--navy-mid);
  }

  /* Call and text are different intents — one interrupts, one does not — so
     they are separate targets. The second is the quieter of the pair. */
  .pruvit-rc__act + .pruvit-rc__act {
    background: var(--ice-soft);
    color: #16203a;
  }

  .pruvit-rc__act + .pruvit-rc__act:hover {
    background: var(--ice);
  }

  .pruvit-rcard__none {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--slate);
    margin: 0;
  }

  .pruvit-rcard__change {
    display: block;
    width: 100%;
    margin-block-start: 18px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--slate);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-align: center;
  }

  .pruvit-rcard__change:hover {
    color: var(--color-foreground);
  }

  /* One ring for everything inside the panel. The bar's two buttons have their
     own above, because theirs sits on navy and needs the accent rather than
     the ink to be visible at all. */
  .pruvit-rmodal__panel
    :is(.pruvit-dialog-x, .pruvit-rform__go, .pruvit-rc__act, .pruvit-rcard__change):focus-visible {
    outline: 2px solid var(--accent-1-deep);
    outline-offset: 2px;
  }

  @media screen and (max-width: 480px) {
    /* The row runs out of width before the pills do: at 320px the value, the
       icon and two pills do not fit on one line.

       So the pills take the second line, not the value. The first attempt sent
       the value full-width with order: -1, which does fit — but it breaks the
       wrong pair. The icon labels the value; left behind on line two it reads
       as an icon for the buttons, so a phone glyph ended up captioning "Call"
       and "Text" instead of the number above them.

       Nothing needs reordering once the actions are the part that wraps: the
       icon is flex: none and the value is flex: 1, so the two share line one
       exactly as they do at every wider size, and the value keeps its ellipsis
       because its min-width: 0 still applies. */
    .pruvit-rc {
      flex-wrap: wrap;
    }

    .pruvit-rc__acts {
      flex-basis: 100%;
    }
  }
/* END_SECTION:pruvit-referrer-bar */

/* START_SECTION:pruvit-search (INDEX:49) */
/* Only what search adds. Everything else — .pruvit-coll, its toolbar,
     .pruvit-grid, .pruvit-card and both drawers — is styled by
     pruvit-collection's stylesheet, which compiles theme-wide. */

  /* .pruvit-coll opens with 80px of top padding, which on a collection is the
     room its title and breadcrumbs sit in. Search has neither — the heading and
     the input belong to the section above — so the toolbar became the first
     child and that 80px read as an empty band under the search box. Measured:
     section top 262, toolbar top 342.

     A modifier rather than a change to the shared rule, because the 80px is
     right where it was written. */
  .pruvit-coll--search {
    padding-block-start: 28px;
  }

  .pruvit-snone {
    padding-block: clamp(40px, 7vw, 80px);
    max-width: 46ch;
  }

  .pruvit-snone__t {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .pruvit-snone__b {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
/* END_SECTION:pruvit-search */

/* START_SECTION:pruvit-section-nav (INDEX:50) */
/* Static inside the pinned header group — see the note in pruvit-header.
     Its position relative to the header is the group's stacking, not a sticky
     offset of its own. */
  /* Away until the hero is behind you, then it arrives.
     ---------------------------------------------------------------------
     Craig, 2026-09-23: the rail is noise while someone is still reading the
     hero, and the menu is what they want pinned. So it collapses to nothing
     and grows back once there is a page to navigate — one movement, at one
     moment, rather than the header's old retract on every change of
     direction.

     Height rather than transform, so the pinned chrome is genuinely 66px
     before it arrives and 117px after. A translated rail would hold its space
     and leave a blank strip under the header.

     grid-template-rows, not height: the row collapses to 0 and opens to the
     content's own height, so the 51px never has to be written down twice. The
     inner element needs min-height: 0 or it refuses to be crushed. */
  .pruvit-snav {
    display: grid;
    grid-template-rows: 0fr;
    position: relative;
    z-index: 1;
    background: transparent;
    border-block-end: 1px solid transparent;
    overflow: hidden;
    transition: grid-template-rows 0.34s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.25s ease, border-color 0.25s ease;
  }

  .pruvit-snav.is-on {
    grid-template-rows: 1fr;
  }

  /* Two classes, not `.pruvit-snav > *`.
     That selector is ONE class — the universal selector adds nothing — so it
     tied with .pruvit-snav__in's own min-height: 50px further down the file
     and lost on source order. The rail stayed 51px tall with the row
     collapsed around it, which measured as "not collapsing" and looked like
     grid-template-rows not working. */
  /* The last 26px, and the border.
     ---------------------------------------------------------------------
     A box cannot be shorter than its own padding, so collapsing the grid track
     to zero still left 13 + 13 of it: a blank strip under the header. The
     padding has to go away with the row, which means transitioning it too.

     And the border. With the track at zero the rail still drew its own bottom
     edge — a 1px line under the header with nothing above it. */
  .pruvit-snav:not(.is-on) {
    border-block-end-width: 0;
  }



  @media (prefers-reduced-motion: reduce) {
    .pruvit-snav {
      transition: none;
    }
  }

  .pruvit-snav.is-scrolled {
    background: rgb(255 255 255 / 0.86);
    backdrop-filter: blur(14px);
    border-block-end-color: var(--line);
  }

  /* There used to be an .is-raised rule here that lifted this bar by the
     header's height when the header retracted, so it rose into the gap rather
     than leaving one. It existed because both bars were pinned at once.

     They are not any more: where there is a section nav, the group is offset
     far enough that the header has already scrolled away and this bar is the
     one holding the top. Raising it from there pushed it 66px off the top of
     the screen — the nav vanished entirely on the home page, which is how the
     rule announced that it had outlived its reason. */

  .pruvit-snav__in {
    /* No height of its own at all — not the old min-height: 50px, and not the
       padding that briefly replaced it.

       A grid item's own minimum size is what stops the 0fr track collapsing,
       and padding counts: a box cannot be shorter than its own padding, so the
       rail kept 26px of blank strip under the header. Worse, it put the 13px
       between the links and the rail's bottom edge — and the active rule is
       drawn at the bottom of its link, so it stopped being a line under the
       nav and became an underline under the words.

       The padding is on the links now. They stretch to fill this, so their
       bottom edge is the rail's bottom edge and the rule sits where it always
       did; and their height is content, which the collapsing track takes to
       nothing with it. */
    min-height: 0;
    display: flex;
    align-items: stretch;
    /* Centred while the links fit, and start-aligned the moment they do not.
       Plain `center` on an overflowing flex row pushes the overflow out BOTH
       ends, and the start end is then unreachable — scrolling cannot go past
       the container's own origin. On a phone that chopped the first link and
       the last and there was no way to get the first one back.

       Declared twice on purpose: a browser without `safe` drops the second
       line and keeps today's behaviour rather than losing the centring
       everywhere. */
    justify-content: center;
    justify-content: safe center;
    gap: 26px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-soft);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pruvit-snav__in::-webkit-scrollbar {
    display: none;
  }

  .pruvit-snav__in a {
    position: relative;
    display: flex;
    align-items: center;
    /* The rail's height, carried by the links rather than by the row around
       them — see .pruvit-snav__in above. 13 + 24 + 13. */
    padding-block: 13px;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    transition: color 0.18s ease;
  }

  .pruvit-snav__in a:hover {
    color: var(--color-foreground);
  }

  /* The rule grows from the left rather than fading in, so the active item
     reads as travelling with you down the page. */
  .pruvit-snav__in a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--accent-1-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pruvit-snav__in a.is-active {
    color: var(--color-foreground);
    font-weight: 600;
  }

  .pruvit-snav__in a.is-active::after {
    transform: scaleX(1);
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-snav,
    .pruvit-snav__in a,
    .pruvit-snav__in a::after {
      transition: none;
    }
  }
/* END_SECTION:pruvit-section-nav */

/* START_SECTION:pruvit-section (INDEX:51) */
/* The overlap. Each band is pulled up by the corner radius so the one below
     rides over the one above, and the bottom padding gains the same amount
     back so the content inside still sits on the rhythm. isolation:isolate is
     load-bearing: position:relative with z-index:auto creates no stacking
     context, so a positioned child inside one band paints over the next. */
  .pruvit-section-wrapper {
    isolation: isolate;
  }

  .content-for-layout > .pruvit-section-wrapper {
    margin-top: calc(var(--r-md) * -1);
  }

  /* Nothing to ride over yet. */
  .content-for-layout > .pruvit-section-wrapper:first-child {
    margin-top: 0;
  }

  .pruvit-sec-bg {
    border-start-start-radius: var(--r-md);
    border-start-end-radius: var(--r-md);
  }

  .pruvit-sec {
    padding-block: var(--sec-pad) var(--sec-pad);
    /* The same offset pruvit-heading uses for its anchor — same header. */
    scroll-margin-block-start: calc(var(--pruvit-gnav-h, 66px) + 24px);
  }

  /* Re-declared per band, not inherited from :root. A custom property computes
     where it is declared, so the :root pair in pruvit-tokens holds the page
     default forever; only a declaration here sees the foreground that
     contrast-override worked out for this band's ground, which is what makes
     body copy flip on the navy band without an .on-dark override. */
  .pruvit-sec,
  .pruvit-sec-bg {
    --ink-soft: rgb(var(--color-foreground-rgb) / 0.72);
    --slate: rgb(var(--color-foreground-rgb) / 0.55);
  }

  /* Blocks stack flush in Horizon — every text block ships with zero margin and
     the section grid has no row gap — so a band has to set its own rhythm or a
     heading sits directly on the paragraph under it.

     Two steps, not one: a heading belongs to what follows it, so that pair
     closes up while separate blocks stay apart. Deliberately not a setting. A
     range input here is how the prototype ended up with 46 spacing values. */
  .pruvit-sec > * + * {
    margin-block-start: 32px;
  }

  /* Direct child, not any descendant: the flavour-cards block contains its own
     h3s, and a looser :has() treated the whole grid as a heading — so anything
     after it would have closed up against it too.

     :not(.pruvit-head) is the second time this rule has had to be narrowed, and
     the pattern is now clear: inferring "this is a heading" from the DOM catches
     composed blocks that merely contain one. A band's head block is a finished
     unit — heading plus lede, with its own 20px between them — and what follows
     it is a new thing, not its continuation. It takes the section break below
     rather than the 18px meant for a bare heading labelling the paragraph under
     it. Any future block that opens with a heading of its own belongs in this
     exclusion too. */
  .pruvit-sec > :has(> :is(h1, h2, h3, h4, h5, h6)):not(.pruvit-head) + * {
    margin-block-start: 18px;
  }

  /* The prototype's .sec-head + * — the gap that makes a centred head read as
     the band's opening rather than as the first row of the thing below it. */
  .pruvit-sec > .pruvit-head + * {
    margin-block-start: 52px;
  }

  .pruvit-sec--rounded {
    padding-block-end: calc(var(--sec-pad) + var(--r-md));
  }

  .pruvit-sec--pad-tight {
    padding-block: calc(var(--sec-pad) * 0.5) calc(var(--sec-pad) * 0.5);
  }

  .pruvit-sec--pad-tight.pruvit-sec--rounded {
    padding-block-end: calc(var(--sec-pad) * 0.5 + var(--r-md));
  }

  .pruvit-sec--pad-none {
    padding-block: 0;
  }

  .pruvit-sec--pad-none.pruvit-sec--rounded {
    padding-block-end: var(--r-md);
  }
/* END_SECTION:pruvit-section */

/* START_SECTION:pruvit-share-cart (INDEX:52) */
.pruvit-share {
    display: grid;
    place-items: center;
    min-height: 50vh;
    padding: 64px var(--page-margin, 20px);
    text-align: center;
    color: var(--navy, #16203a);
  }

  .pruvit-share__in {
    display: grid;
    justify-items: center;
    gap: 16px;
  }

  .pruvit-share__msg {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
  }

  /* One message per state, and the cart link only once there is nothing to
     wait for. */
  .pruvit-share__msg,
  .pruvit-share__cta {
    display: none;
  }

  .pruvit-share[data-state='loading'] .pruvit-share__msg--loading,
  .pruvit-share[data-state='none'] .pruvit-share__msg--none,
  .pruvit-share[data-state='failed'] .pruvit-share__msg--failed {
    display: block;
  }

  .pruvit-share[data-state='none'] .pruvit-share__cta,
  .pruvit-share[data-state='failed'] .pruvit-share__cta {
    display: inline-flex;
  }

  .pruvit-share__spin {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgb(var(--color-foreground-rgb, 22 32 58) / 0.15);
    border-top-color: var(--navy, #16203a);
    animation: pruvit-share-spin 0.8s linear infinite;
  }

  .pruvit-share:not([data-state='loading']) .pruvit-share__spin {
    display: none;
  }

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

  @media (prefers-reduced-motion: reduce) {
    .pruvit-share__spin {
      animation-duration: 2.4s;
    }
  }
/* END_SECTION:pruvit-share-cart */

/* START_SECTION:pruvit-survey (INDEX:53) */
/* A whole screen, the card centred in it.
     ---------------------------------------------------------------------
     The minimal header is pulled out of the flow (snippets/pruvit-minimal-
     header), so this starts at the very top and pads itself clear of the
     wordmark.

     It paints its own cream even though the body already is cream. The
     hero's stylesheet gives .page-wrapper, on every page, a navy strip 64px
     deep -- the topbar's ground continued under the first band's rounded
     corners. Every first band covers it with its own ground; this one was
     transparent the first time, and the strip showed through as a navy bar
     with the navy wordmark lost inside it. Measured 2026-10-09: the only
     painted thing at the top was that background-image. The gate and Create
     account paint cream for the same reason. */
  .pruvit-survey {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: calc(var(--pruvit-gnav-h, 66px) + 12px) var(--page-margin, 16px) 48px;
    background: var(--cream, #f7f5f0);
  }

  .pruvit-survey__card {
    width: min(100%, 560px);
    padding: clamp(24px, 4vw, 40px);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--shadow-lg);
  }

  /* Two segments. Decoration only -- "Step 1 of 2" is the text that says it,
     so the bar is aria-hidden and owes no contrast. */
  .pruvit-survey__progress {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-block-end: 18px;
  }

  .pruvit-survey__bar {
    height: 4px;
    border-radius: 999px;
    background: var(--line);
    transition: background 0.3s ease;
  }

  .pruvit-survey__bar.is-on {
    background: var(--color-foreground);
  }

  /* [hidden] is a UA rule at (0,0,0); every class below that sets display
     would beat it. Restated for everything this script toggles. */
  .pruvit-survey__step[hidden],
  .pruvit-survey__done[hidden],
  .pruvit-survey__form[hidden],
  .pruvit-survey__progress[hidden] {
    display: none;
  }

  .pruvit-survey__step {
    display: grid;
    gap: 14px;
  }

  /* ink-soft, not slate: this is text, and slate is 3.73 on white. */
  .pruvit-survey__count {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .pruvit-survey__eyebrow {
    margin: 0 0 -6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-1-ink);
  }

  .pruvit-survey__h {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(26px, 4.6vw, 34px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--color-foreground);
  }

  .pruvit-survey__h:focus-visible {
    outline: none;
  }

  .pruvit-survey__lede {
    margin: -4px 0 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink-soft);
  }

  /* ---- the options ---- */

  .pruvit-survey__opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  /* A label is the whole target. The resting edge is the --line hairline,
     1.27 on white, which identifies nothing on its own -- the flavour's name
     does that. The state is what has to be legible, and it is carried twice:
     the ring on the right, slate at 3.73, fills navy with a tick; and the
     card's edge goes navy at 16.13. */
  .pruvit-survey__opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-xs);
    background: #fff;
    font-family: var(--font-heading--family);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-foreground);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
  }

  .pruvit-survey__opt:hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.35);
  }

  /* Visually gone, still focusable and still the thing the keyboard moves
     between -- arrow keys across a radio group come for free this way. */
  .pruvit-survey__opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  .pruvit-survey__opt:has(input:focus-visible) {
    outline: 2px solid var(--accent-1-deep);
    outline-offset: 2px;
  }

  .pruvit-survey__opt:has(input:checked) {
    border-color: var(--color-foreground);
    background: rgb(var(--accent-1-rgb) / 0.12);
  }

  /* The flavour's colour. Decoration beside a name, so it owes nothing; the
     inset ring keeps a pale one (White Peach) from vanishing into white. */
  .pruvit-survey__swatch {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(22, 32, 58, 0.14);
  }

  .pruvit-survey__opt-l {
    flex: 1;
    min-width: 0;
  }

  .pruvit-survey__radio {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--slate);
    color: transparent;
  }

  .pruvit-survey__radio svg {
    width: 12px;
    height: 12px;
  }

  .pruvit-survey__opt:has(input:checked) .pruvit-survey__radio {
    border-color: var(--color-foreground);
    background: var(--color-foreground);
    color: #fff;
  }

  .pruvit-survey__err {
    margin: -4px 0 0;
  }

  .pruvit-survey__go {
    width: 100%;
    margin-block-start: 4px;
  }

  /* ---- the offer ----
     The shipping note's treatment (blocks/pruvit-buy): the --flag-soft fill
     carries it and --flag only draws the edge. A notice, not a control, so the
     edge owes nothing; the text does, and navy on --flag-soft is 13.45. The
     tag sits in --flag-ink, 5.52 on that fill, past the 3:1 an icon owes.
     Duranta is already the "Double your vote" chip on step 2 -- both are
     rewards, which is the one thing the flag slot is for. */
  .pruvit-survey__offer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--flag);
    border-radius: var(--r-sm);
    background: var(--flag-soft);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--color-foreground);
  }

  .pruvit-survey__offer[hidden] {
    display: none;
  }

  .pruvit-survey__offer-i {
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin-block-start: 1px;
    color: var(--flag-ink);
  }

  .pruvit-survey__offer-i svg {
    width: 18px;
    height: 18px;
  }

  .pruvit-survey__offer-t {
    margin: 0;
  }

  /* Its own line. Inline, "Vote and get 30% off We'll email you..." read as
     one run-on sentence with a bold start -- measured in the first render.
     By class, not `b`: the done line's address is a <b> too, and as a block
     it squeezed that line to the address's width and three lines. */
  .pruvit-survey__offer-h {
    display: block;
    font-weight: 700;
  }

  /* break-word, not anywhere. `anywhere` also shrinks the box's min-content
     width, so the done line collapsed around the address and the full stop
     after it went to a line of its own -- measured 2026-10-12. break-word
     only splits an address that cannot fit on a line by itself. */
  .pruvit-survey__addr {
    font-weight: 700;
    overflow-wrap: break-word;
  }

  /* The card's width, like the opt-in panel under it: the done grid centres
     its items, which left this one as wide as its text and the two boxes at
     different widths. */
  .pruvit-survey__offer--done {
    justify-self: stretch;
    margin: 4px 0 0;
    text-align: start;
  }

  /* ---- step two ---- */

  .pruvit-survey__pick {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: -4px 0 0;
    font-size: 15px;
    color: var(--ink-soft);
  }

  .pruvit-survey__pick b {
    color: var(--color-foreground);
  }

  .pruvit-survey__change {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--accent-1-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .pruvit-survey__acct {
    margin-block-end: 0;
  }

  /* The hook, as a mark. Duranta is the one warm colour and the flag slot
     (pruvit-tokens) -- this is a flag. flag-on on flag is 13.43. */
  .pruvit-survey__x2 {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--flag);
    color: var(--flag-on);
    font-family: var(--font-heading--family);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: 1px;
  }

  .pruvit-survey__acct .pruvit-acct__ok .pruvit-survey__x2 {
    flex: none;
  }

  .pruvit-survey__ask {
    display: grid;
    justify-items: start;
    gap: 8px;
  }

  /* A rule with the words in it. The line is decoration; the words are
     ink-soft at 6.47. */
  .pruvit-survey__or {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 2px 0 -2px;
    font-size: 13px;
    color: var(--ink-soft);
  }

  .pruvit-survey__or::before,
  .pruvit-survey__or::after {
    content: '';
    height: 1px;
    background: var(--line);
  }

  .pruvit-survey__fine a {
    color: inherit;
  }

  /* ---- done ---- */

  .pruvit-survey__done {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding-block: 8px;
    text-align: center;
  }

  .pruvit-survey__done:focus-visible {
    outline: none;
  }

  .pruvit-survey__done .pruvit-survey__lede {
    margin: 0;
  }

  .pruvit-survey__twice {
    margin: 0;
    font-size: 14px;
    color: var(--ink-soft);
  }

  /* ---- the second ask ----
     The account step's box (.pruvit-acct: --line edge, ice-soft at 45%),
     not the offer's yellow: this is a question, and the yellow is already
     the reward line just above it. Text is navy and ink-soft, 16.13 and 6.47
     on a ground that is all but white. */
  .pruvit-survey__optin {
    display: grid;
    justify-items: center;
    gap: 6px;
    width: 100%;
    margin-block-start: 4px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgb(var(--ice-soft-rgb) / 0.45);
    text-align: center;
  }

  .pruvit-survey__optin[hidden],
  .pruvit-survey__optin-form[hidden],
  .pruvit-survey__optin-ok[hidden] {
    display: none;
  }

  .pruvit-survey__optin-h {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-foreground);
  }

  .pruvit-survey__optin-b {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-soft);
  }

  .pruvit-survey__optin-form {
    margin-block-start: 6px;
  }

  .pruvit-survey__optin-go {
    padding: 12px 24px;
    font-size: 15px;
  }

  .pruvit-survey__optin-ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font-weight: 700;
    color: var(--color-foreground);
  }

  .pruvit-survey__optin-tick {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-foreground);
    color: #fff;
  }

  .pruvit-survey__optin-tick svg {
    width: 12px;
    height: 12px;
  }

  .pruvit-survey__onward {
    margin-block-start: 8px;
  }

  /* One column on a phone. Two were planned down to 360px and measured
     otherwise at 375: each option was 143px wide, which after its padding,
     swatch, ring and gaps left 44px for the name -- "Watermelon" and
     "Raspberry" ran under the ring. A row the width of the card gives the
     name about 240px. Two columns come back where the card is wide enough to
     give each name ~130px, which "Watermelon Lime" at 15px bold needs. */
  @media screen and (max-width: 599px) {
    .pruvit-survey__opts {
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
    }

    /* Tighter on a phone, so Next is on the first screen. Measured at
       375x812, 2026-10-12: with the offer box in the card, the card ran to
       910px and Next sat about 50px below the fold. Most of the height is
       the six rows, so most of the saving is there -- 58px to 48px, still
       above the 44px a touch target wants -- and the rest is spacing. */
    .pruvit-survey {
      padding-block-end: 24px;
    }

    .pruvit-survey__card {
      padding: 20px;
    }

    .pruvit-survey__progress {
      margin-block-end: 14px;
    }

    .pruvit-survey__step {
      gap: 12px;
    }

    .pruvit-survey__opt {
      min-height: 48px;
      padding-block: 10px;
    }

    .pruvit-survey__offer {
      margin-block-end: 14px;
      padding: 10px 12px;
      font-size: 14px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-survey__bar,
    .pruvit-survey__opt {
      transition: none;
    }
  }
/* END_SECTION:pruvit-survey */

/* START_SECTION:pruvit-test-drive (INDEX:54) */
/* The survey's ground and card (sections/pruvit-survey.liquid), so the two
     email landings read as one family. */
  .pruvit-td {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: calc(var(--pruvit-gnav-h, 66px) + 12px) var(--page-margin, 16px) 48px;
    background: var(--cream, #f7f5f0);
  }

  .pruvit-td__card {
    width: min(100%, 560px);
    padding: clamp(24px, 4vw, 40px);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: 28px;
  }

  .pruvit-td__head {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
  }

  /* The survey's tick, settling in once. */
  .pruvit-td__tick {
    margin-bottom: 6px;
    animation: pruvit-td-tick 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  }

  @keyframes pruvit-td-tick {
    from {
      opacity: 0;
      transform: scale(0.7);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

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

  .pruvit-td__eyebrow,
  .pruvit-td__label,
  .pruvit-td__micro {
    margin: 0;
    font-family: var(--font-mono--family);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pruvit-td__eyebrow {
    color: var(--accent-1-ink);
  }

  .pruvit-td__h {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(30px, 6vw, 40px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--color-foreground);
  }

  .pruvit-td__lede {
    margin: 4px 0 0;
    max-width: 40ch;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  .pruvit-td__lede b,
  .pruvit-td__lede strong {
    color: var(--color-foreground);
    font-weight: 600;
  }

  .pruvit-td__micro,
  .pruvit-td__label {
    color: var(--slate);
  }

  .pruvit-td__label {
    margin-bottom: 10px;
  }

  .pruvit-td__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pruvit-td__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding-block: 12px;
    border-block-start: 1px solid var(--line);
  }

  .pruvit-td__item:first-child {
    border-block-start: 0;
    padding-block-start: 4px;
  }

  .pruvit-td__n {
    font-family: var(--font-mono--family);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-1-ink);
    padding-top: 2px;
  }

  .pruvit-td__item-t {
    display: grid;
    gap: 2px;
    font-size: 15px;
    line-height: 1.45;
  }

  .pruvit-td__item-t b {
    font-weight: 600;
    color: var(--color-foreground);
  }

  .pruvit-td__item-t span {
    font-size: 14px;
    color: var(--ink-soft);
  }

  .pruvit-td__product {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: var(--r-sm);
    background: var(--ice-soft);
    color: var(--color-foreground);
    text-decoration: none;
    transition: background 0.18s ease;
  }

  .pruvit-td__product:hover {
    background: var(--ice);
  }

  .pruvit-td__img {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: var(--r-2xs);
    overflow: hidden;
    background: #fff;
  }

  .pruvit-td__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .pruvit-td__pinfo {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .pruvit-td__ptitle {
    font-size: 15px;
    font-weight: 600;
  }

  .pruvit-td__pprice {
    font-size: 13.5px;
    color: var(--ink-soft);
  }

  /* One line, always: at 375 the shared pill's padding wrapped "Shop now"
     onto two lines, 61px tall, in a 295px card. Measured 2026-10-16. */
  .pruvit-td__go {
    flex: none;
    white-space: nowrap;
    padding: 10px 18px;
    font-size: 14px;
  }

  .pruvit-td__fine {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--slate);
    text-align: center;
  }

  @media screen and (max-width: 420px) {
    .pruvit-td__product {
      gap: 12px;
    }

    .pruvit-td__go {
      padding-inline: 14px;
    }
  }
/* END_SECTION:pruvit-test-drive */

/* START_SECTION:pruvit-tv-channel (INDEX:55) */
.pruvit-tvc {
    background: var(--color-background);
  }

  /* Quiet, and above the player rather than floating over it. The channel
     paints its own hero across the full width and anything sitting on top of
     that is in the way of the thing the page is for. */
  .pruvit-tvc__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: var(--page-margin, 16px);
    margin-block: 18px 14px;
    font-family: var(--font-heading--family);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.18s ease;
  }

  .pruvit-tvc__back:hover {
    color: #16203a;
  }

  .pruvit-tvc__back svg {
    width: 16px;
    height: 16px;
  }

  /* The channel boots asynchronously and lays itself out; the min-height is
     what stops the footer sitting halfway up the screen until it does. */
  .pruvit-tvc__stage {
    width: 100%;
  }

  .pruvit-tvc--empty {
    padding: 64px var(--page-margin, 16px);
    text-align: center;
    color: var(--ink-soft);
  }
/* END_SECTION:pruvit-tv-channel */

/* START_SECTION:quick-order-list (INDEX:56) */
.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:61) */
.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 */

/* CSS from block stylesheet tags */
/* START_BLOCK:_blog-post-card (INDEX:64) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-card--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-card--horizontal .blog-post-details,
  .blog-post-card--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .blog-post-card__image-container,
  .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-card--horizontal {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card--horizontal > .blog-post-card__image-container {
    flex-basis: 70%;
  }

  .blog-post-card--horizontal .blog-post-card__content {
    flex-basis: 30%;
    flex-grow: 1;
  }

  .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:65) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:66) */
.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:67) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    position: relative;
    display: block;
    width: var(--width);
    margin-inline: auto;
  }

  .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:68) */
.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:69) */
.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:71) */
.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:72) */
.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:73) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:74) */
.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:75) */
.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:78) */
.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:80) */
.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:84) */
.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);
  }

  /* 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:85) */
.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:87) */
.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:90) */
.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:91) */
.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:92) */
.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__solid-header-image-container {
    display: var(--header-logo-display, block);
  }

  .header-logo__transparent-header-image-container {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:93) */
.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:96) */
.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:100) */
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:105) */
/* 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:_pruvit-channel (INDEX:111) */
.pruvit-chan {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    color: #16203a;
    text-decoration: none;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease;
  }

  a.pruvit-chan:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md, 0 14px 30px -14px rgb(14 20 32 / 0.34));
  }

  /* The keyboard gets the same offer as the pointer, and the outline sits
     outside the card rather than on the image inside it. */
  a.pruvit-chan:focus-visible {
    outline: 2px solid var(--accent-1, #16203a);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-chan,
    .pruvit-chan__play,
    .pruvit-chan__arw {
      transition: none;
    }

    a.pruvit-chan:hover {
      transform: none;
    }
  }

  /* 16:9, because that is the shape of everything behind the link. A square
     or a 4:3 would crop the very frames the card is advertising. */
  .pruvit-chan__art {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--ice, #d9e2ef);
    overflow: hidden;
  }

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

  /* The one piece of chrome on the still: this is film, not an article. It
     does not claim to be a play button — the card is the control — so it is
     small, and it sits in the corner rather than dead centre where a real
     player puts its own. */
  .pruvit-chan__play {
    position: absolute;
    inset-block-end: 12px;
    inset-inline-start: 12px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.92);
    color: #16203a;
    box-shadow: 0 2px 10px -2px rgb(14 20 32 / 0.3);
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pruvit-chan__play svg {
    width: 15px;
    height: 15px;
  }

  a.pruvit-chan:hover .pruvit-chan__play {
    transform: scale(1.08);
  }

  .pruvit-chan__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 24px;
  }

  .pruvit-chan__h {
    font-family: var(--font-heading--family);
    font-size: clamp(19px, 1.8vw, 22px);
    /* 700 at -0.025em is the house heading setting, declared on
       .pruvit-h-xl/lg/md in pruvit-tokens and repeated by every component
       heading in the theme — .pruvit-tri-card__heading at 22px uses the same
       pair as the 54px display type. One weight, one tracking, whatever the
       size. This had drifted to 800 at -0.03. */
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }

  .pruvit-chan__p {
    margin-block-start: 8px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  /* Pushed to the bottom so the cue lines up across three cards whose
     descriptions are not the same length. Without this the row reads as
     ragged even though the cards are the same height. */
  .pruvit-chan__cue {
    margin-block-start: auto;
    padding-block-start: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading--family);
    font-size: 14.5px;
    font-weight: 700;
    /* --accent-mark, not --accent-1. The accent has two forms and the band
       works out which one is legible on its own ground: the fill (#99A2F3)
       is for a solid, and as 14.5px text on cream it measured 2.19:1. The
       ink form (#3F47A0) is the accent as text. The fallback is the ink form
       rather than the fill, so a card dropped outside a Prüvit band is
       readable by default rather than readable by luck. */
    color: var(--accent-mark, var(--accent-1-ink));
  }

  /* Sized in em so it tracks the cue's type, the way the menu's does. */
  .pruvit-chan__arw {
    display: flex;
    flex: none;
    width: 1.05em;
    height: 1.05em;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pruvit-chan__arw svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  a.pruvit-chan:hover .pruvit-chan__arw {
    transform: translateX(4px);
  }
/* END_BLOCK:_pruvit-channel */

/* START_BLOCK:_search-input (INDEX:123) */
.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:124) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:125) */
.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:comparison-slider (INDEX:133) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
    min-height: 0;
  }

  .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:134) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:135) */
.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:137) */
.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:138) */
.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:139) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:140) */
.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:142) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:143) */
.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:145) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:146) */
.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:148) */
.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:149) */
.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:150) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:151) */
.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:152) */
.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:153) */
.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;

    /* Right-anchored drawer spans the full physical viewport (viewport-fit=cover); keep its
       content clear of the right-side notch and home indicator */
    padding-inline-end: calc(var(--padding-xl) + var(--safe-area-inset-right));
    padding-block-end: calc(var(--padding-xl) + var(--safe-area-inset-bottom));

    @media screen and (min-width: 750px) {
      padding-inline-end: calc(var(--padding-5xl) + var(--safe-area-inset-right));
      padding-block-end: calc(var(--padding-5xl) + var(--safe-area-inset-bottom));
    }
  }

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

  /* The close button is absolutely positioned so it bypasses the drawer's safe-area padding */
  .popup-link__content--drawer .popup-link__close {
    top: max(var(--margin-2xs), var(--safe-area-inset-top));
    right: max(var(--margin-2xs), var(--safe-area-inset-right));
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-custom-property (INDEX:156) */
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:158) */
.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:159) */
.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:pruvit-apply (INDEX:161) */
.pruvit-apply {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(24px, 4vw, 52px);
    align-items: start;
  }

  /* The band's anchor is on the section; this is where the browser lands
     after Shopify's round trip, and it wants the same header clearance. */
  .pruvit-apply__form {
    scroll-margin-block-start: calc(var(--pruvit-gnav-h, 66px) + 24px);
  }

  .pruvit-apply__h {
    color: inherit;
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    text-wrap: balance;
  }

  .pruvit-apply__lede {
    margin: 18px 0 0;
    font-size: var(--lede-size);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 40ch;
  }

  .pruvit-apply__card {
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 18px 44px -28px rgba(22, 32, 58, 0.4);
  }

  .pruvit-apply__form-h {
    color: inherit;
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .pruvit-apply__note {
    margin: 8px 0 22px;
    font-size: 13.5px;
    color: var(--slate);
  }

  /* One column, on purpose — the brief asks for it and a review form is read
     top to bottom by the person filling it in and by the person reading the
     email it becomes. Pairing fields would save height and cost that order. */
  .pruvit-apply__field + .pruvit-apply__field {
    margin-block-start: 18px;
  }

  /* `> label` already excludes the floating ones, which sit a level deeper
     inside .pruvit-fld. Stated because it is load-bearing rather than tidy:
     flatten that wrapper and every floated label would take this block
     styling and jump out of its field.

     :not(.pruvit-apply__check) is the fix for a bug Craig reported on
     2026-09-28 -- "I'm applying on behalf..." wrapping UNDER its checkbox
     instead of inside its own column. A checkbox row is also a direct child
     label, so this rule's `display: block` at (0,2,1) was beating
     .pruvit-apply__check's `display: flex` at (0,1,0) and the row was never a
     flex row at all; the box and the text ran as inline content and the text
     wrapped back under the box. Excluding here rather than out-specifying
     there, because the two rules were never meant to meet. */
  .pruvit-apply__field > label:not(.pruvit-apply__check) {
    display: block;
    margin-block-end: 7px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
  }

  /* The seam between the two kinds of field. Small and quiet -- a change of
     subject, not a section title competing with the form's own heading.

     Drawn as .pruvit-fset__label on the PDP is: Space Mono, 12px, regular
     weight, 0.08em. Same rank of thing in two places -- the name of a group
     of controls -- so it is the same mark rather than a second invention.
     Not @extend-ed from that rule because it lives in pruvit-buy's
     stylesheet and a product block has no business being on this page. */
  .pruvit-apply__group {
    margin: 30px 0 14px;
    font-family: var(--font-mono--family);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
  }

  .pruvit-apply__group:first-of-type {
    margin-block-start: 0;
  }

  /* ---- the signed-in identity box --------------------------------------
     The box itself is .pruvit-si__who, borrowed from the shared signed-in
     state. Only what it cannot know from over there is set here: it normally
     follows a lede and carries a 22px top margin for it, and in this form it
     follows a group heading that has already spaced itself.

     The class is doubled, as .pruvit-fld's is and for the same reason.
     .pruvit-si__who is (0,1,0) and lives in pruvit-claim's stylesheet, this
     is (0,1,0) and lives in ours, and which stylesheet the bundler writes
     first is not something to bet a margin on. Measured 2026-09-28: at equal
     specificity this lost and the box sat 22px down. */
  .pruvit-apply__acct.pruvit-apply__acct {
    margin-block-start: 0;
  }

  /* The number in the box, drawn like the email under it: both are values the
     applicant reads back to check the account is the right one. */
  .pruvit-apply__acct-p {
    font-size: 15px;
    color: var(--color-foreground);
  }

  /* .pruvit-acct carries a 10px bottom margin for its place in the lead form.
     Here it is one item in a stack of fields, so it takes the field-to-field
     gap instead. Doubled class for the same reason as above -- .pruvit-acct
     is (0,1,0) in another block's stylesheet and so would this be. */
  .pruvit-apply__ask.pruvit-apply__ask {
    margin-block-end: 18px;
  }

  /* Quiet by construction: this is the exit from a form somebody is in the
     middle of, and it should be findable without competing with the field
     under it. A sentence with the control inside it, not a button in its own
     right -- .pruvit-btn--ghost here would read as a second action of the
     same rank as Submit. */
  .pruvit-apply__acct-swap {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--slate);
  }

  .pruvit-apply__acct-out {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent-1-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .pruvit-apply__acct-out:hover {
    text-decoration-thickness: 2px;
  }

  /* The form's own focus ring is written for fields with a border to replace;
     a text button has none, so it gets the outline without the border swap. */
  .pruvit-apply__acct-out:focus-visible {
    outline: 2px solid var(--accent-1);
    outline-offset: 2px;
    border-radius: 3px;
  }

  /* The identity box is not a .pruvit-apply__field, so the field after it
     needs the gap the field-to-field rule would have given it. */
  .pruvit-apply__acct-swap + .pruvit-apply__field,
  .pruvit-apply__acct + .pruvit-apply__field {
    margin-block-start: 18px;
  }

  /* Two controls on one line, at the lead form's proportions so the two
     forms line up field for field. The cells are plain divs rather than
     .pruvit-fld itself because each one carries its own error line below the
     field -- a message under the wrong half of the row is worse than none. */
  .pruvit-apply__row2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }

  /* align-items: start, like the names row. Without it the country select
     stretches to match the phone cell the moment its error line appears, and
     a select that grows taller than its own text is the tell that something
     under it changed. */
  .pruvit-apply__phone {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 12px;
    align-items: start;
  }

  @media screen and (max-width: 600px) {
    .pruvit-apply__row2,
    .pruvit-apply__phone {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* THE CHEVRON'S ROOM, TWICE OUT-SPECIFIED. Measured 2026-09-28: every
     select on this form computed padding-inline-end 14px under a 16px glyph
     inset 14px from the edge, so a long option ran under its own arrow.

     Both rules that set `padding` do it as a SHORTHAND, which resets the
     longhand no matter where it was written:

       .pruvit-apply :is(input[type=...], select, ...)  (0,2,1)  12px 14px
       .pruvit-fld.pruvit-fld :is(input[type=...], ...) (0,3,1)  22px 14px 8px

     and .pruvit-apply select, which asks for the 42px, is only (0,1,1). The
     first pass at this was .pruvit-apply .pruvit-fld.pruvit-fld select, which
     is also (0,3,1) -- :is() takes the specificity of its heaviest argument,
     input[type='text'] at one type and one attribute -- so it TIED the fld
     rule and lost on source order. The same tie that took the ghost button's
     hover and the video's aspect ratio earlier today.

     So: one selector per case, each a clear step above the rule it has to
     beat. Doubling a class rather than reaching for !important, because a
     later rule with a real reason should still be able to win. */
  .pruvit-apply.pruvit-apply .pruvit-fld.pruvit-fld select,
  .pruvit-apply.pruvit-apply.pruvit-apply select {
    padding-inline-end: 42px;
  }

  .pruvit-apply__hint {
    margin: -3px 0 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--slate);
  }

  /* The lead form's field, restated for this form's own selectors: same
     height, radius and hairline, so the two forms read as one system. */
  .pruvit-apply :is(input[type='text'], input[type='email'], input[type='tel'], select, textarea) {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    /* Longhand on purpose. :is() takes the specificity of its heaviest
       argument, so this rule is (0,2,1) and outranks .pruvit-apply select at
       (0,1,1) — a background shorthand here reset the select's chevron to
       none. Measured 2026-09-24: computed background-image "none" with the
       chevron rule present and matching. */
    background-color: #fff;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: inherit;
  }

  .pruvit-apply textarea {
    min-height: 120px;
    resize: vertical;
  }

  /* The native arrow, redrawn so it is the same on every platform. The glyph
     is the FAQ chevron's geometry in the page ink. */
  .pruvit-apply select {
    appearance: none;
    padding-inline-end: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316203a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    cursor: pointer;
  }

  .pruvit-apply :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--accent-1);
    outline-offset: 1px;
    border-color: transparent;
  }

  /* --err is the theme's error red, 5.9:1 on white as text; as the field's
     edge it is doing a boundary's job and clears 3:1 with room. */
  .pruvit-apply :is(input, select, textarea)[aria-invalid='true'] {
    border-color: var(--err);
  }

  /* The whole-form failure, under the captcha and above the button: a
     transport problem belongs with the submit, not beside a field that is
     perfectly valid. */
  .pruvit-apply__err--form {
    margin-block-end: 12px;
  }

  .pruvit-apply__captcha:not([hidden]) {
    margin-block-start: 18px;
  }

  .pruvit-apply__err {
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--err);
  }

  /* [hidden] is a UA rule at (0,0,0); the class above sets margin, not
     display, so it does not need restating — but the alt field wrapper
     is a plain div and the check below sets display, so that one does. */
  .pruvit-apply__check {
    display: flex;
    align-items: start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
  }

  /* 18px rather than Horizon's 22, set through the theme's OWN variable
     instead of a width and a height. The tick is a ::after sized
     var(--checkbox-size) with mask-size: contain, so a hardcoded 18px box
     kept a 22px glyph and the mark overhung its own box by 2px a side --
     measured 2026-09-28. Driving the variable makes the box and the mark
     agree by construction. The radius is in pruvit-tokens, with the note on
     why every checkbox in this theme was wearing a text field's corner. */
  .pruvit-apply__check input {
    --checkbox-size: 18px;
    flex: none;
    margin: 2px 0 0;
    /* Inert while Horizon sets appearance: none, and kept for the one case
       where that stylesheet has not arrived and the native control draws. */
    accent-color: var(--color-foreground);
  }

  .pruvit-apply__check--quiet {
    margin-block-start: 10px;
    font-size: 13.5px;
    color: var(--ink-soft);
  }

  .pruvit-apply__field[hidden] {
    display: none;
  }

  .pruvit-apply__go {
    width: 100%;
    justify-content: center;
    padding-block: 15px;
    margin-block-start: 24px;
    /* The busy ring's contrasting arc, on a periwinkle button with dark ink. */
    --pruvit-busy-ink: var(--accent-1-on);
  }

  .pruvit-apply__privacy,
  .pruvit-apply__fine {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--slate);
    text-align: center;
  }

  .pruvit-apply__privacy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .pruvit-apply__fine {
    margin-block-start: 8px;
  }

  /* Both columns, under both. */
  .pruvit-apply__disclaimer {
    grid-column: 1 / -1;
    margin-block-start: 8px;
  }

  /* ---- the success state ---- */

  .pruvit-apply__done {
    padding-block: clamp(28px, 5vw, 48px);
    text-align: center;
  }

  .pruvit-apply__done:focus-visible {
    outline: none;
  }

  .pruvit-apply__tick {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--save-soft);
    color: var(--save-ink);
  }

  .pruvit-apply__tick svg {
    width: 22px;
    height: 22px;
  }

  .pruvit-apply__done-h {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 700;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .pruvit-apply__done-b {
    margin: 10px auto 0;
    max-width: 44ch;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  @media screen and (max-width: 860px) {
    .pruvit-apply {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_BLOCK:pruvit-apply */

/* START_BLOCK:pruvit-benefits (INDEX:162) */
/* No margin override. The first attempt zeroed .pruvit-buy__benefits here
     because the details column's own gap was stacking on top of it; the column
     is set to 0 now instead, so the buy box's 18px is the only thing spacing
     these and the two pages agree by using the same number rather than by two
     numbers happening to add up. */

  /* Deliberately almost empty. This list wears .pruvit-buy__benefits and takes
     its type, spacing and periwinkle tick from the rule in pruvit-buy, which
     Shopify compiles theme-wide. It used to carry its own — 16px against the
     buy box's 15, weight 400 against 500, line-height 1.5 resolving to 24px
     against 22.5, and a navy tick where the buy box's is accent-1-ink — so the
     product page and the landing page disagreed about what a benefit looks
     like. Matching by class rather than by copied values means they cannot
     drift apart again.

     .pruvit-benefits stays on the element only as the spacing-style hook for
     the block's own padding settings. */
/* END_BLOCK:pruvit-benefits */

/* START_BLOCK:pruvit-blueprint (INDEX:163) */
.pruvit-bp {
    /* Cleared by the header when the anchor is followed. */
    scroll-margin-block-start: calc(var(--header-height, 60px) + 24px);
    background: linear-gradient(150deg, var(--cream) 0%, var(--ice-soft) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(28px, 4vw, 48px);
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 34px;
    align-items: center;
    color: #16203a;
  }

  .pruvit-bp--no-fan {
    grid-template-columns: 1fr;
  }

  .pruvit-bp__heading {
    font-family: var(--font-heading--family);
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-wrap: balance;
    margin: 0;
  }

  .pruvit-bp__heading :is(em, i) {
    font-family: var(--font-accent--family);
    font-style: var(--font-accent--style);
    font-weight: var(--font-accent--weight);
    font-size: 1.06em;
    letter-spacing: -0.005em;
  }

  .pruvit-bp__text {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgb(22 32 58 / 0.72);
    max-width: 48ch;
  }

  .pruvit-bp__list {
    display: grid;
    gap: 9px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
  }

  .pruvit-bp__list li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
  }

  .pruvit-bp__tick {
    flex: none;
    margin-block-start: 4px;
    color: #16203a;
  }

  .pruvit-bp__tick svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .pruvit-bp__cta {
    margin-block-start: 26px;
  }

  .pruvit-bp__warning {
    margin: 26px 0 0;
    font-size: 13px;
    color: var(--err);
  }

  .pruvit-bp__fine {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--slate);
  }

  .pruvit-bp__fan {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Aspect ratio from the artwork, so the stage is the page's own shape and
     the rotations below land where they were measured. */
  .pruvit-fan {
    position: relative;
    width: min(196px, 52%);
    aspect-ratio: 460 / 651;
  }

  /*
   * Above 1100 the card stops being a two-column layout and starts being two
   * things drifting apart. The copy is capped at 48ch and so ends at the same
   * 477px whatever the card does; the fan is capped at 196px and stops growing
   * at about 1130. Everything wider than that lands between them: 106px of
   * gutter at a 900px card, 457px at 1360. It read correctly when the container
   * was ~1000 and the page-width change to 1440 is what exposed it.
   *
   * So above 1100 both tracks are given a ceiling and the pair is centred,
   * which makes the gutter a chosen number rather than whatever is left over.
   * Below 1100 nothing changes — that range was tuned and still measures right.
   * Declared after the base rules on purpose: equal specificity, source order
   * decides.
   */
  @media screen and (min-width: 1100px) {
    /*
     * THE FAN IS WIDER THAN ITS PAGES. Read this before changing any number
     * here, because the obvious change makes it worse.
     *
     * The three cards are rotated and translated outwards, so the artwork
     * paints about 1.7x the width of the stage the aspect ratio reserves.
     * Measured at 1440: a 320px stage paints 555px.
     *
     * The previous version set the stage to 100% of a 320px track and centred
     * the pair. That hid the overflow on the right — the dead space either
     * side absorbed it — and let it out on the LEFT, straight into the copy:
     * 55px into the column and 18px over the body text, so a line of the
     * paragraph ran underneath the back page. That is the layout reading as
     * off; it was not the spacing.
     *
     * So the stage is sized as a fraction of its track again, the way the
     * prototype does it, and the track is widened to carry the spread. Swept
     * 24 combinations of track, gap and stage at 1440 and took the largest
     * artwork that clears both the copy and the card:
     *
     *   track 460, gap 48, stage 62%  ->  copy 546, artwork 495 wide,
     *   23px clear of the text, 40px inside the card, band 550 tall.
     *
     * Do not raise the stage percentage to make the pages bigger. Every
     * combination that did — including tightening the rotations — either put
     * the artwork back over the copy or pushed the band past 700px tall. A
     * bigger page needs fewer of them, not a bigger stage: dropping the back
     * card takes the front page from 299 to 415 in the same footprint.
     */
    .pruvit-bp {
      /*
       * min(), not a flat 460: a fixed track takes the same width out of a
       * narrow card as a wide one, and at the bottom of this range that left
       * the copy on 376px with a 36px heading in it. The percentage lets both
       * columns give way together. Measured across the range — container
       * 1060 / 1152 / 1440 — the copy holds 446 / 497 / 546 and the artwork
       * clears the text by 27 / 24 / 23.
       */
      grid-template-columns: minmax(0, 1fr) minmax(0, min(460px, 44%));
      column-gap: 48px;
      /*
       * The rotations paint below the stage as well as beside it. Measured,
       * this clears the card's bottom border with 12px to spare.
       */
      padding-block: 72px;
    }

    .pruvit-fan {
      width: 62%;
    }
  }

  .pruvit-fan__card {
    position: absolute;
    inset: 0;
  }

  .pruvit-fan__page {
    width: 100%;
    height: 100%;
    border-radius: 7%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 20px 40px -10px rgba(0, 10, 40, 0.42), 0 8px 16px -6px rgba(0, 10, 40, 0.26);
  }

  .pruvit-fan__card--back {
    transform: rotate(-13deg) translate(-27%, 4.3%);
    z-index: 1;
  }

  .pruvit-fan__card--mid {
    transform: rotate(9deg) translate(24.3%, 2.5%);
    z-index: 2;
  }

  .pruvit-fan__card--front {
    transform: rotate(-2deg) translate(-1.3%, -3.1%);
    z-index: 3;
  }

  .pruvit-fan__card--front .pruvit-fan__page {
    box-shadow: 0 24px 48px -10px rgba(0, 10, 40, 0.48), 0 10px 20px -6px rgba(0, 10, 40, 0.3);
  }

  /* Near-black on the deep accent, not white: white here is 3.25, and "PDF"
     is 7px. The token gives 5.67. */
  .pruvit-fan__badge {
    position: absolute;
    top: -5%;
    right: -7%;
    z-index: 4;
    width: clamp(38px, 23%, 54px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--accent-1-deep);
    color: var(--accent-1-on);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px -6px rgba(0, 10, 40, 0.5);
    transform: rotate(8deg);
  }

  .pruvit-fan__badge b {
    font-family: var(--font-heading--family);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  .pruvit-fan__badge i {
    font-style: normal;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.1em;
    opacity: 0.92;
    margin-block-start: 2px;
  }

  .pruvit-bp__dialog {
    width: min(940px, calc(100vw - 32px));
    max-height: 92vh;
    padding: 0;
    border: none;
    border-radius: var(--r-lg);
    background: #fff;
    color: #16203a;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    grid-template-columns: 0.82fr 1.18fr;
  }

  /* A closed <dialog> is hidden by a UA rule — dialog:not([open]) { display:
     none } — and any display on the element itself outranks it. Declaring the
     grid unconditionally therefore un-hid the modal: 940x707 of it laid out in
     the flow, over the band it belongs to. The grid is the open state's. */
  .pruvit-bp__dialog[open] {
    display: grid;
  }

  .pruvit-bp__art {
    background: linear-gradient(160deg, #16203a 0%, var(--navy-mid) 100%);
    padding: 34px 28px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
  }

  .pruvit-bp__art::before {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--accent-1-rgb) / 0.18), transparent 68%);
    bottom: -130px;
    left: -110px;
  }

  /* The fan's cards are rotated out of flow, so the layout reserves nothing for
     the fifth of the stage they paint below it. */
  .pruvit-bp__art-fan {
    --fan-w: min(168px, 58%);

    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-block-end: calc(var(--fan-w) * 0.215 + 8px);
  }

  .pruvit-bp__art-fan .pruvit-fan {
    width: var(--fan-w);
  }

  .pruvit-bp__art-fan .pruvit-fan__page {
    box-shadow: 0 22px 42px -12px rgba(0, 0, 0, 0.6), 0 8px 16px -6px rgba(0, 0, 0, 0.4);
  }

  .pruvit-bp__art-k {
    position: relative;
    z-index: 2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-1-bright);
  }

  /* The panel sets colour on itself and the children inherit it — except a
     heading, because Horizon's base.css carries `h3 { color: var(--color) }`
     and a rule that matches the child beats anything the parent passes down.
     Without this the heading is navy on navy: present, measurable, unreadable. */
  .pruvit-bp__art-h {
    color: inherit;
    position: relative;
    z-index: 2;
    font-family: var(--font-heading--family);
    font-size: 29px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
  }

  .pruvit-bp__art-list {
    position: relative;
    z-index: 2;
    list-style: none;
    display: grid;
    gap: 11px;
    margin: 4px 0 0;
    padding: 0;
  }

  .pruvit-bp__art-list li {
    display: flex;
    gap: 10px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.4;
  }

  .pruvit-bp__art-list svg {
    width: 16px;
    height: 16px;
    color: var(--accent-1-bright);
    flex: none;
    margin-block-start: 3px;
  }

  .pruvit-bp__form-h {
    font-family: var(--font-heading--family);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
  }

  .pruvit-bp__form-s {
    font-size: 15px;
    color: rgb(22 32 58 / 0.72);
    margin: 9px 0 0;
  }

  /* The form needs to come off the copy above it. In the modal the sub-line
     and the referrer step were adjacent with nothing between them but
     line-height, so a confirmed referrer's face sat almost against "No
     purchase needed" and read as part of that sentence.

     Scoped to the modal rather than put on .pruvit-lead, which is shared:
     the Partner card has its copy in a column beside the form, not above it,
     and the Create Account panel already sets its own 22. 22 is that same
     value — copy above, form below, one gap. */
  .pruvit-bp__dialog-body :is(.pruvit-lead, .pruvit-si) {
    margin-block-start: 22px;
  }

  /* Reaching into another app's markup, so this stays on element selectors
     rather than their class names — those are theirs to rename, and a rule
     keyed to one would fail silently on their next release. The app ships its
     own modal.css; these are the few properties worth overriding to stop the
     form looking like a different website inside our dialog. */
  .pruvit-bp__dialog-body input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
  .pruvit-bp__dialog-body select {
    border: 1.5px solid var(--line);
    border-radius: var(--r-xs);
    padding: 14px 15px;
    font-family: inherit;
    font-size: 15px;
    width: 100%;
  }

  .pruvit-bp__dialog-body input:not([type='checkbox']):not([type='radio']):focus,
  .pruvit-bp__dialog-body select:focus {
    border-color: #16203a;
    outline: none;
  }

  .pruvit-bp__dialog-body button[type='submit'] {
    border-radius: 999px;
    font-family: var(--font-heading--family);
    font-weight: 700;
  }

  @media screen and (max-width: 860px) {
    .pruvit-bp__dialog {
      grid-template-columns: 1fr;
    }

    /* The art panel loses the fan and most of its height on a phone: the form
       is what the visitor came to the dialog to finish, and it should not be
       below the fold of a 92vh sheet. */
    .pruvit-bp__art {
      padding: 22px 24px;
      gap: 10px;
    }

    .pruvit-bp__art-fan,
    .pruvit-bp__art-list {
      display: none;
    }
  }

  .pruvit-bp__dialog::backdrop {
    background: var(--scrim-modal, rgba(14, 20, 32, 0.55));
    backdrop-filter: var(--scrim-blur, blur(3px));
  }

  .pruvit-bp__dialog-body {
    padding: 36px 34px;
    max-height: 92vh;
    overflow-y: auto;
  }

  /* Outside the padding box and above it, so a form with its own white card
     cannot swallow the only way out. */
  .pruvit-bp__dialog-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgb(22 32 58 / 0.06);
    color: #16203a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .pruvit-bp__dialog-close:hover {
    background: rgb(22 32 58 / 0.12);
  }

  /* The fan leads on a phone. Stacked under the copy it would be the last
     thing before the next band, which reads as a dangling illustration rather
     than as what the offer is. */
  @media screen and (max-width: 860px) {
    .pruvit-bp {
      grid-template-columns: 1fr;
    }

    .pruvit-bp__fan {
      order: -1;
      margin-block-end: 8px;
    }

    .pruvit-fan {
      width: min(180px, 50%);
    }
  }

  /* ---- compact -------------------------------------------------------------
     For a page where this band is the way in to something below it, not the
     point of the page -- the K_1 customer-exclusive page, where the video
     library follows and a tall band hid it (Craig, 2026-10-16: "people might
     miss the video embed below it. It's ok if the image goes smaller").
     Less padding and a smaller stage at every width. Last in the sheet so it
     wins on source order over the tuned rules above, which it leaves alone.
     The stage is still a fraction of its track, and the track still wider
     than the stage, for the reason the 1100px note gives: the fan paints
     about 1.7x its stage. */
  .pruvit-bp--compact {
    padding: clamp(20px, 3vw, 32px);
    gap: 24px;
  }

  .pruvit-bp--compact .pruvit-fan {
    width: min(132px, 46%);
  }

  /* Beside the copy the rotated pages hang below their stage: measured at
     1024 they painted 3px from the card's bottom edge, 7px at 1440. The extra
     bottom padding gives them the original's ~12px or more. */
  @media screen and (min-width: 861px) {
    .pruvit-bp--compact {
      padding-block-end: 44px;
    }
  }

  @media screen and (min-width: 1100px) {
    .pruvit-bp--compact {
      grid-template-columns: minmax(0, 1fr) minmax(0, min(300px, 34%));
      padding-block: 36px 46px;
    }

    .pruvit-bp--compact .pruvit-fan {
      width: 46%;
    }
  }

  @media screen and (max-width: 860px) {
    .pruvit-bp--compact .pruvit-fan {
      width: min(104px, 32%);
    }
  }
/* END_BLOCK:pruvit-blueprint */

/* START_BLOCK:pruvit-buy (INDEX:164) */
/* A PDP layout, not a single card: the gallery sits directly on the band and
     the form is the one floating panel. That split is what makes it reusable —
     any product has images and a buy form, and only the form needs to look
     liftable. */
  .pruvit-buy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(26px, 3.2vw, 50px);
    align-items: start;
    --pruvit-flavor-ground: var(--ice-soft);
  }

  /* Compact: one column, because the gallery that filled the other one is not
     rendered. Written here rather than in the collection section, and with the
     class doubled: both selectors are one class, and in the bundled stylesheet
     the section's rules land before the block's — so the plain
     .pruvit-buy--compact lost to .pruvit-buy on source order alone and the form
     stayed 172px wide inside a 420px drawer. */
  .pruvit-buy.pruvit-buy--compact {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The drawer is already a panel: its own white ground, its own radius, its
     own edge. The form's card treatment is the whole reason the buy box reads
     as a card on the product page, so in compact every part of it comes off —
     border and radius included, which the first pass left on and which drew a
     second rounded box inside the drawer. */
  /* Flat: the card treatment comes off and nothing else does. The gallery, the
     facts button and the dialog all stay, which is the whole difference between
     this and compact. A product page already sits on its own ground; the
     controls do not need to float on a second one. */
  .pruvit-buy.pruvit-buy--flat .pruvit-buy__form {
    padding: 0;
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
  }

  .pruvit-buy.pruvit-buy--compact .pruvit-buy__form {
    padding: 0;
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
  }

  .pruvit-buy__gallery {
    display: grid;
    gap: 20px;
  }

  /* Square stage: pack shots are portrait and the editorial frames are
     landscape, so a fixed square is the one ratio that holds both without the
     stage resizing as you click through the thumbs. width:100% makes the inline
     size definite, so a max-height clamps the height alone — left to stretch,
     the cap transfers back through the ratio and narrows the stage out of line
     with the thumb rail. */
  .pruvit-buy__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--pruvit-flavor-ground);
    transition: background 0.45s ease;
  }

  .pruvit-buy__stage img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6% 8% 9%;
    filter: drop-shadow(0 16px 22px rgba(14, 20, 32, 0.3));
  }

  .pruvit-buy__stage--photo img {
    object-fit: cover;
    padding: 0;
    filter: none;
  }

  /* One rail, always one row, however many frames the product has. flex-basis 0
     with grow and shrink divides the row evenly rather than wrapping a fifth
     thumb onto its own line at phone widths. */
  /* align-items, stated, because the default is stretch and stretch beats
     aspect-ratio in Safari.

     The thumbs are flex: 1 1 0 with aspect-ratio: 1 / 1 and no height of their
     own. Chromium lets the ratio decide and draws squares; Safari stretches
     them to the row's cross size and the ratio loses, so on an iPhone they came
     out roughly 1:3 — tall panels with object-fit: cover showing the middle
     band of a square photo, which on these shots is mostly the flavour's
     ground with the sachet marooned in the centre.

     flex-start makes the ratio authoritative in both engines. Measured square
     in this pane before and after, which is exactly why it was not found here:
     Chromium never had the bug to show. */
  .pruvit-buy__thumbs {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .pruvit-th {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    padding: 0;
    cursor: pointer;
    border: 1.5px solid rgb(var(--color-foreground-rgb) / 0.14);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: #fff;
    position: relative;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }

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

  .pruvit-th--pack {
    background: var(--pruvit-flavor-ground);
  }

  .pruvit-th--pack img {
    object-fit: contain;
    padding: 6px;
  }

  .pruvit-th:hover {
    transform: translateY(-2px);
  }

  /* The resting thumbs are identified by their own picture, so the state
     indicator is what has to be visible: the accent's ink form measures 6.13
     on the ice ground where its deep form only reaches 2.49. */
  .pruvit-th[aria-selected='true'] {
    border-color: var(--accent-1-ink);
    box-shadow: 0 0 0 3px rgb(var(--accent-1-rgb) / 0.34);
  }

  /* Full width and centred: it is the third thing in the gallery column, under
     a full-width stage and a full-width thumb rail, so anything narrower reads
     as a stray control rather than part of the stack. */
  .pruvit-buy__sf {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 999px;
    border: 1.5px solid rgb(var(--color-foreground-rgb) / 0.22);
    background: transparent;
    color: var(--color-foreground);
    font-family: var(--font-heading--family);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
  }

  .pruvit-buy__sf:hover {
    border-color: var(--color-foreground);
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }

  .pruvit-buy__sf svg {
    width: 18px;
    height: 18px;
  }

  /* The gallery holds still while the form scrolls past it. Two constraints
     fight over the stage height: the column has to fit under the chrome or it
     pins with its foot off screen, and a sticky item can only hold for
     (container height − its own height), so it also has to stay meaningfully
     shorter than the form. Short windows drop sticky entirely and keep the
     full square. */
  @media screen and (min-width: 901px) and (min-height: 760px) {
    .pruvit-buy__gallery {
      position: sticky;
      top: calc(var(--pruvit-gnav-h, 66px) + 30px);
      align-self: start;
    }

    .pruvit-buy__stage {
      max-height: calc(100vh - 310px);
    }
  }

  .pruvit-buy__form {
    background: #fff;
    color: #16203a;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    padding: clamp(26px, 3vw, 38px);
    --color-foreground-rgb: 22 32 58;
    --ink-soft: rgb(22 32 58 / 0.72);
    --slate: rgb(22 32 58 / 0.55);
  }

  .pruvit-buy__title {
    font-family: var(--font-heading--family);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
  }

  /* 16px, the body size, rather than the 15 it was. Craig, 2026-09-28. It is
     the product's own sentence and the first prose on the page, so it reads at
     the size the rest of the site's prose does; the benefits list under it
     stays where it is, because a list of three fragments is a different kind
     of text and shrinking against the sentence is what keeps them apart. */
  .pruvit-buy__sub {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 8px 0 0;
  }

  .pruvit-buy__benefits {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
  }

  .pruvit-buy__benefits li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
  }

  /* The tick, as the landing page draws it: an ice disc with the check sitting
     inside it, restated from .pruvit-tri-card__tick in pruvit-tri — 17px disc,
     10px glyph. Craig, 2026-09-28: "I think it may look cleaner." It is, and
     the reason is that a bare tick and a feature's icon are the same weight of
     mark, so a list of ticks read as loose; a disc gives the column an edge to
     line up against.

     The disc is the <svg>'s own box rather than a wrapper span, because this
     list's markup is shared with the metaobject-icon branch in
     pruvit-benefit-lines and only one of the two should get it. 3.5px of
     padding inside 17px leaves the 10px glyph the landing page uses.

     stroke-width 2.6 on a 16 viewBox at 10px draws 1.63px, clear of the
     sub-pixel floor that made the drawer's close icon look broken. Keep an eye
     on that if the disc ever shrinks.

     A light periwinkle ground with the dark mark. Craig, 2026-09-28: solid
     --accent-1 was heavier than the column wanted. --accent-1-soft is that
     ground, and pruvit-tokens carries its numbers along with the rest of the
     palette — 13.39 for the mark on it, 1.38 on white, and the note that a
     white mark on it is 1.38 rather than better. */
  .pruvit-buy__benefits svg {
    box-sizing: border-box;
    width: 17px;
    height: 17px;
    padding: 3.5px;
    border-radius: 50%;
    background: var(--accent-1-soft);
    color: var(--accent-1-soft-on);
    margin-block-start: 3px;
  }


  /* The shipping note. The fill carries it and the edge only draws it: a
     --flag-soft ground at 1.20 against the white card, with --flag itself as
     the hairline at 1.14 against that ground. Craig, 2026-09-28 -- the first
     version had these the other way round, a pale fill behind a --flag-edge
     hairline at 3.52, which reads as a box somebody drew rather than a notice.

     Text on the fill is 15.37, and that is where the meaning lives. A notice
     panel is not an interactive component, so the edge owes nothing under
     1.4.11 and is free to be quiet.

     Duranta is yellow-GREEN at roughly 66deg where the reference panel Craig
     sent is a warm gold at 48deg. This reads greener than that on purpose: it
     is the brand's yellow, and inventing a second one for a notice would give
     the site two yellows that disagree. */
  .pruvit-shipnote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--flag);
    border-radius: var(--r-sm);
    background: var(--flag-soft);
    font-size: 14px;
    line-height: 1.5;
    color: rgb(var(--color-foreground-rgb));
  }

  .pruvit-shipnote__i {
    display: grid;
    place-items: center;
    flex: none;
    width: 18px;
    height: 18px;
    margin-block-start: 1px;
    color: var(--flag-ink);
  }

  .pruvit-shipnote__i svg {
    width: 16px;
    height: 16px;
  }

  .pruvit-fset {
    margin-block-start: 26px;
  }

  /* Space Mono for the step labels. A mono face carries its own even rhythm, so
     the tracking comes down and the weight stays at 400 — Space Mono ships only
     400 and 700, and 700 reads as shouting at this size. */
  .pruvit-fset__label {
    margin-block-end: 12px;
    font-family: var(--font-mono--family);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
  }

  .pruvit-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .pruvit-pill-opt {
    border: 1.5px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 11px 19px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: #16203a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  }

  .pruvit-pill-opt:hover {
    border-color: var(--slate);
  }

  .pruvit-pill-opt[aria-pressed='true'] {
    background: #16203a;
    color: #fff;
    border-color: #16203a;
  }

  /* The multi-buy pack's "· 2 boxes": part of the label, quieter than the
     number. Inherits the pill's ink so it inverts with it. */
  .pruvit-pill-opt__sub {
    font-weight: 500;
    opacity: 0.75;
    margin-inline-start: -4px;
  }

  /* One badge recipe, used by the pack-size pills and by the subscription's
     money saving, so the two read as the same kind of fact. */
  /* [hidden] is a UA rule of the weakest kind, and `display: inline-block` on
     the element outranks it — so hiding this chip in Liquid did nothing and the
     saving stayed on screen for a shopper who had already subscribed. The same
     trap the supplement-facts dialog hit: any display on the element beats the
     attribute. */
  .pruvit-save[hidden] {
    display: none;
  }

  .pruvit-save {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--save-ink);
    background: var(--save-soft);
    padding: 2px 8px;
    border-radius: 999px;
  }

  .pruvit-save:empty {
    display: none;
  }

  /* The badge has to invert with the pill: a selected pill goes navy, and the
     savings ink on its tint over navy measures 2.01. */
  .pruvit-pill-opt[aria-pressed='true'] .pruvit-save {
    color: var(--accent-1-bright);
    background: rgb(var(--accent-1-rgb) / 0.18);
  }

  /* Sold out, and still yours to look at.
     ---------------------------------------------------------------------
     Set by pruvit-buy.js per combination, so these move as the other groups
     change. Both states — a variant with none left, and a combination that
     never existed — look the same; the difference is in the word the screen
     reader gets, which is where it matters.

     Deliberately not disabled. A shopper who wants White Peach should be
     able to select it, see the pack and read the label, and decide whether
     to wait. Taking the click away would answer a question they have not
     asked yet. The pointer still says pointer for the same reason. */
  .pruvit-sw[data-oos] .pruvit-sw__disc {
    position: relative;
    filter: grayscale(0.82);
    /* 0.5 was heavy. The strike below compensates rather than fading with it
       — see the note there — so this can drop without the mark going with
       it. */
    opacity: 0.35;
  }

  /* Corner to corner of the disc's own box, which crosses the circle at 45°
     through the middle. A ring would have been the other option and reads as
     a prohibition; this reads as struck off a list, which is what it is.

     Opaque, and that is arithmetic rather than taste. This pseudo is inside
     the faded disc, so what you see is the product of the two: at 0.5 × 0.72
     the line landed at 0.36. Craig asked for a lighter disc, so the fade went
     to 0.35 — and 0.35 × 1.0 is 0.35. The artwork recedes by a third and the
     mark that says "sold out" holds exactly where it was. Move one of these
     and the other has to move the other way. */
  .pruvit-sw[data-oos] .pruvit-sw__disc::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(
      to top right,
      transparent calc(50% - 1.25px),
      rgb(22 32 58) calc(50% - 1.25px),
      rgb(22 32 58) calc(50% + 1.25px),
      transparent calc(50% + 1.25px)
    );
  }

  /* The lift on hover stays — the disc is still a live control — but it does
     not pretend to be available by brightening. */
  .pruvit-sw[data-oos] .pruvit-sw__name {
    opacity: 0.6;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }

  /* A selected sold-out flavour keeps its ring, because it is still the one
     on the stage. It would be worse to lose track of what you had picked. */
  .pruvit-sw[data-oos][aria-pressed='true'] .pruvit-sw__name {
    opacity: 0.75;
  }

  /* The pills are words, so they take the treatment words take.

     Both diagonals were tried on them and neither held up. A fixed 45° only
     spans the pill's height, so on a 134px pill it is a 43px slash through
     the middle of the word rather than a mark on the control. Corner to
     corner crosses the whole pill but takes its angle from the pill's width
     — measured 35.5° on "20", 22.8° on "Charged" and 17.5° on "Caffeine
     Free", against the disc's 45 — so the set leans four different ways and
     the shallowest is a tilted line-through anyway.

     A line through the label is the mark everybody already reads, it sits at
     the same pitch on every pill, and it is exactly as long as the word. The
     disc keeps its diagonal — a circle has one angle, so it can be drawn
     honestly. */
  .pruvit-pill-opt[data-oos] {
    color: var(--slate);
    border-color: var(--line);
    background: rgb(22 32 58 / 0.03);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgb(22 32 58 / 0.55);
  }

  .pruvit-pill-opt[data-oos][aria-pressed='true'] {
    background: rgb(22 32 58 / 0.55);
    border-color: transparent;
    color: #fff;
    text-decoration-color: rgb(255 255 255 / 0.8);
  }

  /* The saving chip is a reason to buy, and there is nothing to buy. */
  .pruvit-pill-opt[data-oos] .pruvit-save {
    display: none;
  }

  /* Flavour is the emotional choice on this page, so it gets discs rather than
     another row of text pills. */
  .pruvit-swatches {
    display: grid;
    /* Columns per row, from Liquid — at most five, then it wraps and the rows
       are balanced. See the sw_cols block in pruvit-buy-core for why. Fixed at
       four it was, which is why a fifth flavour sat alone on a second row;
       then it was the flavour count, which is why eight shrank to fit. */
    grid-template-columns: repeat(var(--sw-cols, 4), minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 18px);
    /* The old cap was 300px, which is four columns of 75. Stated that way it
       holds the disc at its current size whatever the count: five comes out at
       375px and a 60.6px disc against the 61.5px it has now, and it can go no
       wider than that now the column count is capped. A cap, not a width, so a
       narrow panel still shrinks it. */
    max-width: calc(var(--sw-cols, 4) * 75px);
  }

  .pruvit-sw {
    position: relative;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* A lit sphere, not a flat chip — the colour should read as liquid. */
  .pruvit-sw__disc {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(135% 135% at 31% 23%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 47%),
      var(--fc);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 6px 16px -8px rgba(14, 20, 32, 0.5);
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease;
  }

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

  .pruvit-sw:hover .pruvit-sw__disc {
    transform: translateY(-2px) scale(1.03);
  }

  .pruvit-sw[aria-pressed='true'] .pruvit-sw__disc {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 3px #fff, 0 0 0 5.5px #16203a,
      0 8px 20px -8px rgba(14, 20, 32, 0.55);
  }

  .pruvit-sw__name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--slate);
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
    transition: color 0.18s ease;
  }

  .pruvit-sw[aria-pressed='true'] .pruvit-sw__name {
    color: #16203a;
    font-weight: 700;
  }

  .pruvit-sw__badge {
    position: absolute;
    top: -5px;
    inset-inline-end: -4px;
    z-index: 2;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    background: var(--accent-1);
    color: var(--accent-1-on);
    padding: 3px 7px;
    border-radius: 999px;
    box-shadow: 0 2px 6px -2px rgba(14, 20, 32, 0.5);
  }

  .pruvit-freq {
    display: grid;
    gap: 9px;
  }

  /* One guard for the whole control. Several things in here are toggled with
     the hidden attribute and set their own display, which beats the UA
     sheet's [hidden] { display: none } — the Edit link and the price slot
     would both have shipped visible-while-hidden without it. A descendant
     plus attribute selector is (0,2,0) and outranks any single class here, so
     anything added later is covered without anyone having to remember. */
  .pruvit-freq [hidden] {
    display: none;
  }

  /* The wrapper exists so the Edit link can be a sibling of the button rather
     than inside it, which is not legal markup. It sits over the price slot. */
  .pruvit-freqo-wrap {
    position: relative;
  }

  .pruvit-freqo__edit {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 16px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading--family);
    font-size: 13.5px;
    font-weight: 700;
    color: rgb(var(--color-foreground-rgb));
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .pruvit-freqo__edit:hover {
    color: var(--accent-1-ink);
  }

  .pruvit-freqo__edit svg {
    width: 13px;
    height: 13px;
  }

  /* On a narrow card the link would land on the sentence. */
  @media screen and (max-width: 420px) {
    .pruvit-freqo__edit {
      inset-block-start: 16px;
      transform: none;
    }
  }

  /* Already subscribed: not choosable, but still readable.

     A blanket opacity was the prototype's first attempt and it is the wrong
     tool — it drags the sentence down with the label, and that sentence is the
     entire reason the option stayed on the page instead of being hidden. WCAG
     exempts an inactive control from contrast, but not the information inside
     one.

     So the state is carried by the empty dot, the absence of the selected
     fill, and a quieter title, while the sentence keeps its full strength. */
  .pruvit-freqo[disabled] {
    cursor: default;
    background: #fff;
  }

  .pruvit-freqo[disabled]:hover {
    border-color: var(--line);
  }

  .pruvit-freqo[disabled] .pruvit-freqo__t {
    color: var(--slate);
  }

  .pruvit-freqo[disabled] .pruvit-freqo__dot {
    border-color: var(--line);
  }

  .pruvit-freqo {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: 100%;
    text-align: left;
    border-radius: var(--r-sm);
    padding: 14px 16px;
    cursor: pointer;
    border: 1.5px solid var(--line);
    background: #fff;
    font-family: inherit;
    transition: border-color 0.2s ease, background 0.2s ease;
  }

  .pruvit-freqo:hover {
    border-color: var(--slate);
  }

  /* The same selected state as the pills above — navy edge, ice fill, inset
     ring — so the four steps read as one control set rather than two systems
     stacked. */
  .pruvit-freqo[aria-checked='true'] {
    border-color: #16203a;
    background: var(--ice-soft);
    box-shadow: inset 0 0 0 1px #16203a;
  }

  .pruvit-freqo__dot {
    flex: none;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 2px solid var(--slate);
    background: #fff;
    display: grid;
    place-items: center;
    transition: border-color 0.2s ease;
  }

  .pruvit-freqo[aria-checked='true'] .pruvit-freqo__dot {
    border-color: #16203a;
  }

  .pruvit-freqo[aria-checked='true'] .pruvit-freqo__dot::after {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #16203a;
  }

  .pruvit-freqo__copy {
    flex: 1;
    min-width: 0;
  }

  .pruvit-freqo__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
  }

  .pruvit-freqo__t {
    font-size: 14.5px;
    font-weight: 600;
    color: #16203a;
  }

  /* The promo marker takes the flag slot: it labels the offer rather than
     inviting a click, which is what that slot is for. */
  .pruvit-freqo__flag {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--flag-on);
    background: var(--flag);
    padding: 3px 8px;
    border-radius: 999px;
  }

  /* The dot's 19px plus the gap is what sets this indent. */
  .pruvit-freqo__list {
    display: grid;
    gap: 2px;
    margin-block-start: 9px;
    margin-inline-start: 30px;
  }

  .pruvit-freqo__li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.3;
  }

  .pruvit-freqo__li svg {
    width: 12px;
    height: 12px;
    flex: none;
    color: var(--accent-1-deep);
  }

  /* The first point is the one that applies today, in the accent's ink form
     rather than the savings colour — it separates the joining rate from the
     money figure on the right instead of echoing it. 7.18 on the fill. */
  .pruvit-freqo__li--today {
    color: var(--accent-1-ink);
    font-weight: 700;
  }

  .pruvit-freqo__li--today svg {
    color: var(--accent-1-ink);
  }

  /* Was and now sit on one line, saving beneath.

     They used to stack, which put a three-line price column beside a two-line
     option and broke the row's baseline — the struck figure read as a separate
     fact rather than as the thing this price replaces. Side by side they are
     one statement, and the card gets shorter.

     Explicit columns rather than auto-flow so the price holds its place when
     the struck figure is hidden: column one simply collapses and
     justify-content keeps the pair against the end. */
  .pruvit-freqo__amt {
    flex: none;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 6px;
    font-family: var(--font-heading--family);
    white-space: nowrap;
  }

  .pruvit-freqo__was {
    grid-column: 1;
  }

  .pruvit-freqo__price {
    grid-column: 2;
  }

  /* Scoped, because .pruvit-save is also the chip on a size button. */
  .pruvit-freqo__amt .pruvit-save {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .pruvit-freqo__price {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #16203a;
  }

  /* The price a VIP would have paid. It sits above their own price rather than
     beside it: the amount column is a grid of stacked rows, and a struck
     number on the same line reads as two prices on offer. */
  .pruvit-freqo__was {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate);
  }

  .pruvit-freqo__was[hidden] {
    display: none;
  }

  /* Label and price are one statement, so they sit together in the middle
     rather than being pushed to opposite ends. flex-wrap, not a forced column:
     it stays on one line wherever it fits and breaks only when it has to. */
  .pruvit-buy__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    margin-block-start: 26px;
    padding: 19px 24px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-heading--family);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: var(--accent-1);
    color: var(--accent-1-on);
    box-shadow: 0 14px 30px -14px rgba(22, 32, 58, 0.28);
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }

  .pruvit-buy__cta:hover {
    transform: translateY(-2px);
    background: var(--accent-1-deep);
  }

  .pruvit-buy__cta:active {
    transform: translateY(0) scale(0.988);
  }

  .pruvit-buy__cta[aria-disabled='true'] {
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
  }

  /* Working, not refused: it keeps most of its colour, because the press was
     accepted and something is being done about it. */
  .pruvit-buy__cta[loading] {
    opacity: 0.9;
    box-shadow: none;
    cursor: progress;
  }

  .pruvit-buy__cta-busy {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    visibility: hidden;
  }

  .pruvit-buy__cta[loading] .pruvit-buy__cta-l,
  .pruvit-buy__cta[loading] .pruvit-buy__cta-r {
    visibility: hidden;
  }

  .pruvit-buy__cta[loading] .pruvit-buy__cta-busy {
    visibility: visible;
  }

  .pruvit-buy__cta[aria-disabled='true']:hover,
  .pruvit-buy__cta[loading]:hover {
    transform: none;
    background: var(--accent-1);
  }

  .pruvit-buy__cta-l,
  .pruvit-buy__cta-r {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .pruvit-buy__cta-r {
    align-items: baseline;
    gap: 9px;
  }

  /* Near-black at .8, not .55: at .55 it measures 2.98 on the accent, and a
     struck price is still text. */
  .pruvit-buy__cta-r s {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: rgba(14, 20, 32, 0.8);
  }

  /* Proportional figures, not tabular. Craig read this price as loosely set
     beside the same price in the frequency card, and it was: the tracking is
     identical at -0.02em, but tabular pads every digit to the widest one's
     advance, so a 1 carries the width of a 0. Measured at 15px Inter Tight:
     $113.10 is 61.39px tabular against 49.05px proportional -- 25% wider, and
     three 1s is why that number is the one that gave it away. $150.80 is only
     4.09px wider, which is why it went unnoticed until a price like this.

     Tabular is here for width stability that this button does not need: it is
     full-width (measured 552 in a 552 container), so nothing it contains can
     move its edges. Where the theme keeps tabular it is aligned data -- cart
     rows, the quantity stepper, the count bubble -- and the add-on button's
     price, which does hold two labels in one cell. The rule is already
     written down on .pruvit-pack__now; this rule predates it. */
  .pruvit-buy__cta-r b {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .pruvit-buy__error {
    margin: 12px 0 0;
    font-size: 13.5px;
    color: var(--err);
    text-align: center;
  }

  .pruvit-buy__reassure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
  }

  .pruvit-buy__reassure li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--slate);
  }

  .pruvit-buy__reassure svg {
    width: 15px;
    height: 15px;
    flex: none;
  }

  .pruvit-buy__tax {
    margin: 10px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--slate);
  }

  /* No display declared here, deliberately: a closed <dialog> is hidden by a UA
     rule, and any display on the element itself outranks it — which is how the
     Blueprint modal ended up laid out in its own page. */
  .pruvit-buy__sf-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: min(92vh, 1000px);
    padding: 0;
    border: none;
    border-radius: var(--r-md);
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .pruvit-buy__sf-dialog::backdrop {
    background: var(--scrim-modal, rgba(14, 20, 32, 0.55));
    backdrop-filter: var(--scrim-blur, blur(3px));
  }

  /* A modal dialog stops the *document* scrolling, and the document is not
     what scrolls in this theme — .page-wrapper is, and it is a DOM ancestor
     of this dialog, so a wheel the panel does not consume chains into it. */
  .pruvit-buy__sf-dialog {
    overscroll-behavior: contain;
  }

  .pruvit-sfm__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 14px;
    border-block-end: 1px solid var(--line);
  }

  /* base.css sets a colour on every heading, and a rule that matches the child
     beats anything the parent hands down. */
  .pruvit-sfm__h {
    color: inherit;
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  /* Only when open. A closed <dialog> is hidden by a UA rule at (0,0,0) and
     any display on the element itself beats it. */
  .pruvit-buy__sf-dialog[open] {
    display: flex;
    flex-direction: column;
  }

  .pruvit-sfm__head {
    flex: 0 0 auto;
  }

  /* The panel scrolls, the dialog does not.

     This used to read `max-height: calc(min(92vh, 1000px) - 62px)` — the
     dialog's own max-height, less the header's height measured by hand and
     typed in. It worked, and it was a number that could only be right by
     coincidence: change the header's padding or its type and the panel is
     quietly the wrong height, with nothing to point at.

     The PDP's copy of this panel was built the other way and is the version
     to keep. min-height: 0 is the load-bearing line — a flex item's
     automatic minimum size is its content, so flex: 1 on its own refuses to
     shrink and no scrollbar ever appears. */
  .pruvit-sfm__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 18px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .pruvit-sfm__controls {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: #fff;
    padding-block-end: 4px;
  }

  .pruvit-sfm__field {
    display: block;
    margin-block-end: 14px;
  }

  .pruvit-sfm__lbl {
    display: block;
    margin-block-end: 6px;
    font-family: var(--font-mono--family);
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--slate);
  }

  .pruvit-sfm__sel {
    width: 100%;
    appearance: none;
    border: 1.5px solid var(--line);
    border-radius: var(--r-2xs);
    background-color: #fff;
    padding: 9px 30px 9px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B84' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
  }

  .pruvit-sfm__sel:hover {
    border-color: var(--slate);
  }

  .pruvit-sfm__tabs {
    display: flex;
    gap: 8px;
    margin-block-end: 16px;
  }

  .pruvit-sfm__tab {
    flex: 1;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: #fff;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
  }

  .pruvit-sfm__tab:hover {
    border-color: var(--slate);
  }

  .pruvit-sfm__tab[aria-pressed='true'] {
    background: #16203a;
    border-color: #16203a;
    color: #fff;
  }

  /* The box keeps the panel's shape whether or not there is a panel in it, so
     switching flavours never moves the modal under the reader's cursor. Square,
     because the panels are: every one measured 900x900, and a 3/4 box spent a
     quarter of the stage on empty ground and made the modal taller than the
     screen. `contain` still holds, so a future panel cut to another shape fits
     rather than crops. */
  .pruvit-sfm__stage {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    background: var(--ice-soft);
    overflow: hidden;
    display: grid;
    place-items: center;
  }

  .pruvit-sfm__stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .pruvit-sfm__stage.is-ready img {
    opacity: 1;
  }

  .pruvit-sfm__stage.is-missing img {
    display: none;
  }

  .pruvit-sfm__skel {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--ice-soft) 30%, #fff 50%, var(--ice-soft) 70%);
    background-size: 220% 100%;
    animation: pruvit-sfm-shimmer 1.3s linear infinite;
  }

  .pruvit-sfm__stage.is-ready .pruvit-sfm__skel {
    display: none;
  }

  @keyframes pruvit-sfm-shimmer {
    to {
      background-position: -120% 0;
    }
  }

  .pruvit-sfm__missing {
    position: relative;
    margin: 0;
    padding: 0 28px;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--slate);
  }

  .pruvit-sfm__note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--slate);
  }

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

    .pruvit-sfm__stage img {
      transition: none;
    }
  }

  .pruvit-buy__sf-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #16203a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  @media screen and (max-width: 900px) {
    .pruvit-buy {
      grid-template-columns: 1fr;
    }

    .pruvit-buy__form {
      padding-inline: 18px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-buy__stage,
    .pruvit-sw__disc,
    .pruvit-th,
    .pruvit-buy__cta {
      transition: none;
    }

    .pruvit-buy__cta:hover,
    .pruvit-sw:hover .pruvit-sw__disc,
    .pruvit-th:hover {
      transform: none;
    }
  }

  /* The facts panel as a sheet from the bottom on a phone, matching the
     options and referrer panels and the PDP's copy of this dialog.
     ---------------------------------------------------------------------
     Craig, 2026-09-23, referencing Pebble. The geometry is set on the
     <dialog> itself: the UA centres a modal dialog with `margin: auto`
     against `inset: 0`, so clearing the top inset and the margin is what
     drops it to the bottom edge. width and max-width both have to go -- the
     base rule caps it at 560px and `width: 100%` alone would still be capped.

     Animated by keyframe rather than transition, because a <dialog> has no
     intermediate state to hang a transition on. Same curve and duration as
     the referrer modal.

     This panel has a sticky flavour picker at the top of its body, and
     max-height keeps 56px of page visible above it -- enough to read as a
     sheet over the product rather than a page of its own. */
  @media screen and (max-width: 749px) {
    .pruvit-buy__sf-dialog {
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      margin: 0;
      width: 100%;
      max-width: none;
      /* svh, not dvh. A sheet pinned to the bottom grows upward, so anything
         that makes it taller than the visible viewport pushes its own header
         off the top of the screen -- and the header is the part you cannot
         scroll back to, because the scrolling happens inside the body below
         it. dvh follows the browser chrome and on iOS it lags a toolbar that
         is on its way out, which is exactly the moment a sheet opens. svh is
         the height with the chrome shown: never larger than what is visible,
         so the top of the sheet cannot leave the screen. */
      max-height: calc(100svh - 56px);
      border-radius: var(--r-md) var(--r-md) 0 0;
    }

    .pruvit-buy__sf-dialog[open] {
      animation: pruvit-sfm-up 0.34s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes pruvit-sfm-up {
      from {
        transform: translateY(100%);
      }
      to {
        transform: translateY(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pruvit-buy__sf-dialog[open] {
        animation: none;
      }
    }
  }

  /* ---- the gallery's mobile gutters ----------------------------------
     Craig, 2026-09-28: the gallery should line up with the text below it
     rather than bleeding to both edges.

     Not a padding value. This grid is a subgrid of .product-information, whose
     tracks are gutter / content / gutter, so 2 / -2 IS the content column --
     the gallery sits in the same track as the copy and cannot drift out of
     alignment with it. Horizon's own rule under 749px is grid-column: 1 / -1,
     which is the full bleed being replaced.

     Scoped under .product-information__grid so it reaches the product page
     only, and not the buy box where it appears on the landing page. It lives
     in this block rather than in sections/product-information because that
     file is Horizon's and this is ours.

     (A version of this also reordered the page so title, summary and benefits
     sat above the gallery. Craig, same day: "too jarring". Reverted; only the
     gutters were wanted.) */
  @media screen and (max-width: 749px) {
    .product-information__grid .product-information__media {
      grid-column: 2 / -2;
    }
  }

  /* A gutter between the gallery and the copy. Measured at 1440: the grid is
     144/576/576/144 with column-gap normal, so the two columns touch at exactly
     720 and the pack sits hard against the title. Craig, 2026-09-28 -- the
     details column can spare the width and the air is worth more than it.

     A margin on the copy rather than a gap on the grid: a gap would take the
     24 off both columns and push the gallery in from the page edge it is
     currently aligned to, which is the alignment the mobile rule above exists
     to protect.

     Both media positions, because the section offers desktop_media_position and
     the side the copy needs its margin on follows the side the gallery is not
     on. Above 749 only -- below it the two are stacked and a side margin would
     just break the copy out of the gutters everything else shares. */
  @media screen and (min-width: 750px) {
    .product-information__grid.product-information--media-left .product-details {
      margin-inline-start: 24px;
    }

    .product-information__grid.product-information--media-right .product-details {
      margin-inline-end: 24px;
    }
  }
/* END_BLOCK:pruvit-buy */

/* START_BLOCK:pruvit-channels (INDEX:165) */
.pruvit-chans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(18px, 2.4vw, 26px);
  }
/* END_BLOCK:pruvit-channels */

/* START_BLOCK:pruvit-chasm (INDEX:166) */
.pruvit-chasm {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Named, because the connector has to reach across it into the next
       column and needs the same number. */
    --chasm-gap: clamp(20px, 3.4vw, 44px);
    gap: var(--chasm-gap);
    margin-block-start: clamp(44px, 6vw, 72px);
  }

  /* Flat on the band, not boxed. Three bordered cards read as three options to
     choose between; this is one path with three positions on it, and the rail
     below is what says so. The card treatment was also fighting the rail — a
     line cannot run between things that are already fenced off. */
  .pruvit-cs {
    position: relative;
    padding-block-start: 56px;
  }

  /* The rail. It belongs to the stage it leaves, so the last one has none.
     Stopping at 40px clears the node rather than running under it, and the
     negative right inset carries it across the gap to the next node. */
  .pruvit-cs::before {
    content: '';
    position: absolute;
    inset-inline-start: 40px;
    inset-inline-end: calc(var(--chasm-gap) * -1);
    inset-block-start: 15px;
    height: 2px;
    background: rgb(var(--color-foreground-rgb) / 0.34);
  }

  /* Two to three is the chasm the section is named for. Same rail, drawn as
     distance still to cover rather than ground already made. */
  .pruvit-cs:nth-child(2)::before {
    height: 0;
    background: none;
    border-block-start: 2px dashed rgb(var(--accent-1-rgb) / 0.75);
  }

  .pruvit-cs:last-child::before {
    display: none;
  }

  /* The offered step is the one the page is about, so it carries the flag
     rather than the same quiet border as the two behind it.

     Duranta, not the Periwinkle this used to use. DESIGN.md reserves the flag
     slot for exactly three things — "Most popular", "Make it official", and
     the third stage of the path — and this is the third of them. Periwinkle is
     the accent that decorates everything, so using it here said nothing; the
     flag is the colour that only ever means "this is the one on offer".

     Full strength on this band. The token notes say the flag carries dark text
     only and --flag-ink is for a light ground; here it is type and edging on
     navy, where #D8E63C measures 11.8:1. */
  /* The node sits on the rail, so it starts at the box's own origin rather
     than straddling a card edge that no longer exists. */
  .pruvit-cs__node {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgb(var(--color-foreground-rgb) / 0.9);
    color: #16203a;
  }

  .pruvit-cs__node svg {
    width: 16px;
    height: 16px;
  }

  /* Ground already made: a filled marker, no outline, nothing asking to be
     looked at. */
  .pruvit-cs.is-done .pruvit-cs__node {
    background: rgb(var(--color-foreground-rgb) / 0.9);
    color: #16203a;
  }

  /* The open stage is drawn rather than filled — an outline the rail runs into
     rather than another dot on it — and it is the only thing on the band that
     moves. */
  .pruvit-cs.is-open .pruvit-cs__node {
    background: transparent;
    border: 2px solid var(--flag);
    color: var(--flag);
  }

  .pruvit-cs.is-open .pruvit-cs__node::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid rgb(var(--flag-rgb) / 0.55);
    animation: pruvit-cs-pulse 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  }

  @keyframes pruvit-cs-pulse {
    0% {
      transform: scale(0.86);
      opacity: 0.9;
    }

    70% {
      transform: scale(1.22);
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-cs.is-open .pruvit-cs__node::after {
      animation: none;
    }
  }

  .pruvit-cs.is-open .pruvit-cs__h {
    color: var(--flag);
  }

  .pruvit-cs__i {
    display: block;
    font-family: var(--font-mono--family);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    opacity: 0.5;
  }

  /* A chip rather than a line of coloured type, so the three read as labels
     applied to the stages rather than as a second heading above each one. */
  .pruvit-cs__state {
    display: inline-block;
    margin-block-start: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgb(var(--color-foreground-rgb) / 0.1);
    color: rgb(var(--color-foreground-rgb) / 0.74);
  }

  /* Outlined rather than filled: a solid Duranta chip here would out-shout the
     heading beneath it, which is the thing the stage is actually offering. */
  .pruvit-cs.is-open .pruvit-cs__state {
    background: transparent;
    color: var(--flag);
    box-shadow: inset 0 0 0 1.5px rgb(var(--flag-rgb) / 0.55);
  }

  /* 700 at -0.025em is the house display setting, declared once in
     pruvit-tokens for .pruvit-h-xl and its siblings. This carried 800 at -0.03em, which is
     the same drift the partner hero had: weight and tracking both push the
     same way, so it read heavier than every other heading rather than a little
     heavier. The prototype has no 800 anywhere — its one rule is
     h1,h2,h3,h4 { font-weight: 700; letter-spacing: -.025em }. */
  .pruvit-cs__h {
    color: inherit;
    margin: 6px 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .pruvit-cs__p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.55;
    opacity: 0.82;
  }

  .pruvit-cs__fine {
    margin: 12px 0 0;
    font-size: 12px;
    opacity: 0.6;
  }

  @media screen and (max-width: 860px) {
    .pruvit-chasm {
      grid-template-columns: minmax(0, 1fr);
      gap: 26px;
    }

    /* The rail is a horizontal idea. Stacked, it would run off the right of
       each stage into nothing. */
    .pruvit-cs::before {
      display: none;
    }
  }

  /* The band is lit from wherever the Partner stage sits.
     ---------------------------------------------------------------------
     Ported from the prototype's #path, which Craig asked for on 2026-09-24.
     Two washes: a cool one that lifts the ground, and a fainter one at the
     destination, so the eye arrives there before it reads a word. The comment
     in the prototype is worth keeping: backgrounds, not box-shadows — a
     zero-offset coloured halo would be decoration stuck on top.

     Painted on .section-background rather than a pseudo-element of our own.
     That div already IS this band's ground: absolutely positioned behind the
     content, carrying the navy and the rounded top, and border-radius clips
     background painting, so the glow takes the corner for free. background-
     IMAGE, so the colour Horizon puts there from the section's own setting
     still shows through underneath and the band can be recoloured in the
     editor without touching this.

     Scoped with :has() so the light follows the content that motivates it — a
     band with no chasm in it is not the band this describes. The wrapper class
     and :has() support are both measured on the rendered page, not assumed.

     --accent-1-deep-rgb is the prototype's --pop-lift-rgb: 123 134 236, the
     same value in both places. The slash-free syntax is deliberate, because
     these are space-separated triples and rgba() wants commas — hence
     rgb(... / a) rather than rgba(). */
  .pruvit-section-wrapper:has(.pruvit-chasm) .section-background {
    background-image:
      radial-gradient(118% 88% at 84% 14%, rgb(var(--accent-1-deep-rgb) / 0.42), transparent 62%),
      radial-gradient(58% 62% at 88% 60%, rgb(var(--accent-1-deep-rgb) / 0.16), transparent 72%);
  }

  /* Once the rail stacks the Partner stage is no longer top-right, it is at the
     bottom — so the light moves with it. 860px is the chasm's own stacking
     breakpoint above, not the theme's phone breakpoint: the layout is what
     decides where the destination is. The second wash changes to the lighter
     accent here because it sits nearer the eye at this size. */
  @media screen and (max-width: 860px) {
    .pruvit-section-wrapper:has(.pruvit-chasm) .section-background {
      background-image:
        radial-gradient(120% 55% at 50% 88%, rgb(var(--accent-1-deep-rgb) / 0.46), transparent 66%),
        radial-gradient(70% 34% at 50% 96%, rgb(var(--accent-1-rgb) / 0.14), transparent 74%);
    }
  }
/* END_BLOCK:pruvit-chasm */

/* START_BLOCK:pruvit-claim (INDEX:167) */
.pruvit-claim {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(24px, 4vw, 52px);
    align-items: start;
  }

  /* 700 at -0.025em is the house display setting, declared once in
     pruvit-tokens for .pruvit-h-xl and its siblings. This carried 800 at -0.032em, which is
     the same drift the partner hero had: weight and tracking both push the
     same way, so it read heavier than every other heading rather than a little
     heavier. The prototype has no 800 anywhere — its one rule is
     h1,h2,h3,h4 { font-weight: 700; letter-spacing: -.025em }. */
  .pruvit-claim__h {
    color: inherit;
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
  }

  .pruvit-assure {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 16px;
  }

  .pruvit-assure li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  .pruvit-assure__n {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgb(var(--accent-1-rgb) / 0.16);
    color: var(--accent-1-deep);
    font-size: 13px;
    font-weight: 800;
  }

  .pruvit-claim__card {
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 18px 44px -28px rgba(22, 32, 58, 0.4);
  }

  .pruvit-claim__form-h {
    color: inherit;
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .pruvit-claim__form-s {
    margin: 8px 0 18px;
    font-size: 14.5px;
    color: var(--ink-soft);
  }

  .pruvit-claim__fine {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--slate);
  }

  @media screen and (max-width: 860px) {
    .pruvit-claim {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---- the lead form ------------------------------------------------------
     Lives here rather than beside its snippet because a stylesheet block is
     only valid in a section or a block, and a snippet cannot carry one. Shopify
     compiles these theme-wide, so when the Blueprint modal takes the same
     snippet it inherits all of this and adds nothing. */

  /* Both of these are toggled with the hidden attribute and both set a display,
     so both need this. The UA stylesheet's [hidden] { display: none } is one
     type-less rule at (0,0,0); a class at (0,1,0) beats it and the element
     stays on screen wearing an attribute that says it is not.

     Which is how the confirmed referrer line — an empty avatar and an Edit
     button for a referrer nobody had entered — sat under the question asking
     for one. The form is listed too: it is display: grid and gets hidden on
     success, so it would have stayed behind the thank-you the same way.

     Written up in pruvit-referrer-bar.liquid when the bar hit this, and
     repeated here anyway. The rule is: setting display on anything you toggle
     with hidden means writing the guard in the same breath. */
  .pruvit-ref__ok[hidden],
  .pruvit-lead__form[hidden] {
    display: none;
  }

  .pruvit-lead__form {
    display: grid;
    gap: 12px;
    margin-block-start: 18px;
  }

  .pruvit-lead__row2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .pruvit-lead__phone {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 12px;
  }

  .pruvit-lead__phone--plain {
    grid-template-columns: minmax(0, 1fr);
  }

  .pruvit-lead :is(input[type='text'], input[type='email'], input[type='tel'], select) {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: inherit;
  }

  .pruvit-lead :is(input, select):focus-visible {
    outline: 2px solid var(--accent-1);
    outline-offset: 1px;
    border-color: transparent;
  }

  /* ---- floating labels -------------------------------------------------
     Craig, 2026-09-28: the label should stay visible in the field's top left
     while it is being used. It replaces placeholder-as-label, whose cost the
     lead form's own comment admitted -- the name vanished the moment the field
     had a value, taking the "(optional)" on the phone with it.

     The label sits BEFORE the input in the DOM, which is the reading order it
     should have, and the state is read with :has() on the wrapper rather than
     a sibling combinator -- the sibling version is what forces the label after
     the input in the markup.

     One transform does the move, not top plus font-size. Interpolating top
     between 50% and a pixel value is not something to rely on, and scaling
     from a left-centre origin keeps the left edge still while the size
     changes. 0.75 of 15px lands at 11.25.

     This rule set is here with the rest of the shared lead-form CSS, so the
     five surfaces that render pruvit-lead-form all get it at once. */
  .pruvit-fld {
    position: relative;
  }

  /* Taller, and the padding is asymmetric: the value needs room below the
     floated label rather than beside it.

     .pruvit-fld twice is a deliberate specificity bump, not a typo. Both forms
     that use this size their fields with `.pruvit-<form> :is(input[type=...])`
     at (0,2,1), and those two rules live in different block stylesheets whose
     bundle order is not something to bet on. A tie decided by source order is
     what broke the ghost button's hover and the video's aspect ratio, both on
     2026-09-28. (0,3,1) settles it wherever the bundler puts this. */
  .pruvit-fld.pruvit-fld :is(input[type='text'], input[type='email'], input[type='tel'], select) {
    min-height: 56px;
    padding: 22px 14px 8px;
  }

  .pruvit-fld__l {
    position: absolute;
    inset-inline-start: 15px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    transform-origin: left center;
    transition: transform 0.16s ease, color 0.16s ease;
    font-size: 15px;
    line-height: 1.2;
    color: var(--slate);
    /* So a click lands on the field, not on its name. */
    pointer-events: none;
  }

  /* Focused, holding a value, or a control that always has one. A select is
     the third case: it has no empty state for :placeholder-shown to detect,
     so it carries --filled and its label never rests. */
  .pruvit-fld:has(:focus) .pruvit-fld__l,
  .pruvit-fld:has(input:not(:placeholder-shown)) .pruvit-fld__l,
  .pruvit-fld--filled .pruvit-fld__l {
    transform: translateY(calc(-50% - 13px)) scale(0.75);
  }

  .pruvit-fld:has(:focus) .pruvit-fld__l {
    color: var(--accent-1-ink);
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-fld__l {
      transition: none;
    }
  }

  /* ---- the referrer step ---- */

  /* A box, which is what the prototype always had and we did not.
     ---------------------------------------------------------------------
     This rule has been three things. It was a rule UNDER the step; Craig had
     that removed on 2026-09-23 as "unnecessary", which it was; and on
     2026-09-24 he pointed at the prototype and asked for the boxed treatment
     on every form that shows a referrer. Not a reversal — a line under a step
     and a box around it are different answers, and the box is the one that
     says "this is a thing you answer" rather than "this ends here".

     The box wraps BOTH states, the question and the confirmed line, which is
     the detail that makes it read as one step in two moods rather than as a
     card that appears once someone has answered. .id-step in the prototype
     does the same, and its ice-soft tint at 45% is what separates the step
     from the white card without drawing a second edge inside it. */
  .pruvit-ref {
    margin-block-end: 22px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgb(var(--ice-soft-rgb) / 0.45);
  }

  /* The account step. Same box as the referrer step, because they are the same
     kind of thing — a question the form needs answered before the fields make
     sense — and the prototype gives both the one treatment. Only the contents
     differ by state. */
  .pruvit-acct {
    margin-block-end: 10px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgb(var(--ice-soft-rgb) / 0.45);
  }

  .pruvit-acct__ask {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
  }

  .pruvit-acct__copy {
    font-size: 14px;
    color: var(--ink-soft);
  }

  /* A pill, not a link: it is the only thing in the row competing for the tap,
     and a bare underline beside a boxed question reads as fine print. Ghost
     rather than filled — the form's own submit is the action on this card, and
     two filled buttons would argue about which one that is. */
  .pruvit-acct__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding-inline: 20px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--color-foreground);
    font-family: var(--font-heading--family);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.16s ease, background 0.16s ease;
  }

  .pruvit-acct__btn:hover {
    border-color: var(--color-foreground);
  }

  .pruvit-acct__ok {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Navy ground with the accent on it, which is the prototype's .id-avatar and
     is deliberately NOT the referrer avatar's ice — the two sit one above the
     other and should not read as two of the same person. */
  .pruvit-acct__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-foreground);
    color: var(--accent-1-bright);
    font-family: var(--font-heading--family);
    font-size: 13px;
    font-weight: 800;
  }

  .pruvit-acct__text {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink-soft);
  }

  .pruvit-acct__text b {
    color: var(--color-foreground);
    font-weight: 700;
  }

  /* Its own line, and allowed to truncate: an address long enough to wrap
     pushes the sign-out link out of reach on a narrow card. */
  .pruvit-acct__mail {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pruvit-ref__lbl {
    display: block;
    margin-block-end: 8px;
    font-size: 13.5px;
    font-weight: 600;
  }

  .pruvit-ref__row {
    display: flex;
    gap: 8px;
  }

  .pruvit-ref__check {
    flex: none;
    padding-inline: 18px;
    min-height: 48px;
    border: none;
    border-radius: var(--r-xs);
    background: #16203a;
    color: #fff;
    font-family: var(--font-heading--family);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  .pruvit-ref__check:hover {
    background: var(--navy-mid);
  }

  .pruvit-ref__check:disabled {
    opacity: 0.6;
    cursor: default;
  }

  .pruvit-ref__err,
  .pruvit-lead__err {
    margin: 8px 0 0;
    font-size: 13px;
    color: #b3261e;
  }

  .pruvit-ref__none {
    display: flex;
    align-items: start;
    gap: 8px;
    margin-block-start: 10px;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
  }

  /* [hidden] is a UA rule at (0,0,0) and the display above beats it, so the
     attribute alone would not hide this — the same trap the referrer bar and
     the lead form's own success line both hit. The bypass option ships
     hidden and pruvit-lead.js reveals it, so this rule is what makes the
     shipped state actually hidden. */
  .pruvit-ref__none[hidden] {
    display: none;
  }

  /* The confirmed line: a face and a name, not a form control, because the
     question has been answered and the row is now a statement about it. */
  .pruvit-ref__ok {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .pruvit-ref__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ice-soft);
    font-family: var(--font-heading--family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .pruvit-ref__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The sentence is quiet and the name is not, which is the prototype's
     arrangement: "Introduced by" is scaffolding and the person is the content.
     One weight for the whole line made the scaffolding as loud as the name. */
  .pruvit-ref__text {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink-soft);
  }

  .pruvit-ref__text b {
    color: var(--color-foreground);
    font-weight: 700;
  }

  /* Edit and Sign out are the same control in two boxes, so they are one rule.
     Craig, 2026-09-24: they had drifted -- Edit at --accent-1-ink and Sign out
     at --slate, which read as two different kinds of link stacked one above
     the other. Shared rather than copied: two rules holding the same values is
     how they drifted in the first place. */
  .pruvit-ref__edit,
  .pruvit-acct__link {
    flex: none;
    border: none;
    background: none;
    padding: 6px;
    font: inherit;
    font-size: 13px;
    color: var(--accent-1-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  /* A field that came from the account. Not disabled -- disabled fields are
     skipped by form submission and dropped from the tab order, and this one
     still has to post. readonly keeps it in both while refusing edits.

     Styled as settled rather than broken: the ground goes to the step tint so
     it reads as belonging with the boxes above it, the border softens, and the
     cursor says default rather than text. */
  .pruvit-lead__form input[readonly] {
    background: rgb(var(--ice-soft-rgb) / 0.55);
    border-color: var(--line);
    color: var(--ink-soft);
    cursor: default;
  }

  .pruvit-lead__form input[readonly]:focus {
    border-color: var(--line);
    box-shadow: none;
  }

  /* ---- consents ---- */

  .pruvit-lead__consents {
    display: grid;
    gap: 10px;
    margin-block-start: 4px;
  }

  .pruvit-lead__consent {
    display: flex;
    align-items: start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-soft);
    cursor: pointer;
  }

  .pruvit-lead__consent input {
    flex: none;
    margin-block-start: 2px;
  }

  .pruvit-lead__consent b {
    color: inherit;
    font-weight: 700;
  }

  /* Dimmed rather than hidden while there is no number to text: the ask stays
     legible, so nobody wonders where it went once they type a phone number. */
  .pruvit-lead__consent.is-off {
    opacity: 0.5;
    cursor: default;
  }

  .pruvit-lead__captcha {
    margin-block-start: 2px;
  }

  /* Shape only. The colour used to be here too, and this rule is declared in
     a block stylesheet but scoped to nothing, so one navy override reached
     every form that renders pruvit-lead-form -- five of them, on four
     templates. Craig, 2026-09-23, asked for the Blueprint modal's and Create
     Account's submits in periwinkle, which is what .pruvit-btn already says;
     dropping the colour from here is how they get it, rather than two more
     overrides fighting this one. */
  .pruvit-lead__go {
    justify-content: center;
    padding-block: 14px;
  }

  /* Still navy where it was asked for, by name.
     ---------------------------------------------------------------------
     The Partner claim form and the quiz's sample form sit on their own pale
     cards, and the gate's submit is the second step of a periwinkle summary
     that opened it -- a periwinkle button inside a periwinkle button is one
     button too many. None of these were part of the ask, so none of them
     change. Listed rather than inherited so that adding a fifth form gets
     the default, not this. */
  .pruvit-claim .pruvit-lead__go,
  .pruvit-sd .pruvit-lead__go,
  .pruvit-gate .pruvit-lead__go {
    background: #16203a;
    color: #fff;
  }

  .pruvit-claim .pruvit-lead__go:hover,
  .pruvit-sd .pruvit-lead__go:hover,
  .pruvit-gate .pruvit-lead__go:hover {
    background: var(--navy-mid);
  }

  .pruvit-lead__fine {
    margin: 0;
    font-size: 12.5px;
    color: var(--slate);
    text-align: center;
  }

  /* ---- the success state ---- */

  .pruvit-lead__done {
    padding-block: clamp(28px, 5vw, 48px);
    text-align: center;
  }

  .pruvit-lead__done:focus-visible {
    outline: none;
  }

  .pruvit-lead__tick {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--save-soft);
    color: var(--save-ink);
  }

  .pruvit-lead__tick svg {
    width: 22px;
    height: 22px;
  }

  .pruvit-lead__done-h {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .pruvit-lead__done-b {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  @media screen and (max-width: 600px) {
    .pruvit-lead__row2,
    .pruvit-lead__phone {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---- the "already signed in" state ---------------------------------
     Lives here with the rest of the shared lead-form CSS: a block's
     stylesheet is bundled theme-wide, so one copy serves every form that
     renders snippets/pruvit-signed-in, and the alternative is the same rules
     repeated in four blocks. */

  .pruvit-si__h {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
  }

  /* The accent face, stated rather than inherited: pruvit-tokens scopes the
     serif <em> to .pruvit-h-xl/lg/md and this heading carries its own type.
     1.06em for the same reason the token rule uses it — Instrument Serif runs
     small against Inter at a matched size. */
  .pruvit-si__h :is(em, i) {
    font-family: var(--font-accent--family);
    font-style: var(--font-accent--style);
    font-weight: var(--font-accent--weight);
    font-size: 1.06em;
    letter-spacing: -0.005em;
  }

  .pruvit-si__lede {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  .pruvit-si__who {
    display: grid;
    gap: 2px;
    margin-block-start: 22px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgb(var(--ice-soft-rgb) / 0.45);
  }

  .pruvit-si__who-l {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--slate);
  }

  .pruvit-si__who-n {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-foreground);
  }

  /* The email carries the page ink even under the name: it is what somebody
     reads to tell whether this is the right account. */
  .pruvit-si__who-e {
    font-size: 15px;
    color: var(--color-foreground);
    word-break: break-word;
  }

  .pruvit-si__acts {
    display: grid;
    margin-block-start: 18px;
  }

  .pruvit-si__go,
  .pruvit-si__out {
    width: 100%;
  }

  /* The sentence sits between the two buttons rather than before the pair: it
     explains the second one, and above both it reads as a caption for the
     first. Craig, 2026-09-27 — the sign-out was an inline link at the end of
     this sentence and was easy to miss. It is a button now, and the sentence
     is the label it does not have room for. */
  .pruvit-si__swap {
    margin: 16px 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
  }
/* END_BLOCK:pruvit-claim */

/* START_BLOCK:pruvit-covers (INDEX:168) */
/* Two, not four. auto-fit with a 258px floor gave four across at this
     measure, which turns four things worth reading into a row of labels — the
     copy in each is two or three lines and wants the width. Two columns is
     what the prototype composes and what the text was written for. */
  .pruvit-covers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
  }

  @media screen and (max-width: 760px) {
    .pruvit-covers {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Solid white on the band, not a wash of the foreground. At 3% over ice the
     card had no edge to speak of and the four ran together; white is what
     separates them and what the prototype uses. */
  .pruvit-cov {
    padding: clamp(24px, 2.6vw, 30px);
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid var(--line);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
  }

  .pruvit-cov:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-cov {
      transition: none;
    }

    .pruvit-cov:hover {
      transform: none;
    }
  }

  /* A tile, not a tinted square. At 46px on a 14% wash it read as a bullet;
     the prototype's is 74px of dark gradient and is the thing that gives each
     card a centre of gravity.

     display: block is load-bearing — this is a <span>, and width and height do
     not apply to a non-replaced inline element. The prototype learned that one
     the hard way when a parent stopped being flex and all four tiles collapsed
     to 0x0. */
  .pruvit-cov__ic {
    display: block;
    position: relative;
    width: 74px;
    height: 74px;
    flex: none;
    overflow: hidden;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, #16203a 0%, var(--navy-mid) 46%, var(--navy-lift) 100%);
    box-shadow: 0 12px 24px -14px rgba(22, 32, 58, 0.85);
    color: #fff;
  }

  /* A bloom off the top right, so the tile is lit rather than flat. Blue
     rather than violet: the band behind is already in that family and a violet
     glow would read as the section bleeding through the tile. */
  .pruvit-cov__ic::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 95% at 80% 8%, rgb(var(--accent-1-deep-rgb) / 0.5), transparent 62%);
  }

  .pruvit-cov__ic svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  /* One moving part per tile, lifted with the artwork. In the prototype these
     are gated on a .covers.lit class an observer adds when the grid is reached;
     there is no such reveal here, and the gate is load-bearing — every one of
     them starts at opacity 0, so porting the classes without it would have
     left four tiles with a piece missing. Ungated, and each keyframe brings its
     own element in and out, so the cycle is the same. */
  .pruvit-cov__ic .a1-arrow,
  .pruvit-cov__ic .a3-ring {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
  }

  .pruvit-cov__ic .a1-arrow {
    animation: pruvit-cov-arrow 3s cubic-bezier(0.16, 1, 0.3, 1) 0.6s infinite;
  }

  .pruvit-cov__ic .a2-pulse {
    stroke-dasharray: 9 130;
    stroke-dashoffset: 130;
    opacity: 0;
    animation: pruvit-cov-pulse 3.4s cubic-bezier(0.45, 0, 0.55, 1) 0.5s infinite;
  }

  .pruvit-cov__ic .a2-pulse--b2 {
    animation-delay: 2.2s;
  }

  .pruvit-cov__ic .a3-ring {
    animation: pruvit-cov-ring 3.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s infinite;
  }

  .pruvit-cov__ic .a4-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: pruvit-cov-spark 4.2s ease-in-out 1.1s infinite;
  }

  @keyframes pruvit-cov-arrow {
    0% { opacity: 0; transform: translateY(-5px); }
    16% { opacity: 1; }
    52% { opacity: 1; transform: translateY(4px); }
    70%, 100% { opacity: 0; transform: translateY(4px); }
  }

  @keyframes pruvit-cov-pulse {
    0% { stroke-dashoffset: 130; opacity: 0; }
    10% { opacity: 1; }
    58% { opacity: 1; }
    74%, 100% { stroke-dashoffset: -9; opacity: 0; }
  }

  @keyframes pruvit-cov-ring {
    0% { transform: scale(0.72); opacity: 0.9; }
    60% { opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
  }

  @keyframes pruvit-cov-spark {
    0%, 100% { opacity: 0.32; transform: scale(0.78) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.06) rotate(90deg); }
  }

  /* Off, and the pieces that animate in are left visible rather than at the
     opacity 0 their first keyframe starts from. */
  @media (prefers-reduced-motion: reduce) {
    .pruvit-cov__ic :is(.a1-arrow, .a2-pulse, .a3-ring, .a4-spark) {
      animation: none;
      opacity: 1;
      stroke-dashoffset: 0;
    }
  }

  /* 700 at -0.025em is the house display setting, declared once in
     pruvit-tokens for .pruvit-h-xl and its siblings. This carried 800 with the right tracking, which is
     the same drift the partner hero had: weight and tracking both push the
     same way, so it read heavier than every other heading rather than a little
     heavier. The prototype has no 800 anywhere — its one rule is
     h1,h2,h3,h4 { font-weight: 700; letter-spacing: -.025em }. */
  .pruvit-cov__h {
    color: inherit;
    margin: 16px 0 0;
    font-family: var(--font-heading--family);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .pruvit-cov__p {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
/* END_BLOCK:pruvit-covers */

/* START_BLOCK:pruvit-deciding (INDEX:169) */
.pruvit-sd {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }

  .pruvit-sd__card {
    padding: clamp(22px, 3vw, 30px);
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(14, 20, 32, 0.05);
  }

  .pruvit-sd__who {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .pruvit-sd__av {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgb(var(--accent-1-rgb) / 0.16);
    color: var(--accent-1-deep);
    overflow: hidden;
  }

  .pruvit-sd__av svg {
    width: 26px;
    height: 26px;
  }

  /* Filled by the app when a referrer is known. */
  .pruvit-sd__av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pruvit-sd__name {
    color: inherit;
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .pruvit-sd__role {
    margin: 3px 0 0;
    font-size: 13.5px;
    color: var(--slate);
  }

  .pruvit-sd__say {
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  /* The signature, in the brand's second voice.
     ---------------------------------------------------------------------
     Craig, 2026-09-24: it should be the serif used elsewhere. It was not --
     --font-heading--family with font-style: italic is Inter Tight leaning
     over, which is a sans pretending, not the face the page uses for
     "closer than you think" or "Just ask me".

     That face is the accent slot, Instrument Serif, and it is asked for the
     same way pruvit-tokens asks for it on an <em> inside a heading: all three
     accent properties together, because the family alone would leave the
     browser to synthesise a slant the font already has a real italic for.

     Slightly larger than the body line it follows, as the heading rule does
     at 1.06em -- Instrument Serif runs small against Inter at the same size. */
  .pruvit-sd__sign {
    margin: 14px 0 0;
    font-family: var(--font-accent--family);
    font-style: var(--font-accent--style);
    font-weight: var(--font-accent--weight);
    font-size: 17px;
    letter-spacing: -0.005em;
    color: var(--ink-soft);
  }

  /* Three ways to reach a person, as pills rather than a list of links: they
     are actions, they sit together, and on a phone they need a target rather
     than a line of text. Wraps rather than scrolls -- there are at most three
     and a scroller for three items hides the third. */
  .pruvit-sd__ways {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 18px;
  }

  .pruvit-sd__way {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding-inline: 18px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--color-foreground);
    font-family: var(--font-heading--family);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.16s ease;
  }

  .pruvit-sd__way:hover {
    border-color: var(--color-foreground);
  }

  .pruvit-sd__way svg {
    width: 17px;
    height: 17px;
    flex: none;
  }

  /* Not a control. A partner who publishes no contact details leaves this as a
     statement of where to find them, so it says so without offering a tap. */
  .pruvit-sd__way--none {
    opacity: 0.65;
    cursor: default;
  }

  /* Templates the script clones from. Never seen. */
  .pruvit-sd__icons {
    display: none;
  }

  /* [hidden] is a UA rule at (0,0,0) and .pruvit-ref sets padding, a border and
     a background -- none of them display, so the attribute would in fact win
     here. Stated anyway: this theme has been caught six times by a class
     quietly outranking [hidden], and the next rule added to .pruvit-ref should
     not be able to make this the seventh. */
  .pruvit-sd .pruvit-ref[hidden] {
    display: none;
  }

  .pruvit-sd__more {
    margin: 18px 0 0;
  }

  .pruvit-sd__form-h {
    color: inherit;
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .pruvit-sd__form-s {
    margin: 8px 0 16px;
    font-size: 14.5px;
    color: var(--ink-soft);
  }

  .pruvit-sd__fine {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--slate);
  }

  @media screen and (max-width: 860px) {
    .pruvit-sd {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_BLOCK:pruvit-deciding */

/* START_BLOCK:pruvit-faq (INDEX:170) */
/* width:100% and justify-self, not margin-inline:auto. These blocks are grid
     items in Horizon's .section, and an auto inline margin there stops the item
     stretching — so it shrink-wraps to its content and the max-width never
     binds. The FAQ came out 684 wide against a 1152 column because its longest
     question is 684. The heading block next to it looked correct only because
     its lede happens to run past its own cap. */
  .pruvit-faq {
    width: 100%;
    max-width: 840px;
    justify-self: center;
  }

  .pruvit-faq__row {
    border-block-end: 1px solid var(--line);
  }

  .pruvit-faq__q {
    list-style: none;
    cursor: pointer;
    padding: 22px 44px 22px 0;
    position: relative;
    font-family: var(--font-heading--family);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .pruvit-faq__q::-webkit-details-marker {
    display: none;
  }

  /* Eight rows with no hover state leaves the cursor as the only affordance.
     The chevron darkens with the label so the whole row reads as one target. */
  .pruvit-faq__q:hover {
    color: var(--color-foreground);
  }

  .pruvit-faq__q:hover::after {
    border-color: var(--color-foreground);
  }

  .pruvit-faq__q::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--slate);
    border-bottom: 2px solid var(--slate);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.25s ease;
  }

  .pruvit-faq__row[open] .pruvit-faq__q::after {
    transform: translateY(-25%) rotate(-135deg);
  }

  .pruvit-faq__a {
    padding: 0 20px 24px 0;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.65;
    max-width: 68ch;
  }

  .pruvit-faq__a > :first-child {
    margin-block-start: 0;
  }

  .pruvit-faq__a > :last-child {
    margin-block-end: 0;
  }

  /* Sits on the FAQ's own measure rather than the band's 900px cap, and
     closer than the disclaimer's default 30px: it belongs to the rows above
     it, not to the band. */
  .pruvit-faq__note {
    margin-block-start: 22px;
    max-width: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-faq__q::after {
      transition: none;
    }
  }
/* END_BLOCK:pruvit-faq */

/* START_BLOCK:pruvit-feature (INDEX:171) */
/* The aside's illustration. 56 rather than the covers band's full tile: this
     one sits beside two paragraphs of explanation and is a mark on the card,
     not the subject of it. pruvit-cover-art draws at 96x96 and scales, so the
     size lives here.

     Beside, not above -- Craig, 2026-09-28. Above, it sat alone on a line with
     the heading under it, which reads as a third thing in a two-thing card.
     Alongside, it is what it actually is: a mark on the note.

     Gated on :has() so the aside only becomes a grid when there is an icon to
     put in the first column. Without it the heading and body stay a plain
     block and no rule has to undo a column that is not there. */
  .pruvit-feature__aside:has(.pruvit-feature__aside-i) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* Stated, not implied. The icon spans both rows, and a span to -1 needs
       explicit row lines to span to -- without these the first attempt at this
       ran over the implicit rows and collapsed the text column. */
    grid-template-rows: auto auto;
    column-gap: 18px;
    align-items: start;
  }

  /* Placed explicitly, all three of them. The first attempt gave the icon
     `grid-row: 1 / -1` to span the text, and -1 is the last EXPLICIT row line:
     with no grid-template-rows there are none, so the span ran over the
     implicit rows and took column 1 for both. The body auto-placed underneath
     it, column 1 sized itself to the body at 406px, column 2 collapsed to 0
     and the heading was squeezed to zero width. Naming the cells costs three
     lines and cannot be read two ways. */
  /* Size, tile, bloom and the looping element all come from .pruvit-cov__ic,
     which this span also carries -- the covers block's stylesheet is bundled
     theme-wide, so borrowing the class is cheaper and truer than restating 74px
     of navy gradient here and letting the two drift.

     It spans both rows so the heading's row is the height of the heading. Held
     to row 1 it was the tallest thing in that row, and the heading sat at the
     top of a 74px band with the body starting below it -- the "odd large gap
     under the box title" Craig saw. */
  .pruvit-feature__aside-i {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .pruvit-feature__aside-h {
    grid-column: 2;
    grid-row: 1;
  }

  .pruvit-feature__aside-b {
    grid-column: 2;
    grid-row: 2;
  }

  .pruvit-feature__aside-i svg {
    width: 100%;
    height: 100%;
  }

  .pruvit-feature {
    display: grid;
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
  }

  /* Picture and copy share the width evenly; an aside gets the smaller share,
     which is the whole reason it is an aside. */
  .pruvit-feature--media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* 1.1/0.9, widened from 1.3/0.7. Craig, 2026-09-28: the box felt cramped.
     Measured at 1440 before the change: the copy column was 702 and its lede
     ran to 667, so 179px of it was air the aside could have had -- the split
     was paying for width the copy had no use for. The aside still gets the
     smaller share, which is the point of the comment above; it just stops
     being starved. 378 -> 486 at that width, with the copy at 594, comfortably
     past the lede's own measure of 523 so nothing reflows. */
  .pruvit-feature--aside {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }

  .pruvit-feature--solo {
    grid-template-columns: minmax(0, 1fr);
  }

  .pruvit-feature--solo .pruvit-feature__copy {
    max-width: 720px;
  }

  /* Swapped by order, not by markup, so the copy stays first in the source
     and in the reading order on a phone whichever side it is drawn on. */
  .pruvit-feature--flip .pruvit-feature__copy {
    order: 2;
  }

  /* The eyebrow. Same size and weight as the pill's label, without the pill:
     inside a band it labels the section, it does not announce the page. The
     accent form is the one the band's ground can carry — pruvit-section works
     out --accent-mark from its own ground. */
  .pruvit-feature__k {
    margin: 0 0 14px;
    font-size: 12.5px;
    /* Set, not normal: the aside card below offsets itself by this line's
       height so its top edge meets the heading's, and a normal line-height
       is whatever the font says (20px for Inter at this size). */
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-mark, var(--accent-1-ink));
  }

  .pruvit-feature__body {
    margin-block-start: 20px;
    max-width: 52ch;
  }

  .pruvit-feature__body p {
    margin: 0;
    font-size: var(--lede-size);
    line-height: 1.6;
    color: var(--ink-soft);
    text-wrap: pretty;
  }

  .pruvit-feature__body p + p {
    margin-block-start: 1em;
  }

  /* A photograph fills a rounded frame. */
  .pruvit-feature__media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ice-soft);
    box-shadow: var(--shadow-md);
  }

  /* Everything below modifies .pruvit-feature__media, so it has to come AFTER
     it: a modifier and its base are both one class, specificity ties, and
     source order decides. Written above the base first, and the base's
     aspect-ratio 4/5 won -- the clip rendered at 0.80 instead of 4:3. Same
     shape as the ghost button's hover earlier the same day, which is why this
     paragraph is here rather than just the corrected order. */
  /* The video sits in the media column but keeps its own 4:3 rather than the
     picture box's 4:5, and drops the white plate: the clip is already shot on
     a pale ground, so a card behind it would be a second white rectangle
     inside the first. */
  .pruvit-feature__media--video {
    aspect-ratio: 4 / 3;
    background: none;
    padding: 0;
    box-shadow: none;
    overflow: hidden;
  }

  .pruvit-feature__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Craig, 2026-09-28: let it run past the container on the outside edge.

     The bleed is computed, not typed. The section publishes
     --page-content-width (72rem) and the media column's outer edge sits on the
     container's, so the room between that edge and the viewport is
     (100vw - content) / 2 -- 144 at 1440, 64 at 1280, 384 at 1920.

     Capped at 120. Uncapped, the same rule reads as a 64px nudge on a laptop
     and a 384px slab on a wide monitor, which is three different compositions
     rather than one. clamp's lower bound at 0 covers the viewports where the
     container is already the full width and there is no room at all.

     --flip puts the media on the left here, so the bleed goes left; the
     unflipped case bleeds right. Whichever side the copy is not on. */
  .pruvit-feature__media--bleed {
    --pruvit-bleed: clamp(0px, calc((100vw - var(--page-content-width, 72rem)) / 2), 120px);
  }

  @media screen and (min-width: 901px) {
    .pruvit-feature--flip .pruvit-feature__media--bleed {
      width: calc(100% + var(--pruvit-bleed));
      margin-inline-start: calc(-1 * var(--pruvit-bleed));
    }

    .pruvit-feature:not(.pruvit-feature--flip) .pruvit-feature__media--bleed {
      width: calc(100% + var(--pruvit-bleed));
      margin-inline-end: calc(-1 * var(--pruvit-bleed));
    }
  }

  /* An autoplaying loop is movement nobody asked for. Stopped on the poster
     where the shopper has said they do not want it. */
  @media (prefers-reduced-motion: reduce) {
    .pruvit-feature__video {
      display: none;
    }

    .pruvit-feature__media--video {
      background-position: center;
      background-size: cover;
    }
  }

  .pruvit-feature__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* A product render is not a photograph. The store's pack renders are square
     with the pack centred, so the frame is square and the render is contained
     with room around it; covering would crop the pack. White rather than the
     soft ice, because the renders are shot on white and a tinted ground shows
     their edges. */
  .pruvit-feature__media--product {
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
  }

  .pruvit-feature__media--product img {
    object-fit: contain;
    padding: 8%;
  }

  .pruvit-feature__aside {
    padding: clamp(22px, 3vw, 30px);
    border-radius: var(--r-md);
    background: var(--ice-soft);
    border: 1px solid var(--line);
  }

  /* Only when there is an eyebrow: its height plus its margin, so the card's
     top edge lands on the heading's top edge rather than on the eyebrow's.
     Measured at 1024 before this: eyebrow 20px + 14px put the h2 at +34 and
     the card at +12, i.e. the card sat 22px above the heading it accompanies.
     Without an eyebrow the heading is the first thing in the column and the
     card needs no offset — Craig dropped the eyebrows on 2026-09-24, which
     is how this became conditional. */
  .pruvit-feature--eyebrow .pruvit-feature__aside {
    margin-block-start: calc(12.5px * 1.4 + 14px);
  }

  .pruvit-feature__aside-h {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
  }

  .pruvit-feature__aside-b {
    margin-block-start: 10px;
  }

  .pruvit-feature__aside-b p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  .pruvit-feature__aside-b p + p {
    margin-block-start: 0.8em;
  }

  @media screen and (max-width: 900px) {
    .pruvit-feature--media,
    .pruvit-feature--aside {
      grid-template-columns: minmax(0, 1fr);
    }

    .pruvit-feature--flip .pruvit-feature__copy {
      order: 0;
    }

    .pruvit-feature__aside {
      margin-block-start: 0;
    }
  }
/* END_BLOCK:pruvit-feature */

/* START_BLOCK:pruvit-flavor-cards (INDEX:172) */
/* auto-fit rather than a fixed count, because the number of flavours is
     whatever the market actually sells — four in en-us today, five once Wild
     Berry opens. The 150px floor is what puts two cards side by side on a
     phone: at 200px a 390px screen fits one, and five flavours one per screen
     is a long scroll to compare things that are meant to be compared. */
  .pruvit-flavors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
  }

  .pruvit-flavor {
    position: relative;
    display: grid;
    justify-items: center;
    text-align: center;
    padding: 28px 22px 26px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--fc) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--fc) 30%, transparent);
  }

  .pruvit-flavor__shot img {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
  }

  .pruvit-flavor__name {
    margin-block-start: 14px;
    font-size: 18px;
  }

  .pruvit-flavor__note {
    margin-block-start: 5px;
    font-size: 14.5px;
    color: var(--color-foreground-muted);
  }

  .pruvit-flavor__tag {
    margin-block-start: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-foreground);
    background: color-mix(in srgb, var(--fc) 22%, transparent);
  }

  /* The launch flag takes the accent fill so it reads as the one thing on the
     row that is not about taste. */
  .pruvit-flavor__tag--new {
    background: var(--accent-1);
    color: var(--accent-1-on);
  }
/* END_BLOCK:pruvit-flavor-cards */

/* START_BLOCK:pruvit-heading (INDEX:173) */
.pruvit-head {
    scroll-margin-block-start: calc(var(--pruvit-gnav-h, 66px) + 24px);
  }

  .pruvit-head--narrow {
    max-width: 720px;
  }

  .pruvit-head--wide {
    max-width: 940px;
  }

  /* See the note in pruvit-faq: an auto inline margin on a grid item stops it
     stretching, so the measure below would only bind when the copy happened to
     be long enough to reach it. */
  .pruvit-head--center {
    width: 100%;
    justify-self: center;
    text-align: center;
  }

  .pruvit-head__lede {
    margin-block-start: 20px;
  }
/* END_BLOCK:pruvit-heading */

/* START_BLOCK:pruvit-label (INDEX:174) */
/* The pill itself is .pruvit-card__label, styled once in pruvit-collection.
     This only puts the row in the flow, where the card puts it over a photo. */
  .pruvit-plabels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    /* 16. This went 10 -> 12 -> 16 across one afternoon, and the middle step is
       the interesting one.

       A box gap is not what the eye measures. The title is 32px on a 33.6px
       line so it carries 0.8px of leading above its caps, where the summary is
       16 on 24.8 and carries 4.4. At 10 the box gap here was already the LARGER
       of the two -- 10 against the summary's 8 -- and still read tighter. 12
       brought the optical gaps level, 12.8 against 12.4.

       Level was still not enough, and the reason is that parity was the wrong
       target. The summary's gap is text to text, and a line of text is mostly
       white -- its bounding box overstates how much ink is near the edge. The
       badge is a filled pill: every pixel of its box is inked, so it crowds
       what follows in a way a line of type does not, and it needs clearance a
       text baseline does not. Craig's eye said so twice before the reasoning
       caught up. */
    margin-block-end: 16px;
  }
/* END_BLOCK:pruvit-label */

/* START_BLOCK:pruvit-packs (INDEX:175) */
/* Ported from the prototype's .packs / .pack / .pk-* rules rather than
     approximated. Three token names do not exist here and are mapped: the
     prototype's --slate-text is this theme's --slate, --white is #fff, and
     --ink is the inherited foreground. Everything else is the same token. */

  /* Three fixed columns, not auto-fit. auto-fit with a 270px floor silently
     became two columns on a narrow desktop and the featured card stopped
     being the middle one, which is the whole point of lifting it. */
  .pruvit-packs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Named, because the membership row below has to subtract it — it is a
       grid item, so the row gap is already between it and the cards. */
    --packs-row-gap: clamp(30px, 3.8vw, 42px);
    gap: var(--packs-row-gap) clamp(20px, 2.4vw, 30px);
  }

  /* No align-items: start. The cards have to stretch to a shared height or
     the CTA's margin-block-start: auto has no free space to push into, and
     the three buttons stop lining up. */

  @media screen and (max-width: 860px) {
    .pruvit-packs {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .pruvit-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    /* No gap. Every interval below is stated instead, which is the
       prototype's own note: a blanket gap adds itself to each child's margin
       and leaves several different effective spacings in a card with four
       things in it. This carried gap: 6px. */
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
    /* The band behind these is white, so this is the prototype's .sec--pop
       pair: the shadow has to read against white rather than a tinted
       ground. */
    box-shadow: 0 14px 34px -22px rgb(22 32 58 / 0.22);
    transition:
      border-color 0.2s ease,
      box-shadow 0.22s ease,
      transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pruvit-pack:hover {
    border-color: transparent;
    box-shadow: 0 22px 46px -22px rgb(22 32 58 / 0.3);
    transform: translateY(-3px);
  }

  /* The lit card. Three signals carry it — the lift, the badge straddling the
     top edge, and elevation well past its siblings — and no ring. Duranta is
     1.37 on white, and its ink form at 2px reads as dark khaki rather than
     gold; the badge already says which card this is. This carried an
     accent-1 border doing that job badly. .40 at 60px against the siblings'
     .22 at 34px is most of a doubling, and that gap is the entire signal. */
  .pruvit-pack.is-featured {
    box-shadow: 0 28px 60px -26px rgb(22 32 58 / 0.4);
  }

  .pruvit-pack.is-featured:hover {
    box-shadow: 0 36px 74px -26px rgb(22 32 58 / 0.46);
  }

  /* The lift only makes sense while the three sit side by side; stacked, a
     card floating 10px above the next one just looks misaligned. */
  @media screen and (min-width: 861px) {
    .pruvit-pack.is-featured {
      transform: translateY(-10px);
    }

    .pruvit-pack.is-featured:hover {
      transform: translateY(-14px);
    }
  }

  /* The badge straddles the card's top edge, so it reads as applied to the
     card rather than as another row of copy inside it. It was tucked against
     the left corner, which reads as the latter.

     800 here is not the drift the headings had: this is a badge, and the
     badge/monogram category carries positive tracking and keeps its weight.
     Negative tracking is what marks a heading, and this has +0.1em. */
  .pruvit-pack__badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--flag);
    color: var(--flag-on);
    font-family: var(--font-heading--family);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .pruvit-pack__shot {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-xs);
    overflow: hidden;
    background: var(--ice-soft);
    margin-block-end: 18px;
  }

  /* cover, not contain. The rationale written here said the shots "fill the
     box rather than sitting inside it, so the ground behind them is never
     seen" — which describes cover and was paired with contain, so the ice
     ground showed as letterboxing on all three. */
  .pruvit-pack__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pruvit-pack:hover .pruvit-pack__shot img {
    transform: scale(1.045);
  }

  /* The name leads the card, and the price steps down under it: the pack is
     the thing being chosen, the number is a detail of it. The element carries
     .pruvit-h-md so it inherits that recipe exactly — same clamp, same
     -0.025em, same 1.05 — instead of the hand-set 26px near-match it had.
     Only the colour is stated here. */
  .pruvit-pack__name {
    color: inherit;
  }

  .pruvit-pack__meta {
    display: block;
    margin-block-start: 4px;
    font-size: 13px;
    color: var(--slate);
  }

  .pruvit-pack__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
    margin-block-start: 12px;
  }

  /* 20px, down from 27px, and proportional figures rather than tabular.
     Tabular belongs to aligned data — cart rows, the quantity stepper — not
     to a price standing on its own, where it pads the 1 and reads loose. */
  .pruvit-pack__now {
    font-family: var(--font-heading--family);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: inherit;
  }

  .pruvit-pack__was {
    font-size: 13px;
    color: var(--slate);
    text-decoration: line-through;
  }

  /* The saving reads as its own object rather than the tail of the price, and
     it uses the --save slots rather than the two hardcoded greens it had. */
  .pruvit-pack__save {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--save-soft);
    color: var(--save-ink);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* 24px above and below, no hairline. The gap is what groups these, and the
     bottom margin guarantees the interval above the button even in the
     tallest card, where margin-block-start: auto has no free space to give.
     This had a border-block-start doing the grouping instead. */
  .pruvit-pack__offer {
    margin-block: 24px;
  }

  .pruvit-pack__offer-t {
    margin: 0 0 11px;
    font-family: var(--font-mono--family);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent-1-ink);
  }

  .pruvit-pack__inc {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
  }

  .pruvit-pack__inc li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink-soft);
  }

  .pruvit-pack__inc b {
    color: inherit;
    font-weight: 700;
  }

  /* A bare tick, matching the buy box's benefit list, so an inclusion reads
     the same wherever it appears. The filled green circles this had read as
     three badges competing with the offer label above them. */
  .pruvit-pack__ck {
    flex: none;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-block-start: 2px;
    color: var(--accent-1-ink);
  }

  .pruvit-pack__ck svg {
    width: 16px;
    height: 16px;
  }

  /* Pushed to the bottom so the buttons line up across cards whose inclusion
     lists are different lengths. */
  .pruvit-pack__cta {
    width: 100%;
    margin-block-start: auto;
    padding-block: 14px;
    justify-content: center;
    background: #16203a;
    color: #fff;
  }

  .pruvit-pack__cta:hover {
    background: var(--navy-mid);
  }

  /* The membership row. No panel: boxing it gave it the same visual weight as
     the three cards it is meant to sit beneath, and it is the quiet option.

     Stacked and centred rather than side by side — a second alignment next to
     three centred cards read as busy. Pushed well off them, because at the
     38px it first had it pulled attention off the choice the packs exist to
     make. */
  .pruvit-packs__solo {
    grid-column: 1 / -1;
    /* The prototype's interval is measured from the cards, and there it was a
       sibling of the grid so its margin was the whole of it. In here the row
       gap lands first, so the margin is the remainder — which keeps the
       distance the prototype tuned rather than the 78px it came out as. */
    margin-block-start: calc(clamp(48px, 4.4vw, 64px) - var(--packs-row-gap));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  .pruvit-packs__solo-copy {
    font-size: 14.5px;
    max-width: 74ch;
    color: var(--slate, #5b6685);
  }

  .pruvit-packs__solo-copy p {
    margin: 0;
  }

  /* The colour step is the whole emphasis — no second weight. A bold here
     competed with the pack cards, and unbolding keeps the sentence reading as
     two halves without it. Drop the colour too if it still pulls. */
  .pruvit-packs__solo-copy strong {
    color: inherit;
    filter: none;
    font-weight: inherit;
    color: var(--color-foreground);
  }
/* END_BLOCK:pruvit-packs */

/* START_BLOCK:pruvit-problem (INDEX:176) */
.pruvit-problem {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }

  /* The offset is the measured header plus a little air, not the prototype's
     flat 96px: that number was the prototype's own two-tier nav, which this
     theme does not have yet. --header-height comes from Horizon's pre-paint
     measurement, so it is a real number by first paint rather than a guess. */
  .pruvit-problem__lead {
    position: sticky;
    top: calc(var(--header-height, 60px) + 36px);
  }

  .pruvit-problem__lede {
    margin-block-start: 20px;
    max-width: 38ch;
  }

  .pruvit-problem__punch {
    margin-block-start: 36px;
    padding-block-start: 30px;
    border-block-start: 2px solid var(--color-foreground);
    font-family: var(--font-heading--family);
    font-size: clamp(23px, 2.5vw, 32px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
  }

  /* The accent's ink form, not the accent itself: #99A2F3 as text on white is
     2.1 and fails outright. On a dark ground the fill is already the readable
     one, so it flips back. */
  .pruvit-problem__punch-em {
    color: var(--accent-1-ink);
  }

  .color-custom-navy .pruvit-problem__punch-em {
    color: var(--accent-1-bright);
  }

  .pruvit-symptoms {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pruvit-symptom {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 4px 22px 0;
    border-block-start: 1px solid var(--line);
  }

  /* The list's own edges belong to the band's rhythm, not to the list: a rule
     above the first item would double the boundary the band already draws. */
  .pruvit-symptom:first-child {
    border-block-start: none;
    padding-block-start: 0;
  }

  .pruvit-symptom:last-child {
    padding-block-end: 0;
  }

  .pruvit-symptom__icon {
    flex: none;
    display: block;
    width: 26px;
    height: 26px;
    margin-block-start: 2px;
    color: var(--color-foreground);
  }

  .pruvit-symptom__icon svg {
    width: 26px;
    height: 26px;
  }

  .pruvit-symptom__heading {
    font-family: var(--font-heading--family);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 5px;
  }

  .pruvit-symptom__text {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 52ch;
    margin: 0;
  }

  @media screen and (max-width: 900px) {
    .pruvit-problem {
      grid-template-columns: 1fr;
      gap: 34px;
    }

    /* Static, not just unpinned: with one column the lead is no longer beside
       anything to stay level with, and a sticky element that never releases
       would sit over the list it is introducing. */
    .pruvit-problem__lead {
      position: static;
    }

    .pruvit-problem__lede {
      max-width: none;
    }
  }
/* END_BLOCK:pruvit-problem */

/* START_BLOCK:pruvit-proof (INDEX:177) */
.pruvit-proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
  }

  .pruvit-proof__lede {
    margin-block-start: 20px;
  }

  .pruvit-proof__cta {
    margin-block-start: 28px;
  }

  /* No row gap: each proof point draws its own rule above itself, so a gap
     would put air between the rule and the pair it belongs to. */
  .pruvit-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
  }

  .pruvit-badge {
    padding-block: 22px;
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.16);
  }

  /* The accent in the form this band's ground can carry — set by the section,
     which is the only place that knows the ground. */
  .pruvit-badge__icon {
    display: block;
    margin-block-end: 13px;
    color: var(--accent-mark, var(--accent-1-ink));
  }

  .pruvit-badge__icon svg {
    width: 22px;
    height: 22px;
  }

  .pruvit-badge__heading {
    font-family: var(--font-heading--family);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 5px;
  }

  .pruvit-badge__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
  }

  @media screen and (max-width: 900px) {
    .pruvit-proof {
      grid-template-columns: 1fr;
    }
  }

  @media screen and (max-width: 520px) {
    .pruvit-badges {
      grid-template-columns: 1fr;
    }
  }
/* END_BLOCK:pruvit-proof */

/* START_BLOCK:pruvit-register (INDEX:179) */
.pruvit-reg {
    display: grid;
    justify-items: center;
  }

  /* A single column at reading width. The lead forms sit beside an argument
     and take half a band; this one has nothing to sit beside. */
  .pruvit-reg__card {
    width: min(100%, 520px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: clamp(24px, 3.4vw, 40px);
  }

  .pruvit-reg__h {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(26px, 3.4vw, 34px);
    /* 700 at -0.025em is the house heading setting, declared on
       .pruvit-h-xl/lg/md in pruvit-tokens and repeated by every component
       heading in the theme — .pruvit-tri-card__heading at 22px uses the same
       pair as the 54px display type. One weight, one tracking, whatever the
       size. This had drifted to 800 at -0.03. */
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
  }


  .pruvit-reg__lede {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  /* The form's own first element is the referrer step, which carries its own
     top margin against a heading. */
  .pruvit-reg__card :is(.pruvit-lead, .pruvit-si) {
    margin-block-start: 22px;
  }
/* END_BLOCK:pruvit-register */

/* START_BLOCK:pruvit-steps (INDEX:180) */
.pruvit-steps-band {
    scroll-margin-block-start: calc(var(--pruvit-gnav-h, 66px) + 24px);
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
  }

  /* Without a photo there is no second column to be 1.08fr against, and the
     text would otherwise sit in a 0.92fr gutter with the rest of the band
     empty beside it. */
  .pruvit-steps-band--no-photo {
    grid-template-columns: 1fr;
    /* And held to the FAQ's measure rather than the band's full 1152: three
       short steps across the whole column read as a table with one cell per
       row. Same width:100% + justify-self as pruvit-faq, for the same reason
       — an auto inline margin on a grid item stops it stretching. Added for
       the Prüvit Professional page, 2026-09-24; the home page's steps carry a
       photo and are untouched. */
    width: 100%;
    max-width: 840px;
    justify-self: center;
  }

  .pruvit-steps-band__photo {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 1 / 1;
    background: var(--ice-soft);
  }

  .pruvit-steps-band__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pruvit-steps-band__lede {
    margin-block-start: 20px;
  }

  .pruvit-steps {
    counter-reset: pruvit-step;
    margin-block-start: 34px;
    display: grid;
    gap: 2px;
  }

  .pruvit-step {
    display: flex;
    gap: 20px;
    padding-block: 22px;
    border-block-start: 1px solid var(--line);
  }

  .pruvit-step:last-child {
    border-block-end: 1px solid var(--line);
  }

  /* Generated content on purpose: the number is a position marker, so it should
     not land in the accessibility tree or in a copied selection alongside the
     step's own words. */
  .pruvit-step::before {
    counter-increment: pruvit-step;
    content: counter(pruvit-step, decimal-leading-zero);
    font-family: var(--font-mono--family);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--color-foreground);
    padding-block-start: 4px;
    flex: none;
    width: 32px;
  }

  .pruvit-step__heading {
    font-family: var(--font-heading--family);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 5px;
  }

  .pruvit-step__text {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
  }

  .pruvit-steps-band__kicker {
    margin-block-start: 26px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-end: 0;
  }

  .pruvit-steps-band__tick {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-1);
    color: var(--accent-1-on);
    display: grid;
    place-items: center;
    flex: none;
  }

  .pruvit-steps-band__tick svg {
    width: 12px;
    height: 12px;
  }

  @media screen and (max-width: 900px) {
    .pruvit-steps-band {
      grid-template-columns: 1fr;
    }
  }
/* END_BLOCK:pruvit-steps */

/* START_BLOCK:pruvit-story-rail (INDEX:181) */
.pruvit-vrail {
    display: grid;
    grid-auto-flow: column;
    /* 4.5 across: the half card is the scroll affordance. */
    grid-auto-columns: calc((100% - 64px) / 4.5);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / 0.3) transparent;
  }

  .pruvit-vcard {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--navy-deep);
    scroll-snap-align: start;
    border: none;
    padding: 0;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pruvit-vcard:hover {
    transform: translateY(-4px);
  }

  .pruvit-vcard video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pruvit-vcard__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 20, 32, 0) 40%, rgba(14, 20, 32, 0.86) 100%);
  }

  .pruvit-vcard__mini {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--navy-deep);
    display: grid;
    place-items: center;
    transition: background 0.25s ease, transform 0.25s ease;
  }

  .pruvit-vcard:hover .pruvit-vcard__mini {
    background: var(--accent-1);
    /* The label colour that goes with the fill: navy for periwinkle, as the
       play glyph always was, white for a dark palette. */
    color: var(--accent-1-on);
    transform: scale(1.06);
  }

  .pruvit-vcard__mini svg {
    width: 14px;
    height: 14px;
    margin-inline-start: 2px;
  }

  /* The pause bars are centred where the play triangle was optically nudged. */
  .pruvit-vcard.is-playing .pruvit-vcard__mini svg {
    margin-inline-start: 0;
  }

  .pruvit-vcard__cap {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 15px;
    text-align: left;
  }

  .pruvit-vcard__quote {
    display: block;
    font-family: var(--font-heading--family);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #fff;
  }

  .pruvit-vcard__who {
    display: block;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.72);
    margin-block-start: 6px;
  }

  .pruvit-vrail__note {
    margin-block-start: 14px;
    margin-block-end: 0;
    font-size: 13px;
    color: var(--slate);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pruvit-vrail__note-icon svg {
    width: 15px;
    height: 15px;
    display: block;
  }

  .pruvit-vcard--empty {
    display: grid;
    place-items: center;
    padding: 20px;
    text-align: center;
    color: var(--ink-soft);
  }

  /* Cards are 9:16, so the track width drives the height. Step the count down
     as the rail narrows, or the last card lands part-visible only by growing
     absurdly tall on the way. */
  @media screen and (max-width: 1100px) {
    .pruvit-vrail {
      grid-auto-columns: calc((100% - 48px) / 3.5);
    }
  }

  @media screen and (max-width: 760px) {
    .pruvit-vrail {
      grid-auto-columns: calc((100% - 32px) / 2.5);
    }
  }

  /* Out through the page gutter, so the rail reads as scrollable rather than
     as a boxed row that happens to be cut off.

     The bleed is --page-margin and not a number, because the number has to be
     the gutter exactly. It was 24px, which is the gutter on a wide screen but
     not inside this media query: Horizon resolves --page-margin to 16px on a
     narrow one, so the rail pulled 8px further than there was room for and hung
     8px off each edge. Measured at 320px — band at 16→304, rail at -8→328 —
     which put a horizontal scrollbar on the whole page.

     Written as var(--page-margin, 24px) to match how pruvit-tokens and
     pruvit-header already read it. */
  @media screen and (max-width: 460px) {
    .pruvit-vrail {
      grid-auto-columns: calc((100% - 16px) / 1.5);
      margin-inline: calc(var(--page-margin, 24px) * -1);
      padding-inline: var(--page-margin, 24px);
      scroll-padding-inline-start: var(--page-margin, 24px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pruvit-vcard,
    .pruvit-vcard__mini {
      transition: none;
    }

    .pruvit-vcard:hover {
      transform: none;
    }

    .pruvit-vcard:hover .pruvit-vcard__mini {
      transform: none;
    }
  }
/* END_BLOCK:pruvit-story-rail */

/* START_BLOCK:pruvit-supplement-facts (INDEX:183) */
/* Full width, under the thumb rail. It is the hero's "How it works" treatment
     rather than a new button style — the page already has two button weights
     and did not need a third. */
  /* The button is .pruvit-buy__sf, which is the one under the landing page's
     gallery, and this rule now only says what that one cannot know: nothing.
     It carried Horizon's .button .button-secondary and came out 82px tall in
     Inter 16/400 with no border, against the buy box's 47px pill in Inter
     Tight 15/700 with a hairline. Same words, same job, two buttons. */
  .pruvit-sf__trigger {
    margin-block-start: 0;
  }

  /* Off the rail, and above it.

     The button sat flush against the thumbnail rail with nothing between
     them — the gallery block ends and this begins, and neither had anything
     to say about the join. 16px is the gap the landing page's buy box puts
     between its gallery and the same button.

     The stacking context is deliberate rather than defensive. The rail is a
     horizontally scrolling strip directly above a full-width control; if the
     two ever disagree about their boxes by a pixel, the button is the one
     that should win, because it is the thing you click. */
  .pruvit-sf {
    position: relative;
    z-index: 1;
    margin-block-start: 16px;
  }

  @media screen and (max-width: 749px) {
    /* This used to carry margin-inline: var(--page-margin) as well. The reason
       was that "the gallery runs edge to edge on a phone and the button was
       inheriting that", so a pill with a 14px radius had its corners cut off
       by the screen — the button had to put itself back on the page gutter.

       That premise went on 2026-09-28, when the gallery was given the page's
       own content column so it lines up with the copy below it. The gutter now
       arrives from the gallery, and the margin was being counted twice:
       measured at 375, the panel sat at left 32 against the page's 16, a clean
       16px out from everything under it.

       The space below is larger than the space above on purpose: above is a
       join within one thing — the gallery and the button that opens its
       label — and below is the start of the next, the product label badge and
       the title. Equal space either side read as though the button belonged
       to the title. */
    .pruvit-sf {
      margin-block-start: 14px;
      margin-block-end: 30px;
    }
  }

  /* The dialog itself carries no rules here any more.

     It used to be a panel of this block's own — .pruvit-sf__dialog, __head,
     __title, __body, __img, __note, plus a bottom-sheet media query — and it
     is now the buy box's panel markup, so the buy box's stylesheet dresses it.
     Block stylesheets are bundled theme-wide in Horizon, so .pruvit-sfm__* and
     .pruvit-buy__sf-dialog are available on a page with no buy box on it; that
     is what makes "the same as the landing page version" literally the same
     stylesheet rather than a second copy of it that drifts.

     Nothing was moved out of here into pruvit-buy.liquid. Everything these
     rules said, that one already said. */
/* END_BLOCK:pruvit-supplement-facts */

/* START_BLOCK:pruvit-testimonials (INDEX:184) */
.pruvit-testi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .pruvit-tcard {
    background: #fff;
    border-radius: var(--r-md);
    padding: 28px 26px 26px;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #16203a;
  }

  /* The flag, not the accent: five periwinkle stars next to a periwinkle button
     read as a control. */
  .pruvit-tcard__stars {
    display: flex;
    gap: 3px;
    color: var(--flag-ink);
  }

  .pruvit-tcard__stars svg {
    width: 16px;
    height: 16px;
  }

  .pruvit-tcard__heading {
    font-family: var(--font-heading--family);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0;
  }

  /* flex: 1 so the attribution sits on the floor of every card in the row,
     whatever the quote's length. */
  .pruvit-tcard__quote {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgb(22 32 58 / 0.72);
    flex: 1;
    margin: 0;
  }

  .pruvit-tcard__who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--line);
  }

  .pruvit-tcard__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #16203a;
    color: var(--accent-1-bright);
    display: grid;
    place-items: center;
    font-family: var(--font-heading--family);
    font-weight: 800;
    font-size: 15px;
    flex: none;
  }

  .pruvit-tcard__name {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
  }

  .pruvit-tcard__role {
    display: block;
    font-size: 13px;
    color: rgb(22 32 58 / 0.62);
  }

  @media screen and (max-width: 940px) {
    .pruvit-testi {
      grid-template-columns: 1fr;
    }
  }
/* END_BLOCK:pruvit-testimonials */

/* START_BLOCK:pruvit-timeline (INDEX:185) */
.pruvit-clock {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: clamp(14px, 2vw, 34px);
  }

  .pruvit-clock__stage {
    grid-column: 2;
    grid-row: 1 / 4;
    position: relative;
    display: grid;
    place-items: center;
    width: min(600px, 44vw);
    min-height: min(600px, 44vw);
    padding-block: clamp(30px, 4vw, 54px);
  }

  .pruvit-clock__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(600px, 44vw);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 0;
  }

  .pruvit-clock__ring svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  /* Duranta on the dial marks. The face is the one place on the page where the
     second accent has room to be itself: it is pure ornament on navy, it never
     competes with a control, and the yellow reads as a lit filament against the
     periwinkle hand still leading the sweep. */
  .pruvit-clock__tick {
    stroke-linecap: round;
    stroke-width: 6;
    stroke: rgb(var(--color-foreground-rgb) / 0.13);
    transition: stroke 0.45s ease, stroke-width 0.45s ease;
  }

  .pruvit-clock__tick--key {
    stroke-width: 8;
    stroke: rgb(var(--color-foreground-rgb) / 0.26);
  }

  .pruvit-clock.is-drawn .pruvit-clock__tick.is-lit {
    stroke: rgb(var(--flag-rgb) / 0.3);
  }

  .pruvit-clock.is-drawn .pruvit-clock__tick--key.is-lit {
    stroke: var(--flag);
    stroke-width: 10;
    filter: drop-shadow(0 0 6px rgb(var(--flag-rgb) / 0.55));
  }

  /* The leading edge, so the eye follows the direction of travel. */
  .pruvit-clock__hand {
    position: absolute;
    inset: 0;
    transform: rotate(0deg);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .pruvit-clock__head {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 13px;
    height: 13px;
    margin-inline-start: -6.5px;
    border-radius: 50%;
    background: var(--accent-1);
    box-shadow: 0 0 14px 4px rgb(var(--accent-1-rgb) / 0.5);
  }

  .pruvit-clock.is-drawn .pruvit-clock__hand {
    opacity: 1;
    animation: pruvit-sweep 2.6s linear forwards;
  }

  @keyframes pruvit-sweep {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .pruvit-clock__reel {
    position: relative;
    z-index: 2;
    margin: 0;
    width: min(330px, 26vw);
    aspect-ratio: 9 / 16;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--navy-deep);
    box-shadow: 0 46px 90px -34px rgba(0, 0, 0, 0.9);
  }

  .pruvit-marks {
    display: contents;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pruvit-mk {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    padding-block: 18px;
  }

  /* Visible by default. Only a block the script has taken charge of starts
     hidden — otherwise a JavaScript failure would leave six invisible
     milestones and a band that looks empty. */
  .pruvit-clock--animate .pruvit-mk {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pruvit-clock.is-drawn .pruvit-mk {
    opacity: 1;
    transform: none;
  }

  .pruvit-mk__icon {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: rgb(var(--color-foreground-rgb) / 0.07);
    color: rgb(var(--color-foreground-rgb) / 0.55);
    transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
  }

  .pruvit-clock.is-drawn .pruvit-mk__icon {
    background: rgb(var(--accent-1-rgb) / 0.15);
    color: var(--accent-mark, var(--accent-1-bright));
    box-shadow: 0 0 0 1px rgb(var(--accent-1-rgb) / 0.35);
  }

  .pruvit-mk__icon svg {
    width: 21px;
    height: 21px;
  }

  .pruvit-mk__when {
    display: block;
    font-family: var(--font-heading--family);
    font-size: clamp(19px, 1.7vw, 23px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--color-foreground);
  }

  .pruvit-mk__what {
    display: block;
    font-size: 14.5px;
    line-height: 1.35;
    margin-block-start: 5px;
    color: var(--ink-soft);
  }

  /* Connector hairlines pointing back at the face. */
  .pruvit-mk::after {
    content: '';
    position: absolute;
    top: 50%;
    width: clamp(14px, 2.4vw, 40px);
    height: 1px;
    background: linear-gradient(90deg, rgb(var(--color-foreground-rgb) / 0.28), transparent);
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .pruvit-clock.is-drawn .pruvit-mk::after {
    opacity: 1;
  }

  /* Seats on the face come from source order: the first three run down the
     right from one o'clock, the next three back up the left. Gated on there
     being no seventh milestone — a band with more than six falls through to
     the rail layout below, which works at any count, rather than piling
     unplaced items into one cell. */
  @media screen and (min-width: 1001px) {
    .pruvit-clock:not(:has(.pruvit-mk:nth-of-type(7))) .pruvit-mk:nth-of-type(-n + 3) {
      grid-column: 3;
      flex-direction: row;
    }

    .pruvit-clock:not(:has(.pruvit-mk:nth-of-type(7))) .pruvit-mk:nth-of-type(-n + 3)::after {
      right: 100%;
      background: linear-gradient(270deg, rgb(var(--color-foreground-rgb) / 0.28), transparent);
    }

    .pruvit-clock:not(:has(.pruvit-mk:nth-of-type(7))) .pruvit-mk:nth-of-type(n + 4) {
      grid-column: 1;
      flex-direction: row-reverse;
      text-align: right;
    }

    .pruvit-clock:not(:has(.pruvit-mk:nth-of-type(7))) .pruvit-mk:nth-of-type(n + 4)::after {
      left: 100%;
    }

    .pruvit-clock:not(:has(.pruvit-mk:nth-of-type(7))) .pruvit-mk:nth-of-type(1),
    .pruvit-clock:not(:has(.pruvit-mk:nth-of-type(7))) .pruvit-mk:nth-of-type(6) {
      grid-row: 1;
    }

    .pruvit-clock:not(:has(.pruvit-mk:nth-of-type(7))) .pruvit-mk:nth-of-type(2),
    .pruvit-clock:not(:has(.pruvit-mk:nth-of-type(7))) .pruvit-mk:nth-of-type(5) {
      grid-row: 2;
    }

    .pruvit-clock:not(:has(.pruvit-mk:nth-of-type(7))) .pruvit-mk:nth-of-type(3),
    .pruvit-clock:not(:has(.pruvit-mk:nth-of-type(7))) .pruvit-mk:nth-of-type(4) {
      grid-row: 3;
    }
  }

  /* Each milestone lights as the sweep passes its own tick. Right side on the
     way down, left side on the way back up — which is why 4, 5, 6 run later
     than 3 and in the reverse order of their seats. */
  .pruvit-clock.is-drawn .pruvit-mk:nth-of-type(1),
  .pruvit-clock.is-drawn .pruvit-mk:nth-of-type(1) .pruvit-mk__icon {
    transition-delay: 0.43s;
  }

  .pruvit-clock.is-drawn .pruvit-mk:nth-of-type(2),
  .pruvit-clock.is-drawn .pruvit-mk:nth-of-type(2) .pruvit-mk__icon {
    transition-delay: 0.645s;
  }

  .pruvit-clock.is-drawn .pruvit-mk:nth-of-type(3),
  .pruvit-clock.is-drawn .pruvit-mk:nth-of-type(3) .pruvit-mk__icon {
    transition-delay: 0.86s;
  }

  .pruvit-clock.is-drawn .pruvit-mk:nth-of-type(4),
  .pruvit-clock.is-drawn .pruvit-mk:nth-of-type(4) .pruvit-mk__icon {
    transition-delay: 1.72s;
  }

  .pruvit-clock.is-drawn .pruvit-mk:nth-of-type(5),
  .pruvit-clock.is-drawn .pruvit-mk:nth-of-type(5) .pruvit-mk__icon {
    transition-delay: 1.935s;
  }

  .pruvit-clock.is-drawn .pruvit-mk:nth-of-type(6),
  .pruvit-clock.is-drawn .pruvit-mk:nth-of-type(6) .pruvit-mk__icon {
    transition-delay: 2.15s;
  }

  /* Below the face's comfortable size the clock unrolls into a plain
     chronological rail: film first, then the six in order. */
  @media screen and (max-width: 1000px) {
    .pruvit-clock {
      display: block;
    }

    .pruvit-clock__stage {
      padding: 0;
      width: auto;
      min-height: 0;
    }

    .pruvit-clock__ring {
      display: none;
    }

    .pruvit-clock__reel {
      width: min(330px, 80vw);
      margin-inline: auto;
    }

    .pruvit-marks {
      display: block;
      margin-block-start: 44px;
      padding-inline-start: 38px;
      position: relative;
    }

    .pruvit-marks::before {
      content: '';
      position: absolute;
      left: 21px;
      top: 10px;
      bottom: 34px;
      width: 2px;
      background: rgb(var(--color-foreground-rgb) / 0.16);
    }

    .pruvit-marks::after {
      content: '';
      position: absolute;
      left: 21px;
      top: 10px;
      width: 2px;
      height: 0;
      background: linear-gradient(180deg, rgb(var(--accent-1-rgb) / 0.35), var(--accent-1));
      transition: height 2.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pruvit-clock.is-drawn .pruvit-marks::after {
      height: calc(100% - 44px);
    }

    .pruvit-mk {
      padding-block: 14px;
      flex-direction: row;
      text-align: left;
    }

    .pruvit-mk__icon {
      margin-inline-start: -38px;
    }

    .pruvit-mk::after {
      display: none;
    }
  }

  @media screen and (max-width: 520px) {
    .pruvit-mk__what {
      font-size: 14px;
    }
  }

  /* The sweep is the one authored moment here, so reduced motion gets the
     finished state rather than a slower version of the journey. */
  @media (prefers-reduced-motion: reduce) {
    .pruvit-clock .pruvit-mk,
    .pruvit-clock .pruvit-mk__icon,
    .pruvit-clock .pruvit-clock__tick,
    .pruvit-clock .pruvit-marks::after {
      transition: none;
    }

    .pruvit-clock .pruvit-clock__hand {
      animation: none;
      opacity: 0;
    }
  }
/* END_BLOCK:pruvit-timeline */

/* START_BLOCK:pruvit-title (INDEX:186) */
/* The heading recipe is .pruvit-h-lg's. This only unsets the margin a
     browser puts on an h1, which the column's own spacing replaces. */
  .pruvit-ptitle {
    margin: 0;
  }
/* END_BLOCK:pruvit-title */

/* START_BLOCK:pruvit-tri (INDEX:187) */
.pruvit-tri {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  /* White, not the band's ground: these are cards lifted off the ice, and the
     ground is what makes them read as lifted. */
  .pruvit-tri-card {
    background: #fff;
    border-radius: var(--r-md);
    padding: 32px 28px 34px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    color: #16203a;
  }

  .pruvit-tri-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    margin-block-end: 20px;
  }

  .pruvit-tri-card__icon svg {
    width: 26px;
    height: 26px;
  }

  .pruvit-tri-card--ink .pruvit-tri-card__icon {
    background: rgba(22, 32, 58, 0.09);
    color: #16203a;
  }

  .pruvit-tri-card--warm .pruvit-tri-card__icon {
    background: rgba(217, 138, 99, 0.18);
    color: #b4653c;
  }

  .pruvit-tri-card--accent .pruvit-tri-card__icon {
    background: rgb(var(--accent-1-rgb) / 0.26);
    color: var(--accent-1-ink);
  }

  .pruvit-tri-card__heading {
    font-family: var(--font-heading--family);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 16px;
  }

  .pruvit-tri-card__list {
    list-style: none;
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
  }

  .pruvit-tri-card__list li {
    display: flex;
    gap: 11px;
    font-size: 15px;
    line-height: 1.45;
    color: rgb(22 32 58 / 0.72);
  }

  .pruvit-tri-card__tick {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--ice);
    color: #16203a;
    display: grid;
    place-items: center;
    flex: none;
    margin-block-start: 2px;
  }

  .pruvit-tri-card__tick svg {
    width: 10px;
    height: 10px;
  }

  .pruvit-explainer {
    margin-block-start: 44px;
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    background: #16203a;
    box-shadow: var(--shadow-md);
    aspect-ratio: 16 / 9;
  }

  @media screen and (max-width: 900px) {
    .pruvit-tri {
      grid-template-columns: 1fr;
    }
  }
/* END_BLOCK:pruvit-tri */

/* START_BLOCK:pruvit-variant-sync (INDEX:188) */
.pruvit-variant-sync {
    display: contents;
  }
/* END_BLOCK:pruvit-variant-sync */

/* START_BLOCK:review (INDEX:190) */
.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:192) */
.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:193) */
/* 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:194) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:197) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:198) */
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:199) */
.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:200) */
/* 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:202) */
.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:203) */
.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:204) */
.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:209) */
.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:210) */
.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:211) */
.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:212) */
.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:213) */
.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: calc(100dvh - max(var(--padding-2xl), var(--safe-area-inset-top)));
      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 {
      padding-block-end: calc(var(--padding-2xl) + var(--safe-area-inset-bottom));
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer (INDEX:214) */
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;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:215) */
.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:216) */
.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[type='number'] {
      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:217) */
.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);
  }

  .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:218) */
.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:219) */
/* 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:220) */
.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:222) */
.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:223) */
/* ------------------------------------------------------------------------------ */

  /* 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:226) */
.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:227) */
.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:228) */
.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;

      /* Fullscreen dialog spans the physical viewport (viewport-fit=cover); keep its
         content clear of the status bar, notch, and home indicator */
      padding: max(var(--padding-md), var(--safe-area-inset-top)) max(var(--padding-md), var(--safe-area-inset-right))
        max(var(--padding-md), var(--safe-area-inset-bottom)) max(var(--padding-md), var(--safe-area-inset-left));
    }
  }

  .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:229) */
.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:230) */
.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:231) */
.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:232) */
.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:233) */
/* 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:234) */
/* 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:239) */
.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:grid-density-controls (INDEX:241) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

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

  .column-options__option {
    display: flex;
    position: relative;
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-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:242) */
.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:243) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-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: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .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 {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-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: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:244) */
.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;

    /* Left-anchored drawer spans the full physical viewport (viewport-fit=cover); keep its
       content clear of the status bar, left-side notch, and home indicator. Subtract the
       designed menu gutter so link text aligns with the page / hamburger, not inset twice. */
    padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom)
      max(0px, calc(var(--safe-area-inset-left) - var(--drawer-padding)));
    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-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

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

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

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

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  /* 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-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;

    /* Submenus are absolutely positioned so they bypass the drawer's safe-area padding;
       apply the same insets directly */
    padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom)
      max(0px, calc(var(--safe-area-inset-left) - var(--drawer-padding)));
    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:250) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:253) */
.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:254) */
/* 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:259) */
.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:264) */
.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:265) */
.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:266) */
.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:267) */
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:268) */
/* 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:272) */
/* 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:273) */
/* 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:274) */
.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:276) */
.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:277) */
.product-grid-view-zoom-out--details {
    display: none;
  }

  @media screen and (min-width: 750px) {
    ul[product-grid-view='zoom-out'] .product-grid-view-zoom-out--details {
      font-size: var(--font-size--xs);
      font-family: var(--font-paragraph--family);
      font-weight: 400;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 3;
    }
  }
/* END_SNIPPET:product-card-gallery-zoom-details-styles */

/* START_SNIPPET:product-card-styles (INDEX:278) */
.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 cards are narrow, so group content stacks on mobile. A group that
    turns "vertical on mobile" off renders without .mobile-column and keeps the
    horizontal direction it was given.
  */
  .product-grid__card .group-block > :is(.mobile-column, :not(.layout-panel-flex--row)) {
    @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:280) */
/* 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;
    }
  }

  [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-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:281) */
.product-information {
    gap: var(--gap) 0;
  }

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

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

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

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

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

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 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);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-container-styles (INDEX:282) */
: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:283) */
/* 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:284) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);

    /* Container touches the physical viewport edges (viewport-fit=cover); keep the
       thumbnails clear of the home indicator and side notch */
    padding-block-end: var(--safe-area-inset-bottom);
    padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
  }

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

      /* Keep the right-anchored thumbnail rail clear of the right-side notch (viewport-fit=cover) */
      right: var(--safe-area-inset-right);
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --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 was 0 / var(--padding-md), which positioned a bare glyph
       when these arrows had no shape behind them. Inside a circle it just
       pushed the arrow off centre — measured 18px of room on the left against
       6px on the right. Zero, and the flex centring in slideshow-arrow does
       the work. */
    padding-inline: 0;
    opacity: 1;

    /* White rather than the primary button's navy. A 44px navy disc on a
       product photograph reads as the loudest thing on the page, which an
       arrow should not be. The shadow is what separates it from a pale image
       now that the fill no longer does. */
    background-color: #fff;
    color: #16203a;
    box-shadow: 0 2px 10px -2px rgb(14 20 32 / 0.22);
  }

  /* Off the edge. They sat flush against the media box, which left them half
     on the photograph and half on the page. */
  .media-gallery--carousel slideshow-arrows {
    padding-inline: 14px;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-recommendations-styles (INDEX:286) */
.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:pruvit-minimal-footer (INDEX:306) */
/* In front of the page's decoration, not behind it.
     ---------------------------------------------------------------------
     The gate's veil is absolutely positioned and now bleeds past the gate so
     the ground runs continuously. A positioned element paints above a static
     one regardless of source order, so the veil — three blurred fields at 50%
     opacity — was landing on top of these links and washing them out. Craig
     read it, correctly, as the footer sitting behind the background.

     position + z-index puts it back in front. Any page whose decoration is
     positioned would have done the same thing, so this belongs on the footer
     rather than on the gate. */
  .pruvit-mfoot {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px var(--page-margin, 24px) 44px;
    text-align: center;
    background: transparent;
    color: inherit;
  }

  .pruvit-mfoot__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
  }

  /* Full ink, not --slate.
     Craig, 2026-09-23. The dark footer mutes these to 55% and this copied it,
     which reads as quiet down there against a navy ground and read as greyed
     out up here against cream. They are links to the terms someone is about to
     agree to; the copyright beside them is the line that has nothing to do.
     That is the hierarchy now — the links carry the page's ink and the
     copyright keeps the muted tone. */
  .pruvit-mfoot__links a {
    font-size: 13px;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    /* The underline still starts quiet, so hover has something to do now that
       the colour cannot change. */
    text-decoration-color: color-mix(in srgb, currentColor 34%, transparent);
  }

  .pruvit-mfoot__links a:hover {
    text-decoration-color: currentColor;
  }

  /* The same pill as the dark footer's, drawn in ink rather than in white. */
  .pruvit-mfoot__pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, currentColor 18%, transparent);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
  }

  .pruvit-mfoot__pill:hover {
    border-color: color-mix(in srgb, currentColor 40%, transparent);
    background: color-mix(in srgb, currentColor 5%, transparent);
  }

  .pruvit-mfoot__c {
    margin: 0;
    font-size: 12.5px;
    color: var(--slate);
  }
/* END_SNIPPET:pruvit-minimal-footer */

/* START_SNIPPET:pruvit-minimal-header (INDEX:307) */
/* The page's ground, on the page.
     ---------------------------------------------------------------------
     Both minimal pages put their content on cream — the gate paints it
     itself, and the Create account template sets #f7f5f0 on its one section —
     while the body underneath stays white. Everything outside those blocks
     therefore sat on a different colour: a strip under the header, and a band
     under the footer that read as a background block of its own.

     One colour on the body fixes both ends of both pages. It is the same
     --cream both of them use, so this is not a third opinion about what
     colour the page is; if a future minimal page wants a different ground,
     this is the line that has to learn about it. */
  body.pruvit-minimal {
    background: var(--cream, #f7f5f0);
  }

  /* In the flow, but taking up no room.
     ---------------------------------------------------------------------
     Two things had to be true at once and the first two attempts each got one.

     Left in the flow normally, it reserved a 66px strip at the top belonging
     to neither it nor the page: the header is transparent by design, so
     whatever sat behind that strip showed through, and on both the gate and
     the Create account page it rendered as a dark band with the wordmark
     invisible in it.

     Positioned absolutely, the strip went — but this theme scrolls
     .page-wrapper rather than the document, and an absolute box resolved
     against the initial containing block does not move when an inner
     scroller does. It behaved like a fixed bar and ran over the form.

     So: in the flow, and pulled back out of it with a negative bottom margin
     equal to its own height. It scrolls with the page because it is part of
     it, and the content below starts at the very top and paints its own
     ground edge to edge underneath. The same trick .pruvit-under-chrome uses
     for a band that has to rise under the real header. */
  .pruvit-mhead {
    position: relative;
    z-index: 2;
    margin-block-end: calc(var(--pruvit-gnav-h, 66px) * -1);
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-height and flex: none, not height.
       .page-wrapper is a flex column, so this is a flex item and `height`
       loses to flex sizing — measured, it collapsed to 30px, the height of
       the wordmark inside it, while the negative margin below still pulled a
       full 66px. The content came up 36px too far as a result. */
    flex: none;
    min-height: var(--pruvit-gnav-h, 66px);
    padding-inline: var(--page-margin, 24px);
    background: transparent;
  }

  .pruvit-mhead__logo {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
  }

  /* Height and aspect-ratio, never an explicit width. The wordmark is
     227.42 x 71.44 — 3.18:1 — and the first version here set 118x26, which is
     4.5:1: a box half again wider than the mark it holds, with the mask
     centred in it and the rest of the box doing nothing. Same numbers as the
     real header, so the two marks are the same size on the same page. */
  .pruvit-mhead__mark {
    display: block;
    height: 30px;
    aspect-ratio: 227.42 / 71.44;
    background: currentColor;
    -webkit-mask: var(--pruvit-logo) center / contain no-repeat;
    mask: var(--pruvit-logo) center / contain no-repeat;
  }

  @media screen and (max-width: 420px) {
    .pruvit-mhead__mark {
      height: 26px;
    }
  }
/* END_SNIPPET:pruvit-minimal-header */

/* START_SNIPPET:pruvit-quick-add-disc (INDEX:316) */
/* Same gate as the collection grid's disc: width as well as hover, so a
     narrowed desktop window shows what a handset shows. */
  @media screen and (max-width: 900px), (hover: none) {
    /* Two classes, because Horizon writes `button.quick-add__button` — one
       class and one element. A bare `.quick-add__button` here would lose on
       specificity and every declaration below would silently do nothing,
       which is a hard thing to notice when the symptom is "no change". */
    .quick-add .quick-add__button {
      /* Horizon's scale hook. Width, height and the icon well all derive from
         it, so one number resizes the button instead of three rules. 46 rather
         than Horizon's 36 because on a phone this is the entire tap target and
         36 is under the floor. */
      --button-size-md: 46px;

      /* Horizon's theming hooks, so where it does paint the fill itself only
         the colour changes and its padding-box gradient is left alone. */
      --quick-add-background: #16203a;
      --quick-add-foreground: #fff;

      background: var(--quick-add-background) padding-box;
      color: var(--quick-add-foreground);

      /* The navy is the edge now. A 2px translucent black border on top of it
         reads as a smudge, and blurring what sits behind an opaque fill buys
         nothing and costs a compositor pass per card. */
      border: none;
      backdrop-filter: none;

      /* Everything from here down is restated rather than inherited, and it is
         all one reason: Horizon scopes its quick-add rules to
         `button.quick-add__button` — a class AND an element — and a product it
         cannot quick-add gets a "View product" <a> carrying the same three
         classes. The anchor therefore matches none of it.

         While the control was display: none that cost nothing. Making it
         visible exposed it three times over, each found by measuring the 404
         list again: first as a 166px pill flush to the card edge (no size,
         position or radius), then as a white icon on a transparent circle (no
         fill), then as an icon 5px off centre with a 20px icon well instead of
         42px (no gap: 0, no --quick-add-icon-width). Hence: if Horizon sets it
         inside that selector and the disc needs it, it is set here. */
      position: absolute;
      inset-inline-end: var(--quick-add-inset-inline-end);
      inset-block-end: var(--quick-add-inset-block-end);
      width: var(--button-size-md);
      height: var(--button-size-md);
      --quick-add-icon-width: calc(var(--button-size-md) - 4px);
      padding: 0;
      gap: 0;
      border-radius: 50%;
      overflow: hidden;
      /* .quick-add is pointer-events: none so it does not cover the card's
         own link, and Horizon puts the `all` back on the button. Without it
         here the anchor was a disc you could see and could not press. */
      pointer-events: all;

      /* The label is a bare text node sitting directly in the button, with no
         element around it to hide. It is a flex item all the same, so with the
         icon it makes a row wider than 46px — and centring that row put the
         icon at -21px, outside the disc and clipped, leaving a navy circle
         with a word in it. Which is what Horizon's flex-start was avoiding.

         font-size: 0 takes the text out of the layout without taking it out
         of the accessibility tree, so the icon can be genuinely centred and
         the button still announces itself as "Add" or "View product". Safe for
         the icons because every one of them is sized in px, not em. */
      font-size: 0;
      justify-content: center;
      align-items: center;
    }

    /* Disabled means sold out here, and Horizon drops it to a muted opacity
       that a solid navy disc wears badly — it reads as a disc that failed to
       load rather than one you cannot press. Same muting the collection's
       sold-out pill uses, applied to the fill instead of the whole button. */
    .quick-add .quick-add__button:disabled {
      --quick-add-background: rgb(var(--color-foreground-rgb) / 0.06);
      --quick-add-foreground: var(--slate);

      opacity: 1;
    }
  }

  /* And on a pointer, the same again in Horizon's own clothes.

     The exact complement of the query above — min-width 901 AND hover — so the
     two never both apply and neither has to out-specify the other.

     Everything here is Horizon's own value for its own button, restated for the
     anchor because its selector will not reach one. That is duplication and it
     is deliberate: the alternative is a "View product" card that looks and
     behaves unlike every card beside it. Measured before this existed: a
     177x36 navy pill, permanently visible over the image where its neighbours
     show nothing until hover, and pointer-events: none, so it was a call to
     action that could not be actioned. */
  @media screen and (min-width: 901px) and (hover: hover) {
    a.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;

      position: absolute;
      inset-inline-end: var(--quick-add-inset-inline-end);
      inset-block-end: var(--quick-add-inset-block-end);
      width: var(--quick-add-collapsed-width);
      height: var(--button-size-md);
      max-inline-size: calc(100% - var(--quick-add-inset-inline-end));
      min-inline-size: 0;
      padding: 0;
      gap: 0;
      border: 2px solid hsl(0 0% 0% / 0.15);
      border-radius: 50px;
      background: linear-gradient(var(--quick-add-background, var(--color-background)) 0 100%) padding-box;
      color: var(--quick-add-foreground, var(--color-foreground));
      justify-content: flex-start;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      backdrop-filter: blur(20px) saturate(180%);
      pointer-events: all;
      /* Lets the width animate to max-content on hover, which is what Horizon
         is relying on for the label reveal. */
      interpolate-size: allow-keywords;
      opacity: 0;
    }

    product-card:is(:hover, :focus-within) a.quick-add__button {
      opacity: 1;
    }

    /* Widens to show the label, the way the Add and Choose buttons do. */
    a.quick-add__button:is(:hover, :focus-visible) {
      width: var(--quick-add-expanded-width);
      padding-inline-end: var(--padding-sm);
    }

    @media (prefers-reduced-motion: no-preference) {
      a.quick-add__button {
        transition-property: opacity, width;
        transition-duration: var(--animation-speed);
        transition-timing-function: var(--ease-out-cubic);
      }
    }
  }
/* END_SNIPPET:pruvit-quick-add-disc */

/* START_SNIPPET:quantity-selector-styles (INDEX:325) */
/* 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;
    width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
    min-width: 3ch;
    padding-inline: 0;
    text-align: center;
    border: none;
    appearance: none;
    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:326) */
.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:327) */
#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;

      /* Bottom sheet touches the physical bottom edge (viewport-fit=cover); keep the
         buy buttons above the home indicator while the background fills the safe area */
      padding-block-end: var(--safe-area-inset-bottom);
    }
  }

  .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:329) */
/* 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:332) */
.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:333) */
.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:334) */
.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:335) */
.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;
      }
    }
  }

  /*
   * Grid tracks floor at their items' min-content width, so a card whose child
   * sets an aspect-ratio can push its item wider than its track and make the
   * whole grid overflow the page.
   */
  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-modal (INDEX:338) */
/* 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:339) */
.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:340) */
.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:342) */
.skip-to-content-link {
    position: absolute;
    inset-inline-start: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    inset-inline-start: 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:344) */
.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:345) */
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:346) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* 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:348) */
/*
   * 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);

    /* Prevents the sliding-in arrows from overflowing and flashing a horizontal scrollbar */
    overflow-x: clip;
  }

  /*
   * 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 .slide__content {
    position: static;
  }

  /*
   * The media container has to leave the absolute positioning used by the on-media layout so it
   * occupies its own grid row, but it must stay a positioned ancestor. Its absolutely positioned
   * children (the video poster and the media overlay) would otherwise resolve against
   * slideshow-slide and stretch across the content row as well.
   */
  .slideshow--content-below-media slideshow-slide .slide__image-container {
    position: relative;
  }

  .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:350) */
.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:356) */
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:357) */
/* 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:360) */
.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:361) */
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:362) */
: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:364) */
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;

    /* Right-anchored drawer spans the full physical viewport (viewport-fit=cover); keep its
       content clear of the status bar, right-side notch, and home indicator */
    padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) 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:377) */
/* 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;
  }

  .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:378) */
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:379) */
.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:380) */
.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:383) */
.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 */