/** Shopify CDN: Minification failed

Line 824:2 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-links (INDEX:3) */
collection-links-component {
    --alignment: flex-start;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .utilities > * {
    text-align: center;

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

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

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

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

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

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

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

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

/* START_SECTION:footer (INDEX:11) */
.footer-content {
    contain: content;
    content-visibility: auto;
    contain-intrinsic-size: auto 953px;
    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 {
      contain-intrinsic-size: auto 725px;
      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 {
      contain-intrinsic-size: auto 725px;
      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: 799px) {
    #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: 799px) {
    #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__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:is(:hover, [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:is(:hover, [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:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    position: relative;

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

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--border-bottom-color, var(--color-border));
  }

  @media screen and (max-width: 798px) {
    .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: 799px) {
      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: 798px) {
      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: 799px) {
        --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: 798px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

  /**
   * The Grove: uniform 3-up grid matching viacitrus.com/blogs/the-grove.
   * Breakpoint is 798/799, not Heritage's 749/750 -- live's real container formula
   * (calc(100% - 40px), a flat 20px gutter each side) was confirmed via Playwright to hold
   * uniformly from 320px up to 798px (swept 798/700/600/500/481/480/400/375/320, every one
   * exactly viewport-40), only switching to the wide min(1200px, 100% - 80px) formula at
   * 799px+. Was gated at 750/749, so 750-798px wrongly got the wide desktop formula.
   *
   * --page-margin also needs overriding here, not just --page-content-width: base.css's
   * .section sets --full-page-grid-central-column-width: min(--page-content-width,
   * calc(100% - --page-margin * 2)) -- and --page-margin is inherited from an ANCESTOR
   * (.page-width-normal on .page-wrapper), native-gated at Heritage's own 750px breakpoint
   * (16px below, 40px at/above). At 750-798px that stale 40px made the second min() term
   * (100% - 80px) narrower than our own --page-content-width override, silently winning the
   * min() and undoing the fix above. Confirmed via getComputedStyle before finding this.
   */
  @media screen and (min-width: 799px) {
    .blog-posts.vc-grove {
      --page-content-width: min(1180px, 100% - 80px);
    }
  }

  @media screen and (max-width: 798px) {
    .blog-posts.vc-grove {
      --page-content-width: calc(100% - 40px);
      --page-margin: 20px;
    }
  }

  /**
   * The Grove: full-bleed banner image, inset 20px from the viewport edge
   * on each side (matches live's .image-with-text-overlay__banner).
   */
  [id^="shopify-section-"][id$="__banner"] .image-block {
    padding-inline: 20px;
  }

  /* Real bug, fixed 2026-08-10: Heritage's generic section layout can reserve top space inside
     the banner wrapper. The Grove banner is a plain image directly under the header on live, so
     any wrapper padding becomes a visible white gap before the image. Keep this scoped to the
     blog.json banner section. */
  [id^="shopify-section-"][id$="__banner"] .section-content-wrapper {
    padding-block-start: 0 !important;
    margin-top: 0 !important;
  }

  /* Real bug, fixed 2026-08-06: base.css has an UNSCOPED, sitewide rule --
     `.spacing-style.layout-panel-flex.layout-panel-flex--column.section-content-wrapper
     .mobile-column { padding-block-start: 84px; margin-top: 21px; }` (~line 2369) -- a stray
     hardcoded value that leaked into the native file during an earlier debugging pass (see the
     homepage's Citrus in Life section, via-citrus-homepage.liquid, which already documents and
     works around the same leak). This banner is a plain full-bleed image with no text block, so
     the 105px of reserved space (meant for a title/subtitle stacking above an image on mobile)
     was just a blank gap between the header and the image -- live has none. The all-viewport
     override above is the current source of truth. */

  .vc-grove-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
  }

  .vc-grove-header .text-block {
    margin: 0;
  }

  .vc-grove-header .text-block,
  .vc-grove-header .text-block > * {
    font-weight: 600 !important;
    color: #003d29 !important;
    line-height: 1.125 !important;
  }

  .vc-grove-filter select {
    appearance: none;
    width: 173px;
    padding: 5px 40px 5px 9px;
    border: 1px solid #dfe8e3;
    border-radius: 0;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23003D29' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    color: #363636;
  }

  /* Real bug, found while checking the Featured In filter: base styling already matched live, but
     hover/focus had no dedicated treatment at all, so the browser's own default (a plain black
     outline) showed instead. Live is a standard Bulma `.select`: border darkens on hover, and
     focus swaps in an orange border + soft glow ring instead of any outline (confirmed via real
     Playwright pointer hover + a genuine .focus() call against viacitrus.com, not synthetic
     events -- see the search-button fix earlier this session for why that distinction matters).
     Shared by the Featured In filter too (`.vc-fi-filter select` below) -- confirmed identical on
     both live pages before applying to both. */
  .vc-grove-filter select:hover {
    border-color: #b5b5b5;
  }

  .vc-grove-filter select:focus {
    outline: none;
    border-color: #eb8935;
    box-shadow: 0 0 0 2px rgba(235, 137, 53, 0.25);
  }

  .vc-grove-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
  }

  .vc-grove-grid__item {
    display: flex;
  }

  .vc-grove-grid__item > * {
    width: 100%;
  }

  /**
   * The Grove: live's real breakpoints (old theme's Bulma `medium-down--one-half`/
   * `small-down--one-whole` on the post grid, `medium-down--one-whole` on the title/filter
   * row) are 798px and 480px, NOT Heritage's own 749/750 -- confirmed via Playwright against
   * live at 798/799/480/481px (see the project's recurring 749-vs-798/799 breakpoint gotcha).
   * 799px+: 3 columns, title/filter side by side (unchanged, matches live).
   * 481-798px: 2 columns, title/filter stacked full-width.
   * <=480px: 1 column, title/filter stacked full-width.
   * Live stacks the title/filter row at the SAME 798px cutoff as the 3->2 column change (no
   * separate stacking breakpoint at 480 -- confirmed identical stacked/full-width layout at
   * both 798px and 480px live measurements), and the stacked header-to-grid gap is a flat 20px
   * at every width <=798px (live-measured at both 798px and 480px), not the desktop-only 40px.
   */
  @media screen and (max-width: 798px) {
    .vc-grove-header {
      flex-direction: column;
      align-items: stretch;
      margin-bottom: 20px;
    }

    /**
     * minmax(0, 1fr), not a bare 1fr: bare 1fr's implicit auto-minimum let a card's own
     * min-content (image/title) blow the two columns out to uneven widths (measured
     * 250.5px/244px instead of an even split) once the container got narrow enough that
     * content no longer trivially fit -- same 1fr-implicit-minimum gotcha already fixed for
     * the Featured In grid elsewhere in this file. min-width: 0 on the item is the other half
     * of that same fix.
     */
    .vc-grove-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vc-grove-grid__item {
      min-width: 0;
    }
  }

  /**
   * Live-measured (Playwright) via #blog_filter directly, not just its Bulma column wrapper:
   * the wrapper column IS full-width for the whole <=798px stacked-header range (see above),
   * but the visible <select> itself only actually stretches to fill it at <=480px -- from
   * 481-798px live's real select stays the SAME fixed 173px as desktop, just left-aligned
   * inside the now-full-width wrapper (Bulma's `.select` is inline-block/content-sized unless
   * given `.is-fullwidth`, which old theme's markup here doesn't have). Confirmed at every one
   * of 798/700/600/500/481px (fixed 173px) vs 480/400/375/320px (== container width exactly).
   */
  @media screen and (max-width: 480px) {
    .vc-grove-filter select {
      width: 100%;
    }

    .vc-grove-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .vc-grove-grid__item {
      width: calc(100% - 20px);
    }
  }

  /**
   * Featured In: matches viacitrus.com/blogs/featured-in -- 2-up card grid with a
   * right sidebar (search / tag cloud / "From the Grove" recent posts / subscribe),
   * live-measured via Playwright (old theme's blog__main.liquid + sidebar blocks).
   *
   * Real bug, found while checking the filter row's width at 800px: unlike Grove (which really
   * does have two tiers -- see that section's own --page-content-width comment), this page's
   * container is ONE flat formula, min(1200px, 100% - 40px), a uniform 20px margin at every
   * width from ~798px up through the 1200px cap. Confirmed via a live sweep of the real
   * `.container` element from 798px to 1572px -- every single point matched viewport-40 (or the
   * 1200px cap above ~1240px), no discontinuity anywhere. The old two-tier version (a 40px-margin
   * `min(1200,100%-80)` copied from Grove's own different formula) made the container ~40px too
   * narrow across the whole 750-1240px range, which was the real reason the filter row was
   * wrapping under the title well before it does on live -- not just the stacking-breakpoint bug
   * above. `--page-margin` needs the matching override for the same reason as Grove: base.css's
   * .section formula is min(--page-content-width, 100% - --page-margin*2), and --page-margin
   * inherits from an ancestor gated at Heritage's own 750px default (40px there) -- left alone,
   * it silently wins that min() and undoes this fix. No media query needed at all here, since
   * there's only the one formula.
   */
  .blog-posts.vc-fi {
    --page-content-width: min(1200px, 100% - 40px);
    --page-margin: 20px;
  }

  .vc-fi-layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
  }

  .vc-fi-main {
    flex: 1;
    min-width: 0;
  }

  vc-featured-in {
    display: contents;
  }

  .vc-fi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
  }

  .vc-fi-header .text-block {
    margin: 0;
  }

  .vc-fi-header .text-block,
  .vc-fi-header .text-block > * {
    font-weight: 600 !important;
    color: #003d29 !important;
    line-height: 1.125 !important;
  }

  .vc-fi-filter select {
    appearance: none;
    width: 220px;
    padding: 5px 40px 5px 9px;
    border: 1px solid #dfe8e3;
    border-radius: 0;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23003D29' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    color: #363636;
  }

  /* Same missing hover/focus treatment as .vc-grove-filter select above -- see that rule's
     comment for the full root cause, confirmed identical on both live pages. */
  .vc-fi-filter select:hover {
    border-color: #b5b5b5;
  }

  .vc-fi-filter select:focus {
    outline: none;
    border-color: #eb8935;
    box-shadow: 0 0 0 2px rgba(235, 137, 53, 0.25);
  }

  .vc-fi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
  }

  .vc-fi-grid__item {
    display: flex;
    min-width: 0;
  }

  .vc-fi-grid__item > * {
    width: 100%;
  }

  /* Reuses this project's already-established primary-button look (dark green pill, matching
     e.g. vc-care-hero.liquid's .vc-care-hero__button) -- old theme's real "Load more" is its own
     shared .button.button--primary component, same visual language sitewide. */
  .vc-fi-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    margin: 40px auto 0;
    padding: 20px 35px;
    background-color: #003d29;
    color: #ffffff;
    border-radius: 31px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
  }

  .vc-fi-sentinel:hover {
    background-color: #e36e1e;
  }

  .vc-fi-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #eb8935;
    border-radius: 50%;
    animation: vc-fi-spin 0.7s linear infinite;
  }

  .vc-fi-sentinel--loading .vc-fi-sentinel__label {
    display: none;
  }

  .vc-fi-sentinel--loading .vc-fi-spinner {
    display: block;
  }

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

  /* Real bug, found while checking the filter: this whole block was gated at Heritage's own
     749/750px default instead of old theme's real breakpoint -- confirmed via a live sweep
     (798px vs 800px) that the sidebar/header genuinely stack at 798px, not 749, matching the same
     medium-down--one-whole Bulma class already root-caused for Grove's own tablet pass (see the
     dedicated 749-vs-798/799 gotcha). This left a 750-798px band where live had already stacked
     everything but this build still rendered the desktop side-by-side layout. `.vc-fi-header` was
     also relying on natural `flex-wrap` (content-dependent) rather than a forced stack -- same
     "wrap only when content overflows" bug already found for Grove's own header, and the two
     breakpoints don't necessarily coincide since this column's width is a fraction of the
     viewport (sidebar present), not a 1:1 match. Forced with `flex-direction:column` instead. */
  @media screen and (max-width: 798px) {
    .vc-fi-layout {
      flex-direction: column;
      gap: 40px;
    }

    .vc-fi-main {
      flex-basis: auto;
    }

    .vc-fi-header {
      flex-direction: column;
      align-items: stretch;
      margin-bottom: 24px;
    }
  }

  /* Real bug: the filter select and the 2-column post grid both stay unchanged all the way down
     to 481px on live (sweep-confirmed: select stays a fixed 220px, grid stays 2 columns, from
     799px down to 481px) -- only old theme's small-down--one-whole class (max-width:480px) makes
     either one actually change, same 480/481 pattern already fixed for Grove's own filter select.
     The old 749px rule forced both to full-width/1-column ~270px too early. */
  @media screen and (max-width: 480px) {
    .vc-fi-filter select {
      width: 100%;
    }

    .vc-fi-grid {
      grid-template-columns: 1fr;
    }
  }
/* 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;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button.add-to-cart-button {
      width: calc(var(--button-size-md) - 8px);
      position: relative;
      padding-block: 0;
      padding-inline-end: var(--padding-sm);
      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);
      }

      &: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;
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:31) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

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

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-paragraph--line-height);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

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

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:quick-order-list (INDEX:34) */
.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:39) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* START_SECTION:vc-about-farm (INDEX:40) */
.vc-about-farm {
    margin-bottom: -220px;
    position: relative;
  }

  @media (max-width: 799px) {
    .vc-about-farm {
      margin-bottom: -80px;
    }
  }

  .vc-about-farm__main {
    background-image: var(--vc-about-farm-bg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 1686px;
    padding: 145px 0 300px;
    position: relative;
  }

  .vc-about-farm__main::after {
    content: '';
    position: absolute;
    width: 100%;
    max-width: 1686px;
    height: 250px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-image: var(--vc-about-farm-curve);
    background-repeat: no-repeat;
    background-size: 2850px;
    background-position: top;
  }

  .vc-about-farm__wrap {
    position: relative;
    text-align: center;
    max-width: 1236px;
    margin-inline: auto;
  }

  .vc-about-farm__heading {
    font-family: var(--font-heading--family);
    font-size: 60px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2.57px;
    text-align: center;
    margin: 0 0 32px;
    color: #003d29;
  }

  .vc-about-farm__details,
  .vc-about-farm__details p {
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    color: #003d29;
  }

  .vc-about-farm__details {
    max-width: 1030px;
    margin: 0 auto 32px;
    padding: 0 30px;
  }

  .vc-about-farm__image {
    margin-bottom: 32px;
  }

  .vc-about-farm__image img {
    display: block;
    width: 100%;
    max-width: 830px;
    aspect-ratio: 830 / 317;
    object-fit: cover;
    border-radius: 160px;
    margin-inline: auto;
  }

  .vc-about-farm__left-confetti,
  .vc-about-farm__right-confetti {
    /* Both confetti markers position absolute against .vc-about-farm__wrap (max-width:1236,
       centered) -- matching old theme's real DOM, where both .left-top-img and .right-top-img
       are inside .browse-main-wrap, itself capped by its .section ancestor. Left-confetti used
       to be a sibling of .wrap directly under the full-bleed .main, so left:0 resolved against
       the viewport instead of the content box -- correct up to ~1236px, but spilled out toward
       the far-left edge of the screen at wide desktop widths (confirmed via live: left confetti
       sits flush with the CONTENT box's left edge at 2560px, not the viewport edge). */
    position: absolute;
  }

  .vc-about-farm__left-confetti {
    left: 0;
    top: 45%;
  }

  .vc-about-farm__right-confetti {
    right: 0;
    bottom: 20%;
  }

  .vc-about-farm__button {
    /* Live measures a flat 60px tall (20px padding-block each side + 20px line content).
       line-height:1 undershot it (56px, 16px line content); this component's font default ratio
       overshoots it (65.6px) -- pinned to an explicit 20px to hit live's real number exactly. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #eb8935;
    border-radius: 31px;
    padding: 20px 35px;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 20px;
    text-decoration: none;
    width: max-content;
  }

  .vc-about-farm__button:hover {
    background-color: #e36e1e;
  }

  @media (min-width: 1024px) {
    .vc-about-farm__main {
      padding-inline: 50px;
    }
  }

  @media (max-width: 1023px) {
    .vc-about-farm__left-confetti {
      max-width: 90px;
      top: 50%;
      left: 0;
    }

    .vc-about-farm__right-confetti {
      max-width: 60px;
      bottom: 10%;
      right: 0;
    }
  }

  @media (max-width: 799px) {
    .vc-about-farm__main {
      text-align: center;
      padding: 80px 0 150px;
    }

    .vc-about-farm__main::after {
      height: 120px;
    }

    .vc-about-farm__left-confetti {
      max-width: 60px;
      top: 13%;
    }

    .vc-about-farm__right-confetti {
      top: 27%;
      bottom: auto;
    }

    .vc-about-farm__heading {
      font-size: 40px;
    }

    .vc-about-farm__details,
    .vc-about-farm__details p {
      font-size: 16px;
    }

    /* Live-verified via Playwright (getComputedStyle at 390px): old theme's .browse-details
       zeroes its own inline padding on mobile (about-oval.liquid), relying on the ambient
       .section 20px inset instead. This build's .vc-about-farm__wrap already adds its own
       20px padding-inline at this breakpoint, so the unconditional 30px declared above was
       double-stacking to 50px total inset -- zeroing it here matches live's real 20px. */
    .vc-about-farm__details {
      padding: 0;
    }

    .vc-about-farm__wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-inline: 20px;
    }

    .vc-about-farm__heading {
      order: -2;
    }

    .vc-about-farm__image {
      order: -1;
      /* align-items:center on the flex column above shrinks this to the img's own fit-content
         size instead of the column's full width -- stretch it so width:100% on the img (below)
         has a definite container to resolve against, matching live's fuller image width. */
      width: 100%;
    }
  }
/* END_SECTION:vc-about-farm */

/* START_SECTION:vc-about-featured-product (INDEX:41) */
/* These vars are only ever defined by featured-product.liquid's own stylesheet, which
     doesn't load on this page (stylesheets are tied to section TYPE, not matching class
     names) -- re-declared here verbatim, or the gallery computes width:0. */
  .vc-about-featured-product {
    --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) {
    .vc-about-featured-product {
      --viewport-offset: 300px;
    }

    .vc-about-featured-product .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;
    }
  }

  .vc-about-featured-product .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;
    gap: 20px;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 20px;
  }

  /* Live-measured (Playwright, 799/1035/1572px): real side padding is a flat 30px at every
     desktop width, not 20 -- traced to `max-width:1240px; padding-inline:30px` matching live's
     column-width formula (min(580px, calc((min(1200px, 100% - 40px) - 40px) / 2)), same family as
     the Hero's own text-column formula) to 0.1px at all 3 widths. Mobile keeps the unscoped 20px
     above (live-verified separately at 390px: real mobile padding IS 20px, don't touch). */
  @media screen and (min-width: 799px) {
    .vc-about-featured-product .section-content-wrapper {
      grid-template-columns: 1fr 1fr;
      padding-inline: 30px;
    }

    /* Real bug: media-gallery's inner .product-media-container carries `aspect-ratio` +
       `max-height:var(--constrained-height)` (a huge, viewport-height-driven value re-declared
       above) -- during CSS Grid's intrinsic-size pass (before the 1fr tracks are resolved), this
       combination inflates the gallery's max-content CONTRIBUTION far past its fair share,
       skewing the two 1fr tracks unevenly (confirmed via computed grid-template-columns:
       518.375px/416.625px instead of an even split) even though the final rendered width looks
       plausible. min-width:0 on both grid items is the standard fix -- overrides the item's
       automatic minimum size so the 1fr tracks split purely by their fr-share, matching live's
       confirmed-equal columns (477.5px/477.5px at 1035px, 580px/580px at 1572px). */
    .vc-about-featured-product .section-content-wrapper > * {
      min-width: 0;
    }
  }

  /* Real bug: Heritage's native mobile rule `.product-details { grid-column: 2 / 3 }`
     (product-information-content.liquid) has no ancestor scoping -- it assumes
     .product-details is always inside the native .product-information__grid's own 3-track
     mobile layout. We reuse the bare .product-details class (via `content_for 'block', type:
     '_product-details'`) inside our OWN differently-structured single-column grid, which has
     no "column 2" -- the browser silently grows an implicit column to satisfy the placement,
     pushing the whole details block off-screen to the right (confirmed via computed
     grid-template-columns showing two tracks, 378px + 217px, summing past the 390px viewport,
     even with `!important` grid-template-columns overrides on the container -- item PLACEMENT
     overrides the container's own track count regardless of how many tracks are declared).
     Restoring auto placement fixes it. Breakpoint matches this section's own 799px
     grid-template-columns switch above (old theme's real cutover, confirmed live -- not
     Heritage's native 749/750). */
  @media screen and (max-width: 798px) {
    .vc-about-featured-product .product-details {
      grid-column: auto;
    }
  }

  .vc-about-featured-product .product-details > .group-block {
    padding: 0;
  }

  .vc-about-featured-product .view-product-title {
    display: none;
  }

  /* ==========================================================================
     GALLERY -- rounded image card, always-visible circular arrows, fixed-size
     thumbnails, decorative element-circles graphic. Live-verified (Playwright,
     799/1035/1572px) 2026-08-07 against old-maperce-theme's Flickity-based
     .product-gallery (custom.css.liquid): none of this existed before -- the
     gallery rendered with Heritage's native square thumbnails, hover-only
     transparent arrows, no corner rounding, and no decoration graphic.
     ========================================================================== */
  [id^="shopify-section-"][id$="__about_featured_product"] .vc-about-gallery-wrap {
    position: relative;
  }

  /* Main image: rounded top corners only -- the thumbnail strip below rounds the
     bottom corners separately (matches live's .product-gallery__main / __thumbnails
     split, which together read as one continuous rounded card). */
  [id^="shopify-section-"][id$="__about_featured_product"] slideshow-container {
    display: block;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
  }

  /* Arrows: native default is transparent, hover-revealed, flush to the column edge --
     live's real Flickity arrows (custom.css.liquid override, unconditionally visible
     regardless of the old theme's own `gallery_arrows:false` setting) are a 44px
     semi-opaque white circle, inset 10px from the IMAGE edge, always visible. Desktop
     (>=799px) only -- confirmed live-side (Playwright, 390px): live's own arrows collapse
     to 0x0/transparent on mobile (Flickity's own responsive behavior, not old theme CSS),
     so this scoping is correct, not a guess. */
  @media screen and (min-width: 799px) {
    [id^="shopify-section-"][id$="__about_featured_product"] slideshow-arrows[position='center'] {
      padding-inline: 10px;
      /* Native default (icon_shape:"none", the only variant reachable via this block's JSON
         schema) relies on mix-blend-mode:difference against the image behind it for
         visibility instead of a real background -- once a real white circle is added below,
         the inherited blend mode inverts it to a dark smudge instead of showing white.
         Cancel it (this is exactly what slideshow-arrows.liquid's own shape-circle/-square
         variants do natively). */
      mix-blend-mode: normal;
    }

    [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-control--previous,
    [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-control--next {
      opacity: 1 !important;
      background-color: rgba(255, 255, 255, 0.75) !important;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      padding: 0 !important;
      color: #333;
      /* Full manual centering for the ::before icon below -- don't rely on whatever
         box-model trick centered the native 20px svg-wrapper span (measured off-center by
         ~4px once swapped for a differently-sized replacement, see icon comment below). */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-control--previous:hover,
    [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-control--next:hover {
      background-color: #fff !important;
    }

    /* Icon: native icon-arrow.svg is a thin 2-segment STROKE chevron (20x20 viewBox,
       var(--icon-stroke-width)) -- live's actual icon is Flickity's own hardcoded default SVG,
       a solid FILLED chevron (viewBox 0 0 100 100, #333 fill, rendered ~26.39px within the
       44px circle), a visually distinct glyph. Live's exact path was extracted via Playwright
       DOM read (not redrawn by eye) and rebuilt as a CSS mask, hiding the native icon
       entirely. ONE shared mask (the right-pointing/"next" orientation) on both buttons --
       this button already carries Heritage's native .flip-x (scale:-1 1, applied to
       --previous only, confirmed in the rendered class list) which auto-mirrors it back to
       left-pointing for previous. First attempt gave --previous its own separately-mirrored
       path assuming that would avoid double-flipping -- wrong: flip-x is a transform on the
       BUTTON element, so it flips whatever the pseudo paints regardless of which path is fed
       in, and both arrows rendered pointing right. Confirmed via screenshot before fixing. */
    [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-control--previous .svg-wrapper,
    [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-control--next .svg-wrapper {
      display: none;
    }

    [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-control--previous::before,
    [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-control--next::before {
      content: '';
      display: block;
      width: 26.39px;
      height: 26.39px;
      background-color: #333333;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M4.96 46 78.32 46 51.82 22.8 57.09 16.78 95.04 50 57.09 83.22 51.82 77.2 78.32 54 4.96 54 4.96 46z'/%3E%3C/svg%3E");
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M4.96 46 78.32 46 51.82 22.8 57.09 16.78 95.04 50 57.09 83.22 51.82 77.2 78.32 54 4.96 54 4.96 46z'/%3E%3C/svg%3E");
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
    }
  }

  /* Thumbnails: live is a fixed 85x96 rectangle (NOT the aspect-ratio-square, viewport-fluid
     clamp() Heritage renders natively), 0 radius, no padding around the row, no selected-state
     outline (native default adds one -- live has none, confirmed via getComputedStyle on live:
     outline-style/border are both explicitly "none"). Gap re-verified via a fresh live
     computed-style read (Playwright): each thumbnail's own real spacing is `margin: 0 5px 0 0`
     (5px between items), not the 10px this file previously guessed -- `gap:5px` is the
     equivalent, simpler CSS translation of that same visual spacing.

     Real bug (fixed): `overflow:hidden` here (a prior pass) blocked more than the rounded-corner
     clip it was meant for -- with 7 thumbnails at 85px+5px each (625px) inside a 405.88px-wide
     row, thumbnails 5-7 were completely unreachable. `overflow:hidden` still allows JS to move
     `scrollLeft` programmatically (confirmed), but disables the actual user-facing scroll
     gestures (wheel/touch/drag) entirely -- and nothing in this theme calls scrollLeft, so those
     thumbnails were dead, inaccessible content. Live is genuine Flickity and lets you drag the
     strip to reveal the rest (confirmed live, Playwright drag test). Heritage's own native rule
     here (slideshow-controls.liquid) is already `overflow-x:scroll; scrollbar-width:none` --
     restored that instead of `hidden`, so users can reach every thumbnail via native
     touch/trackpad/click-drag scroll, just with Flickity's own scrollbar hidden to match. */
  [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-controls__thumbnails-container {
    border-radius: 0 0 10px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-controls__thumbnails-container::-webkit-scrollbar {
    display: none;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-controls__thumbnails {
    padding: 0;
    gap: 5px;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-controls__thumbnails .slideshow-control {
    width: 85px !important;
    aspect-ratio: auto !important;
    height: 96px;
    border-radius: 0;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-controls__thumbnails .slideshow-control img {
    border-radius: 0;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .slideshow-controls__thumbnails .slideshow-control[aria-selected='true'] {
    outline: none !important;
    border: none !important;
  }

  /* Decorative element-circles graphic -- entirely missing before this fix. Old theme:
     .pp-image-block{position:relative;padding-right:15%} wrapping .product-gallery, with
     .element-circles{position:absolute;top:30%;left:75%;transform:translateX(65%)} hidden
     below 800px. Reproduced verbatim (799px to match this file's own established breakpoint,
     1px off old theme's literal 800 -- imperceptible). */
  [id^="shopify-section-"][id$="__about_featured_product"] .vc-about-element-circles {
    display: none;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .vc-about-element-circles img {
    display: block;
    width: 100%;
    height: auto;
  }

  @media screen and (min-width: 799px) {
    [id^="shopify-section-"][id$="__about_featured_product"] .vc-about-gallery-wrap {
      padding-right: 15%;
      /* Grid's default align-items:stretch grows this column to match the (taller) text
         column's height -- harmless for the image/thumbnails themselves (explicitly sized),
         but the circles graphic's `top:30%` was resolving against that stretched height
         instead of the gallery's own content height, landing ~44px lower than live (live's
         equivalent, old theme's Bulma .pp-image-block, isn't grid-stretched). */
      align-self: start;
    }

    [id^="shopify-section-"][id$="__about_featured_product"] .vc-about-element-circles {
      display: block;
      position: absolute;
      top: 30%;
      left: 75%;
      width: 69px;
      transform: translateX(65%);
      z-index: 1;
    }
  }

  /* ==========================================================================
     MY GO-TO TREE -- product title/price/quantity/add-to-cart, live-verified
     (Playwright, 1572px + 390px) 2026-08-07. Native defaults render this as a
     plain body-styled title, an unstyled price, an invisible (transparent-bg)
     quantity stepper, and an outline "button-secondary" add-to-cart -- live is
     heading-styled, orange, and pill-shaped throughout.
     ========================================================================== */
  [id^="shopify-section-"][id$="__about_featured_product"] [class*="__product_title"],
  [id^="shopify-section-"][id$="__about_featured_product"] [class*="__product_title"] > * {
    font-size: 42px !important;
    font-weight: 600 !important;
    line-height: 1.125 !important;
  }

  @media screen and (max-width: 798px) {
    [id^="shopify-section-"][id$="__about_featured_product"] [class*="__product_title"],
    [id^="shopify-section-"][id$="__about_featured_product"] [class*="__product_title"] > * {
      font-size: 40px !important;
      line-height: 1.2 !important;
    }
  }

  /* Price: font_size deliberately left off the block's own JSON settings -- an arbitrary
     rem value there silently corrupts the block's clamp() (see CLAUDE.md gotcha). Sized
     here via CSS instead. show_installments flipped on in page.about.json; the Shop Pay
     messaging itself is a native shadow-DOM web component, unstylable and needing no CSS. */
  [id^="shopify-section-"][id$="__about_featured_product"] [data-block-id$="__product_price"] .price {
    font-family: "Argesta Regular", serif;
    font-size: 35px;
    font-weight: 400;
    line-height: 1;
    color: #eb8935;
  }

  /* Bullet list: live-measured padding-left:0 (old theme's bullets are custom-marked, not via
     native list indent) and margin-top:16px (this build's native default is 24px/0 respectively). */
  [id^="shopify-section-"][id$="__about_featured_product"] [class*="__product_description"] ul {
    margin-top: 16px;
  }

  /* Quantity stepper: orange pill, same pattern as the cart page (via-citrus-cart.liquid).
     border-radius/height/etc apply at every width (mobile pill looks identical to desktop,
     live-verified) -- only the WIDTH formula below is desktop-specific, see that block. */
  [id^="shopify-section-"][id$="__about_featured_product"] .quantity-selector {
    border-radius: 31px;
    overflow: hidden;
    border: none;
    height: 60px;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .quantity-minus,
  [id^="shopify-section-"][id$="__about_featured_product"] .quantity-plus {
    background-color: #eb8935 !important;
    color: #ffffff !important;
    height: 60px;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .quantity-minus[disabled] {
    background-color: #f8ba84 !important;
    color: #ffffff !important;
    opacity: 1;
  }

  /* Icon: same bug class as the gallery arrows -- native icon-minus/icon-plus.svg are thin
     1.5px-stroke line icons (14x14 viewBox), so faint against the orange fill they were nearly
     invisible at a glance (confirmed real, not literally display:none -- a tight crop showed a
     hairline). Live's real icons are bold SOLID-FILLED shapes (viewBox 0 0 100 100: minus is a
     plain <rect>, plus a cross-shaped <polygon>), rendered 24x24px -- a completely different
     visual weight. Extracted live's exact shapes via Playwright DOM read and rebuilt as CSS
     masks, same technique as the arrow-icon fix above. No mirroring concern here (unlike the
     arrows) since minus/plus are two different shapes, not one shape flipped. */
  [id^="shopify-section-"][id$="__about_featured_product"] .quantity-minus .svg-wrapper,
  [id^="shopify-section-"][id$="__about_featured_product"] .quantity-plus .svg-wrapper {
    display: none;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .quantity-minus::before,
  [id^="shopify-section-"][id$="__about_featured_product"] .quantity-plus::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .quantity-minus::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='46' width='90' height='8'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='46' width='90' height='8'/%3E%3C/svg%3E");
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .quantity-plus::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='95 46 54 46 54 5 46 5 46 46 5 46 5 54 46 54 46 95 54 95 54 54 95 54 95 46'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='95 46 54 46 54 5 46 5 46 46 5 46 5 54 46 54 46 95 54 95 54 54 95 54 95 46'/%3E%3C/svg%3E");
  }

  /* Real bug (fixed): quantity-selector-styles.liquid's own input rule is
     `max-width:calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2)` -- built
     assuming the var is always a stable LENGTH (its own default is a flat 124px). Expressing it
     as a percentage above (35%, needed so the box scales with the column instead of matching
     live at only one viewport width) breaks that assumption: the SAME `35%` text gets
     re-substituted at each usage site and resolves against a DIFFERENT containing block each
     time -- 35% of the outer wrapper for .quantity-selector's own flex-basis (correct, ~199px),
     but 35% of THAT already-shrunk 199px for the input's max-width (~70px), minus a flat 88px
     (2x44px minimum-touch-target) landing negative -- calc() clamps a negative max-width to 0,
     which collapsed the input to just its own 4px of horizontal padding. The "1" was still
     genuinely there (confirmed via .value and a zoomed screenshot), just rendered inside a
     0-width box. Fixed by overriding max-width directly against .quantity-selector's own
     (already-correct) box instead of re-deriving from the compounding percentage. */
  [id^="shopify-section-"][id$="__about_featured_product"] .quantity-selector input {
    color: #363636 !important;
    background-color: #ffffff;
    max-width: calc(100% - var(--minimum-touch-target) * 2);
  }

  /* Live is genuinely two rows: quantity alone on top, Add to Cart + Buy with Shop sharing
     the row below (confirmed live-measured -- not one inline row of three). Native CSS
     (buy-buttons-styles.liquid) already flex-wraps .product-form-buttons and excludes
     .quantity-selector-wrapper from the auto flex:1 rule -- forcing it to a full-width
     flex-basis pushes the other two onto their own wrapped line, where the native
     `flex: 1 1 185px` on each makes them split the row exactly in half (matches live's
     278px each on a 568px column, verified). */
  /* Desktop-only: live's real quantity box is a fluid 35% of the details column at every
     desktop width tested (167/477.5, 196/560, 203/580 -- all exactly 0.35). Below 799px live's
     quantity box is FULL WIDTH instead (live-verified at 798/665/600px: quantity row width
     always equals the column width, never 35%) -- this formula must not leak to mobile. */
  @media screen and (min-width: 799px) {
    [id^="shopify-section-"][id$="__about_featured_product"] .quantity-selector-wrapper {
      flex: 1 0 100%;
    }

    [id^="shopify-section-"][id$="__about_featured_product"] .quantity-selector {
      --quantity-selector-width: 35%;
      /* .quantity-selector-wrapper is itself display:flex, so this element's own native
         `flex: 1 1 var(--quantity-selector-width)` (quantity-selector-styles.liquid) makes
         it a flex-growing item -- fine at the wrapper's normal hugged width, but once the
         wrapper is forced to flex-basis:100% above (to push the two buttons onto their own
         wrapped row), flex-grow:1 stretches it to fill that entire new width. A plain
         `width` override has no effect here (flex-basis, not width, governs sizing when
         basis isn't auto) -- zero out grow instead so the explicit basis wins (basis:35% then
         resolves against the now-100%-wide wrapper, i.e. 35% of the column). */
      flex-grow: 0;
    }
  }

  /* Add to cart: native default is the light "button-secondary" outline style -- live is a
     solid orange pill with a lemons.png icon (same asset already registered for the About
     Hero button, via-citrus-about.liquid's ::before rule below supplies the image) and a
     dark-green hover. Real weight needs the literal Silka Bold face, not the generic
     var(--font-body--family) token which resolves to Silka Medium here (same double-bold
     pattern as every other button on this page/theme). */
  [id^="shopify-section-"][id$="__about_featured_product"] .add-to-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eb8935 !important;
    color: #ffffff !important;
    font-family: 'Silka Bold', sans-serif !important;
    font-weight: 700 !important;
    height: 60px;
    padding: 10px 0 !important;
    border-radius: 31px !important;
    border: 1px solid transparent;
    text-transform: capitalize;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .add-to-cart-button:hover {
    background-color: #003d29 !important;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .add-to-cart-button::before {
    content: '';
    display: inline-block;
    width: 43px;
    height: 31px;
    margin: 0 5px 0 -5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  [id^="shopify-section-"][id$="__about_featured_product"] .add-to-cart-icon {
    display: none;
  }

  /* Live never shows this (only Shop Pay is eligible on this shop) -- the native
     accelerated-checkout web component renders it locally regardless; hide to match. */
  [id^="shopify-section-"][id$="__about_featured_product"] .shopify-payment-button__more-options {
    display: none !important;
  }

  /* Mobile: live stacks title -> gallery -> price -> description -> quantity/buttons. This
     build's native block order is gallery -> details, with title/price/description/buttons
     all nested inside one details column -- same display:contents interleave already used
     for the homepage's mobile hero (see CLAUDE.md). */
  @media screen and (max-width: 798px) {
    /* .vc-about-gallery-wrap (added for the desktop-only element-circles graphic, see GALLERY
       block above) must also flatten here -- otherwise it stays a real box and `order`/
       `margin-bottom` on its child `media-gallery` below becomes inert (order only works on
       actual flex/grid items, and media-gallery stopped being one once it gained a non-contents
       parent). */
    [id^="shopify-section-"][id$="__about_featured_product"] .vc-about-gallery-wrap,
    [id^="shopify-section-"][id$="__about_featured_product"] .product-details,
    [id^="shopify-section-"][id$="__about_featured_product"] .product-details > .group-block,
    [id^="shopify-section-"][id$="__about_featured_product"] .product-details > .group-block > .group-block-content {
      display: contents;
    }

    /* .section-content-wrapper's own 60px row-gap (desktop 2-column spacing) still applies
       between every promoted grid row once display:contents fans the 5 blocks out as its
       direct children -- stacks on top of the explicit per-pair margins below, measured
       ~60-88px too much between every pair. Zeroed here; the margins are the only spacing
       now, each live-measured independently. */
    [id^="shopify-section-"][id$="__about_featured_product"] .section-content-wrapper {
      gap: 0;
    }

    [id^="shopify-section-"][id$="__about_featured_product"] [class*="__product_title"] {
      order: 1;
      margin-bottom: 20px;
    }

    /* Real bug (fixed): media-gallery is the actual CSS Grid item in this row (its parent
       .vc-about-gallery-wrap is flattened via display:contents above) -- with no min-width:0,
       its automatic grid-item minimum size was its own max-content width, which the fixed-size
       85px thumbnail strip (7 thumbnails x 85px + 6 gaps x 5px = 625px, confirmed via
       getComputedStyle) pushed well past any viewport under ~665px wide. Silently clipped
       rather than causing a page scrollbar (.section-content-wrapper has overflow:hidden), so
       it read as "the whole buy box freezes at 625px" -- title/price/description/buttons all
       share this same 1fr track and were riding along with it, not independently broken. */
    [id^="shopify-section-"][id$="__about_featured_product"] media-gallery {
      order: 2;
      margin-bottom: 26px;
      min-width: 0;
    }

    [id^="shopify-section-"][id$="__about_featured_product"] [data-block-id$="__product_price"] {
      order: 3;
    }

    [id^="shopify-section-"][id$="__about_featured_product"] [class*="__product_description"] {
      order: 4;
      margin-bottom: 28px;
    }

    /* Real bug (fixed): .buy-buttons-block is a plain SPAN (display:block, not flex) -- it's
       the actual CSS Grid item in this row (its own children are display:contents, see above),
       but nothing gave it min-width:0, so the grid's automatic item-minimum-size (content-based)
       let it claim its full max-content width (625px, confirmed via getComputedStyle) instead of
       shrinking to the 1fr column -- invisible while the column stayed wider than 625px, but
       below ~665px viewport (column < 625px) the row visibly overflowed past the page edge.
       Same "1fr implicit-auto-minimum blowout" class documented elsewhere in this project. The
       old `flex-direction:column` here was dead CSS -- this element was never the flex
       container, .product-form-buttons (native, buy-buttons-styles.liquid) is. */
    [id^="shopify-section-"][id$="__about_featured_product"] .buy-buttons-block {
      order: 5;
      min-width: 0;
    }

    /* Live's real mobile buy box is THREE full-width stacked rows (quantity, Add to Cart, Buy
       with Shop each on their own line -- confirmed live at 798/665/600px, .purchase-details__
       quantity and __buttons children are always 100% of the column, never side-by-side), not
       two rows with the buttons sharing one. Forcing column direction here (rather than relying
       on native flex-wrap, which only wraps when content overflows) makes every child stretch to
       full width via flex's default align-items:stretch on the cross axis. */
    [id^="shopify-section-"][id$="__about_featured_product"] .product-form-buttons {
      flex-direction: column;
      gap: 12px;
    }

    [id^="shopify-section-"][id$="__about_featured_product"] .quantity-selector-wrapper,
    [id^="shopify-section-"][id$="__about_featured_product"] .add-to-cart-button,
    [id^="shopify-section-"][id$="__about_featured_product"] [data-shopify="payment-button"] {
      width: 100%;
    }

    /* Real bug (fixed): buy-buttons-styles.liquid's native rule gives every button wrapper
       `flex: 1 1 var(--buy-button-preferred-width, 0)` (185px) -- a WIDTH preference, meant for
       the native row layout. flex-basis always sizes along the MAIN axis, so once the rule above
       flips .product-form-buttons to flex-direction:column, that same 185px silently became each
       wrapper's HEIGHT instead, leaving ~125px of empty space under Add to Cart's actual ~60px
       button and pushing Buy with Shop far down the page (looked "missing" until scrolled to).
       Resetting flex-basis to auto lets each wrapper size to its real content height again. */
    [id^="shopify-section-"][id$="__about_featured_product"] .product-form-buttons
      > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
      flex-basis: auto;
    }
  }
/* END_SECTION:vc-about-featured-product */

/* START_SECTION:vc-about-hero (INDEX:42) */
.vc-about-hero__wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: 1236px;
    margin-inline: auto;
    padding-inline: 20px;
  }

  .vc-about-hero__left {
    flex-basis: 50%;
  }

  .vc-about-hero__right {
    flex-basis: 50%;
  }

  .vc-about-hero__right img {
    display: block;
    width: 100%;
    height: auto;
  }

  .vc-about-hero__heading {
    font-family: var(--font-heading--family);
    font-size: 80px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    margin: 0 0 20px;
    color: #003d29;
    max-width: 500px;
  }

  .vc-about-hero__details {
    font-family: var(--font-body--family);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    margin: 0 0 30px;
    color: #003d29;
  }

  .vc-about-hero__button {
    /* Live's button renders via old theme's generic `.button.button--primary` classes, not the
       dead `.hero-button` rule in hero-custom.liquid's own source (confirmed via computed
       className on live) -- font is the unrestricted-weight "Silka Bold" face (see Hero section's
       button-font notes in CLAUDE.md), which needs the literal registered name, not
       var(--font-body--family) ("Silka Medium"), to reproduce live's double-bold width. Live
       also has a 1px transparent border (adds 2px to an auto-width flex item regardless of
       box-sizing) and is a FIXED 60px tall at every width -- the source's own mobile
       padding:16px 30px override never fires on live (dead code, same class-name mismatch), so no
       mobile override is applied here either. Live-verified via Playwright: 208.7x60px,
       rgb(235,137,53) at rest -- same numbers as the homepage hero's own [class*="__button_shop"]
       (via-citrus-homepage.liquid), confirming this is the SAME shared old-theme button/style,
       just with different button text. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #eb8935;
    border: 1px solid transparent;
    border-radius: 31px;
    padding: 20px 35px;
    height: 60px;
    font-family: 'Silka Bold', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    text-decoration: none;
    width: max-content;
  }

  /* Real `<img>` (live's button markup, not a ::before pseudo like the homepage's native-block
     version needs) -- margins match live's computed -5px/5px exactly. base.css's global
     `img{width:100%;height:auto}` (0,0,1 specificity) beats the HTML width/height attributes
     (presentational hints, lower priority than any CSS rule) -- needs an explicit size here. */
  .vc-about-hero__button-icon {
    width: 43px;
    height: 31px;
    margin-left: -5px;
    margin-right: 5px;
  }

  /* Live-verified hover: rgb(209,123,50) = #d17b32 (same shared button style as the homepage
     hero -- was #e36e1e here, an unverified guess that didn't match). */
  .vc-about-hero__button:hover {
    background-color: #d17b32;
  }

  @media (max-width: 799px) {
    .vc-about-hero__wrap {
      flex-direction: column-reverse;
      gap: 30px;
    }

    /* align-items:center (base rule, unconditional) shrinks this to the img's fit-content size
       instead of the column's full width -- same root cause as the farm image bug. Stretch it so
       the img's own width:100%/max-width:525px (below) resolve against the real column width. */
    .vc-about-hero__right {
      width: 100%;
    }

    .vc-about-hero__left {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      /* Live-verified via Playwright (getComputedStyle at 390px): old theme's
         .hero-details-left carries margin-bottom:32px at this breakpoint (hero-custom.liquid),
         never ported here -- shortened the gap to the next section (About Rich Text) by 32px. */
      margin-bottom: 32px;
    }

    .vc-about-hero__heading {
      font-size: 60px;
      line-height: 1;
      letter-spacing: -2.57px;
      margin-bottom: 12px;
      text-align: center;
      max-width: none;
    }

    .vc-about-hero__details {
      text-align: center;
      margin-bottom: 25px;
      font-size: 18px;
    }

    /* Live's img has no width:100% -- max-width:100% + its own 525px intrinsic request caps it,
       so it scales with viewport up to 525px then stops growing. Our width:100% (base rule)
       scales forever; adding the same cap here reproduces live's stop point.
       margin-inline:auto centers the capped image inside the now-stretched (width:100%, above)
       .vc-about-hero__right -- live's own container never stretches (fit-content, centered by
       the parent flex's align-items:center), so without this the image renders flush-left once
       the column exceeds 525px (confirmed via computed rect: local x:20 vs live's centered
       x:137 at 799px viewport). */
    .vc-about-hero__right img {
      max-width: 525px;
      margin-inline: auto;
    }
  }
/* END_SECTION:vc-about-hero */

/* START_SECTION:vc-about-icon-row (INDEX:43) */
.vc-about-icon-row {
    text-align: center;
    padding-top: var(--vc-about-icon-row-top, 0);
    padding-bottom: var(--vc-about-icon-row-bottom, 0);
    position: relative;
    z-index: 1;
  }

  @media (max-width: 799px) {
    .vc-about-icon-row {
      padding-top: calc(var(--vc-about-icon-row-top, 0) / 2);
      padding-bottom: calc(var(--vc-about-icon-row-bottom, 0) / 2);
    }
  }


  [id^="shopify-section-"][id$="__about_features"] {
    margin-top: 59px;
  }

  @media screen and (max-width: 798px) {
    [id^="shopify-section-"][id$="__about_features"] {
      margin-top: 80px;
    }
  }

  .vc-about-icon-row__wrap {
    max-width: 1236px;
    margin-inline: auto;
    padding-inline: 20px;
  }

  .vc-about-icon-row__heading-block {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .vc-about-icon-row__heading {
    font-family: var(--font-heading--family);
    font-size: 60px;
    font-weight: 600;
    line-height: 1;
    margin: 0 0 30px;
    color: #003d29;
  }

  .vc-about-icon-row__details {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
    max-width: 726px;
    margin: 0;
    color: #003d29;
  }

  .vc-about-icon-row__features {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .vc-about-icon-row__feature {
    flex-basis: 23%;
  }

  .vc-about-icon-row__icon {
    background-color: #fdeac9;
    display: inline-flex;
    border-radius: 8px;
    align-items: center;
    margin-bottom: 15px;
  }

  .vc-about-icon-row__icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
  }

  .vc-about-icon-row__feature-heading {
    font-family: var(--font-heading--family);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    margin: 0 0 10px;
    color: #003d29;
  }

  .vc-about-icon-row__feature-subheading {
    /* Live-verified via Playwright (getComputedStyle, both 1572px and 390px): old theme's
       .icon-sub-heading is literal var(--silka-font) ("Silka Regular"), not the generic body
       token ("Silka Medium") -- same registered-name pattern documented throughout this
       project for --silka-font usages. */
    font-family: 'Silka Regular', sans-serif;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    color: #003d29;
  }

  @media (max-width: 799px) {
    .vc-about-icon-row__heading {
      font-size: 40px;
      margin-bottom: 20px;
    }

    .vc-about-icon-row__details {
      font-size: 14px;
      /* Live-verified via Playwright (getComputedStyle at 390px): old theme's .featured-details
         switches to var(--silka-font) ("Silka Regular") only at this breakpoint -- the desktop
         rule has no font-family override (inherits the ambient "Silka Medium" body default,
         already correct above), so this needs to be scoped here, not moved to the base rule. */
      font-family: 'Silka Regular', sans-serif;
    }

    .vc-about-icon-row__features {
      flex-direction: column;
      gap: 30px;
    }

    .vc-about-icon-row__feature {
      display: flex;
      text-align: left;
      gap: 15px;
      align-items: flex-start;
    }

    .vc-about-icon-row__icon {
      margin-bottom: 0;
      /* Live-verified via Playwright (getComputedStyle at 390px): old theme's .icon-feature
         becomes display:contents at this breakpoint, so the <img> becomes a direct flex item of
         .feature-inner instead of sitting inside this wrapper's own box. Doesn't visibly change
         the cream pill behind the icon (that's baked into the icon PNG itself, confirmed via
         screenshot diff before/after) -- this just matches live's real CSS structure. */
      display: contents;
    }

    .vc-about-icon-row__feature-heading {
      font-size: 20px;
    }

    .vc-about-icon-row__feature-subheading {
      font-size: 14px;
      line-height: 1.35;
    }
  }
/* END_SECTION:vc-about-icon-row */

/* START_SECTION:vc-about-instafeed (INDEX:44) */
.vc-about-instafeed__wrap {
    width: 100%;
    max-width: 1236px;
    margin-inline: auto;
    padding-inline: 20px;
  }

  /* App-rendered heading (see comment above) -- styled the same way live's own injected
     CSS styles it (`#insta-feed h2`), not a class we control. */
  #insta-feed h2 {
    font-family: var(--font-heading--family);
    font-size: 45px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 30px;
    color: #003d29;
  }

  @media (max-width: 799px) {
    #insta-feed h2 {
      font-size: 32px;
    }
  }
/* END_SECTION:vc-about-instafeed */

/* START_SECTION:vc-about-rich-text (INDEX:45) */
.vc-about-rich-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 20px;
    padding-block: 80px 50px;
  }

  @media (max-width: 799px) {
    .vc-about-rich-text {
      padding-block: 40px 25px;
    }
  }

  .vc-about-rich-text__wrap {
    background-color: #f6f4ea;
    padding: 64px 50px;
    width: 100%;
    /* Old theme's real ancestor chain caps this at 85% of `.section` (max-width:1240px,
       padding:0 20px -> 1200px content), which our own `.vc-about-rich-text` (padding-inline:20px,
       no max-width of its own) never reproduced -- 85% alone kept growing forever past ~1240px
       viewport instead of flattening at 1020px like live (live-measured via Playwright:
       flat 1020px from ~1240px viewport up through 2560px, matches 0.85 * 1200 exactly). */
    max-width: min(85%, 1020px);
    border-radius: 50px;
    margin: 0 auto;
  }

  .vc-about-rich-text__eyebrow {
    font-family: "Silka Regular", sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -1.5px;
    text-align: center;
    margin: 0 0 5px;
    color: #003d29;
  }

  .vc-about-rich-text__title {
    font-family: var(--font-heading--family);
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    margin: 0 0 45px;
    color: #003d29;
  }

  .vc-about-rich-text__body,
  .vc-about-rich-text__body p {
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    color: #003d29;
  }

  @media (max-width: 799px) {
    .vc-about-rich-text__wrap {
      padding: 40px 20px;
      max-width: 100%;
      border-radius: 24px;
    }

    .vc-about-rich-text__eyebrow {
      font-size: 24px;
      margin-bottom: 0;
    }

    .vc-about-rich-text__title {
      font-size: 40px;
      margin-bottom: 24px;
    }

    .vc-about-rich-text__body,
    .vc-about-rich-text__body p {
      font-size: 16px;
      line-height: 1.4;
      text-align: left;
    }
  }
/* END_SECTION:vc-about-rich-text */

/* START_SECTION:vc-about-slider (INDEX:46) */
.vc-about-slider {
    margin-top: -150px;
  }

  @media screen and (max-width: 1200px) {
    .vc-about-slider {
      margin-top: -80px;
    }
  }

  .vc-about-slider__main {
    /* Shared with .vc-about-slider__track's own width formula below -- both the slider and the
       confetti decorations need to line up against the SAME live-measured content box, not the
       full-viewport .main these are otherwise positioned against. */
    --vc-about-slider-cap: min(calc(100vw - 100px), 1200px);
    background-image: var(--vc-about-slider-bg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 1686px;
    padding: 300px 30px 150px;
    position: relative;
    overflow: hidden;
  }

  .vc-about-slider__main::before {
    content: '';
    position: absolute;
    width: 100%;
    max-width: 1686px;
    height: 250px;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    background-image: var(--vc-about-slider-curve);
    background-repeat: no-repeat;
    background-size: 4000px;
    background-position: top;
  }

  .vc-about-slider__top-confetti,
  .vc-about-slider__bottom-confetti {
    position: absolute;
    z-index: 1;
  }

  .vc-about-slider__top-confetti {
    /* Old theme's real containing block for this 6% is `.farm-content-wrapper`, sized to the
       same 1200px-capped box as the slider (`.farm-slider-wrapper`), NOT `.farm-content-main`'s
       own full-viewport width -- confirmed by measuring both live's confetti rects AND
       .farm-content-wrapper's own rect at 10 widths from 320-2560px, they line up exactly at 6%
       of the wrapper at every width. Reproduced here since .vc-about-slider__top-confetti's
       actual positioned ancestor (.main) IS full-viewport-width, unlike old theme's structure. */
    left: calc(50vw - 0.44 * var(--vc-about-slider-cap));
    /* Real bug, fixed 2026-08-06: `top` has the SAME containing-block problem the `left` comment
       above already solved for the horizontal axis, just never applied vertically. Old theme's
       real `top:12%` resolves against `.farm-content-wrapper` -- content-height only, NO padding.
       This build's `.main` (this element's actual ancestor) has `padding:300px ... 150px`, baked
       into the percentage base, so the same 12% lands ~246px too high (confirmed live-side-by-side
       at 1572/900/390px viewports: `.farm-content-main`'s padding-top is unconditionally 300px at
       every width -- same `:not()`-specificity dead-code bug already documented for the FAQ
       section's own mobile padding override further down this file -- so the offset between "12%
       of content-only height" and "12% of content+450px-padding height" collapses to one constant,
       algebraically independent of the actual (viewport-varying) content height, verified exact at
       all 3 widths above). Restructuring the DOM (the fix used for the FAQ section's identical bug)
       was rejected here: the real horizontal inset between `.main` and old theme's wrapper turned
       out to be 50px, not `.main`'s own 30px padding (an unaccounted-for ancestor `.section` utility
       class contributes the other 20px) -- reworking `left` to match would need equally-careful
       re-verification for zero benefit, since this additive constant already reproduces live exactly
       without touching the already-verified `left` formula at all. */
    top: calc(12% + 246px);
  }

  .vc-about-slider__bottom-confetti {
    right: calc(50vw - 0.5 * var(--vc-about-slider-cap));
    /* Same fix, same constant derivation, at this element's own 20% base (see top-confetti's
       comment) -- verified exact at 1572px and 900px viewports. */
    top: calc(20% + 210px);
  }

  .vc-about-slider__content {
    /* Real bug, fixed 2026-08-09: old theme's real content column sits inside an extra, ambient
       `.section` 20px inset ON TOP OF `.farm-content-main`'s own 30px padding (the same 50px-vs-
       30px gap already root-caused for the confetti `left`/`top` formulas above -- confirmed here
       too, live's `.content-details` sits at a flat `x: 50` / `width: viewport - 100` at every
       narrow width tested, 320-414px). This build's content column only had `.main`'s 30px,
       missing that other 20px, so the heading/details text wrapped ~40px wider than live at
       narrow widths. Reuses the already-defined --vc-about-slider-cap (min(viewport-100px,
       1200px)) rather than a new formula -- zero effect once viewport is wide enough that the
       650px cap governs anyway (~750px+). */
    position: relative;
    max-width: min(650px, var(--vc-about-slider-cap));
    margin: 0 auto;
  }

  .vc-about-slider__heading {
    font-family: var(--font-heading--family);
    font-size: 60px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2.57px;
    text-align: center;
    margin: 0 0 32px;
    color: #ffffff;
  }

  .vc-about-slider__details {
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    margin: 0 0 64px;
    color: #ffffff;
  }

  .vc-about-slider__wrapper {
    /* Full-bleed breakout from the 650px .content column to the true viewport width -- the
       standard trick already used elsewhere in this project (footer, life-with sections).
       .vc-about-slider__track (below) then caps the actual visible track to live's real
       measured footprint, which is NOT what old theme's own source file implies -- live-measured
       via Playwright at 320-2560px: a flat 50px inset from the viewport edge up to ~1300px
       viewport, then a flat 1200px box centered on the viewport above that. Both regimes collapse
       into one formula: width = min(viewport - 100px, 1200px), centered. */
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    position: relative;
  }

  .vc-about-slider__track {
    /* Live is Slick with infinite:true + autoplay (custom.js: centerMode, variableWidth,
       autoplaySpeed 4000, cssEase cubic-bezier(0.4,0,0.2,1)) -- a real infinite loop that drags
       via CSS transform on its `.slick-track`, not native scrollLeft (confirmed:
       getComputedStyle(track).transform is a matrix, not `none`). The previous overflow-x:auto
       implementation had a hard start/end (no wraparound) and only followed native
       touch/wheel/scrollbar input during drag, not a 1:1 mouse-follow -- both visibly different
       from live. Rebuilt to match: this element is now a fixed-width overflow:hidden viewport;
       .vc-about-slider__track-inner (below) is the flex row that actually gets translateX'd,
       populated with real slides padded on both sides by full clones (see vc-about-slider.js) so
       dragging/autoplay-advancing past either end reveals more content instead of stopping.
       --slide-rest-w/-adjacent-w/-center-w mirror the width rules below (.vc-about-slider__slide
       is box-sizing:border-box, so declared `width` already IS the full on-screen footprint,
       padding included -- same as old theme's own .farm-slide) so the JS can position slides via
       pure arithmetic instead of racy post-transition DOM measurement -- keep both in sync.

       No `cursor` rule here on purpose: live's computed cursor is `auto` at rest AND mid-drag
       (verified via getComputedStyle on live, both states -- Slick doesn't set a grab/grabbing
       cursor anywhere in slick.css). A previous pass added cursor:grab/grabbing assuming that's
       standard carousel affordance, which is exactly the "cursor looks different from live" bug
       report -- removed rather than guessed again. */
    --slide-rest-w: 192px;
    --slide-adjacent-w: 232px;
    --slide-center-w: 312px;
    overflow: hidden;
    width: var(--vc-about-slider-cap);
    margin-inline: auto;
    position: relative;
  }

  /* Real bug, fixed 2026-08-09: old theme's `.farm-slider .slick-list` switches to
     `overflow: visible` at this exact breakpoint (about-slider.liquid:169-177) -- at narrow
     widths the track's own capped width (--vc-about-slider-cap, min(viewport-100px, 1200px)) is
     only wide enough for the CENTER slide, so the adjacent slides either side are positioned
     partly outside it by design, meant to visibly peek in rather than be clipped. This rule must
     come AFTER the base `.vc-about-slider__track` rule above (equal specificity -- an earlier
     copy of this same override, placed near the top of the stylesheet inside the file's other
     max-width:1200px block, silently lost the cascade to the base rule's later `overflow:
     hidden`, since source order -- not which one has a satisfied media condition -- breaks ties
     between equal-specificity rules). Confirmed missing vs. live at iPhone XR/SE widths (center
     slide rendered edge-to-edge with no neighbor peek at all). */
  @media screen and (max-width: 1200px) {
    .vc-about-slider__track {
      overflow: visible;
    }
  }

  .vc-about-slider__track-inner {
    display: flex;
    align-items: center;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .vc-about-slider__track-inner.is-dragging {
    transition: none;
  }

  /* Real bug fixed (vc-about-slider.js's settleIfInCloneZone): the clone<->real swap at either
     end of the loop snaps `transform` instantly (no visible move, by design -- both sides are
     meant to render the same photo in the same on-screen slot), but the newly-active slide's own
     width/img-width transitions (below) were left running normally, so it visibly shrank to rest
     size and regrew over the next ~550ms even though its position had already jumped straight to
     center. This class (added for one JS tick around the swap) forces those transitions off so
     size and position land together. */
  .vc-about-slider__track-inner.is-settling,
  .vc-about-slider__track-inner.is-settling .vc-about-slider__slide,
  .vc-about-slider__track-inner.is-settling .vc-about-slider__slide img {
    transition: none !important;
  }

  .vc-about-slider__slide {
    /* border-box, not content-box: old theme's .farm-slide is border-box, so its width values
       (ported here verbatim, e.g. 192/232/312) are total on-screen footprint, padding included.
       Using content-box made every slide 32px (the 16+16 padding) fatter than intended --
       harmless alone, but 5 visible slides * 32px = 160px more than the (correctly-sized) 1200px
       track could hold, overflowing 80px past each edge and clipping into the two outer slides.
       Real bug, fixed 2026-08-08: confirmed via live's own measured slide rects, which sum to
       exactly 1160px (2*192 + 2*232 + 312), centered with ~20px clear margin in the 1200px track. */
    flex: 0 0 auto;
    width: 192px;
    padding: 0 16px;
    box-sizing: border-box;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .vc-about-slider__slide img {
    width: 160px;
    height: auto;
    aspect-ratio: 280 / 432;
    object-fit: cover;
    border-radius: 16px;
    border: 3px solid #cacaca;
    display: block;
    margin-inline: auto;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .vc-about-slider__slide[data-vc-active='adjacent'] {
    width: 232px;
  }

  .vc-about-slider__slide[data-vc-active='adjacent'] img {
    width: 200px;
  }

  .vc-about-slider__slide[data-vc-active='center'] {
    width: 312px;
  }

  .vc-about-slider__slide[data-vc-active='center'] img {
    width: 280px;
  }

  .vc-about-slider__dots {
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .vc-about-slider__dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 50%;
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .vc-about-slider__dots button[aria-current='true'] {
    width: 10px;
    height: 10px;
    background: #ff6b35;
  }

  @media screen and (max-width: 1024px) {
    .vc-about-slider__track {
      --slide-rest-w: 172px;
      --slide-adjacent-w: 212px;
      --slide-center-w: 272px;
    }

    .vc-about-slider__slide {
      width: 172px;
    }

    .vc-about-slider__slide img {
      width: 140px;
    }

    .vc-about-slider__slide[data-vc-active='adjacent'] {
      width: 212px;
    }

    .vc-about-slider__slide[data-vc-active='adjacent'] img {
      width: 180px;
    }

    .vc-about-slider__slide[data-vc-active='center'] {
      width: 272px;
    }

    .vc-about-slider__slide[data-vc-active='center'] img {
      width: 240px;
    }
  }

  @media screen and (max-width: 799px) {
    /* Old theme's base .farm-content-main rule is actually
       `.farm-content-main:not(.farm-content-main.full-circle)` -- the :not() argument's own class
       pushes its specificity to (0,3,0), beating this media query's plain `.farm-content-main`
       (0,1,0), so on live the padding never actually drops on mobile even though the source reads
       like it should -- confirmed via live's computed styles at 390px (still 300px 30px 150px).
       Deliberately NOT overriding padding here to reproduce that exact live behavior; font-size
       reductions below are unaffected since their base/mobile selectors share equal specificity. */

    /* Real bug, fixed 2026-08-09: old theme's real mobile override (about-slider.liquid:132-138)
       never sets `top` here at all -- it only adds `bottom: 0` on top of the base (unconditional)
       rule's `top: 0`. With top, height, AND bottom all specified on an absolutely positioned
       element, CSS treats this as over-constrained and IGNORES `bottom`, so live's wave stays
       anchored to `top: 0` (the TOP of .farm-content-main, right where the green background
       starts) even at mobile widths -- confirmed live's real computed `top` is `0px`, not `auto`.
       This build previously added an explicit `top: auto`, which old theme never has -- that
       un-constrains the box and makes `bottom: 0` the real anchor instead, moving the whole wave
       200px up from the BOTTOM of the (much taller) farm section instead of the top, rendering it
       nowhere near the FAQ card and leaving a plain gap of solid green in its place. */
    .vc-about-slider__main::before {
      height: 200px;
      background-size: unset;
      left: 0;
      bottom: 0;
      transform: translate(0) rotate(180deg);
    }

    .vc-about-slider__heading {
      font-size: 40px;
      margin-bottom: 20px;
    }

    .vc-about-slider__details {
      font-size: 16px;
      margin-bottom: 0;
    }

    .vc-about-slider__top-confetti {
      /* Same containing-block fix as the desktop rule above, recomputed for this breakpoint's own
         30% base -- verified exact against live at 390px viewport. */
      top: calc(30% + 165px);
      left: calc(50vw - 0.5 * var(--vc-about-slider-cap));
      z-index: 1;
    }

    .vc-about-slider__bottom-confetti {
      top: auto;
      /* Same fix, `bottom`-side: old theme's `bottom:15%` also resolves against the padding-free
         wrapper, measuring up from ITS bottom edge -- this element's real ancestor (.main) has
         150px of padding-bottom between its own bottom edge and the wrapper's, so the same
         algebraic offset applies (150 - 0.15*450 = 82.5px). Verified exact at 390px viewport. */
      bottom: calc(15% + 82.5px);
      z-index: 1;
      max-width: 70px;
    }
  }

  /* Real bug, fixed 2026-08-09: old theme's `.farm-slider-wrapper` padding and `.farm-slide`
     size-outer/-adjacent/-center width overrides live in their OWN separate `@media (max-width:
     768px)` block (about-slider.liquid:310-338), distinct from the 799px block above (which only
     covers the wave curve / heading / details / confetti -- all confirmed at 799 by cross-
     checking old theme's own `@media(max-width:799px)` block, which contains none of this). A
     prior pass folded these into the 799px block on the assumption "nothing else distinguishes
     769-799px" -- disproven by live: measured real slide/img widths at 769-798px are the TABLET
     values (172/140, 212/180, 272/240 -- from the max-width:1024px block above), not these mobile
     ones. Applying these mobile sizes as early as 799px inflated the center slide's image to its
     full unreduced 280x432 footprint (should be 240x370 in that range), adding ~172px of bogus
     section height and breaking the wave-curve/dome continuity into the next section. */
  @media screen and (max-width: 768px) {
    .vc-about-slider__wrapper {
      padding: 40px 0 70px;
    }

    .vc-about-slider__track {
      --slide-rest-w: 252px;
      --slide-adjacent-w: 252px;
      --slide-center-w: 312px;
    }

    .vc-about-slider__slide {
      width: 252px;
    }

    .vc-about-slider__slide img {
      width: 220px;
    }

    .vc-about-slider__slide[data-vc-active='center'] {
      width: 312px;
    }

    .vc-about-slider__slide[data-vc-active='center'] img {
      width: 280px;
    }

    .vc-about-slider__slide[data-vc-active='adjacent'] {
      width: 252px;
    }

    .vc-about-slider__slide[data-vc-active='adjacent'] img {
      width: 220px;
    }
  }
/* END_SECTION:vc-about-slider */

/* START_SECTION:vc-article-main (INDEX:47) */
.vc-article {
    background: var(--color-background, #ffffff);
    color: #003d29;
    padding-block: var(--vc-article-padding-start, 40px) var(--vc-article-padding-end, 40px);
  }

  .vc-article__hero,
  .vc-article__shell {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
  }

  .vc-article__hero {
    margin-bottom: 40px;
  }

  .vc-article__hero-image,
  .vc-article__featured-image,
  .vc-article__related-image {
    display: block;
    width: 100%;
    border-radius: 16px;
  }

  .vc-article__hero-image {
    max-height: 664px;
    object-fit: cover;
  }

  .vc-article__nav {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 500;
    color: #003d29;
  }

  .vc-article__nav a {
    color: #003d29;
    text-decoration: none;
  }

  .vc-article__nav a:hover {
    color: #eb8935;
  }

  .vc-article__breadcrumbs,
  .vc-article__arrows {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .vc-article__layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
  }

  .vc-article__main {
    flex: 1;
    min-width: 0;
  }

  .vc-article__title {
    margin: 0 0 18px;
    max-width: 780px;
    font-family: var(--font-heading--family);
    font-size: 50px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0;
    color: #003d29;
  }

  .vc-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: #003d29;
  }

  .vc-article__meta li:not(:last-child)::after {
    content: "|";
    margin-left: 8px;
    color: rgba(0, 61, 41, 0.55);
  }

  .vc-article__meta a {
    color: #003d29;
    text-decoration: none;
  }

  .vc-article__meta a:hover {
    color: #eb8935;
  }

  .vc-article__read-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #84be43;
  }

  .vc-article__read-time svg {
    width: 10px;
    height: 12px;
    flex: 0 0 auto;
  }

  .vc-article__tags,
  .vc-article-sidebar__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .vc-article__tags {
    margin-bottom: 24px;
  }

  .vc-article__tags a,
  .vc-article-sidebar__tags a {
    display: flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    background: rgba(235, 137, 53, 0.1);
    border-radius: 4px;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    color: #eb8935;
    text-decoration: none;
  }

  .vc-article__tags a:hover,
  .vc-article-sidebar__tags a:hover {
    background: rgba(235, 137, 53, 0.18);
  }

  .vc-article__featured-image {
    margin-bottom: 28px;
  }

  .vc-article__content {
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #003d29;
  }

  .vc-article__content > *:first-child {
    margin-top: 0;
  }

  .vc-article__content p,
  .vc-article__content li {
    font-size: 16px;
    line-height: 1.5;
  }

  .vc-article__content a {
    color: #003d29;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .vc-article__content a:hover {
    color: #eb8935;
  }

  .vc-article__content h2,
  .vc-article__content h3,
  .vc-article__comments h2,
  .vc-article__related h2 {
    margin: 36px 0 16px;
    font-family: var(--font-heading--family);
    font-weight: 600;
    line-height: 1.15;
    color: #003d29;
  }

  .vc-article__content h2,
  .vc-article__comments h2,
  .vc-article__related h2 {
    font-size: 34px;
  }

  .vc-article__content h3 {
    font-size: 28px;
  }

  .vc-article__content img {
    max-width: 100%;
    height: auto;
    margin-block: 24px;
  }

  .vc-article__comments,
  .vc-article__related {
    margin-top: 48px;
  }

  .vc-article__comment {
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 61, 41, 0.2);
  }

  .vc-article__comment-meta,
  .vc-article__pagination {
    font-size: 13px;
    color: rgba(0, 61, 41, 0.7);
  }

  .vc-article__related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .vc-article__related-card {
    display: block;
    color: #003d29;
    text-decoration: none;
  }

  .vc-article__related-card span {
    font-family: var(--font-heading--family);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
  }

  .vc-article__related-card:hover span {
    color: #eb8935;
  }

  .vc-article__related-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .vc-article-sidebar {
    width: calc(25% - 20px);
    flex: 0 0 calc(25% - 20px);
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
  }

  .vc-article-sidebar__block {
    padding-block: 20px;
  }

  .vc-article-sidebar__block:first-child {
    padding-top: 0;
  }

  .vc-article-sidebar__block:last-child {
    padding-bottom: 0;
  }

  .vc-article-sidebar__heading {
    margin: 0 0 16px;
    font-family: var(--font-heading--family);
    font-size: 33px;
    font-weight: 600;
    line-height: 1.5;
    color: #003d29;
  }

  .vc-article-search__field {
    position: relative;
  }

  .vc-article-search__icon {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
  }

  .vc-article-search__icon:hover,
  .vc-article-search__icon:focus,
  .vc-article-search__icon:active {
    outline: none;
    background: none;
  }

  .vc-article-search__icon svg {
    width: 16px;
    height: 16px;
    fill: #0a0a0a;
  }

  .vc-article-search__input {
    width: 100%;
    height: 36px;
    padding: 5px 9px 5px 36px;
    border: 1px solid #dfe8e3 !important;
    border-radius: 0;
    background-color: #ffffff !important;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #7a7a7a;
  }

  .vc-article-sidebar__recent-post,
  .vc-article-sidebar__menu li {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 61, 41, 0.45);
  }

  .vc-article-sidebar__recent-post + .vc-article-sidebar__recent-post,
  .vc-article-sidebar__menu li + li {
    padding-top: 10px;
  }

  .vc-article-sidebar__recent-post:last-child,
  .vc-article-sidebar__menu li:last-child {
    border-bottom: 0;
  }

  .vc-article-sidebar__recent-post a,
  .vc-article-sidebar__menu a {
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #003d29;
    text-decoration: none;
  }

  .vc-article-sidebar__recent-post a:hover,
  .vc-article-sidebar__menu a:hover {
    color: #eb8935;
  }

  .vc-article-sidebar__recent-meta {
    display: none;
  }

  .vc-article-sidebar__menu {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .vc-article--grove,
  .vc-article--featured {
    padding-block-start: 0;
  }

  .vc-article--grove .vc-article__hero-image,
  .vc-article--featured .vc-article__hero-image {
    object-fit: fill;
  }

  .vc-article--grove .vc-article__nav,
  .vc-article--featured .vc-article__nav {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 36px;
  }

  .vc-article--grove .vc-article__nav a,
  .vc-article--featured .vc-article__nav a {
    color: #eb8935;
    font-size: 12px;
    line-height: 12px;
    text-decoration: none;
    text-underline-offset: auto;
  }

  .vc-article--grove .vc-article__title,
  .vc-article--featured .vc-article__title {
    width: fit-content;
    max-width: 100%;
    margin-bottom: 40px;
    font-size: 42px;
    line-height: 1.125;
  }

  .vc-article--grove .vc-article__meta,
  .vc-article--featured .vc-article__meta {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.5;
  }

  .vc-article--grove .vc-article__meta li,
  .vc-article--featured .vc-article__meta li {
    display: inline-block;
    font-size: 12.8px;
    line-height: 19.2px;
  }

  .vc-article--grove .vc-article__meta a,
  .vc-article--featured .vc-article__meta a {
    color: #003d29;
    font-size: 12.8px;
    line-height: 19.2px;
    text-decoration: none;
  }

  .vc-article--grove .vc-article__tags,
  .vc-article--featured .vc-article__tags {
    gap: 0;
    margin-bottom: 2px;
  }

  .vc-article--grove .vc-article-sidebar__tags {
    align-items: center;
    gap: 0;
    margin-bottom: -8px;
  }

  .vc-article--grove .vc-article__tags li,
  .vc-article--featured .vc-article__tags li,
  .vc-article--grove .vc-article-sidebar__tags li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    margin: 0 8px 8px 0;
    background: rgba(235, 137, 53, 0.1);
    border-radius: 4px;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #003d29;
  }

  .vc-article--grove .vc-article__tags a,
  .vc-article--featured .vc-article__tags a,
  .vc-article--grove .vc-article-sidebar__tags a {
    display: block;
    min-height: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: 12px;
    line-height: 18px;
    color: #eb8935;
    text-decoration: none;
    text-underline-offset: auto;
  }

  .vc-article--grove .vc-article__tags a:hover,
  .vc-article--featured .vc-article__tags a:hover,
  .vc-article--grove .vc-article-sidebar__tags a:hover {
    background: transparent;
    color: #003d29;
  }

  .vc-article--grove .vc-article__content,
  .vc-article--featured .vc-article__content {
    padding-top: 18px;
  }

  .vc-article--grove .vc-article__content p,
  .vc-article--featured .vc-article__content p {
    margin-top: 0;
  }

  .vc-article--grove .vc-article__content a,
  .vc-article--featured .vc-article__content a {
    color: #eb8935;
    text-decoration: none;
    text-underline-offset: auto;
  }

  .vc-article--grove .vc-article__content a:hover,
  .vc-article--featured .vc-article__content a:hover {
    color: #003d29;
  }

  .vc-article--grove .vc-article__content h2,
  .vc-article--featured .vc-article__content h2,
  .vc-article--grove .vc-article__comments h2,
  .vc-article--featured .vc-article__comments h2,
  .vc-article--grove .vc-article__related h2 {
    margin-top: 32px;
    font-size: 28px;
    line-height: 1.5;
  }

  .vc-article--featured .vc-article__related h2 {
    font-size: 42px;
    line-height: 1.125;
  }

  .vc-article--grove .vc-article__content h3,
  .vc-article--featured .vc-article__content h3 {
    margin-top: 32px;
    font-size: 24px;
    line-height: 1.5;
  }

  .vc-article--grove .vc-article__content img,
  .vc-article--featured .vc-article__content img {
    display: inline;
    width: auto;
    max-width: 100%;
    margin-top: 0;
    border-radius: 25px;
  }

  .vc-article--grove .vc-article__related,
  .vc-article--featured .vc-article__related {
    margin-top: 40px;
    padding-bottom: 20px;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
  }

  .vc-article--grove .vc-article__related h2,
  .vc-article--featured .vc-article__related h2 {
    margin: 0 0 20px;
    font-size: 42px;
    line-height: 1.125;
    letter-spacing: 0;
  }

  .vc-article--grove .vc-article__related-grid,
  .vc-article--featured .vc-article__related-grid {
    gap: 20px;
  }

  .vc-article--grove .vc-article__related-card,
  .vc-article--featured .vc-article__related-card {
    min-height: 360px;
    overflow: hidden;
    border: 1px solid rgba(0, 61, 41, 0.14);
    border-radius: 16px;
    background: #ffffff;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #003d29;
    text-decoration: none;
    text-underline-offset: auto;
  }

  .vc-article--featured .vc-article__related-card {
    min-height: 354px;
  }

  .vc-article--grove .vc-article__related-image,
  .vc-article--featured .vc-article__related-image {
    width: 100%;
    margin: 0;
    border-radius: 0;
    object-fit: fill;
  }

  .vc-article--grove .vc-article__related-card span,
  .vc-article--featured .vc-article__related-card span {
    position: relative;
    top: 22px;
    left: 24px;
    display: inline;
    padding: 0;
    font-size: 33.6px;
    line-height: 37.8px;
    letter-spacing: 0;
    color: #003d29;
    text-decoration: none;
    text-underline-offset: auto;
  }

  .vc-article--care .vc-article__title {
    font-size: 42px;
    line-height: 1.5;
  }

  .vc-article--care .vc-article__main {
    padding-right: 15px;
  }

  .vc-article--care .vc-article-sidebar {
    padding: 24px 16px;
    border-radius: 16px;
    background-color: #fff8ec;
    box-sizing: border-box;
  }

  .vc-article--care .vc-article-sidebar__menu a {
    color: #eb8935;
  }

  .vc-article--care .vc-article-sidebar__menu a:hover {
    color: #003d29;
  }

  @media screen and (min-width: 799px) {
    .vc-article--grove .vc-article__layout {
      gap: 20px;
    }

    .vc-article--featured .vc-article__layout {
      gap: 50px;
    }

    .vc-article--grove .vc-article-sidebar {
      width: 280px;
      flex-basis: 280px;
    }

    .vc-article--featured .vc-article-sidebar {
      width: 280px;
      flex-basis: 280px;
    }
  }

  @media screen and (max-width: 798px) {
    .vc-article {
      padding-block: 24px 40px;
    }

    .vc-article--grove,
    .vc-article--featured {
      padding-block-start: 0;
    }

    .vc-article--grove .vc-article__hero-image,
    .vc-article--featured .vc-article__hero-image {
      width: calc(100% - 20px);
    }

    .vc-article--grove .vc-article__nav,
    .vc-article--featured .vc-article__nav {
      margin-bottom: 12px;
    }

    .vc-article--grove .vc-article__title,
    .vc-article--featured .vc-article__title {
      margin-bottom: 19px;
    }

    .vc-article__hero,
    .vc-article__shell {
      width: min(100% - 30px, 1180px);
    }

    .vc-article--grove .vc-article__hero,
    .vc-article--featured .vc-article__hero,
    .vc-article--grove .vc-article__shell,
    .vc-article--featured .vc-article__shell {
      width: min(100% - 40px, 1180px);
    }

    .vc-article__hero {
      margin-bottom: 30px;
    }

    .vc-article__nav {
      flex-direction: column-reverse;
      gap: 12px;
      margin-bottom: 24px;
    }

    .vc-article__layout {
      flex-direction: column;
      gap: 40px;
    }

    .vc-article__title {
      font-size: 42px;
    }

    .vc-article-sidebar {
      width: 100%;
      flex-basis: auto;
    }

    .vc-article--care .vc-article__main {
      padding-right: 0;
    }
  }

  @media screen and (max-width: 480px) {
    .vc-article__title {
      font-size: 36px;
    }

    .vc-article--care .vc-article__title {
      font-size: 36px;
      line-height: 1.08;
    }

    .vc-article__content h2,
    .vc-article__comments h2,
    .vc-article__related h2 {
      font-size: 30px;
    }

    .vc-article__related-grid {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:vc-article-main */

/* START_SECTION:vc-care-details (INDEX:48) */
.vc-care-details__inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 20px;
    gap: 99.5px;
  }

  .vc-care-details__card {
    position: relative;
    overflow: hidden;
    flex-basis: calc(33.33% - 80px);
    min-width: 317px;
    box-shadow: 0px 4px 4px 0px #00000040;
    border-radius: 16px;
  }

  .vc-care-details__heading {
    font-family: var(--font-heading--family);
    font-size: 52px;
    line-height: 1;
    letter-spacing: -1.57px;
    font-weight: 600;
    text-align: center;
    margin: 0 auto 32px;
    padding: 32px 28px 0;
  }

  .vc-care-details__heading a {
    text-decoration: none;
  }

  .vc-care-details__paragraph {
    font-family: var(--font-body--family);
    padding: 0 28px;
    margin: 0 0 16px;
    text-align: left;
    line-height: 1.5;
  }

  .vc-care-details__more {
    display: flex;
    justify-content: flex-start;
    padding: 0 28px;
    font-family: var(--font-body--family);
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 18px;
    text-decoration: none;
  }

  .vc-care-details__more:hover {
    text-decoration: underline;
  }

  .vc-care-details__pattern {
    width: 100%;
    height: auto;
  }

  .vc-care-details__pattern svg {
    display: block;
    width: 100%;
    height: auto;
  }

  @media (max-width: 699px) {
    .vc-care-details__inner {
      gap: 32px;
      flex-direction: column;
    }
  }

  @media (min-width: 700px) and (max-width: 1279px) {
    .vc-care-details__inner {
      row-gap: 50px;
      column-gap: 20px;
    }
  }
/* END_SECTION:vc-care-details */

/* START_SECTION:vc-care-faq (INDEX:49) */
.vc-care-faq {
    position: relative;
  }

  .vc-care-faq__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    position: relative;
    z-index: 1;
  }

  .vc-care-faq__inner {
    width: 100%;
    position: relative;
  }

  .vc-care-faq__con {
    position: absolute;
    top: 17%;
  }

  .vc-care-faq__con--blue {
    left: 0;
  }

  .vc-care-faq__con--orange {
    right: 0;
  }

  @media (max-width: 1024px) {
    .vc-care-faq__con {
      display: none;
    }
  }

  .vc-care-faq__heading {
    font-family: var(--font-heading--family);
    font-size: 60px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    margin: 0 0 28px;
    color: #003d29;
    letter-spacing: -1.3px;
  }

  /* Real bug, fixed 2026-08-06: font-weight was unset (defaults to 400) -- live's real computed
     weight is 500 (confirmed via getComputedStyle, not set anywhere in old theme's own
     component-specific CSS either, so it comes from some sitewide rich-text/paragraph default not
     worth fully root-causing -- matching the target value directly, per project convention). */
  .vc-care-faq__subheading {
    font-family: var(--font-body--family);
    font-weight: 500;
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
    color: #4a4a4a;
    margin: 0 auto 40px;
    max-width: 800px;
  }

  /* Real bug, fixed 2026-08-06: old theme has no component-specific rule for this link at all --
     it inherits old theme's sitewide global anchor default (styles.css.liquid: color set from the
     theme's link-color setting, text-decoration none), which resolves to the orange accent color
     with no underline.
     `color: inherit` (grey, matching the surrounding paragraph) was an unverified guess; Heritage's
     own base.css also auto-underlines any link inside a plain `<p>` (its `p a` rule), which old
     theme's equivalent sitewide default never does -- both needed an explicit override, not just
     the color. Confirmed live-only via computed style: rgb(235,137,53)/#eb8935, text-decoration:none. */
  .vc-care-faq__subheading a {
    color: #eb8935;
    text-decoration: none;
  }

  .vc-care-faq__wrapper {
    width: 100%;
  }

  .vc-care-faq__nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }

  /* old theme's real cutoff (faq-tabs.css) is 799px, not Heritage's 749/750 -- see CLAUDE.md's
     "749/750px guesses" gotcha. Live-verified: at 780px live already shows the 40px/mobile
     heading, this build didn't switch until 749. */
  @media (max-width: 799px) {
    .vc-care-faq__heading {
      font-size: 40px;
    }

    .vc-care-faq__subheading {
      font-size: 14px;
    }
  }
/* END_SECTION:vc-care-faq */

/* START_SECTION:vc-care-hero (INDEX:50) */
.vc-care-hero__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 136px;
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 20px;
  }

  .vc-care-hero__left {
    flex-basis: 50%;
  }

  .vc-care-hero__heading {
    font-family: var(--font-heading--family);
    font-size: 52px;
    line-height: 1;
    font-weight: 400;
    text-align: left;
    margin: 0 0 25px;
    color: #003d29;
    text-transform: uppercase;
    max-width: 450px;
  }

  .vc-care-hero__heading em strong {
    color: #f69224;
    font-style: normal;
  }

  .vc-care-hero__details {
    font-family: var(--font-body--family);
    font-size: 18px;
    text-align: left;
    line-height: 1.35;
    margin: 0;
    color: #003d29;
  }

  .vc-care-hero__media {
    flex-basis: 50%;
    text-align: right;
  }

  /* Explicit px, not width:100%/height:auto (base.css's sitewide `img { width:100%; height:auto }`
     reset otherwise wins once no width/height is set here at all). height:auto is also a real trap
     on its own: Shopify's image_tag emits a `w`-descriptor srcset with no `sizes` attribute, so the
     browser density-corrects naturalWidth/naturalHeight against an assumed 100vw slot
     (447 / (447/1572) = 1572 -- the file's ORIGINAL uncropped size, not the requested 447x552 crop)
     -- `height: auto` computes from that wrong ratio, inflating the box ~95px. Fixed px sidesteps
     both problems and matches old theme's rendered 447x552 box exactly, at widths wide enough for
     the 50%-flex-basis column to actually fit 447px.

     Real bug, fixed 2026-08-06: both dimensions being fixed px meant that once the flex column
     (.vc-care-hero__media, flex-basis:50%, no flex-shrink:0) narrowed below 447px -- which base.css's
     sitewide `img,picture,video,canvas,svg{max-width:100%}` rule (a SEPARATE rule from the
     width:100% one referenced above, still in effect regardless of this component's own explicit
     width) then caps the rendered WIDTH to -- the fixed height:552px did not shrink to match,
     visibly squashing/stretching the image. Live-verified live does NOT hard-lock either
     dimension here: at 800px its own image renders 312x385, the same ~0.81 ratio as 447x552, i.e.
     it scales the box proportionally rather than independently clamping one axis. `aspect-ratio`
     fixes this the same way `max-width` fixed the width-only case above: it gives `height:auto` an
     EXPLICIT ratio to compute from, so the computed height still tracks the ACTUAL rendered width
     (whatever max-width clamped it to) instead of the image's own srcset-skewed natural ratio --
     avoiding the exact trap the comment above already had to work around once. */
  .vc-care-hero__media img {
    display: block;
    width: 447px;
    max-width: 100%;
    aspect-ratio: 447 / 552;
    height: auto;
    margin-left: auto;
  }

  .vc-care-hero__button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: max-content;
    color: #fff;
    background-color: #003d29;
    border-radius: 31px;
    padding: 20px 35px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    text-decoration: none;
    text-align: center;
  }

  .vc-care-hero__button:hover {
    background-color: #e36e1e;
  }

  .vc-care-hero__media-mobile {
    display: none;
  }

  /* 799, not 749: live-verified via Playwright (the mobile 334x412 image is still live's real
     rendering at 798/799px, switching to the desktop two-column layout only at 800px) -- same
     749-vs-798/799 real-breakpoint pattern already documented repeatedly elsewhere in this
     project, found here for the first time on 2026-08-06. Below 800px, live shows its correct
     single-column mobile layout; this build was showing the desktop flex layout a full 50px too
     early, landing the two 50%-basis columns into the width-squeeze zone described above. */
  @media (max-width: 799px) {
    .vc-care-hero__wrapper {
      flex-direction: column;
      gap: 60px;
    }

    .vc-care-hero__left {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 32px;
    }

    .vc-care-hero__heading {
      font-size: 40px;
      line-height: 100%;
      letter-spacing: 1px;
      font-weight: 400;
      margin-bottom: 32px;
      margin-top: 20px;
      text-align: center;
    }

    .vc-care-hero__details {
      font-size: 16px;
      text-align: center;
    }

    .vc-care-hero__button {
      padding: 16px 30px;
    }

    .vc-care-hero__media {
      display: none;
    }

    .vc-care-hero__media-mobile {
      display: block;
      margin-bottom: 32px;
      width: 334px;
      max-width: 100%;
    }

    /* Explicit px for the same reason as the desktop image above -- base.css's sitewide
       `img { width:100%; height:auto }` reset otherwise wins with no override here at all.
       aspect-ratio/height:auto (not a second fixed height:412px) for the same reason as the
       desktop image's own fix above -- keeps this proportional on any viewport narrower than
       334px too (e.g. very small phones), not just the desktop column-squeeze case that's the
       only one actually confirmed against live so far. */
    .vc-care-hero__media-mobile img {
      display: block;
      width: 334px;
      max-width: 100%;
      aspect-ratio: 334 / 412;
      height: auto;
    }
  }
/* END_SECTION:vc-care-hero */

/* START_SECTION:vc-contact-form (INDEX:51) */
.vc-contact-form {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 20px;
  }

  .vc-contact-form__wrapper {
    display: flex;
    gap: 40px;
  }

  .vc-contact-form__image,
  .vc-contact-form__form {
    /* Explicit px basis, not the usual flex:1 1 0 -- the image's aspect-ratio + intrinsic
       width/height (from image_tag's own attributes) fed into the flex automatic-minimum-size
       algorithm and skewed the 50/50 split (540/620 instead of 580/580) even with min-width:0
       set. Pinning both to the known live-measured 580px sidesteps it entirely. */
    flex: 1 1 580px;
    min-width: 0;
  }

  .vc-contact-form__image {
    margin-bottom: 25px;
  }

  .vc-contact-form__image img {
    display: block;
    width: 100%;
    aspect-ratio: 580 / 725;
    object-fit: cover;
  }

  .vc-contact-form__form {
    padding: 40px;
    background-color: var(--vc-contact-form-background, #ffffff);
  }

  .vc-contact-form--left .vc-contact-form__image {
    order: 2;
  }

  .vc-contact-form--left .vc-contact-form__form {
    order: 1;
  }

  .vc-contact-form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .vc-contact-form__field {
    margin-bottom: 20px;
    position: relative;
  }

  .vc-contact-form__paragraph {
    margin-bottom: 20px;
    color: var(--vc-contact-form-text, #003d29);
  }

  .vc-contact-form__input,
  .vc-contact-form__textarea,
  .vc-contact-form__select-wrap select {
    width: 100%;
    display: block;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    color: #363636;
    /* base.css's `input:not([type='checkbox'], [type='radio']) { background-color:
       var(--color-input-background) }` beats a plain single-class override on specificity --
       needs !important (same fix as the Featured In sidebar search/newsletter inputs). */
    background-color: #ffffff !important;
    border: 1px solid #dfe8e3 !important;
    box-sizing: border-box;
  }

  .vc-contact-form__input,
  .vc-contact-form__select-wrap select {
    height: 36px;
    padding: 5px 16px;
    border-radius: 31px;
  }

  .vc-contact-form__select-wrap {
    display: block;
    position: relative;
  }

  .vc-contact-form__select-wrap select {
    padding-right: 40px;
    appearance: none;
    cursor: pointer;
  }

  .vc-contact-form__select-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #063b2a;
    border-bottom: 1.5px solid #063b2a;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }

  .vc-contact-form__textarea {
    height: 120px;
    padding: 10px 16px;
    border-radius: 5px;
    resize: vertical;
  }

  /* base.css's global ::placeholder rule is styled for dark-background inputs elsewhere
     (rgba(255,255,255,0.6), invisible on our white fields) -- needs an explicit override. */
  .vc-contact-form__input::placeholder,
  .vc-contact-form__textarea::placeholder {
    color: rgba(54, 54, 54, 0.6);
    opacity: 1;
  }

  .vc-contact-form__field--checkbox {
    color: var(--vc-contact-form-text, #003d29);
  }

  /* base.css restyles every checkbox sitewide into a 16px rounded square (appearance:none) --
     reverts to the plain native OS checkbox old theme uses here (13x13, unstyled). */
  .vc-contact-form__checkbox-row input[type='checkbox'] {
    appearance: auto;
    width: 13px;
    height: 13px;
    border-radius: 0;
  }

  .vc-contact-form__checkbox-label {
    display: block;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--vc-contact-form-text, #003d29);
    margin-bottom: 10px;
  }

  .vc-contact-form__checkbox-row {
    display: flex;
    align-items: center;
  }

  .vc-contact-form__radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    color: var(--vc-contact-form-text, #003d29);
  }

  .vc-contact-form__radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body--family);
    font-size: 16px;
    line-height: 1.5;
  }

  .vc-contact-form__checkbox-row input {
    margin-right: 10px;
  }

  .vc-contact-form__checkbox-row label {
    font-family: var(--font-body--family);
    font-size: 16px;
    line-height: 1.5;
    color: #063b2a;
  }

  .vc-contact-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    color: #fff;
    background-color: #eb8935;
    border: none;
    border-radius: 31px;
    padding: 20px 35px;
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: 16px;
    /* No line-height set in old theme's shared .button class either -- normal (~19px for Silka
       Bold here) is what actually produces the live 60px button height; an explicit 100% (16px)
       undershoots it to 56px. */
    text-decoration: none;
    text-align: center;
    cursor: pointer;
  }

  .vc-contact-form__submit:hover {
    background-color: #e36e1e;
  }

  .vc-contact-form__errors,
  .vc-contact-form__success {
    margin-bottom: 20px;
    font-family: var(--font-body--family);
    color: #003d29;
  }

  @media (max-width: 799px) {
    .vc-contact-form__wrapper {
      flex-direction: column;
      /* The wrapper's 40px column-gap is a desktop-row-only value -- old theme's mobile stack is
         Bulma columns with zero gap between them (verified live: image column and form column
         sit flush, the only space between them is the form's own 30px margin-top below). */
      gap: 0;
    }

    /* flex-basis:580px (set for the desktop row layout) carries over as a HEIGHT basis once
       flex-direction flips to column -- re-declare auto, matching the flex-basis gotcha noted
       elsewhere in this project. */
    .vc-contact-form__image,
    .vc-contact-form__form {
      flex-basis: auto;
    }

    .vc-contact-form__form {
      /* Old theme's rule is `margin: 30px 0` -- both top AND bottom. */
      margin-top: 30px;
      margin-bottom: 30px;
      padding: 40px;
    }
  }
/* END_SECTION:vc-contact-form */

/* START_SECTION:vc-contact-hero (INDEX:52) */
.vc-contact-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 20px;
  }

  .vc-contact-hero__wrap {
    background-color: #f6f4ea;
    padding: 64px 50px;
    width: 100%;
    max-width: 85%;
    border-radius: 50px;
    margin: 0 auto;
  }

  .vc-contact-hero__subheading {
    /* base.css's global `p:empty { display: none }` collapses this to a zero-height, out-of-flow
       element when the setting is blank (old theme's empty <p> still occupies its margin-bottom
       in that state) -- force it back to a normal block so the spacing matches live exactly. */
    display: block !important;
    font-family: var(--font-body--family);
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -1.5px;
    text-align: center;
    color: #003d29;
    margin: 0 0 5px;
  }

  .vc-contact-hero__heading {
    font-family: var(--font-heading--family);
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    color: #003d29;
    margin: 0 0 45px;
  }

  .vc-contact-hero__details {
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: #003d29;
  }

  .vc-contact-hero__details p {
    margin: 0;
  }

  @media (max-width: 799px) {
    .vc-contact-hero__wrap {
      padding: 40px 20px;
      max-width: 100%;
      border-radius: 24px;
    }

    .vc-contact-hero__subheading {
      font-size: 24px;
      margin-bottom: 0;
    }

    .vc-contact-hero__heading {
      font-size: 40px;
      margin-bottom: 24px;
    }

    .vc-contact-hero__details {
      font-size: 16px;
    }
  }
/* END_SECTION:vc-contact-hero */

/* START_SECTION:vc-happy-growers-page-hero (INDEX:53) */
.vc-happy-growers-page-hero {
    padding: 0 0 30px;
  }

  .vc-happy-growers-page-hero__media {
    position: relative;
    width: calc(100% - 40px);
    margin-inline: auto;
  }

  .vc-happy-growers-page-hero__media > img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
  }

  .vc-happy-growers-page-hero__caption {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    padding: 30px;
    background: rgb(255 255 255 / 77%);
    text-align: center;
    transform: translate(-50%, -50%);
  }

  @media screen and (min-width: 800px) {
    .vc-happy-growers-page-hero__caption {
      width: calc((100% - 28px) * 0.4);
      box-sizing: border-box;
    }
  }

  .vc-happy-growers-page-hero__caption h1 {
    margin: 0;
    padding-top: 10px;
    color: #e36e1e;
    font-family: var(--font-heading--family);
    font-size: 46px;
    font-weight: 600;
    line-height: 51.75px;
    white-space: nowrap;
  }

  @media screen and (min-width: 481px) and (max-width: 799px) {
    .vc-happy-growers-page-hero__caption {
      width: 350px;
      box-sizing: border-box;
    }

    .vc-happy-growers-page-hero__caption h1 {
      font-size: 40px;
      line-height: 45px;
    }
  }

  @media screen and (max-width: 480px) {
    .vc-happy-growers-page-hero {
      padding-bottom: 20px;
    }

    .vc-happy-growers-page-hero__media {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .vc-happy-growers-page-hero__caption {
      position: static;
      margin-top: 20px;
      transform: none;
    }

    .vc-happy-growers-page-hero__caption h1 {
      font-size: 32px;
      line-height: 36px;
    }
  }
/* END_SECTION:vc-happy-growers-page-hero */

/* START_SECTION:vc-happy-growers-page-reviews (INDEX:54) */
.vc-happy-growers-page-reviews {
    padding-block: 20px;
  }

  .vc-happy-growers-page-reviews__inner {
    width: min(1180px, calc(100% - 60px));
    margin-inline: auto;
  }

  .vc-happy-growers-page-reviews .jdgm-widget {
    width: 100%;
    color: #003d29;
    font-family: var(--font-body--family);
    font-weight: 500;
    line-height: 24px;
    text-align: start;
  }

  .vc-happy-growers-page-reviews .jdgm-all-reviews-widget,
  .vc-happy-growers-page-reviews .jdgm-all-reviews__header,
  .vc-happy-growers-page-reviews .jdgm-row-stars,
  .vc-happy-growers-page-reviews .jdgm-row-search,
  .vc-happy-growers-page-reviews .jdgm-row-actions,
  .vc-happy-growers-page-reviews .jdgm-rev {
    font-weight: 500;
  }

  .vc-happy-growers-page-reviews .jdgm-review-search {
    font-family: var(--font-body--family);
    font-size: 13.3333px;
    font-weight: 500;
    line-height: 18.6667px;
  }
/* END_SECTION:vc-happy-growers-page-reviews */

/* START_SECTION:vc-happy-growers (INDEX:55) */
.vc-happy-growers {
    /* Live's real container (.vc-reviews-slider-wrapper, live-measured) is exactly 1200px, not
       1240px -- confirmed via getBoundingClientRect at 1572px viewport width (1200px wrapper,
       280px cards, 24px gaps, exactly 4 cards fit with no peek). 1240px was a wrong guess that
       left ~150px of a 5th card peeking on the right edge, which live never shows. base.css warns
       against rewriting .section's grid as max-width/margin:auto, so override the grid's
       central-column-width var instead -- same visual result without fighting the grid mechanism. */
    --full-page-grid-central-column-width: min(1200px, 100% - 40px);
    /* display:flex would clobber .section's own display:grid and disable the width constraint
       above -- row-gap (not `gap`, which'd add unwanted column-gap) replaces flex-column gap. */
    text-align: center;
    row-gap: var(--gap-lg, 32px);
  }

  .vc-happy-growers__title {
    margin: 0;
  }

  .vc-happy-growers__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 87px;
    max-width: 620px;
    margin: 64px auto;
  }

  .vc-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 140px;
  }

  .vc-badge__image {
    width: 125px;
    height: auto;
    object-fit: contain;
    aspect-ratio: auto 125 / 124;
  }

  /* Real bug, fixed 2026-08-06: live's real source (custom.css.liquid's .badges-wrap/.s-badge-img)
     caps this whole row at max-width:620px with a flat 20px gap and 64px margin -- not the vw-based
     clamp() a prior pass had guessed (see assets/base.css's own max-width:799px block, which
     already correctly shrinks .vc-badge__image to 83px but had the wrong gap formula -- fixed
     there rather than duplicated here, so this component's responsive behavior stays in one
     place). Live-verified via Playwright at 390/700/798/800/1180px (breakpoint confirmed at
     799/800, matching this project's usual real cutoff, not Heritage's 749/750). */


.vc-badge__image:hover {
	filter: sepia(1);
}

  .vc-badge__rating {
    font-family: "Silka Medium", sans-serif;
    margin-top: 12px;
  }

  .vc-badge__count {
    margin: 0;
    font-size: 16px;
    font-family: "Argesta Regular", serif !important;
    font-weight: 500 !important;
  }

  .vc-happy-growers__judgeme-source {
    display: none;
  }

  .vc-reviews-carousel {
    width: 100%;
    overflow: hidden;
  }

  .vc-reviews-carousel__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 4px 12px;
    cursor: grab;
    touch-action: pan-y;
  }

  /* Matches live's Flickity "is-draggable"/dragging cursor + prevents the browser's own text/image
     drag-selection from fighting the pointer-based scroll in initDrag(). */
  .vc-reviews-carousel__track.is-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
  }

  .vc-reviews-carousel__track.is-dragging * {
    pointer-events: none;
  }

  .vc-reviews-carousel__track::-webkit-scrollbar {
    display: none;
  }

  .vc-reviews-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 38px;
    margin-bottom: 12px;
  }

  .vc-reviews-carousel__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgb(51, 51, 51);
    opacity: 0.25;
    cursor: pointer;
  }

  .vc-reviews-carousel__dot.is-active {
    background: #eb8935;
    outline: 1px solid #003D29;
    outline-offset: 3px;
    opacity: 1;
  }

  .vc-review-card {
    scroll-snap-align: start;
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: #efeeeb;
    border-radius: 16px;
    padding: 12px 22px 23px;
    box-sizing: border-box;
  }

  .vc-review-card__product {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: underline;
    color: #003d29;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    font-family: "Argesta Regular", serif !important;

  }

  .vc-review-card__product img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #84be43;
    flex-shrink: 0;
  }

  .vc-review-card__stars {
    display: flex;
    justify-content: center;
    gap: 2px;
  }

  /* Stars are inline SVGs with width/height="14" hardcoded as HTML attributes by
     vc-reviews-carousel.js's starsMarkup() -- CSS on the svg beats those (presentational
     attributes lose to any CSS rule, same as the img width/height gotcha documented
     elsewhere in this project), so no JS change is needed to resize them. */
  .vc-review-card__stars svg {
    width: 18px;
    height: 18px;
  }

  .vc-review-card__quote {
    flex-shrink: 0;
  }

  .vc-review-card__title {
    margin: 0;
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    color: #000000;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .vc-review-card__copy {
    margin: 0;
    width: 100%;
    font-size: 1rem;
    color: #003d29;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: left !important;
  }

  .vc-review-card__see-more {
    align-self: center;
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    font-weight: 400;
    color: #eb8935;
  }

  .vc-review-card__author {
    margin: 0;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 500;
    color: #003d29;
  }

  .vc-review-modal {
    position: fixed;
    inset: 0;
    z-index: var(--layer-modal, 1000);
    background: rgb(0 0 0 / 40%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .vc-review-modal[hidden] {
    display: none;
  }

  .vc-review-modal__content {
    position: relative;
    background: rgb(254, 254, 254);
    border-radius: 20px;
    padding: 20px;
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
  }

  .vc-review-modal__content img {
    width: 130px;
    height: 130px;
    border-radius: 16px;
    object-fit: cover;
  }

  .vc-review-modal__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border: none;
    background: none;
    color: #eb8935;
    font-size: 50px;
    line-height: 1;
    cursor: pointer;
  }

  .vc-review-modal__content h3 {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 33px;
    font-weight: 600;
    line-height: 1.5;
    color: #003d29;
  }

  .vc-review-modal__content strong {
    font-family: 'Silka Medium', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #003d29;
  }

  .vc-review-modal__content p[data-vc-modal-copy] {
    margin: 0;
    font-family: 'Silka Medium', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #003d29;
  }

  .vc-review-modal__author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: #003d29;
    font-family: 'Silka Medium', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
  }

  .vc-review-modal__author svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  .vc-review-modal__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    background: #eb8935;
    color: #fff;
    border-radius: 31px;
    padding: 0 35px;
    font-family: 'Silka Medium', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
  }

  /* max-width:600, not 749: old theme's real rule (custom.css.liquid ~1275-1291) is
     `.review-slide { max-width:280px }` UNCONDITIONALLY, only switching to a fluid width inside
     `@media (max-width:600px)`. Between 600-749px live stays in the fixed-280px multi-card mode --
     confirmed by measuring live's real .review-slide width at 700px (280px, unchanged from
     desktop) vs 390px (fluid). 749 was a wrong guess that put the 601-749px band into the wrong
     mode.

     Deliberate deviation from live, requested 2026-08-06: below 1024px, live's own "peek" (a
     sliver of the next/previous card showing at rest) only ever happens as a side effect of
     Flickity's continuous autoplay mid-transition -- it's not a fixed, always-on layout choice
     there. Per explicit request, this build makes it one anyway (standard carousel affordance
     signalling there's more to scroll) on tablet and mobile specifically -- desktop (1024+) keeps
     its existing clean 4-card/no-peek layout untouched.

     Peek is built from `scroll-padding-inline`, not regular `padding` -- regular `padding` alone
     only ever produces a RIGHT-side peek (the card is just narrower than the track, so the next
     card's edge shows past it); it does NOT inset where an interior card actually settles, so no
     left peek would appear. `scroll-padding` is the property that insets the "snapport"
     `scroll-snap-align: start` aligns each card against, which is what pulls an interior card away
     from the track's true edge and reveals the previous card's tail too. Both regular padding AND
     scroll-padding are set to the same value: regular padding gives the first/last card a matching
     visual margin (nothing to peek at those true ends), scroll-padding drives where every interior
     card actually stops.

     The scroll-padding value itself is NOT the peek amount directly -- an interior card's left
     peek equals (scroll-padding - gap), since the gap is consumed before any of the previous card
     becomes visible. So for a symmetric peek, solve `scroll-padding - gap = desired_peek` ->
     `scroll-padding = desired_peek + gap`. With the mobile card sized via flex-basis:100%
     (resolving against the now-symmetric padded content box), that scroll-padding value alone also
     produces the matching right peek, no separate width formula needed. Desired peek here is 24px
     (mobile) / 32px (tablet), gap is the existing 24px -> scroll-padding 48px / 56px.

     assets/vc-reviews-carousel.js's dot-click handler needs the matching scroll-padding-left
     offset subtracted (and, for the LAST card specifically, clamped up to the true scrollable max
     instead of using the generic per-card formula) or dot navigation lands inconsistently with
     where a drag/swipe to the same card would naturally settle. */
  @media screen and (min-width: 601px) and (max-width: 1023px) {
    .vc-reviews-carousel__track {
      padding-inline: 1px;
      scroll-padding-inline: 50px;
    }
  }

  @media screen and (max-width: 600px) {
    .vc-reviews-carousel__track {
      padding-inline: 1px;
      scroll-padding-inline: 41px;
    }

    .vc-review-card {
      flex-basis: 100%;
    }
  }
/* END_SECTION:vc-happy-growers */

/* START_SECTION:vc-life-with (INDEX:56) */
.vc-life-with {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .vc-life-with__heading {
    text-align: center;
  }

  .vc-life-with__title {
    margin: 0;
    font-size: var(--vc-life-title-size, 50px);
    font-weight: var(--vc-life-title-weight, 500);
    line-height: 61px;
    letter-spacing: -2.14px;
    color: #003d29;
  }

  .vc-life-with__subtext {

    margin: 10px 0 30px !important;
    font-family: "Silka Medium", sans-serif;
    font-size: var(--vc-life-subtext-size, 16px);
    font-weight: var(--vc-life-subtext-weight, 500);
    letter-spacing: 0.02em;
    line-height: 28px;
    color: #003d29;
  }

  .vc-life-with__row {
    display: flex;
    width: 100%;
    max-width: 1130px;
    margin: 0 auto;
    padding: 0 15px;
    gap: 5px;
  }

  .vc-life-with__featured {
    width: 50%;
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    border-radius: 25px 0 0 25px;
    overflow: hidden;
  }

  .vc-life-with__featured-image {
    width: 100%;
    height: 100%;
  }

  .vc-life-with__featured-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: bottom center;
  }

  .vc-life-with__banner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
    margin-top: -10px;
    background-color: #fdeac9 !important;
    border-radius: 0 0 0 20px;
  }

  .vc-life-with__banner-text {
    width: 50%;
    text-align: left;
  }

  .vc-life-with__banner-title,
  .vc-life-with__banner-subtext,
  .vc-life-with__banner-price {
    margin: 0;
    padding-left: 20px;
    color: #003d29;
  }

  .vc-life-with__banner-title {
    font-family: var(--font-heading--family);
    
    font-weight: 500 !important;
    font-size: 30px;
    letter-spacing: -1.29px;
    line-height: 37px;
  }

  .vc-life-with__banner-subtext {
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
  }

  .vc-life-with__banner-price {
    font-family: var(--font-heading--family);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.94px;
    line-height: 27px;
  }

  .vc-life-with__banner-form {
    width: 50%;
    padding-top: 20px;
    margin-right: -9px;
  }

  .vc-life-with__add-to-cart {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 60px;
    padding: 19px 30px;
    border: none;
    border-radius: 31px;
    background-color: #003d29;
    color: #fff;
    font-family: "Silka Bold", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    cursor: pointer;
  }

  .vc-life-with__add-to-cart:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .vc-life-with__add-to-cart-icon {
    display: inline-block;
    width: 43px;
    height: 31px;
  }

.vc-life-with__add-to-cart:hover {
	-webkit-text-fill-color: #eb8935 !important;
}

  .vc-life-with__instafeed {
    width: 50%;
    flex-basis: 50%;
  }

  .vc-life-with__handle {
    display: inline-flex;
    align-items: center;
    gap: 5.5px;
    height: 60px;
    padding: 0 12px;
    margin-top: 50px;
    border-radius: 20px;
    background-color: #003d29;
    color: #fff;
    font-family: "Silka Bold", sans-serif !important;
    font-size: 16px;
    font-weight: 700 !important;
    text-decoration: none;
  }

  .vc-life-with__handle-icon {
    display: block;
    width: 38px;
    height: 38px;
  }

  /* Tablet band 799-1100px, ported verbatim from old theme (custom.css.liquid ~1484-1510) --
     previously missing entirely, so this whole range fell through to the desktop layout
     unchanged. Old theme shrinks the banner text/button via `transform: scale()` rather than
     reducing font-size (a transform doesn't change the element's own layout box, only its
     painted appearance -- reproducing this exactly, overlap-looking result and all, since that's
     genuinely what live renders here, confirmed via screenshot at 900px). */
  @media screen and (min-width: 799px) and (max-width: 1100px) {
    .vc-life-with__banner-title,
    .vc-life-with__banner-subtext,
    .vc-life-with__banner-price {
      padding-left: 0;
    }

    .vc-life-with__banner-title,
    .vc-life-with__banner-subtext,
    .vc-life-with__banner-price {
      white-space: nowrap;
      transform: scale(0.8);
    }

    .vc-life-with__banner-form {
      margin-right: 0;
    }

    /* Not in old theme's own rule (only the title/subtext/price get `white-space:nowrap` there)
       -- but at this band our button's slightly different box model wraps "Add to Cart" onto a
       second line where live's stays on one (confirmed via screenshot at 900px); forcing nowrap
       here just corrects that without changing anything old theme specifies. */
    .vc-life-with__add-to-cart {
      white-space: nowrap;
      transform: scale(0.8);
    }
  }

  /* Mobile values are live-measured (390px), not old theme's source (523px vs live's 558px).
     Live's card truncates the title via fixed height -- per user request, height left auto
     here so it wraps instead of clipping. max-width:798, not 749: old theme's own mobile
     breakpoint for this whole section is `@media (max-width: 799px)` (confirmed in
     custom.css.liquid) -- same recurring mismatch class as the other two homepage sections
     fixed this session. */
  @media screen and (max-width: 799px) {
    .vc-life-with__title {
      width: 300px;
      margin: 0 auto;
    }

    .vc-life-with__subtext {
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
    }

    .vc-life-with__row {
      flex-direction: column;
    }

    .vc-life-with__featured {
      width: 336px;
      max-width: 100%;
      flex-basis: auto;
      margin: 0 auto;
      border-radius: 25px;
    }

    .vc-life-with__featured-image img {
      width: 334px !important;
      height: 334px !important;
      margin: 0 auto;
    }

    .vc-life-with__banner {
      flex-direction: column;
      border-radius: 0 0 20px 20px;
      margin-bottom: 20px;
    }

    .vc-life-with__banner-text {
      width: 100%;
      padding-top: 15px;
    }

    .vc-life-with__banner-form {
      width: 100%;
      margin-top: 10px;
      margin-right: 0;
      padding-top: 0;
    }

    .vc-life-with__add-to-cart {
      transform: scale(0.9);
      transform-origin: left center;
    }

    .vc-life-with__instafeed {
      width: 95%;
      flex-basis: auto;
      margin: 0 auto;
    }

    .vc-life-with__handle {
      margin-top: 25px;
    }
  }
/* END_SECTION:vc-life-with */

/* START_SECTION:vc-resource-highlights (INDEX:59) */
/* Live centers every text element inside each card via one inherited `text-align: center`.
     The tag row is the one exception -- stays left-aligned, called out explicitly below. */
  .vc-resource-highlights {
    text-align: center;
  }

  .vc-resource-highlights__title {
    margin: 0 0 20px;
    font-size: 50px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -2.14px;
    color: #003d29;
    margin-bottom: -1px;
  }

  /* Old theme lays cards out as a centered flex row of fixed-max-width cards (max-width:364px),
     not equal-width grid columns -- leftover space stays on either side, cards don't stretch. */
  .vc-resource-highlights__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
  }

  .vc-resource-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 364px;
    border: 1px solid rgba(202, 202, 202, 0.15);
    border-radius: 16px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
    padding-bottom: 20px;
  }

  .vc-resource-card__image-link {
    display: block;
    aspect-ratio: 362 / 204;
  }

  .vc-resource-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Live's tag pill is near-white bg with orange text (overrides the plain orange-tinted
     .tag--solid the source CSS implies). Left-aligned, not centered -- see note above. */
  .vc-resource-card__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .vc-resource-card__tags li {
    display: inline-flex;
    align-items: center;
    height: 2em;
    padding: 0 9px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.9);
  }

  .vc-resource-card__tags a {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: #eb8935;
    text-decoration: none;
    white-space: nowrap;
  }

  .vc-resource-card__title {
    margin: 14px 0;
    padding: 0 10px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 1px;
  }

  .vc-resource-card__title a,
  .vc-resource-card__read-more {
    color: #003d29;
    text-decoration: none;
  }

  .vc-resource-card__read-more {
    display: block;
    margin: 10px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #eb8935;
  }

  .vc-resource-card__read-more:hover {
    text-decoration: underline;
    color: #003d29;
  }

  .vc-resource-card__meta {
    margin: 0 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: #003d29;
  }

  .vc-resource-card__excerpt {
    margin: 0;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #003d29;
  }

  @media screen and (max-width: 749px) {
    .vc-resource-highlights__grid {
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }
  }
/* END_SECTION:vc-resource-highlights */

/* CSS from block stylesheet tags */
/* START_BLOCK:_announcement (INDEX:61) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:62) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

    &:hover {
      color: var(--color-foreground-subdued);
    }
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:63) */
.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:64) */
.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:65) */
.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:66) */
.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:67) */
.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:69) */
.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:70) */
.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:71) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:72) */
.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) {
      height: 100%;
      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:73) */
.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:76) */
.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:78) */
.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:82) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;

      flex-shrink: 0;
      height: auto;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    gap: var(--gap);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:83) */
.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:85) */
.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:88) */
.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:89) */
.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:90) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 0;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:91) */
.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: 799px) {
    #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: 799px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [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']) .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    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;


    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 starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

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

    .menu-list__link {
      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;
    }

    .menu-list__link[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:94) */
.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:98) */
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:103) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:108) */
.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:109) */
.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:110) */
.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:_vc-care-faq-item (INDEX:111) */
/* Real bug, fixed 2026-08-06, CORRECTED 2026-08-09: old theme's own `.faq-item` border-bottom
     rule (and its last-child override) IS dead code, commented out in the old theme's source --
     that part of the original fix was right. But the conclusion drawn from it was wrong: old
     theme's actual per-item border lives one level up, on `.faq-wrapper-upper` (the block's own
     outer wrapper div, ACTIVE and not commented out -- `border-bottom: 2px solid #F6F4EA`,
     `:last-child { border: none }`, faq-tabs.css:31-36). This build has no separate wrapper div
     per item (`.vc-care-faq__item` IS both the item and its own outer wrapper, flattened), so
     `.faq-wrapper-upper`'s rule belongs here instead. Confirmed via live getComputedStyle: every
     item wrapper except the last has `border-bottom: 2px solid rgb(246, 244, 234)` -- this
     accounted for a real 14px shortfall in the Tree Care tab's total rendered height (7 gaps x
     2px across 8 items) that a fresh live-vs-local diff caught. */
  .vc-care-faq__item {
    margin-bottom: 0;
    padding: 16px 32px;
    border-bottom: 2px solid #f6f4ea;
    transition: background-color 0.3s linear;
  }

  .vc-care-faq__item:last-child {
    border-bottom: none;
  }

  .vc-care-faq__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-heading--family);
    font-size: 20px;
    text-align: left;
    cursor: pointer;
    color: #252525;
  }

  .vc-care-faq__question span:first-child {
    flex: 1;
    padding-right: 20px;
  }

  .vc-care-faq__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #1a4d3d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
  }

  .vc-care-faq__icon svg {
    position: absolute;
    color: #ffffff;
    transition: opacity 0.3s linear;
  }

  .vc-care-faq__icon-plus {
    opacity: 1;
  }

  .vc-care-faq__icon-minus {
    opacity: 0;
  }

  .vc-care-faq__item.is-active .vc-care-faq__icon-plus {
    opacity: 0;
  }

  .vc-care-faq__item.is-active .vc-care-faq__icon-minus {
    opacity: 1;
  }

  .vc-care-faq__item.is-active {
    background-color: #fdeac9;
  }

  .vc-care-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s linear;
  }

  /* Real bug, fixed 2026-08-06: live's answer copy uses the literal unrestricted-weight "Silka
     Regular" face (old theme's faq-tabs.css: font-family: var(--silka-font)), not the generic
     weight-ranged var(--font-body--family) token every other body-text element in this project
     correctly uses -- live-verified via computed style (this element specifically resolves to
     "Silka Regular", every other FAQ element checked resolves to the generic family, matching).
     The face is already registered (via-citrus-cart-drawer.liquid) for byte-parity with live but
     was previously unreferenced anywhere -- the prior "Full font audit" session's claim that
     --silka-font is dead code sitewide only checked custom.css.liquid; it's genuinely used here,
     in faq-tabs.css, which that grep never covered. */
  .vc-care-faq__answer-content {
    padding: 0;
    font-family: 'Silka Regular', sans-serif;
    /* Live's real computed weight is 500 against this literal face, not the unset/default 400 --
       same "explicit weight against an unrestricted-weight face" pattern as the Silka Bold buttons
       elsewhere in this project (see CLAUDE.md's Hero section); confirmed via getComputedStyle,
       fixed 2026-08-06 alongside the same gap on the subheading text (vc-care-faq.liquid). */
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
  }

  /* Real bug, fixed 2026-08-06: same root cause and fix as vc-care-faq.liquid's subheading link --
     old theme has no component-specific rule for links inside the answer copy either, so it
     inherits the sitewide global anchor default (orange, no underline), not the surrounding
     text's own grey. Confirmed live: rgb(235,137,53)/#eb8935, text-decoration:none, on an
     "answer" link (e.g. "contact us."). */
  .vc-care-faq__answer-content a {
    color: #eb8935;
    text-decoration: none;
  }

  .vc-care-faq__item.is-active .vc-care-faq__answer {
    max-height: 500px;
  }

  /* old theme's real cutoff (faq-tabs.css) is 799px, not Heritage's 749/750 -- see CLAUDE.md's
     "749/750px guesses" gotcha. */
  @media (max-width: 799px) {
    .vc-care-faq__item {
      padding: 12px 16px;
    }

    .vc-care-faq__question {
      font-size: 18px;
    }

    .vc-care-faq__icon {
      width: 36px;
      height: 36px;
    }
  }
/* END_BLOCK:_vc-care-faq-item */

/* START_BLOCK:_vc-care-faq-tab (INDEX:112) */
.vc-care-faq__tab-wrapper {
    display: contents;
  }

  .vc-care-faq__tab-button {
    padding: 16px 32px;
    border-radius: 50px;
    border: none;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    background-color: #f6f4ea;
    color: #1a1a1a;
    transition: all 0.3s linear;
  }

  .vc-care-faq__tab-button:hover,
  .vc-care-faq__tab-button.is-active {
    background-color: #003d29;
    color: #ffffff;
  }

  .vc-care-faq__tab-content {
    display: none;
    border: 2px solid #f6f4ea;
    border-radius: 16px;
    margin: 0 auto;
    overflow: hidden;
  }

  .vc-care-faq__tab-content.is-active {
    display: block;
  }

  /* old theme's real cutoff (faq-tabs.css) is 799px, not Heritage's 749/750 -- see CLAUDE.md's
     "749/750px guesses" gotcha. */
  @media (max-width: 799px) {
    .vc-care-faq__tab-button {
      padding: 10px 24px;
      font-size: 16px;
    }
  }
/* END_BLOCK:_vc-care-faq-tab */

/* START_BLOCK:_via-citrus-blog-post-card (INDEX:113) */
.vc-grove-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #dfe8e3;
    border-radius: 16px;
    overflow: hidden;
  }

  .vc-grove-card__image-link {
    display: block;
  }

  .vc-grove-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .vc-grove-card__content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .vc-grove-card__title {
    margin: 0 0 16px;
  }

  .vc-grove-card__title a {
    font-family: var(--font-heading--family);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.125;
    color: #003d29;
    text-decoration: none;
  }

  .vc-grove-card__title a:hover {
    text-decoration: underline;
  }

  .vc-grove-card__excerpt {
    position: relative;
    max-height: 96px;
    overflow: hidden;
    margin: 0 0 16px;
  }

  .vc-grove-card__excerpt p {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 1rem;
    font-weight: 500;
    line-height: 24px;
    color: #003d29;
  }

  .vc-grove-card__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
    pointer-events: none;
  }

  .vc-grove-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
  }

  .vc-grove-card__tags a {
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    background: rgba(235, 137, 53, 0.1);
    border-radius: 4px;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    color: #eb8935;
    text-decoration: none;
    white-space: nowrap;
  }

  .vc-grove-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-body--family);
    font-size: 0.8rem;
    font-weight: 500;
    color: #003d29;
  }

  .vc-grove-card__meta a {
    color: #003d29;
    text-decoration: none;
  }

  .vc-grove-card__meta a:hover {
    text-decoration: underline;
  }

  .vc-grove-card__meta li:not(:first-child) {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .vc-grove-card__meta li:not(:first-child)::before {
    content: '|';
    opacity: 44%;
  }

  .vc-grove-card__read-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .vc-grove-card__read-more {
    margin: 0 24px 24px;
  }

  /* Live's "READ MORE" is a `.button--link-style` link -- a real 60px-tall box (border-radius/
     height, no visible fill/border since background stays transparent at rest AND hover)
     vertically centering its own text, not a plain inline text link. Content-width and
     LEFT-aligned though (inline-flex, not flex) -- live's wrapper never stretches or centers it
     across the card, confirmed via getBoundingClientRect (a 93px-wide link inside a 370px
     wrapper, sitting at the wrapper's left edge). This 60px box is most of the ~36px total
     card-height gap the user reported vs live (confirmed via a full structural breakdown:
     image/content/title/excerpt already matched live almost exactly, only this element didn't).
     Also the same wrong-Silka-face bug as the Subscribe button (var(--font-body--family) resolves
     to the literal "Silka Medium" face in this codebase, not a generic ranged family, so
     font-weight:700 double-bolds the wrong face -- live's real computed family is literal
     "Silka Bold"). Shared by Grove too (confirmed identical live markup/sizing on both
     /blogs/the-grove and /blogs/featured-in), so this fix applies correctly to both pages. */
  .vc-grove-card__read-more a {
    display: inline-flex;
    align-items: center;
    height: 60px;
    border-radius: 31px;
    font-family: 'Silka Bold', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #003d29;
    text-decoration: none;
  }

  .vc-grove-card__read-more a:hover {
    text-decoration: underline;
  }
/* END_BLOCK:_via-citrus-blog-post-card */

/* START_BLOCK:comparison-slider (INDEX:126) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    color: var(--handle-color, var(--color-foreground));
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:127) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:128) */
.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:130) */
.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:131) */
.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:132) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:133) */
.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:135) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:136) */
.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:138) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:139) */
.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:141) */
.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:142) */
.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:143) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:144) */
.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:145) */
.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:146) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-custom-property (INDEX:149) */
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:151) */
.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:152) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:155) */
.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:157) */
.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:158) */
/* 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:159) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:163) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:164) */
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:165) */
.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:166) */
/* 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:bento-grid (INDEX:169) */
.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:170) */
.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:175) */
.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:176) */
.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:cart-bubble (INDEX:177) */
.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] {

  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: #eb8935;
    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:178) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer (INDEX:179) */
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 {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__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:180) */
.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:181) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

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

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  .cart-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

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

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    margin-inline: auto;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

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

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:182) */
.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:183) */
.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:184) */
/* 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:185) */
.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:187) */
.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:188) */
/* ------------------------------------------------------------------------------ */

  /* 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:191) */
.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:192) */
.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:divider (INDEX:193) */
.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:194) */
.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:195) */
.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:196) */
.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:197) */
/* 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:198) */
/* 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:203) */
.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:205) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:206) */
.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:207) */
.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: 798px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 799px) {
    .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: 15px;
    --cart-bubble-top: -2.5px;
    --cart-bubble-right: 33.5px;
    position: absolute;
    border-radius: 50% !important;
  }
  

  .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: 799px) {
    .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: 799px) {
    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: 799px) {
    .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:208) */
.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: 799px) {
      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: 799px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 799px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    flex-direction: column;

    @media screen and (min-width: 799px) {
      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: 799px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    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: 799px) {
      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: 799px) {
      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;
  }

  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    outline-color: var(--color-foreground-subdued);
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
  }

  .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:214) */
.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:218) */
.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:219) */
/* 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:220) */
.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:225) */
.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:226) */
.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:227) */
.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:228) */
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:229) */
/* 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:233) */
/* 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:234) */
/* 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:product-badges-styles (INDEX:236) */
.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:237) */
.product-grid-view-zoom-out--details {
    display: none;
  }

  .product-grid-view-zoom-out--details .h4,
  .product-grid-view-zoom-out--details span,
  .product-grid-view-zoom-out--details s {
    font-size: var(--font-size--xs);
    font-family: var(--font-paragraph--family);
  }

  .product-grid-view-zoom-out--details span {
    font-weight: 500;
  }

  .product-grid-view-zoom-out--details .h4 {
    line-height: 1.3;
    font-weight: 400;
  }

  .product-grid-view-zoom-out--details > span.h6,
  .product-grid-view-zoom-out--details > div.h6 > product-price {
    display: inline-block;
    line-height: 0;
    margin-top: var(--margin-2xs);
  }

  .product-grid-view-zoom-out--details > span.h6 > *,
  .product-grid-view-zoom-out--details > div.h6 > * > * {
    line-height: 1.2;
  }
/* END_SNIPPET:product-card-gallery-zoom-details-styles */

/* START_SNIPPET:product-card-styles (INDEX:238) */
.product-grid__card.product-grid__card {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--product-card-gap);
    align-items: var(--product-card-alignment);
    text-decoration: none;
    color: var(--color, var(--color-foreground));
    padding-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    overflow: hidden;
  }

  .product-grid__card .group-block > * {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  /* Collection and product list cards have equal heights */
  :is(.product-grid__item, .resource-list__item) .product-card {
    display: grid;
    height: 100%;
  }

  /* Product card title truncation - applied on mobile regardless of view */
  @media screen and (max-width: 749px) {
    :is(.product-card, .product-grid__card) :is(h4, .h4) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
    }
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  .product-card__content--via-citrus-global.product-grid__card {
    --product-card-gap: 0;
    position: relative;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: visible;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__gallery {
    --gallery-aspect-ratio: auto;
    aspect-ratio: auto !important;
    height: 430px !important;
    border-radius: 16px 16px 0 0;
    background: transparent;
    overflow: hidden;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__gallery::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(223, 232, 227, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  .product-card__content--via-citrus-global .vc-global-product-card__gallery:hover::after {
    opacity: 1;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__quick-view {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 162px;
    height: 60px !important;
    min-height: 60px;
    margin: 0;
    padding: 20px 35px;
    border: none;
    border-radius: 31px;
    background: #003d29;
    color: #ffffff;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition:
      opacity var(--animation-speed, 0.2s) var(--animation-easing, ease),
      background-color var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  .product-card__content--via-citrus-global .vc-global-product-card__quick-view:hover {
    background: #04543a;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__gallery:hover .vc-global-product-card__quick-view {
    opacity: 1;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__gallery .product-media-container,
  .product-card__content--via-citrus-global .vc-global-product-card__gallery .product-media,
  .product-card__content--via-citrus-global .vc-global-product-card__gallery img {
    aspect-ratio: auto !important;
    width: 100%;
    height: 430px !important;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__gallery img {
    object-fit: cover;
  }

  .product-card__content--via-citrus-global .vc-carousel-rating-badge {
    position: absolute;
    top: 25px;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 6px 10px 6px 20px;
    border-radius: 30px 0 0 30px;
    background: #84be43;
    color: #ffffff;
    text-align: right;
  }

  .product-card__content--via-citrus-global .vc-carousel-rating-badge__score {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
  }

  .product-card__content--via-citrus-global .vc-carousel-rating-badge__count {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 12.8px;
    font-weight: 500;
    line-height: 1.2;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    min-height: 120px;
    margin-top: -20px;
    padding: 13px 12px;
    border-radius: 16px;
    background: #003d29;
    color: #ffffff;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__copy {
    display: flex;
    flex: 0 0 calc(60% - 5px);
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__stars {
    display: flex;
    align-items: center;
    gap: 0;
    height: 16px;
    color: #eb8935;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__star {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentcolor;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__title {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-heading--family);
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -1px;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__title a {
    color: inherit;
    text-decoration: none;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__price,
  .product-card__content--via-citrus-global .vc-global-product-card__price * {
    color: #ffffff;
    font-family: var(--font-body--family);
    font-size: 20px;
    font-weight: 500 !important;
    line-height: normal;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__form-component {
    flex: 0 0 40%;
    align-self: center;
    min-width: 0;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__form {
    margin: 0;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__button {
    width: 100%;
    max-width: 144px;
    height: 47px !important;
    min-height: 0 !important;
    max-height: 47px;
    margin-left: auto;
    padding: 15px 18px !important;
    border-radius: 31px !important;
    background-color: #eb8935 !important;
    color: #ffffff !important;
    font-family: "Silka Bold", sans-serif;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 17px;
    text-transform: capitalize;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__button:hover {
    background-color: #e36e1e !important;
    color: #ffffff !important;
  }

  .product-card__content--via-citrus-global .vc-global-product-card__button .add-to-cart-icon {
    display: none;
  }

  @media screen and (max-width: 799px) {
    .product-card__content--via-citrus-global .vc-global-product-card__quick-view {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    .product-card__content--via-citrus-global .vc-global-product-card__info {
      flex-flow: row nowrap;
    }

    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card-styles */

/* START_SNIPPET:product-grid (INDEX:240) */
/* Product grid */
  .product-grid-container {
    display: block;
    width: 100%;
    padding-block: var(--padding-block-start) var(--padding-block-end);

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

  [product-grid-view='default'] {
    --product-grid-gap: 16px;
    --padding-block-start: 24px;
    --padding-block-end: 24px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
  }

  .product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--product-grid-gap);
    margin: auto;
    padding: 0;
    list-style: none;
    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);

      grid-template-columns: var(--product-grid-columns-desktop);
    }
  }

  .product-grid :is(h3, p) {
    margin: 0;
  }

  .product-grid__item {
    border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
  }

  [product-grid-view='default'] .product-grid__item {
    padding-block: 0;
  }

  .product-grid--organic[product-grid-view='default'] .product-grid__item {
    height: fit-content;
  }

  [product-grid-view='zoom-out'] .product-grid__card.product-grid__card {
    row-gap: var(--padding-xs);
  }

  [product-grid-view='mobile-single'],
  .product-grid-mobile--large {
    @media screen and (max-width: 749px) {
      grid-template-columns: 1fr;
    }
  }

  ul[product-grid-view='zoom-out'] .product-grid__card > * {
    display: none;
  }

  [product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(
      10,
      minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    :root:active-view-transition-type(product-grid) {
      details[open] floating-panel-component {
        view-transition-name: panel-content;

        .checkbox *,
        .facets__pill-label {
          transition: none;
        }

        .facets--vertical & {
          view-transition-name: none;
        }
      }

      .product-grid {
        view-transition-name: product-grid;
      }

      footer {
        view-transition-name: footer;
      }

      .product-grid__item,
      floating-panel-component {
        transition: none;
      }
    }
  }

  ::view-transition-group(panel-content) {
    z-index: 1;
  }

  ::view-transition-new(product-grid) {
    animation-delay: 150ms;
    animation-name: fadeInUp;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  results-list[initialized] {
    .product-grid__item {
      transition: opacity var(--animation-speed) var(--animation-easing),
        transform var(--animation-speed) var(--animation-easing);

      @starting-style {
        opacity: 0;
        transform: translateY(10px);
      }
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Product card title truncation - applied only to zoom-out view */
  [product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

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

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:241) */
.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:242) */
: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:243) */
/* 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:244) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-recommendations-styles (INDEX:246) */
.product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }
/* END_SNIPPET:product-recommendations-styles */

/* START_SNIPPET:quantity-selector-styles (INDEX:247) */
/* Quantity selector */
  .quantity-selector {
    --quantity-selector-width: 124px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    flex: 1 1 var(--quantity-selector-width);
    align-self: stretch;
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
    border-radius: var(--style-border-radius-buttons-secondary);
  }

  .quantity-selector :is(.quantity-minus, .quantity-plus) {
    /* Unset button styles */
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
    color: var(--color-input-text);
  }

  .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-inputs);
    border-end-start-radius: var(--style-border-radius-inputs);
  }

  .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-inputs);
    border-end-end-radius: var(--style-border-radius-inputs);
  }

  .product-details .quantity-selector,
  .quick-add-modal .quantity-selector {
    border-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-minus,
  .quick-add-modal .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-buttons-primary);
    border-end-start-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-plus,
  .quick-add-modal .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-buttons-primary);
    border-end-end-radius: var(--style-border-radius-buttons-primary);
  }

  .quantity-selector .svg-wrapper {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .quantity-selector svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  :is(.quantity-minus, .quantity-plus):active .svg-wrapper {
    transform: scale(0.9);
  }

  .quantity-selector input[type='number'] {
    margin: 0;
    text-align: center;
    border: none;
    appearance: none;
    max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
    border-radius: var(--style-border-radius-buttons);
    color: var(--color-input-text);
    background-color: transparent;
  }

  /* Chrome, Safari, Edge, Opera */
  .quantity-selector input[type='number']::-webkit-inner-spin-button,
  .quantity-selector input[type='number']::-webkit-outer-spin-button {
    appearance: none;
  }

  /* Firefox */
  .quantity-selector input[type='number'] {
    appearance: textfield;
  }
/* END_SNIPPET:quantity-selector-styles */

/* START_SNIPPET:quantity-selector (INDEX:248) */
.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:249) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:251) */
/* 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;
  }

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

  .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:254) */
.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:255) */
.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:256) */
.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:257) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list(min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-modal (INDEX:260) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  /* Live's own search panel is a full-width bar that drops from the header (white bg, dark
     backdrop below), not a centered dialog card -- kept Heritage's native centered-dialog
     mechanism (avoids reworking dialog.js's positioning) but widened + top-anchored it to read
     closer to live rather than a small floating box. */
  .vc-search-modal__heading {
    margin: 0 0 24px;
    text-align: center;
    font-family: var(--font-heading--family);
    font-size: 32px;
    font-weight: 600;
    color: #003d29;
  }

  .vc-search-modal__commonly-searched {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    row-gap: 6px;
    padding: 16px 24px 0;
    font-family: 'Silka Medium', sans-serif;
    font-size: 16px;
    color: #003d29;
  }

  .vc-search-modal__commonly-searched strong {
    font-weight: 700;
  }

  .vc-search-modal__commonly-searched a {
    font-weight: 500;
    color: #003d29;
    text-decoration: underline;
  }

  .vc-search-modal__commonly-searched a:hover {
    color: #eb8935;
  }

  .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: 24px 0 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      --modal-width: min(1220px, 92dvw);
      --modal-top-margin: 0;

      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;
    flex-direction: column;
  }

  .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:261) */
.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: 798px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 799px) {
    [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: 799px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 799px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 799px) {
    .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:262) */
.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:264) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:266) */
.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:267) */
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:268) */
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:270) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover)
    > slideshow-container
    > slideshow-slides
    > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:272) */
.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:swatch-styles (INDEX:278) */
/* 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-component-shimmer-styles (INDEX:281) */
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:282) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block.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);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:284) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-picker-styles (INDEX:297) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    background-color: var(--color-variant-background);
    color: inherit;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }

  .variant-picker .variant-option--buttons label:has(.swatch) {
    border-radius: var(--variant-picker-swatch-radius);
  }

  /* Variant option component */
  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;

    overflow-list::part(list) {
      padding-block: var(--overflow-list-padding-block, 0);
      padding-inline: var(--overflow-list-padding-inline, 0);
    }
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media screen and (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option--buttons legend,
  .variant-option--dropdowns > label,
  .variant-option[data-testid='variant-option-single'] {
    color: var(--variant-option-label-color, var(--color-foreground));
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued));
  }

  @media (prefers-reduced-motion: no-preference) {
    .variant-option__button-label,
    .variant-option__select-wrapper,
    .variant-option__button-label::before,
    .variant-option__button-label::after,
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }

    .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label::after {
      transition-property: clip-path;
    }

    .variant-option__button-label::before {
      transition-property: border-color;
    }

    .variant-option__select-wrapper,
    .variant-option__button-label {
      transition-property: background-color, border-color, color;
    }
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    cursor: pointer;
    display: flex;
    flex: 0 0 3.25em;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    overflow: clip;
    justify-content: center;
    min-height: 3.25em;
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    gap: 0;

    &:hover,
    &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
      --variant-picker-stroke-color: var(--color-variant-hover-border);

      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

    /* so instead use the layered background image trick */
    &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
      border-width: 0;
    }

    /* ::after/::before act as a fake border for the button style variant */

    /* ::after is the unavailable variant border that clips in */
    &:not(.variant-option__button-label--has-swatch)::before,
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: var(--options-border-width) solid var(--color-selected-variant-border);
      border-radius: inherit;
      pointer-events: none;
      z-index: 2;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
    }

    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
      inset: 0;
    }

    &:not(.variant-option__button-label--has-swatch)::before {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(0 0 0 0);
      border-color: var(--color-variant-border);
      inset: calc(var(--options-border-width) * -1);
    }

    &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
      border-color: var(--color-selected-variant-border);
    }

    /* setting left/right accounts for variant buttons of different widths */
    &:not(:has(:checked)):has(~ label > :checked),
    &:has(:checked):has(~ label > [data-previous-checked='true']) {
      .variant-option__button-label__pill {
        right: 0;
        left: unset;
      }
    }

    &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
    &:has(:checked) ~ label {
      .variant-option__button-label__pill {
        left: 0;
        right: unset;
      }
    }

    &:not(:has(:checked)):has(~ label > :checked) {
      --pill-offset: calc(100% + 1px);
    }

    &:has(:checked) ~ label {
      --pill-offset: calc(-100% - 1px);
    }

    &:has([data-current-checked='true']):first-of-type
      ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
    &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
      --clip: 0 0 0 100%;
    }

    &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
        .variant-option__button-label--has-swatch
      ),
    &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
      --clip: 0 100% 0 0;
    }

    &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  /* wrap around only for 3 or more variants in a row */

  /* the more complex selector rules here produce the wrap around effect for first/last variants */
  .variant-option--buttons:has(:nth-of-type(3)) {
    .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
      --pill-offset: calc(100% + 1px);
    }

    .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
        ~ label:last-of-type > :checked
      ) {
      --pill-offset: calc(-100% - 1px);
    }
  }

  .variant-option__button-label__pill {
    background: var(--color-selected-variant-background);
    position: absolute;
    top: calc(var(--options-border-width) * -1);
    bottom: calc(var(--options-border-width) * -1);
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    transform: translateX(var(--pill-offset, 0));
  }

  .variant-option__button-label__text {
    pointer-events: none;
    text-align: start;
    text-wrap: auto;
    z-index: 2;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);

    padding: 0;
    border: none;
    flex-basis: auto;
    min-height: auto;
  }

  /* Override global label:has(input) display rule with higher specificity */
  .variant-option__button-label--has-swatch:has(input) {
    display: block;
  }

  .variant-option__button-label:has(:checked) {
    --variant-picker-stroke-color: var(--color-selected-variant-border);

    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label:has(:checked):hover {
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);

    .variant-option__button-label__pill {
      background-color: var(--color-selected-variant-hover-background);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid var(--color-variant-hover-border);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg,
  .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
    stroke: rgb(var(--color-variant-text-rgb) / var(--opacity-subdued-text));
  }

  /* Disable the duplicate overlay line so the subdued stroke doesn't double up */
  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg line:last-of-type {
    stroke: none;
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-selected-variant-border);

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-strikethrough-color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));

    background-color: var(--color-selected-variant-background);
    color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked):hover {
    background-color: var(--color-selected-variant-hover-background);
    color: var(--color-selected-variant-hover-text);
  }

  .variant-option__button-label input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .variant-option__button-label svg {
    position: absolute;
    left: var(--options-border-width);
    top: var(--options-border-width);
    height: calc(100% - (var(--options-border-width) * 2));
    width: calc(100% - (var(--options-border-width) * 2));
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
    stroke: var(--variant-strikethrough-color, rgb(var(--color-variant-text-rgb) / var(--opacity-60)));

    line {
      stroke-width: var(--options-border-width);
    }

    /* The second stroke line exists for "motion overlay". Disabled for swatches, remove line to avoid overlapping lines  */
    line:last-of-type {
      stroke: none;
    }
  }

  /* Override for swatch labels to maintain block display */
  .variant-option__button-label--has-swatch:has(input[type='radio']) {
    display: block;
  }

  /* Swatches do not take a background-color since a transparent or missing swatch would end up filled */
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked),
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked):hover {
    background-color: inherit;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:298) */
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:vc-quick-view-modal (INDEX:300) */
vc-quick-view {
    display: contents;
  }

  .vc-quick-view__dialog {
    width: min(900px, calc(100% - 40px));
    max-width: 900px;
    max-height: calc(100% - 40px);
    padding: 0;
    border: none;
    border-radius: 0;
    background: #ffffff;
    color: #003d29;
    font-family: var(--font-body--family);
    overflow: auto;
    scrollbar-gutter: stable;
  }

  .vc-quick-view__dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  .vc-quick-view__close {
    position: sticky;
    float: right;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-inline-start: auto;
    margin-inline-end: 12px;
    border: none;
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.1);
    color: #003d29;
    cursor: pointer;
  }

  .vc-quick-view__body {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    padding: 40px 10px 60px;
  }

  .vc-quick-view__gallery {
    position: relative;
    flex: 0 0 420px;
  }

  .vc-quick-view__main-image-wrap {
    position: relative;
    width: 357px;
    aspect-ratio: 1;
    background: #f4f4f4;
  }

  .vc-quick-view__main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .vc-quick-view__arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transform: translateY(-50%);
  }

  .vc-quick-view__arrow-icon {
    width: 16px;
    height: 16px;
    fill: #333333;
  }

  .vc-quick-view__arrow--prev {
    left: 10px;
  }

  .vc-quick-view__arrow--next {
    right: 10px;
  }

  .vc-quick-view__arrow--next .vc-quick-view__arrow-icon {
    transform: scaleX(-1);
  }

  .vc-quick-view__gallery [data-vc-qv-prev][hidden],
  .vc-quick-view__gallery [data-vc-qv-next][hidden],
  .vc-quick-view__gallery [data-vc-qv-thumb-prev][hidden],
  .vc-quick-view__gallery [data-vc-qv-thumb-next][hidden] {
    display: none;
  }

  .vc-quick-view__circles {
    position: absolute;
    top: 139px;
    left: 360px;
    width: 69px;
    height: 214px;
    pointer-events: none;
  }

  .vc-quick-view__circles img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .vc-quick-view__thumbs-wrap {
    position: relative;
    width: 357px;
    height: 96px;
    margin-top: 10px;
  }

  .vc-quick-view__thumbs {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .vc-quick-view__thumbs::-webkit-scrollbar {
    display: none;
  }

  .vc-quick-view__thumb {
    flex: 0 0 85px;
    width: 85px;
    height: 96px;
    padding: 0;
    border: none;
    background: none;
    opacity: 0.3;
    scroll-snap-align: start;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  .vc-quick-view__thumb.is-active {
    opacity: 1;
  }

  .vc-quick-view__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .vc-quick-view__content {
    flex: 0 0 420px;
  }

  .vc-quick-view__title {
    margin: 0 0 8px;
    font-size: 42px;
    line-height: 1.125;
  }

  .vc-quick-view__title a {
    color: #003d29;
    font-family: var(--font-heading--family);
    font-size: 42px;
    font-weight: 600;
    line-height: 1.125;
    text-decoration: none;
  }

  .vc-quick-view__price {
    margin-bottom: 16px;
    font-family: var(--font-heading--family);
    font-size: 35px;
    font-weight: 400;
    line-height: 1;
  }

  .vc-quick-view__price-current {
    color: #eb8935;
  }

  .vc-quick-view__price-compare {
    margin-inline-start: 10px;
    color: rgb(4, 84, 58);
    text-decoration: line-through;
  }

  .vc-quick-view__savings {
    margin-bottom: 20px;
    color: #eb8935;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 600;
  }

  .vc-quick-view__payment-terms form.payment-terms {
    padding-top: 0;
    margin-bottom: 4px;
    font-size: 12px;
  }

  .vc-quick-view__description {
    margin-bottom: 21px;
    padding-top: 20px;
    color: #003d29;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
  }

  .vc-quick-view__view-details {
    display: inline-block;
    margin-bottom: 3px;
    color: #eb8935;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
  }

  .vc-quick-view__variants {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }

  .vc-quick-view__variants:empty {
    display: none;
  }

  .vc-quick-view__option {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .vc-quick-view__option-label {
    color: #003d29;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
  }

  .vc-quick-view__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .vc-quick-view__swatch-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-image: var(--vc-qv-swatch-image);
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 0 1px rgba(0, 61, 41, 0.2);
    cursor: pointer;
  }

  .vc-quick-view__swatch-btn.is-selected {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
  }

  .vc-quick-view__swatch-btn.is-unavailable {
    opacity: 0.35;
  }

  .vc-quick-view__form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    padding-top: 56px;
    padding-bottom: 50px;
  }

  .vc-quick-view__quantity {
    display: flex;
    align-items: stretch;
    width: 165px;
    height: 60px;
    overflow: hidden;
    border-radius: 31px;
  }

  .vc-quick-view__qty-btn {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border: none;
    background: #eb8935;
    color: #ffffff;
    cursor: pointer;
  }

  .vc-quick-view__qty-btn[data-vc-qv-qty-minus] {
    background: #f8ba84;
  }

  .vc-quick-view__qty-input {
    flex: 1 1 auto;
    width: 0;
    border: none;
    background: #ffffff;
    color: rgb(54, 54, 54);
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    -moz-appearance: textfield;
  }

  .vc-quick-view__qty-input::-webkit-outer-spin-button,
  .vc-quick-view__qty-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  .vc-quick-view__add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 35px;
    border: none;
    border-radius: 31px;
    background: #003d29;
    color: #ffffff;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }

  .vc-quick-view__add-to-cart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .vc-quick-view__add-to-cart-icon {
    width: 43px;
    height: 31px;
    margin: 0 5px 0 -5px;
  }

  .vc-quick-view__loading {
    display: none;
  }

  .vc-quick-view__loading[data-active] {
    display: block;
    padding: 80px;
    text-align: center;
  }

  @media screen and (max-width: 749px) {
    .vc-quick-view__body {
      flex-direction: column;
      gap: 24px;
      padding: 0 24px 24px;
    }

    .vc-quick-view__gallery,
    .vc-quick-view__content {
      flex: 1 1 100%;
      width: 100%;
    }

    .vc-quick-view__main-image-wrap,
    .vc-quick-view__thumbs-wrap {
      width: 100%;
    }

    .vc-quick-view__circles {
      display: none;
    }

    .vc-quick-view__title a {
      font-size: 32px;
    }

    .vc-quick-view__price {
      font-size: 28px;
    }
  }
/* END_SNIPPET:vc-quick-view-modal */

/* START_SNIPPET:via-citrus-about (INDEX:301) */
/* .section-background falls back to --color-background (base.css) when a section has
     no explicit background_color. Scoped to #MainContent (not body/:root) so it whitens
     every section's default fill without leaking into the header -- the header reads the
     same var for its hover-swap background (sections/header.liquid's
     [data-transparent-background] rules), and #MainContent is a sibling of #header-group,
     not an ancestor, so it can't reach it. Sections with their own explicit color are
     untouched (they get a more specific .color-custom-{id} rule). Plain background-color
     on body is a belt-and-suspenders flat fallback for any body-level sliver outside main. */
  body {
    background-color: #fff;
  }

  #MainContent {
    --color-background: #fff;
  }

  /* ============================================================================
     FEATURED IN + MARQUEE (verbatim copy of via-citrus-homepage.liquid's block --
     same JSON section keys reused on this page, see file doc comment above)
     ============================================================================ */
  [id^="shopify-section-"][id$="__section_featured_in_title"] .section {
    --full-page-grid-central-column-width: min(1200px - (var(--page-margin) * 2), 100% - (var(--page-margin) * 2)) !important;
  }

  /* Neutralize base.css's leaked `.spacing-style.layout-panel-flex.layout-panel-flex--column
     .section-content-wrapper.mobile-column` rules (~2273-2400, a "Care page additional css" dump
     -- left untouched in base.css per user request, other elements may still depend on it) for
     THIS section specifically -- same fix as via-citrus-homepage.liquid's own
     section_featured_in_title instance, see that file for the full investigation notes. Confirmed
     via computed style this page's copy leaks identically: margin-top:80px at every width
     <=799px, padding-block-start:153px winning at every width >=750px. */
  [id^="shopify-section-"][id$="__section_featured_in_title"] .spacing-style.layout-panel-flex.layout-panel-flex--column.section-content-wrapper.mobile-column {
    margin-top: 0 !important;
  }

  @media screen and (min-width: 750px) {
    [id^="shopify-section-"][id$="__section_featured_in_title"] .spacing-style.layout-panel-flex.layout-panel-flex--column.section-content-wrapper.mobile-column {
      padding-block-start: 165px !important;
    }
  }

  [id^="shopify-section-"][id$="__section_featured_in_title"] .section-background,
  [id^="shopify-section-"][id$="__marquee_featured_in"] .section-background {
    background: transparent !important;
  }

  [id^="shopify-section-"][id$="__marquee_featured_in"] marquee-component {
    max-width: min(1200px, 100% - 40px) !important;
    margin-inline: auto !important;
    /* See via-citrus-homepage.liquid for the full derivation/history of this value (kept in
       sync -- this is a verbatim copy of the same section). */
    --marquee-speed: 66.15s !important;
  }

  [id^="shopify-section-"][id$="__marquee_featured_in"] marquee-component:not([data-disabled]) .marquee__wrapper {
    animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
  }

  [id^="shopify-section-"][id$="__marquee_featured_in"] .marquee__repeated-items > * {
    width: 220px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  [id^="shopify-section-"][id$="__marquee_featured_in"] .marquee__repeated-items > * > a {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media screen and (min-width: 750px) and (max-width: 1023px) {
    [id^="shopify-section-"][id$="__marquee_featured_in"] .marquee__repeated-items > * {
      width: calc((100vw - 40px) / 3);
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1215px) {
    [id^="shopify-section-"][id$="__marquee_featured_in"] .marquee__repeated-items > * {
      width: 177px;
    }
  }

  @media screen and (min-width: 1216px) and (max-width: 1407px) {
    [id^="shopify-section-"][id$="__marquee_featured_in"] .marquee__repeated-items > * {
      width: 216px;
    }
  }

  /* Real bug: old theme's title ("We're Featured In") and logo marquee are ONE section with
     an internal gap between them (title's own margin-bottom, not settings-driven -- not found in
     custom.css.liquid, must come from the base theme's own stylesheet). Heritage splits them into
     two separate sections with zero JSON padding between (padding-block-end:0 / padding-block-
     start:0), so the title text and the top of the logo row rendered nearly flush -- live-measured
     gap (Playwright): flat 35px below 800px viewport, flat 50px at 800px+ (clean 799/800
     breakpoint, this project's established real cutover). Overrides the REAL padding-block-end
     property directly (not the --padding-block-end custom prop) -- the custom prop still feeds
     assets/spacing-style.liquid's own `max(20px, calc(var(--spacing-scale) * value))` formula,
     which would re-scale a custom-prop override by 0.7x below 990px (a SEPARATE, unrelated
     breakpoint), producing 24.5px instead of the intended flat 35px. */
  [id^="shopify-section-"][id$="__section_featured_in_title"] .section .layout-panel-flex.spacing-style {
    padding-block-end: 35px !important;
  }

  @media screen and (min-width: 800px) {
    [id^="shopify-section-"][id$="__section_featured_in_title"] .section .layout-panel-flex.spacing-style {
      padding-block-end: 50px !important;
    }
  }

  @media screen and (max-width: 749px) {
    [id^="shopify-section-"][id$="__section_featured_in_title"] .section .layout-panel-flex.spacing-style {
      padding-block-start: 23px !important;
    }

    [id^="shopify-section-"][id$="__marquee_featured_in"] marquee-component {
      /* Corrected 2026-07-30: was 20.5s (based on a mismeasured live velocity, ~2x too fast --
         see via-citrus-homepage.liquid for the full derivation). Now 39.6s. */
      --marquee-speed: 39.6s !important;
    }

    [id^="shopify-section-"][id$="__marquee_featured_in"] .marquee__repeated-items > * {
      width: 117px;
      height: 40px;
    }

    [id^="shopify-section-"][id$="__marquee_featured_in"] .marquee__repeated-items .icon-block__media {
      max-width: 70px !important;
    }
  }

  [id^="shopify-section-"][id$="__section_featured_in_title"] [class*="__text_title"],
  [id^="shopify-section-"][id$="__section_featured_in_title"] [class*="__text_title"] > * {
    font-size: 25px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
  }

  [id^="shopify-section-"][id$="__marquee_featured_in"] .icon-block__media {
    width: auto !important;
    height: 40px !important;
    max-width: 150px !important;
    object-fit: contain;
  }

  /* ============================================================================
     SHOP OUR FAMILY BUSINESS carousel -- adapted from product_list_trees' own CSS
     (via-citrus-homepage.liquid), same card design, minus the dome-background paint
     (homepage-only continuity system, doesn't apply to this standalone section: live
     has a plain white background behind this carousel on the About Us page).
     ============================================================================ */
  [id^="shopify-section-"][id$="__product_list_family"] [class*="__text_title"],
  [id^="shopify-section-"][id$="__product_list_family"] [class*="__text_title"] > * {
    font-size: 50px !important;
    font-weight: 600 !important;
    line-height: 50px !important;
    max-width: 960px !important;
    text-wrap: wrap !important;
  }

  @media screen and (min-width: 799px) {
    [id^="shopify-section-"][id$="__product_list_family"] [class*="__text_title"],
    [id^="shopify-section-"][id$="__product_list_family"] [class*="__text_title"] > * {
      letter-spacing: -2.14px !important;
    }
  }

  [id^="shopify-section-"][id$="__product_list_family"] [class*="__text_subtitle"],
  [id^="shopify-section-"][id$="__product_list_family"] [class*="__text_subtitle"] > * {
    font-weight: 500 !important;
    max-width: 960px !important;
  }

  /* Same stray base.css row-gap bug already root-caused for product_list_trees/_citrus
     (base.css:2377-2380's unscoped .section-resource-list/.section-carousel row-gap rule
     resolves to ~134px at this section's --gap-scale below 990px, dwarfing live's flat 50px
     subtitle-to-carousel gap) -- confirmed via Playwright on this section too (measured 134px
     locally vs live's 50px) but never ported here. */
  @media screen and (max-width: 799px) {
    [id^="shopify-section-"][id$="__product_list_family"] .section-resource-list {
      row-gap: 50px !important;
    }
  }

  [id^="shopify-section-"][id$="__product_list_family"] .product-card__content {
    position: relative;
  }

  [id^="shopify-section-"][id$="__product_list_family"] [class*="__product_title"],
  [id^="shopify-section-"][id$="__product_list_family"] [class*="__product_title"] > * {
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: -1px !important;
  }

  [id^="shopify-section-"][id$="__product_list_family"] .card-gallery {
    --gallery-aspect-ratio: auto;
    aspect-ratio: auto !important;
    height: 430px !important;
  }

  [id^="shopify-section-"][id$="__product_list_family"] .card-gallery img {
    aspect-ratio: auto !important;
    height: 430px !important;
  }

  /* Real bug, fixed 2026-08-08: white gap between the card image and the dark info box (visible
     from ~430px card-gallery height down to the image's actual painted content). Root cause: the
     inline --gallery-aspect-ratio style set directly on .card-gallery (per product's own
     image_ratio block setting, e.g. portrait 4/5) beats the external
     `--gallery-aspect-ratio: auto` rule above (inline specificity wins over a non-!important
     external declaration) -- so .product-media-container's own `aspect-ratio: var(--gallery-
     aspect-ratio, ...)` (product-media-container-styles.liquid) still resolves to the portrait
     ratio, self-constraining to width*1.25 (~392.5px at this card's width) instead of the full
     430px, and its own `overflow:hidden` clips the <img> there -- even though the <img> itself
     already has height:430 forced above. Fixed by overriding .product-media-container directly
     (bypassing the custom-property indirection) rather than chasing !important on the var.
     Confirmed present identically on product_list_trees (homepage) and product_list_citrus
     (Care) -- same fix ported to via-citrus-homepage.liquid and via-citrus-care.liquid. */
  [id^="shopify-section-"][id$="__product_list_family"] .card-gallery .product-media-container {
    aspect-ratio: auto !important;
    height: 430px !important;
  }

  /* Real bug, fixed 2026-08-06: live-verified via Playwright (getBoundingClientRect against the
     card) -- the badge sits 25px down from the card's top edge, not flush at top:0, rendering
     88x47px on live. Heritage's own paragraph line-height default (1.6) was also inflating the
     score/count boxes (22.4px/20.48px instead of ~17px/~15px), growing the badge to 100x58px.
     Same values already verified+applied on the homepage's product_list_trees carousel. */
  [id^="shopify-section-"][id$="__product_list_family"] .vc-carousel-rating-badge {
    position: absolute;
    top: 25px;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    background: #84be43;
    color: #ffffff;
    padding: 6px 10px 6px 20px;
    border-radius: 30px 0 0 30px;
    text-align: right;
  }

  [id^="shopify-section-"][id$="__product_list_family"] .vc-carousel-rating-badge__score {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
  }

  [id^="shopify-section-"][id$="__product_list_family"] .vc-carousel-rating-badge__count {
    font-size: 12.8px;
    font-weight: 500;
    font-family: var(--font-heading--family);
    line-height: 1.2;
    margin: 0;
  }

  @media screen and (max-width: 749px) {
    [id^="shopify-section-"][id$="__product_list_family"] .group-block-content.layout-panel-flex--row.mobile-column {
      flex-flow: row nowrap !important;
    }
  }

  [id^="shopify-section-"][id$="__product_list_family"] .product-card__content > .group-block {
    position: relative;
    z-index: 1;
    transform: translateY(-20px);
    min-height: 120px;
  }

  [id^="shopify-section-"][id$="__product_list_family"] [class*="__group_info"] > .group-block-content > .group-block {
    flex: 0 0 calc(60% - 5px);
  }

  [id^="shopify-section-"][id$="__product_list_family"] [class*="__group_info"] > .group-block-content > .buy-buttons-block {
    flex: 0 0 40%;
  }

  /* Real bug, fixed 2026-08-06: this nested column (rating/title/price stack) rendered with a
     21px gap (Heritage's own block "gap" setting, scaled via spacing-style.liquid) instead of old
     theme's flat 5px (.product-details{gap:5px}), inflating the info bar from live's 120px to
     152px -- and the whole card from live's 550px to 582px. Live-verified via Playwright. */
  [id^="shopify-section-"][id$="__product_list_family"] [class*="__group_info"] > .group-block-content > .group-block > .group-block-content {
    gap: 5px !important;
  }

  [id^="shopify-section-"][id$="__product_list_family"] .rating-wrapper .stars {
    height: 16px !important;
  }

  /* Live's 5 stars sit edge-to-edge (0 gap); Heritage's .rating default gap adds 2px between
     each -- same fix already applied to the homepage's product_list_trees carousel. */
  [id^="shopify-section-"][id$="__product_list_family"] .rating-wrapper .rating {
    gap: 0;
  }

  [id^="shopify-section-"][id$="__product_list_family"] product-price,
  [id^="shopify-section-"][id$="__product_list_family"] product-price * {
    font-weight: 500 !important;
  }

  /* Real bug, fixed 2026-08-06: live-verified (getComputedStyle on live's .add_to_cart) this
     button is font-weight:700 in the literal "Silka Bold" face, not the generic
     var(--font-body--family) token -- same double-bold-face pattern as the homepage/about hero
     buttons and already fixed on Care's own product_list_citrus carousel, just never ported here. */
  [id^="shopify-section-"][id$="__product_list_family"] .add-to-cart-button {
    height: 47px !important;
    min-height: 0 !important;
    max-height: 47px;
    max-width: 144px;
    padding: 15px 18px !important;
    font-size: 14px !important;
    font-family: 'Silka Bold', sans-serif;
    font-weight: 700;
    border-radius: 31px !important;
    text-transform: capitalize;
  }

  [id^="shopify-section-"][id$="__product_list_family"] .add-to-cart-icon {
    display: none;
  }

  [id^="shopify-section-"][id$="__product_list_family"] .add-to-cart-button:hover {
    background-color: #e36e1e !important;
  }

  [id^="shopify-section-"][id$="__product_list_family"] .quantity-selector-wrapper,
  [id^="shopify-section-"][id$="__product_list_family"] .accelerated-checkout-block {
    display: none !important;
  }

  /* Arrows: icon + position, live-verified 2026-08-06 (Playwright) against the homepage's
     already-fixed product_list_trees carousel -- same shared old-theme component, same fix
     ported verbatim. Icon replaced with old theme's exact arrow.svg/arrow-white.svg
     background-images (Heritage's inline currentColor svg is a different glyph). Native .flip-x
     (already applied to the previous button by slideshow-arrow.liquid) mirrors the
     background-image too, matching old theme's rotate(180deg) single-asset approach. 16px inset
     from the 1200px content column (was flush, 0 inset -- a real position bug). Hover background
     is --secondary-color (#003d29, confirmed in old theme's custom.css.liquid), not orange. */
  [id^="shopify-section-"][id$="__product_list_family"] slideshow-arrows {
    align-items: flex-start;
    padding-top: 178px;
    padding-inline: 16px;
    max-width: min(1200px, 100vw - 40px);
    margin-inline: auto;
  }

  @media screen and (max-width: 799px) {
    [id^="shopify-section-"][id$="__product_list_family"] slideshow-arrows {
      padding-inline: 0;
    }

    [id^="shopify-section-"][id$="__product_list_family"] .slideshow-control--previous {
      margin-inline-start: -16px;
    }

    [id^="shopify-section-"][id$="__product_list_family"] .slideshow-control--next {
      margin-inline-end: -16px;
    }
  }

  [id^="shopify-section-"][id$="__product_list_family"] .slideshow-control {
    opacity: 1 !important;
    width: 74px;
    height: 74px;
    min-width: 74px;
    min-height: 74px;
    background-color: rgba(204, 204, 204, 0.85) !important;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #003d29;
  }

  [id^="shopify-section-"][id$="__product_list_family"] .slideshow-control:hover {
    background-color: #003d29 !important;
    border-color: #ffffff;
  }

  [id^="shopify-section-"][id$="__product_list_family"] .slideshow-control .svg-wrapper {
    display: none;
  }

  @media screen and (max-width: 799px) {
    [id^="shopify-section-"][id$="__product_list_family"] .slideshow-control {
      width: 55px;
      height: 55px;
      min-width: 55px;
      min-height: 55px;
      background-color: #ffffff !important;
    }
  }

  [id^="shopify-section-"][id$="__product_list_family"] .vc-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
  }

  [id^="shopify-section-"][id$="__product_list_family"] .vc-carousel-dots__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #cccccc;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  [id^="shopify-section-"][id$="__product_list_family"] .vc-carousel-dots__dot[aria-current="true"] {
    background: #eb8935;
    outline: 1px solid #003d29;
    outline-offset: 3px;
  }

  @media screen and (min-width: 750px) {
    [id^="shopify-section-"][id$="__product_list_family"] .section {
      --full-page-grid-central-column-width: min(1200px, 100% - 80px);
      --page-content-width: min(1200px, 100vw - 80px);
    }
  }

  [id^="shopify-section-"][id$="__product_list_family"] slideshow-slides {
    --peek-next-slide-size: 0px !important;
  }

  /* Real bug, fixed 2026-08-08: below 750px this carousel fell back to Heritage's native
     single-column mobile clamp (card frozen at slide_width_max=450px, resource-list.liquid), but
     old theme's real Slick config (custom.js) only drops to slidesToShow:1 below its OWN
     breakpoint of 650px -- live shows 2 columns the whole 650-1023px range, live-verified via a
     fresh-reload width sweep (285px cards at 650px, 310px at 700px, confirmed against
     old-maperce-theme/assets/custom.js's `responsive: [{breakpoint:1024,...2},{breakpoint:650,
     ...1}]`). Extended both the container max-width and the 2-up --slide-width formula down to
     650px -- same formula already proven correct in the 750-1023 band, and it happens to also
     correct a second, smaller pre-existing gap (this build's 16px fluid --page-margin inset vs
     live's flat 20px) as a side effect, since capping the container to 100vw-40px and centering
     it naturally yields a flat 20px gutter. Below 650px live's single card is ALSO uncapped --
     flat `100vw - 40px` at every width tested (280px @320, 350px @390, 609px @649, all exact) --
     the native clamp's 450px ceiling (slide_width_max, resource-list.liquid) only diverges from
     that roughly 500-649px wide (90cqw naturally undershoots live below ~500 anyway, close enough
     unfixed), so overridden the same way just below the 650 cutover too. */
  @media screen and (max-width: 649px) {
    [id^="shopify-section-"][id$="__product_list_family"] .resource-list__slide {
      --slide-width: calc(100vw - 40px) !important;
    }
  }

  @media screen and (min-width: 650px) {
    [id^="shopify-section-"][id$="__product_list_family"] slideshow-slides {
      --gutter-slide-width: 0px !important;
      max-width: min(1200px, 100vw - 40px);
      margin-inline: auto;
    }
  }

  @media screen and (min-width: 650px) and (max-width: 1023px) {
    [id^="shopify-section-"][id$="__product_list_family"] .resource-list__slide {
      --slide-width: calc((100% - 40px) / 2) !important;
    }
  }

  /* resource-list-styles.liquid caps --resource-list-column-gap at 12px below 750px
     (--resource-list-mobile-gap-max) -- collapses live's flat 40px (columns_gap JSON setting,
     old theme's slick-slide 20px+20px margin) down to 12px in the 650-749px band the fix above
     newly opened up to 2-up. Same fix already applied to product_list_trees (homepage). */
  @media screen and (min-width: 650px) and (max-width: 749px) {
    [id^="shopify-section-"][id$="__product_list_family"] .resource-list {
      --resource-list-mobile-gap-max: 40px !important;
    }
  }

  @media screen and (min-width: 750px) {
    [id^="shopify-section-"][id$="__product_list_family"] [class*="__text_title"],
    [id^="shopify-section-"][id$="__product_list_family"] [class*="__text_subtitle"] {
      max-width: min(960px, 76.9vw) !important;
    }

    [id^="shopify-section-"][id$="__product_list_family"] [class*="__text_title"] > *,
    [id^="shopify-section-"][id$="__product_list_family"] [class*="__text_subtitle"] > * {
      max-width: 100% !important;
    }
  }

  [id^="shopify-section-"][id$="__product_list_family"] .section-background {
    background: transparent !important;
  }

  [id^="shopify-section-"][id$="__product_list_family"] slideshow-container {
    background-color: transparent !important;
  }

  /* Real bug: old theme's custom-collection.liquid has zero badge/chip markup for sold-out
     products -- it only swaps the Add to Cart button's own text to "Sold out" (already handled
     by snippets/price.liquid's is_product_card branch). Heritage's native product-card renders
     its own top-left "Sold out" pill regardless; confirmed absent on live via a direct DOM check
     across every slide of this exact carousel (same missing-badge bug already fixed for
     collection pages -- see CLAUDE.md). */
  [id^="shopify-section-"][id$="__product_list_family"] .product-badges {
    display: none !important;
  }
/* END_SNIPPET:via-citrus-about */

/* START_SNIPPET:via-citrus-care (INDEX:303) */
body {
    background-color: #fff;
  }

  #MainContent {
    --color-background: #fff;
  }

  /* ============================================================================
     GROW YOUR CITRUS COLLECTION carousel -- adapted from product_list_trees' /
     product_list_family's CSS, same card design, no dome background.
     ============================================================================ */
  [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__text_title"],
  [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__text_title"] > * {
    font-size: 50px !important;
    font-weight: 600 !important;
    line-height: 50px !important;
    max-width: 960px !important;
    text-wrap: wrap !important;
  }

  @media screen and (min-width: 799px) {
    [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__text_title"],
    [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__text_title"] > * {
      letter-spacing: -2.14px !important;
    }
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__text_subtitle"],
  [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__text_subtitle"] > * {
    font-weight: 500 !important;
    max-width: 960px !important;
  }

  /* Real bug, fixed 2026-08-06: base.css:2377-2380 has a stray/leftover, unscoped
     `.section-resource-list, .section-carousel { row-gap: max(15px, calc(var(--gap-scale,1.0) *
     191px)) }` rule (not native Heritage -- same dead rule already root-caused and fixed for
     product_list_trees, see via-citrus-homepage.liquid). At this section's own --gap-scale
     (0.7 below 990px), that resolves to 133.7px, dwarfing the 50px the JSON `gap` setting was
     supposed to produce after Heritage's own fluid scaling (35px) -- live's real subtitle-to-
     carousel gap is a flat, non-scaled 50px (old theme: .fs-text-wrap{margin:0 auto 50px}).
     Confirmed via Playwright: local measured 117.7px total gap vs live's 50px before this fix. */
  @media screen and (max-width: 799px) {
    [id^="shopify-section-"][id$="__product_list_citrus"] .section-resource-list {
      row-gap: 50px !important;
    }
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .product-card__content {
    position: relative;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__product_title"],
  [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__product_title"] > * {
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: -1px !important;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .card-gallery {
    --gallery-aspect-ratio: auto;
    aspect-ratio: auto !important;
    height: 430px !important;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .card-gallery img {
    aspect-ratio: auto !important;
    height: 430px !important;
  }

  /* Real bug, fixed 2026-08-08: white gap between the card image and the dark info box. Root
     cause: .card-gallery's inline --gallery-aspect-ratio style (per product's image_ratio
     setting) beats the external `--gallery-aspect-ratio: auto` rule above (inline
     wins over a non-!important external declaration), so .product-media-container's own
     `aspect-ratio: var(--gallery-aspect-ratio, ...)` (product-media-container-styles.liquid)
     still self-constrains to a shorter height and clips the <img> via its own `overflow:hidden`
     -- even though the <img> itself already has height:430 forced above. Fixed by overriding
     .product-media-container directly. Same fix ported to via-citrus-homepage.liquid and
     via-citrus-about.liquid (identical bug, confirmed present on all three carousels). */
  [id^="shopify-section-"][id$="__product_list_citrus"] .card-gallery .product-media-container {
    aspect-ratio: auto !important;
    height: 430px !important;
  }

  /* Real bug, fixed 2026-08-06: live-verified via Playwright (getBoundingClientRect against the
     card) -- the badge sits 25px down from the card's top edge, not flush at top:0, rendering
     88x47px on live. Heritage's own paragraph line-height default (1.6) was also inflating the
     score/count boxes (22.4px/20.48px instead of ~17px/~15px), growing the badge to 100x58px.
     Same values already verified+applied on the homepage's product_list_trees carousel. */
  [id^="shopify-section-"][id$="__product_list_citrus"] .vc-carousel-rating-badge {
    position: absolute;
    top: 25px;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    background: #84be43;
    color: #ffffff;
    padding: 6px 10px 6px 20px;
    border-radius: 30px 0 0 30px;
    text-align: right;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .vc-carousel-rating-badge__score {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .vc-carousel-rating-badge__count {
    font-size: 12.8px;
    font-weight: 500;
    font-family: var(--font-heading--family);
    line-height: 1.2;
    margin: 0;
  }

  @media screen and (max-width: 749px) {
    [id^="shopify-section-"][id$="__product_list_citrus"] .group-block-content.layout-panel-flex--row.mobile-column {
      flex-flow: row nowrap !important;
    }
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .product-card__content > .group-block {
    position: relative;
    z-index: 1;
    transform: translateY(-20px);
    min-height: 120px;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__group_info"] > .group-block-content > .group-block {
    flex: 0 0 calc(60% - 5px);
  }

  /* Real bug, fixed 2026-08-06: buy-buttons-block has no explicit height of its own
     (buy-buttons-styles.liquid only sets width:100%) -- it was stretching to match the taller
     60% column's content height (94px, from stars+title+price stacked) via the row's default
     align-items:normal (stretch), leaving the 47px button pinned to the TOP of that stretched
     box instead of centered. Live-verified the button sits vertically centered in the whole
     120px bar (37px/36px top/bottom offsets, ~even). align-self:center shrinks this block back
     to its own content height (the button's 47px) and centers it within the row's 94px cross
     size -- since the row itself already sits symmetrically padded (13px/13px) inside the outer
     120px bar, this lands the button at the same centered position live measures, without
     touching the left column's own (correctly top-anchored) stars/title/price stack. */
  [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__group_info"] > .group-block-content > .buy-buttons-block {
    flex: 0 0 40%;
    align-self: center;
  }

  /* Real bug, fixed 2026-08-06: this nested column (rating/title/price stack) rendered with a
     21px gap (Heritage's own block "gap" setting, scaled via spacing-style.liquid) instead of old
     theme's flat 5px (.product-details{gap:5px}), inflating the info bar from live's 120px to
     152px -- and the whole card from live's 550px to 582px. Live-verified via Playwright. */
  [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__group_info"] > .group-block-content > .group-block > .group-block-content {
    gap: 5px !important;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .rating-wrapper .stars {
    height: 16px !important;
  }

  /* Live's 5 stars sit edge-to-edge (0 gap); Heritage's .rating default gap adds 2px between
     each -- same fix already applied to the homepage's product_list_trees carousel. */
  [id^="shopify-section-"][id$="__product_list_citrus"] .rating-wrapper .rating {
    gap: 0;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] product-price,
  [id^="shopify-section-"][id$="__product_list_citrus"] product-price * {
    font-weight: 500 !important;
  }

  /* Real bug, fixed 2026-08-06: live-verified (getComputedStyle on live's .add_to_cart) this
     button is font-weight:700 in the literal "Silka Bold" face, not the generic
     var(--font-body--family) token -- same double-bold-face pattern as the homepage/about hero
     buttons (see CLAUDE.md's Hero section). Was previously rendering as plain "Silka" 400. */
  [id^="shopify-section-"][id$="__product_list_citrus"] .add-to-cart-button {
    height: 47px !important;
    min-height: 0 !important;
    max-height: 47px;
    max-width: 144px;
    padding: 15px 18px !important;
    font-size: 14px !important;
    font-family: 'Silka Bold', sans-serif;
    font-weight: 700;
    border-radius: 31px !important;
    text-transform: capitalize;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .add-to-cart-icon {
    display: none;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .add-to-cart-button:hover {
    background-color: #e36e1e !important;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .quantity-selector-wrapper,
  [id^="shopify-section-"][id$="__product_list_citrus"] .accelerated-checkout-block {
    display: none !important;
  }

  /* Arrows: icon + position, live-verified 2026-08-06 (Playwright) against the homepage's
     already-fixed product_list_trees carousel -- same shared old-theme component, same fix
     ported verbatim. Icon replaced with old theme's exact arrow.svg/arrow-white.svg
     background-images (Heritage's inline currentColor svg is a different glyph). Native .flip-x
     (already applied to the previous button by slideshow-arrow.liquid) mirrors the
     background-image too, matching old theme's rotate(180deg) single-asset approach. 16px inset
     from the 1200px content column (was flush, 0 inset -- a real position bug). Hover background
     is --secondary-color (#003d29, confirmed in old theme's custom.css.liquid), not orange. */
  [id^="shopify-section-"][id$="__product_list_citrus"] slideshow-arrows {
    align-items: flex-start;
    padding-top: 178px;
    padding-inline: 16px;
    max-width: min(1200px, 100vw - 40px);
    margin-inline: auto;
  }

  @media screen and (max-width: 799px) {
    [id^="shopify-section-"][id$="__product_list_citrus"] slideshow-arrows {
      padding-inline: 0;
    }

    [id^="shopify-section-"][id$="__product_list_citrus"] .slideshow-control--previous {
      margin-inline-start: -16px;
    }

    [id^="shopify-section-"][id$="__product_list_citrus"] .slideshow-control--next {
      margin-inline-end: -16px;
    }
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .slideshow-control {
    opacity: 1 !important;
    width: 74px;
    height: 74px;
    min-width: 74px;
    min-height: 74px;
    background-color: rgba(204, 204, 204, 0.85) !important;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #003d29;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .slideshow-control:hover {
    background-color: #003d29 !important;
    border-color: #ffffff;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .slideshow-control .svg-wrapper {
    display: none;
  }

  @media screen and (max-width: 799px) {
    [id^="shopify-section-"][id$="__product_list_citrus"] .slideshow-control {
      width: 55px;
      height: 55px;
      min-width: 55px;
      min-height: 55px;
      background-color: #ffffff !important;
    }
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .vc-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .vc-carousel-dots__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #cccccc;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .vc-carousel-dots__dot[aria-current="true"] {
    background: #eb8935;
    outline: 1px solid #003d29;
    outline-offset: 3px;
  }

  /* min-width dropped 750->650 alongside the --slide-width fix below: --gutter-slide-width not
     being zeroed below 750 turned out NOT to be a no-op just because the outer slideshow-slides
     box measured the same size either way -- it still insets the first slide's own left edge and
     shrinks the "100%" the --slide-width calc divides, so a 700px viewport was rendering 314px
     slides with a 12px gap instead of live's real 310px/40px. Live-verified after the fix. */
  @media screen and (min-width: 650px) {
    [id^="shopify-section-"][id$="__product_list_citrus"] .section {
      --full-page-grid-central-column-width: min(1200px, 100% - 80px);
      --page-content-width: min(1200px, 100vw - 80px);
    }
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] slideshow-slides {
    --peek-next-slide-size: 0px !important;
  }

  @media screen and (min-width: 650px) {
    [id^="shopify-section-"][id$="__product_list_citrus"] slideshow-slides {
      --gutter-slide-width: 0px !important;
      max-width: min(1200px, 100vw - 40px);
      margin-inline: auto;
    }
  }

  /* Real bug, fixed 2026-08-06: this 2-up band was scoped min-width:750px, a guessed Heritage-
     native cutoff -- old theme's real Slick config for .fs-slider (custom.js) is
     `slidesToShow:3, responsive:[{breakpoint:1024,slidesToShow:2},{breakpoint:650,slidesToShow:1}]`.
     Slick's own breakpoint matching (slick.min.js's checkResponsive, confirmed by reading the
     vendored source directly rather than guessing) sorts breakpoints descending and applies
     `windowWidth < breakpoint`, which works out to exactly: <=649px 1-up, 650-1023px 2-up,
     >=1024px 3-up (this build's own 1024/1023 upper bound already happened to match this exactly).
     750 left a real 650-749px gap where local silently fell back to Heritage's native
     mobile_card_size single-peek-card formula instead of live's real 2-up tablet layout --
     live-verified via Playwright at the exact 649/650/651/1023/1024/1025px boundaries. */
  @media screen and (min-width: 650px) and (max-width: 1023px) {
    [id^="shopify-section-"][id$="__product_list_citrus"] .resource-list__slide {
      --slide-width: calc((100% - 40px) / 2) !important;
    }
  }

  /* Real bug, fixed 2026-08-06, found while verifying the 650px fix above: slide width now matched
     live but the visual gap between slides was still only 12px instead of live's 40px. Root cause
     is a level deeper than this file -- Heritage's own resource-list-styles.liquid caps
     --resource-list-mobile-gap-max at 12px below 749px (a plain media query AND an equivalent
     @container query, neither scoped to us), which feeds --resource-list-column-gap, which is what
     resource-list-carousel.liquid's native --slide-width formula and its `gap` property both
     actually consume -- our --slide-width !important above overrides the native formula's OUTPUT,
     but not this upstream variable, so the real rendered gap stayed wrong even though the slide
     width itself was already correct. Forcing the var back to its own uncapped default here keeps
     it derived from --resource-list-column-gap-desktop rather than hardcoding a second literal
     40px that could drift out of sync with it.

     Widened from an original min-width:650px scoping to a flat max-width:749px, 2026-08-06: the
     native cap (resource-list-styles.liquid) applies to the WHOLE <750px range, not just the 2-up
     650-749 band -- the below-650px single-card fix needs the same uncap, confirmed live-verified
     at 649px (live's gap between the single visible card and the next, off-screen one is 40px;
     this build's was still capped to 12px pre-fix, pulling 8px of the next card into view when it
     should be fully off-screen). */
  @media screen and (max-width: 749px) {
    [id^="shopify-section-"][id$="__product_list_citrus"] .resource-list {
      --resource-list-mobile-gap-max: 9999px !important;
    }
  }

  /* Real bug, fixed 2026-08-06: below the 650px 1-up/2-up boundary established above, this build
     fell through to Heritage's native single-card formula -- resource-list-carousel.liquid's
     `@container (max-width: 749px) { --slide-width: clamp(150px, var(--mobile-card-size, 60cqw),
     var(--slide-width-max)) }`, fed by this section's own `mobile_card_size:"90cqw"` JSON setting
     but hard-capped at resource-list.liquid's own hardcoded `--slide-width-max: 450px`. At 649px
     that clamps to the 450px ceiling (69% of viewport) with the next card peeking ~38% into frame.
     Old theme's real Slick config has no peek at all below 650 (slidesToShow:1, no centerMode) --
     live-verified via Playwright at 390/500/600/640/649px: the single card is ALWAYS exactly
     `viewport - 40px` (20px flush margin each side, next slide fully off-screen), never a
     percentage/clamp formula. cqw is safe outside an actual @container block here too --
     .resource-list__carousel already has container-type:inline-size, so any cqw usage in its
     subtree resolves against it regardless of nesting; and since the gutter system below makes
     slideshow-slides itself genuinely full-viewport-width (by design -- see the FCT carousel's own
     "slideshow-slides is genuinely full-viewport-width" note elsewhere in this project), 100cqw
     here is effectively 100vw, matching live's literal formula. --gutter-slide-width forced to a
     flat 20px (was defaulting to --util-page-margin-offset, an unrelated page-margin-derived value)
     to reproduce live's exact flush 20px edge inset independent of whatever the page grid uses. */
  @media screen and (max-width: 649px) {
    [id^="shopify-section-"][id$="__product_list_citrus"] .resource-list__slide {
      --slide-width: calc(100cqw - 40px) !important;
    }

    [id^="shopify-section-"][id$="__product_list_citrus"] slideshow-slides {
      --gutter-slide-width: 20px !important;
    }
  }

  @media screen and (min-width: 750px) {
    [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__text_title"],
    [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__text_subtitle"] {
      max-width: min(960px, 76.9vw) !important;
    }

    [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__text_title"] > *,
    [id^="shopify-section-"][id$="__product_list_citrus"] [class*="__text_subtitle"] > * {
      max-width: 100% !important;
    }
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] .section-background {
    background: transparent !important;
  }

  [id^="shopify-section-"][id$="__product_list_citrus"] slideshow-container {
    background-color: transparent !important;
  }

  /* Old theme's custom-collection.liquid has zero badge/chip markup for sold-out products (only
     swaps the Add to Cart button's own text, already handled by price.liquid's is_product_card
     branch) -- same missing-badge bug already fixed for the other product-list carousels. Belt
     and suspenders alongside the section's own hide_sold_out:true (page.care.json), which already
     excludes unavailable products from the loop entirely, matching live's real behavior. */
  [id^="shopify-section-"][id$="__product_list_citrus"] .product-badges {
    display: none !important;
  }
/* END_SNIPPET:via-citrus-care */

/* START_SNIPPET:via-citrus-cart (INDEX:305) */
[id^="shopify-section-"][id$="__cart-section"],
  [id^="shopify-section-"][id$="__cart-section"] .section-background,
  [id^="shopify-section-"][id$="__product_list_YRK996"],
  [id^="shopify-section-"][id$="__product_list_YRK996"] .section-background {
    background-color: #ffffff !important;
  }

  /* Title: "Shopping Cart" -- Argesta Regular, live-measured */
  [id^="shopify-section-"][id$="__cart-section"] .cart-title h1 {
    font-family: var(--font-heading--family);
    font-size: 42px;
    font-weight: 600;
    line-height: 47.25px;
    letter-spacing: normal;
    color: #003d29;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-page__title {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 61, 41, 0.15);
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-page--empty {
    align-items: stretch;
    justify-content: flex-start;
    max-width: 1200px;
    min-height: 0;
    margin-inline: auto;
    padding-block-end: 21px;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-page--empty .cart-page__title {
    margin-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-page--empty .cart-title {
    text-align: left;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-page--empty .cart-page__items {
    margin-block-start: 40px;
  }

  [id^="shopify-section-"][id$="__cart-section"] .via-citrus-cart-empty__message {
    margin: 0;
    font-family: 'Silka Bold', sans-serif;
    font-size: 37px;
    font-weight: 600;
    line-height: 55.5px;
    color: #003d29;
    text-align: center;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-items__empty-button {
    display: inline;
    width: fit-content;
    min-height: 0;
    margin-top: 2px;
    margin-inline: auto;
    padding: 0;
    background-color: transparent;
    color: #eb8935;
    font-family: 'Silka Medium', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-page--empty .cart-page__more-blocks {
    display: none;
  }

  /* Table header row (Products / Price / Quantity / Total): unhide the native, a11y-only thead and
     relabel it visually via ::after, leaving the real (screen-reader) text in place at font-size:0. */
  [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead.visually-hidden {
    position: static !important;
    overflow: visible;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead .cart-items__table-row {
    display: none;
  }

  @container cart-items (min-width: 720px) {
    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead .cart-items__table-row {
      display: grid;
      grid-template-columns: 9.375rem 1fr 1fr minmax(6rem, auto);
      padding-bottom: 16px;
      margin-bottom: 16px;
      border-bottom: 1px solid rgba(0, 61, 41, 0.15);
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead th {
      text-align: left;
      font-size: 0;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead th::after {
      font-family: 'Silka Bold', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: #003d29;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead th#productImage::after {
      content: 'Products';
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead th#productInformation::after {
      content: '';
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead th#productUnitPrice::after {
      content: 'Price';
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead th#quantity::after {
      content: 'Quantity';
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead th#productTotal::after {
      content: 'Total';
      display: block;
      text-align: right;
    }

    /* Match the widened image column on the body rows too */
    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table-row {
      grid-template-columns: 9.375rem 1fr 1fr minmax(6rem, auto) !important;
    }
  }

  @media screen and (max-width: 1024px) {
    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead .cart-items__table-row {
      display: none !important;
    }
  }

  @media screen and (min-width: 1025px) {
    [id^="shopify-section-"][id$="__cart-section"] {
      --via-cart-image-column: clamp(9.375rem, 12vw, 14rem);
      --via-cart-unit-price-column: minmax(6rem, 14rem);
      --via-cart-quantity-column: minmax(8rem, 19rem);
      --via-cart-total-column: minmax(6rem, 10rem);
      --via-cart-product-grid: var(--via-cart-image-column) minmax(14rem, 1fr) var(--via-cart-unit-price-column) var(--via-cart-quantity-column) var(--via-cart-total-column);
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead .cart-items__table-row,
    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table-row {
      grid-template-columns: var(--via-cart-product-grid) !important;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-cart-items__unit-price-heading {
      display: block !important;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead th#quantity::after {
      display: block;
      text-align: center;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table tbody .cart-items__table-row {
      grid-template-areas:
        'media details unit_price quantity price'
        'media details error error error';
      column-gap: clamp(16px, 2vw, 32px);
      align-items: start;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__unit-price-wrapper {
      display: none;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-cart-items__unit-price {
      display: block !important;
      grid-area: unit_price;
      padding-top: 28px;
      font-family: 'Silka Medium', sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.2;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__quantity {
      grid-area: quantity;
      justify-self: center;
      padding-top: 20px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__quantity .quantity-selector {
      --quantity-selector-width: 126px;
      width: var(--quantity-selector-width);
      height: 42px;
      border-radius: 31px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__quantity .quantity-selector button {
      width: 38px;
      height: 42px;
      --icon-stroke-width: 2.5px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__quantity .quantity-selector input {
      max-width: 50px;
      font-size: 16px;
      font-weight: 500;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__quantity .svg-wrapper,
    [id^="shopify-section-"][id$="__cart-section"] .cart-items__quantity svg {
      width: 20px !important;
      height: 20px !important;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__price {
      grid-area: price;
      padding-top: 28px;
      align-items: flex-end;
      font-family: 'Silka Bold', sans-serif;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.2;
    }
  }

  /* Item title: Silka Medium 18px/500, orange -- live-measured */
  [id^="shopify-section-"][id$="__cart-section"] .cart-items__title {
    font-family: 'Silka Medium', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #eb8935;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-items__details,
  [id^="shopify-section-"][id$="__cart-section"] .cart-items__price,
  [id^="shopify-section-"][id$="__cart-section"] .via-citrus-cart-items__unit-price {
    color: #003d29;
  }

  [id^="shopify-section-"][id$="__cart-section"] .via-citrus-cart-items__unit-price,
  [id^="shopify-section-"][id$="__cart-section"] .via-citrus-cart-items__unit-price-heading {
    display: none;
  }

  [id^="shopify-section-"][id$="__cart-section"] .via-citrus-cart-gift {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-family: 'Silka Medium', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    color: #003d29;
  }

  [id^="shopify-section-"][id$="__cart-section"] .via-citrus-cart-gift__input {
    width: 20px;
    height: 20px;
    margin: 0;
  }

  /* Remove (X) button: pull out of the grid flow into a top-right circular badge, matching live */
  [id^="shopify-section-"][id$="__cart-section"] .cart-items__table-row {
    position: relative;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-items__remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    min-width: 0;
    background-color: rgb(225, 222, 211) !important;
    border-radius: 50%;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-items__price {
    padding-top: 28px;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-items__remove svg {
    display: none;
    width: 12px;
    height: 12px;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-items__remove::before,
  [id^="shopify-section-"][id$="__cart-section"] .cart-items__remove::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.5px;
    background-color: #003d29;
    border-radius: 999px;
    transform-origin: center;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-items__remove::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-items__remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* Quantity stepper: orange pill, live-measured */
  [id^="shopify-section-"][id$="__cart-section"] .quantity-selector {
    border-radius: 31px;
    overflow: hidden;
    border: none;
  }

  [id^="shopify-section-"][id$="__cart-section"] .quantity-minus,
  [id^="shopify-section-"][id$="__cart-section"] .quantity-plus {
    background-color: #eb8935 !important;
    color: #ffffff !important;
  }

  [id^="shopify-section-"][id$="__cart-section"] .quantity-minus[disabled] {
    background-color: #f8ba84 !important;
    color: #ffffff !important;
    opacity: 1;
  }

  [id^="shopify-section-"][id$="__cart-section"] .quantity-selector input {
    background-color: #ffffff !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333;
  }

  [id^="shopify-section-"][id$="__cart-section"] shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-block-size: 52px;
    --shopify-accelerated-checkout-row-gap: 10px;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart__ctas,
  [id^="shopify-section-"][id$="__cart-section"] savedby-checkout-plus,
  [id^="shopify-section-"][id$="__cart-section"] .additional-checkout-buttons {
    min-width: 0;
    max-width: 100%;
  }

  /* Live shows the subtotal band ABOVE the order-notes box; native order is reversed.
     Both are direct flex children of .cart-totals (flex-direction: column) so a plain
     `order` swap is enough, no markup change needed. */
  [id^="shopify-section-"][id$="__cart-section"] .cart-totals__original-container {
    order: 0;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-totals__container {
    order: 1;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-actions {
    order: 2;
  }

  /* Subtotal: full-width grey band inside the summary card, Argesta 33px/700 total */
  [id^="shopify-section-"][id$="__cart-section"] .cart-totals__total {
    background-color: #f2f2f2;
    padding: 20px;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-totals__total-label {
    font-family: var(--font-heading--family);
    font-size: 33px;
    font-weight: 400;
    color: #003d29;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-totals__total-label::after {
    content: ':';
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-totals__total-value {
    font-family: var(--font-heading--family);
    font-size: 33px;
    font-weight: 700;
    color: #003d29;
  }

  /* Order notes: force the native disclosure permanently open, hide its toggle affordance,
     so it reads as live's plain always-visible textarea. */
  [id^="shopify-section-"][id$="__cart-section"] .cart-note__summary .cart-totals__icon {
    display: none;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-note .details-content {
    block-size: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-note__label {
    display: none;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-note__summary {
    cursor: default;
    padding-bottom: 0;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-note__instructions {
    border: 1px solid #dfe8e3;
    background-color: #ffffff;
    min-height: 88px;
    padding: 11px;
    font-family: 'Silka Medium', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #363636;
    box-shadow: none;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-note__instructions:hover,
  [id^="shopify-section-"][id$="__cart-section"] .cart-note__instructions:focus,
  [id^="shopify-section-"][id$="__cart-section"] .cart-note__instructions:active {
    border-color: #dfe8e3;
    box-shadow: none;
    outline: none;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-note__instructions::placeholder {
    color: rgba(54, 54, 54, 0.5);
    opacity: 1;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-totals__tax-note small {
    font-family: 'Silka Medium', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #003d29;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-totals__tax-note a {
    color: #eb8935;
  }

  [id^="shopify-section-"][id$="__cart-section"] .via-citrus-savedby-fallback__row {
    font-family: 'Silka Medium', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.33px;
    color: #000000;
  }

  /* Checkout button */
  [id^="shopify-section-"][id$="__cart-section"] .cart__checkout-button {
    background-color: #eb8935;
    border-radius: 31px;
    font-family: 'Silka Bold', sans-serif;
    font-weight: 700;
    min-height: 42px;
    padding: 8px 35px;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart__checkout-button:hover {
    background-color: #d17b32;
  }

  /* Continue Shopping link (native button block, dropped into .cart-page__more-blocks) */
  [id^="shopify-section-"][id$="__cart-section"] .cart-page__more-blocks {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-page__more-blocks a {
    color: #eb8935;
    font-family: 'Silka Medium', sans-serif;
    font-size: 14px;
    text-decoration: none;
  }

  [id^="shopify-section-"][id$="__cart-section"] .cart-page__more-blocks a:hover {
    text-decoration: underline;
  }

  [id^="shopify-section-"][id$="__cart-section"] savedby-widget:not(:empty) + .via-citrus-savedby-fallback,
  [id^="shopify-section-"][id$="__cart-section"] .cart__ctas:has(savedby-checkout-plus:not(:empty)) .via-citrus-savedby-fallback {
    display: none;
  }

  @media screen and (min-width: 750px) {
    [id^="shopify-section-"][id$="__cart-section"] .section--page-width .cart-page,
    [id^="shopify-section-"][id$="__cart-section"] .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      max-width: 1200px;
      width: 100%;
      margin-inline: auto;
      padding-block-start: 40px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page__title,
    [id^="shopify-section-"][id$="__cart-section"] .cart-page__items,
    [id^="shopify-section-"][id$="__cart-section"] .cart-page__summary,
    [id^="shopify-section-"][id$="__cart-section"] .cart-page__more-blocks {
      grid-column: 1;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page__title {
      grid-row: 1;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page__items {
      grid-row: 2;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page__summary {
      display: block;
      height: auto;
      grid-row: 3;
      align-self: auto;
      padding-top: 20px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-summary,
    [id^="shopify-section-"][id$="__cart-section"] .cart-summary--extend {
      display: block;
      height: auto;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-summary__inner,
    [id^="shopify-section-"][id$="__cart-section"] .cart-summary--extend .cart-summary__inner {
      position: static;
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
      gap: 20px 32px;
      width: 100%;
      height: auto;
      padding: 0;
      align-items: start;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals {
      display: contents;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__original-container {
      grid-column: 2;
      grid-row: 1;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__container {
      grid-column: 1 / -1;
      grid-row: 1;
      display: contents;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__total {
      grid-column: 1 / -1;
      grid-row: 1;
      width: 100%;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-actions {
      grid-column: 1;
      grid-row: 2 / span 2;
      margin-block-start: 0;
      border-block: 0;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-note__summary {
      display: none;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-note__inner {
      padding-block: 0;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__tax-note {
      grid-column: 2;
      grid-row: 2;
      width: 100%;
      margin: 0 0 0 auto !important;
      text-align: center;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart__ctas {
      grid-column: 2;
      grid-row: 3;
      align-self: start;
      width: 100%;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page__more-blocks {
      grid-row: 4;
      width: min(100%, calc((100% - 32px) / 3));
      margin-left: auto;
      margin-top: 20px;
    }
  }

  @media screen and (min-width: 1400px) {
    [id^="shopify-section-"][id$="__cart-section"] .section--page-width .cart-page,
    [id^="shopify-section-"][id$="__cart-section"] .section--page-width .cart-page:has(.cart-summary--extend) {
      max-width: none;
      width: calc(100vw - 112px);
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-title h1 {
      font-size: 58px;
      font-weight: 400;
      line-height: 1.1;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page__title {
      padding-bottom: 54px;
      border-bottom: 0;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page__title + .cart-page__items {
      margin-block-start: 0;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page__items .cart-items {
      padding-block-end: 0 !important;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead .cart-items__table-row,
    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table-row {
      grid-template-columns: 14rem minmax(0, 1fr) 14rem 19rem 10rem !important;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-cart-items__unit-price-heading {
      display: block;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead .cart-items__table-row {
      padding-bottom: 18px;
      margin-bottom: 28px;
      border-bottom-color: rgba(0, 61, 41, 0.14);
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead th::after {
      font-size: 34px;
      font-weight: 600;
      line-height: 1.2;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table thead th#quantity::after {
      display: block;
      text-align: center;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__table tbody .cart-items__table-row {
      grid-template-areas:
        'media details unit_price quantity price'
        'media details error error error';
      min-height: 210px;
      column-gap: 32px;
      padding-bottom: 28px;
      margin-bottom: 0;
      align-items: start;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__media-container {
      width: 210px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__title {
      max-width: 470px;
      font-size: 29px;
      line-height: 1.45;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-cart-gift {
      font-size: 26px;
      line-height: 1.2;
      min-height: 31px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__unit-price-wrapper {
      display: none;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-cart-items__unit-price {
      display: block;
      grid-area: unit_price;
      padding-top: 92px;
      font-family: 'Silka Medium', sans-serif;
      font-size: 22px;
      font-weight: 500;
      line-height: 1.2;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__quantity {
      grid-area: quantity;
      justify-self: center;
      padding-top: 78px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__quantity .quantity-selector {
      --quantity-selector-width: 182px;
      height: 59px;
      width: var(--quantity-selector-width);
      border-radius: 31px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__quantity .quantity-selector button {
      width: 54px;
      height: 59px;
      --icon-stroke-width: 3px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__quantity .svg-wrapper {
      width: 28px !important;
      height: 28px !important;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__quantity .quantity-selector input {
      max-width: 74px;
      font-size: 22px;
      font-weight: 500;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__quantity svg {
      width: 28px !important;
      height: 28px !important;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__price {
      grid-area: price;
      padding-top: 92px;
      align-items: flex-end;
      font-family: 'Silka Bold', sans-serif;
      font-size: 22px;
      font-weight: 600;
      line-height: 1.2;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-items__remove {
      top: 28px;
      right: 0;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page__summary {
      padding-top: 0;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-summary__inner,
    [id^="shopify-section-"][id$="__cart-section"] .cart-summary--extend .cart-summary__inner {
      grid-template-columns: minmax(0, 60%) minmax(420px, 1fr);
      gap: 27px 6.5%;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__container {
      grid-column: 1 / -1;
      grid-row: 1;
      display: contents;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__total {
      grid-column: 1 / -1;
      grid-row: 1;
      min-height: 127px;
      padding: 20px 42px;
      justify-content: flex-end;
      gap: 120px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__total-label,
    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__total-value {
      font-size: 48px;
      font-weight: 400;
      line-height: 1;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__tax-note {
      grid-column: 2;
      grid-row: 2;
      max-width: 540px;
      margin: 0 0 0 auto;
      text-align: center;
      color: #003d29;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__tax-note small {
      font-family: 'Silka Medium', sans-serif;
      font-size: 24px;
      font-weight: 500;
      line-height: 1.3;
      color: #003d29;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__tax-note a {
      color: #eb8935;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-actions {
      grid-column: 1;
      grid-row: 2 / span 2;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-note__instructions {
      min-height: 130px;
      font-size: 24px;
      font-weight: 500;
      line-height: 1.4;
      color: #363636;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-note__summary {
      display: none;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-note__inner {
      padding-block: 0;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-note__instructions::placeholder {
      color: rgba(54, 54, 54, 0.5);
      opacity: 1;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart__ctas {
      grid-column: 2;
      grid-row: 3;
      gap: 20px;
      justify-items: stretch;
    }

    [id^="shopify-section-"][id$="__cart-section"] shopify-accelerated-checkout-cart {
      --shopify-accelerated-checkout-button-block-size: 58px;
      --shopify-accelerated-checkout-row-gap: 12px;
    }

    [id^="shopify-section-"][id$="__cart-section"] savedby-checkout-plus {
      display: block;
      width: 100%;
    }

    [id^="shopify-section-"][id$="__cart-section"] savedby-widget:not(:empty) + .via-citrus-savedby-fallback {
      display: none;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart__ctas:has(savedby-checkout-plus:not(:empty)) .via-citrus-savedby-fallback {
      display: none;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-savedby-fallback {
      display: grid;
      gap: 22px;
      justify-items: center;
      width: 100%;
      max-width: 506px;
      margin-inline: auto;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-savedby-fallback__row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
      min-height: 50px;
      border-radius: 4px;
      background-color: #f2f2f2;
      font-family: 'Silka Medium', sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.1;
      letter-spacing: -0.33px;
      color: #000000;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-savedby-fallback__mark {
      position: relative;
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-savedby-fallback__mark::before,
    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-savedby-fallback__mark::after {
      content: '';
      position: absolute;
      inset: 9px;
      border: 4px solid #29aee4;
      border-radius: 10px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-savedby-fallback__mark::before {
      border-right-color: transparent;
      border-bottom-color: transparent;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-savedby-fallback__mark::after {
      border-left-color: transparent;
      border-top-color: transparent;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-savedby-fallback__help {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border: 2px solid #808080;
      border-radius: 50%;
      color: #808080;
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
    }

    [id^="shopify-section-"][id$="__cart-section"] .via-citrus-savedby-fallback__skip {
      appearance: none;
      padding: 0;
      border: 0;
      background: transparent;
      color: #4a4a4a;
      font-family: 'Silka Medium', sans-serif;
      font-size: 22px;
      font-weight: 500;
      line-height: 1.2;
      text-decoration: underline;
      cursor: default;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart__checkout-button {
      justify-self: stretch !important;
      width: 100% !important;
      inline-size: 100% !important;
      min-width: min(100%, 506px) !important;
      max-width: 506px;
      margin-inline: auto;
      box-sizing: border-box;
      min-height: 86px;
      font-size: 24px;
      padding-block: 20px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page__more-blocks {
      width: min(506px, 100%);
      margin-top: 22px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page__more-blocks a {
      font-size: 24px;
    }
  }

  /* Cross-sell heading: "Got all you need..." -- Argesta 42px/600, centered, live-measured */
  [id^="shopify-section-"][id$="__product_list_YRK996"] h2 {
    font-family: var(--font-heading--family);
    font-size: 42px;
    font-weight: 600;
    color: #003d29;
    text-align: center;
  }

  @media screen and (max-width: 749px) {
    [id^="shopify-section-"][id$="__cart-section"] .cart-summary__inner {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals,
    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__container {
      display: contents;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__total {
      order: 1;
      width: 100%;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-actions {
      order: 2;
      width: 100%;
      margin-block-start: 24px;
      border-block: 0;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-note__summary {
      display: none;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-note__inner {
      padding-block: 0;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-totals__tax-note {
      order: 3;
      width: 100%;
      margin: 20px 0 0 !important;
      text-align: center;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart__ctas {
      order: 4;
      width: 100%;
      margin-block-start: 16px;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page__more-blocks {
      width: 100%;
      margin-left: 0;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-title h1 {
      font-size: 36px;
      line-height: 1.2;
    }

    [id^="shopify-section-"][id$="__cart-section"] .cart-page--empty .cart-title {
      text-align: left;
    }

    [id^="shopify-section-"][id$="__product_list_YRK996"] h2 {
      font-size: 30px;
    }
  }
/* END_SNIPPET:via-citrus-cart */

/* START_SNIPPET:via-citrus-collection (INDEX:306) */
/* ---------------------------------------------------------------- */
  /* Header: breadcrumb + title + sort + description                  */
  /* ---------------------------------------------------------------- */

  .vc-collection-header {
    width: min(1180px, calc(100% - 80px));
    margin-inline: auto;
    padding-block-start: 40px;
  }

  @media screen and (max-width: 799px) {
    .vc-collection-header {
      width: calc(100% - 40px);
      padding-block-start: 24px;
    }
  }

  .vc-collection-header__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 20px;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: #003d29;
  }

  .vc-collection-header__breadcrumb a {
    color: #eb8935;
    text-decoration: none;
  }

  .vc-collection-header__breadcrumb-sep {
    font-size: 6px;
    line-height: 1;
  }

  .vc-collection-header__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 0 40px;
  }

  .vc-collection-header__title.vc-collection-header__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 42px;
    font-weight: 600;
    line-height: 1.125;
    letter-spacing: normal;
    color: #003d29;
  }

  .vc-collection-header__description {
    margin: 0 0 20px;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #003d29;
  }

  .vc-collection-header__description > * {
    margin: 0;
  }

  /* Sort control - re-skin Heritage's native accordion sort into a plain bordered box */
  .vc-collection-header__sort .facets-block-wrapper,
  .vc-collection-header__sort .facets,
  .vc-collection-header__sort .facets__form-wrapper,
  .vc-collection-header__sort .facets__form,
  .vc-collection-header__sort sorting-filter-component,
  .vc-collection-header__sort .sorting-filter {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  .vc-collection-header__sort .facets__panel {
    padding: 0;
    position: relative;
  }

  .vc-collection-header__sort .facets__label {
    display: none;
  }

  .vc-collection-header__sort .facets__status.desktop\:hidden {
    display: flex !important;
  }

  .vc-collection-header__sort .facets__summary {
    height: 36px;
    padding: 5px 12px;
    gap: 8px;
    border: 1px solid #dfe8e3;
    border-radius: 0;
    background: #ffffff;
    justify-content: space-between;
    min-width: 203px;
  }

  @media screen and (max-width: 799px) {
    .vc-collection-header__row {
      margin-block-end: 20px;
    }

    .vc-collection-header__sort,
    .vc-collection-header__sort .facets-mobile-wrapper,
    .vc-collection-header__sort .facets-toggle,
    .vc-collection-header__sort accordion-custom-component,
    .vc-collection-header__sort sorting-filter-component,
    .vc-collection-header__sort facets-form-component,
    .vc-collection-header__sort .facets__panel,
    .vc-collection-header__sort .facets__summary {
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
    }

    .vc-collection-header__sort .facets__summary {
      display: flex !important;
    }

    /* .facets-toggle's native 16px padding was insetting the box instead of spanning the row. */
    .vc-collection-header__sort .facets-toggle {
      padding: 0 !important;
    }

    /* Heritage toggles between two independent sort controls at its own 750px breakpoint,
       leaving a 750-799px gap where both rendered on top of each other against our 799px
       stacked layout -- force the desktop pane hidden through the whole stacked range. */
    .vc-collection-header__sort .facets__form-wrapper {
      display: none !important;
    }

    /* Live's description sits in a narrower box -- an extra 20px inset on the right only. */
    .vc-collection-header__description {
      width: calc(100% - 20px);
    }
  }

  .vc-collection-header__sort .facets__status {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    color: rgb(54, 54, 54);
  }

  .vc-collection-header__sort .products-count-wrapper {
    display: none !important;
  }

  .vc-collection-header__sort .icon-caret {
    color: #003d29;
    opacity: 1;
    width: 10px;
    height: 10px;
  }

  /* ---------------------------------------------------------------- */
  /* Product grid                                                      */
  /* ---------------------------------------------------------------- */

  [id^="shopify-section-"][id$="__main"] .collection-wrapper {
    @media screen and (min-width: 799px) {
      --page-width: 1180px;
      --page-margin: 0px;
    }
  }

  [id^="shopify-section-"][id$="__main"] .product-grid {
    @media screen and (min-width: 799px) {
      --product-grid-columns-desktop: repeat(3, 1fr);
    }
  }

  /* Real breakpoints (live-verified): 1 col <=480px, 2 cols 481-799px, 3 cols >=799px --
     Heritage's own defaults skip the whole 2-column tablet tier. */
  [id^="shopify-section-"][id$="__main"] .product-grid {
    @media screen and (max-width: 480px) {
      grid-template-columns: 1fr !important;
      gap: 40px !important;
    }

    @media screen and (min-width: 481px) and (max-width: 799px) {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 40px 0px !important;
    }

    @media screen and (min-width: 799px) {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }

  /* Live's row spacing is baked into each cell's padding (even the last row); row-gap never
     trails after the last row -- add it back once so the last row matches live's footer gap. */
  [id^="shopify-section-"][id$="__main"] .product-grid {
    padding-bottom: 20px;

    @media screen and (max-width: 799px) {
      padding-bottom: 40px;
    }
  }

  [id^="shopify-section-"][id$="__main"] .main-collection-grid {
    @media screen and (max-width: 480px) {
      padding-inline: 30px !important;
    }

    @media screen and (min-width: 481px) and (max-width: 799px) {
      padding-inline: 20px !important;
    }
  }

  [id^="shopify-section-"][id$="__main"] .card-gallery {
    background: transparent;
  }

  [id^="shopify-section-"][id$="__main"] .product-badges {
    display: none;
  }

  [id^="shopify-section-"][id$="__main"] [class*="__group_"],
  [id^="shopify-section-"][id$="__main"] [class*="__product_title_"] {
    width: 100%;
  }

  [id^="shopify-section-"][id$="__main"] [class*="__product_title_"] a,
  [id^="shopify-section-"][id$="__main"] [class*="__product_title_"] a:hover {
    text-decoration: none;
  }

  /* The h5 type_preset renders 400/1.1; live's card title is 500/1.2. Wrong weight also changes
     text-wrapping, throwing off row heights across the grid. */
  [id^="shopify-section-"][id$="__main"] [class*="__product_title_"],
  [id^="shopify-section-"][id$="__main"] [class*="__product_title_"] > * {
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }

  [id^="shopify-section-"][id$="__main"] product-price .price {
    font-weight: 500;
  }

  /* Price's blank type_preset defaults to 1.6 line-height; live's is tight 1.2, same as title. */
  [id^="shopify-section-"][id$="__main"] product-price,
  [id^="shopify-section-"][id$="__main"] product-price [ref="priceContainer"],
  [id^="shopify-section-"][id$="__main"] product-price .price {
    line-height: 1.2 !important;
  }

  [id^="shopify-section-"][id$="__main"] product-price .price-item__group.price:not(.price--varies) {
    color: #eb8935;
  }

  [id^="shopify-section-"][id$="__main"] product-price .compare-at-price {
    color: rgb(4, 84, 58);
    text-decoration: line-through;
  }

  /* ---------------------------------------------------------------- */
  /* Quick View button + hover overlay                                 */
  /* ---------------------------------------------------------------- */

  [id^="shopify-section-"][id$="__main"] .card-gallery::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(223, 232, 227, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  [id^="shopify-section-"][id$="__main"] .card-gallery:hover::after {
    opacity: 1;
  }

  [id^="shopify-section-"][id$="__main"] .vc-quick-view-trigger {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: max-content;
    padding: 20px 35px;
    border: none;
    border-radius: 31px;
    background: #003d29;
    color: #ffffff;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  [id^="shopify-section-"][id$="__main"] .card-gallery:hover .vc-quick-view-trigger {
    opacity: 1;
  }

  /* Live hides the whole hover-triggered quick-shop below the desktop breakpoint -- a hover
     feature with no touch equivalent, not a tap-to-reveal button. */
  @media screen and (max-width: 799px) {
    [id^="shopify-section-"][id$="__main"] .vc-quick-view-trigger {
      display: none;
    }
  }

  /* Live only ever shows a single static image per card - no click-through slideshow */
  [id^="shopify-section-"][id$="__main"] slideshow-arrows {
    display: none !important;
  }

  /* ---------------------------------------------------------------- */
  /* Quick View modal                                                  */
  /* ---------------------------------------------------------------- */

  vc-quick-view {
    display: contents;
  }

  .vc-quick-view__dialog {
    width: min(900px, calc(100% - 40px));
    max-width: 900px;
    max-height: calc(100% - 40px);
    padding: 0;
    border: none;
    border-radius: 0;
    background: #ffffff;
    color: #003d29;
    font-family: var(--font-body--family);
    overflow: auto;
    /* Reserves the scrollbar's width up front -- otherwise it appearing shrinks the flex
       columns, wrapping more text and making content taller, in a feedback loop. */
    scrollbar-gutter: stable;
  }

  .vc-quick-view__dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  .vc-quick-view__close {
    position: sticky;
    float: right;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-inline-start: auto;
    margin-inline-end: 12px;
    border: none;
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.1);
    color: #003d29;
    cursor: pointer;
  }

  /* Gallery/content measurements below are taken directly off live's own rendered quick-shop
     DOM at the same 900px modal width -- not rescaled. */
  .vc-quick-view__body {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    /* Live layers two paddings: 40px on the popup, plus 20px on the inner wrapper -- 60px
       total bottom, not just 40. */
    padding: 40px 10px 60px;
  }

  .vc-quick-view__gallery {
    position: relative;
    flex: 0 0 420px;
  }

  .vc-quick-view__main-image-wrap {
    position: relative;
    width: 357px;
    aspect-ratio: 1;
    background: #f4f4f4;
  }

  .vc-quick-view__main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Live's arrows are Flickity's stock prev/next buttons; main image and thumbnails reuse them. */
  .vc-quick-view__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    cursor: pointer;
  }

  .vc-quick-view__arrow-icon {
    width: 16px;
    height: 16px;
    fill: #333333;
  }

  /* The extracted path already points left (live's unmodified "previous" icon) -- next flips. */
  .vc-quick-view__arrow--prev {
    left: 10px;
  }

  .vc-quick-view__arrow--next {
    right: 10px;
  }

  .vc-quick-view__arrow--next .vc-quick-view__arrow-icon {
    transform: scaleX(-1);
  }

  .vc-quick-view__gallery [data-vc-qv-prev][hidden],
  .vc-quick-view__gallery [data-vc-qv-next][hidden],
  .vc-quick-view__gallery [data-vc-qv-thumb-prev][hidden],
  .vc-quick-view__gallery [data-vc-qv-thumb-next][hidden] {
    display: none;
  }

  /* Live-verified position within the 420px gallery column: the photo is only 357px, leaving
     a 63px gutter the circles sit inside, flush against the photo's right edge. */
  .vc-quick-view__circles {
    position: absolute;
    top: 139px;
    left: 360px;
    width: 69px;
    height: 214px;
    pointer-events: none;
  }

  .vc-quick-view__circles img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .vc-quick-view__thumbs-wrap {
    position: relative;
    width: 357px;
    height: 96px;
    margin-top: 10px;
  }

  /* Live's thumbnail strip is a draggable Flickity peek carousel, not a wrapped grid --
     reproduced with native scroll-snap instead of a new dependency. */
  .vc-quick-view__thumbs {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .vc-quick-view__thumbs::-webkit-scrollbar {
    display: none;
  }

  .vc-quick-view__thumb {
    flex: 0 0 85px;
    width: 85px;
    height: 96px;
    padding: 0;
    border: none;
    background: none;
    opacity: 0.3;
    scroll-snap-align: start;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  .vc-quick-view__thumb.is-active {
    opacity: 1;
  }

  .vc-quick-view__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .vc-quick-view__content {
    flex: 0 0 420px;
  }

  /* The h2's default font metrics set a line-height "strut" that forces every wrapped line
     taller regardless of the inner anchor's own line-height -- set on the h2 itself too. */
  .vc-quick-view__title {
    margin: 0 0 8px;
    font-size: 42px;
    line-height: 1.125;
  }

  .vc-quick-view__title a {
    font-family: var(--font-heading--family);
    font-size: 42px;
    font-weight: 600;
    line-height: 1.125;
    color: #003d29;
    text-decoration: none;
  }

  .vc-quick-view__price {
    margin-bottom: 16px;
    font-family: var(--font-heading--family);
    font-size: 35px;
    font-weight: 400;
    line-height: 1;
  }

  .vc-quick-view__price-current {
    color: #eb8935;
  }

  .vc-quick-view__price-compare {
    margin-inline-start: 10px;
    color: rgb(4, 84, 58);
    text-decoration: line-through;
  }

  .vc-quick-view__savings {
    margin-bottom: 20px;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 600;
    color: #eb8935;
  }

  /* Heritage's shared payment-terms-styles snippet sets 13.6px; live's is 12px, wide enough
     that the Shop Pay badge's fixed-width "Learn more" link wraps to a second line. */
  .vc-quick-view__payment-terms form.payment-terms {
    padding-top: 0;
    /* Live's price+payment-terms flows into the description with only ~4px of trailing space. */
    margin-bottom: 4px;
    font-size: 12px;
  }

  /* Live's description block has padding-top:20px and a real 22px gap before "View full
     details" -- we were missing the padding and under-sizing the gap. */
  .vc-quick-view__description {
    margin-bottom: 21px;
    padding-top: 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #003d29;
  }

  .vc-quick-view__view-details {
    display: inline-block;
    /* The real 44px gap before the quantity/cart row lives in .vc-quick-view__form's own
       padding-top -- this is just the small residual gap before it starts. */
    margin-bottom: 3px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #eb8935;
    text-decoration: none;
  }

  .vc-quick-view__variants {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Single-variant products leave this container empty, but its margin-bottom still asserted
     itself, adding unwanted space above the quantity/cart row. */
  .vc-quick-view__variants:empty {
    display: none;
  }

  .vc-quick-view__option {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .vc-quick-view__option-label {
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    color: #003d29;
  }

  .vc-quick-view__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .vc-quick-view__swatch-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-image: var(--vc-qv-swatch-image);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(0, 61, 41, 0.2);
    cursor: pointer;
  }

  .vc-quick-view__swatch-btn.is-selected {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
  }

  .vc-quick-view__swatch-btn.is-unavailable {
    opacity: 0.35;
  }

  /* Live stacks quantity above Add to Cart (a flex column), left-aligned, not a row. Padding
     values collapse live's two nested wrappers into this single element: 44+12=56 top,
     30+20=50 bottom. */
  .vc-quick-view__form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    padding-top: 56px;
    padding-bottom: 50px;
  }

  .vc-quick-view__quantity {
    display: flex;
    align-items: stretch;
    width: 165px;
    height: 60px;
    border-radius: 31px;
    overflow: hidden;
  }

  .vc-quick-view__qty-btn {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #eb8935;
    color: #ffffff;
    cursor: pointer;
  }

  .vc-quick-view__qty-btn[data-vc-qv-qty-minus] {
    background: #f8ba84;
  }

  .vc-quick-view__qty-input {
    flex: 1 1 auto;
    width: 0;
    border: none;
    background: #ffffff;
    color: rgb(54, 54, 54);
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    -moz-appearance: textfield;
  }

  .vc-quick-view__qty-input::-webkit-outer-spin-button,
  .vc-quick-view__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .vc-quick-view__add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 35px;
    border: none;
    border-radius: 31px;
    background: #003d29;
    color: #ffffff;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }

  .vc-quick-view__add-to-cart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .vc-quick-view__add-to-cart-icon {
    width: 43px;
    height: 31px;
    margin: 0 5px 0 -5px;
  }

  .vc-quick-view__loading {
    display: none;
  }

  .vc-quick-view__loading[data-active] {
    display: block;
    padding: 80px;
    text-align: center;
  }

  @media screen and (max-width: 749px) {
    /* Live never shows this modal below the desktop breakpoint -- defensive fallback only,
       not matched pixel-for-pixel against live. */
    .vc-quick-view__body {
      flex-direction: column;
      padding: 24px;
      padding-top: 0;
      gap: 24px;
    }

    .vc-quick-view__gallery,
    .vc-quick-view__content {
      flex: 1 1 100%;
      width: 100%;
    }

    .vc-quick-view__main-image-wrap,
    .vc-quick-view__thumbs-wrap {
      width: 100%;
    }

    .vc-quick-view__circles {
      display: none;
    }

    .vc-quick-view__title a {
      font-size: 32px;
    }

    .vc-quick-view__price {
      font-size: 28px;
    }
  }
/* END_SNIPPET:via-citrus-collection */

/* START_SNIPPET:via-citrus-contact (INDEX:307) */
body {
    background-color: #fff;
  }

  #MainContent {
    --color-background: #fff;
  }
/* END_SNIPPET:via-citrus-contact */

/* START_SNIPPET:via-citrus-faq (INDEX:308) */
body {
    background-color: #fff;
  }

  #MainContent {
    --color-background: #fff;
  }
/* END_SNIPPET:via-citrus-faq */

/* START_SNIPPET:via-citrus-featured-in-sidebar (INDEX:309) */
/* Real bug, found while tracing why the filter row still wrapped after fixing the container
     width formula in main-blog.liquid: this was a flat 280px at every desktop width, but live's
     real sidebar is a fluid Bulma one-fourth column (25% of its container, minus a 20px gutter),
     confirmed via a live sweep -- 280px only at the ~1200px-capped container width (1572px+
     viewport), narrowing to 170px at an 800px viewport (container 760px: 760*0.25-20=170, exact
     match). The old fixed value left too little room for the main column between 799-1240px,
     which was the other half of why the title/filter row kept wrapping there. */
  .vc-fi-sidebar {
    width: calc(25% - 20px);
    flex: 0 0 calc(25% - 20px);
  }

  .vc-fi-sidebar__block {
    padding-block: 20px;
  }

  .vc-fi-sidebar__block:first-child {
    padding-top: 0;
  }

  .vc-fi-sidebar__block:last-child {
    padding-bottom: 0;
  }

  @media screen and (max-width: 798px) {
    .vc-fi-sidebar__block:last-child {
      padding-top: 40px;
    }
  }

  .vc-fi-sidebar__heading {
    margin: 0 0 16px;
    font-family: var(--font-heading--family);
    font-size: 33px;
    font-weight: 600;
    line-height: 1.5;
    color: #003d29;
  }

  @media screen and (min-width: 799px) {
    .vc-fi-sidebar__heading--grove {
      font-size: 32px;
    }
  }

  @media screen and (max-width: 798px) {
    .vc-fi-sidebar__heading--grove,
    .vc-fi-sidebar__heading--subscribe {
      font-size: 26px;
    }
  }

  /* Search */
  .vc-fi-search__field {
    position: relative;
  }

  /* Live's icon is a real <button type="submit"> (24x20 hit area, confirmed via
     getBoundingClientRect against viacitrus.com), not decorative -- clicking it submits the
     search. Reset UA button chrome since this is now a <button>, not a <span>. */
  .vc-fi-search__icon {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Live has no hover/focus/active visual feedback on this button at all (confirmed via real
     pointer hover + mousedown against viacitrus.com -- background and icon fill stay identical
     across every state). Explicitly zero out the browser's default <button> focus outline here
     too, since a <span> never had one to begin with. */
  .vc-fi-search__icon:hover,
  .vc-fi-search__icon:focus,
  .vc-fi-search__icon:active {
    outline: none;
    background: none;
  }

  .vc-fi-search__icon svg {
    width: 16px;
    height: 16px;
    fill: #0a0a0a;
  }

  .vc-fi-search__input {
    width: 100%;
    height: 36px;
    padding: 5px 9px 5px 36px;
    border: 1px solid #dfe8e3 !important;
    border-radius: 0;
    background-color: #fff !important;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #7a7a7a;
  }

  /* base.css's global ::placeholder is rgba(255,255,255,0.6) (styled for dark backgrounds) --
     invisible white-on-white here. Live's real value is the field's own text color at 0.5 alpha. */
  .vc-fi-search__input::placeholder {
    color: rgba(122, 122, 122, 0.5);
    opacity: 1;
  }

  /* Tag cloud */
  .vc-fi-sidebar__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .vc-fi-sidebar__tags a {
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    background: rgba(235, 137, 53, 0.1);
    border-radius: 4px;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    color: #eb8935;
    text-decoration: none;
    white-space: nowrap;
  }

  /* From the Grove */
  .vc-fi-recent-post {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 61, 41, 0.45);
  }

  .vc-fi-recent-post:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }

  .vc-fi-recent-post a {
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #003d29;
    text-decoration: none;
  }

  .vc-fi-recent-post a:hover {
    text-decoration: underline;
  }

  /* Live's own .meta date is display:none despite being in the DOM (confirmed via
     getComputedStyle on viacitrus.com) -- hidden here the same way, not removed, for parity. */
  .vc-fi-recent-post__meta {
    display: none;
    margin-top: 4px;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 400;
    color: #363636;
  }

  /* Subscribe */
  .vc-fi-sidebar__text {
    margin: 0 0 20px;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #003d29;
  }

  .vc-fi-newsletter__field {
    margin-bottom: 20px;
  }

  .vc-fi-newsletter__field input {
    width: 100%;
    height: 36px;
    padding: 5px 16px;
    border: 1px solid #dfe8e3 !important;
    border-radius: 31px;
    background-color: #fff !important;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #363636;
  }

  /* Same base.css white-on-white ::placeholder bug as the search field above -- live's real
     value (getComputedStyle on viacitrus.com) is the input's own text color at 0.5 alpha. */
  .vc-fi-newsletter__field input::placeholder {
    color: rgba(54, 54, 54, 0.5);
    opacity: 1;
  }

  /* 'Silka Bold' literal (registered in via-citrus-cart-drawer.liquid), not the generic
     var(--font-body--family) token -- live's real computed family here is the unrestricted-weight
     "Silka Bold" face, same double-bold-CTA pattern as the Hero/About Us buttons. No explicit
     line-height: old theme sets none either, letting the font's own natural metric apply
     (same "~1.19 ratio" behavior already documented for the Cart page's submit button). */
  .vc-fi-newsletter__submit {
    display: block;
    width: 100%;
    height: 60px;
    padding: 20px 35px;
    border: 1px solid transparent;
    border-radius: 31px;
    background-color: #eb8935;
    font-family: 'Silka Bold', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    cursor: pointer;
  }

  .vc-fi-newsletter__success,
  .vc-fi-newsletter__error {
    margin: 0 0 16px;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 500;
    color: #003d29;
  }

  /* 798px, not Heritage's 749/750 default -- confirmed via a live sweep (798 vs 800px) that the
     sidebar actually drops below the main content at 798px, matching main-blog.liquid's own
     .vc-fi-layout breakpoint (see that file's comment for the full root cause). Must stay in sync
     with that value or the two files disagree on when this page stacks. */
  @media screen and (max-width: 798px) {
    .vc-fi-sidebar {
      width: 100%;
      flex: 1 1 auto;
    }
  }
/* END_SNIPPET:via-citrus-featured-in-sidebar */

/* START_SNIPPET:via-citrus-grove-pagination (INDEX:312) */
.vc-grove-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
  }

  .vc-grove-pagination__list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .vc-grove-pagination__link,
  .vc-grove-pagination__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(0, 61, 41, 0.2);
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    color: #003d29;
    text-decoration: none;
  }

  .vc-grove-pagination__link:hover,
  .vc-grove-pagination__arrow:hover {
    border-color: rgba(0, 61, 41, 0.5);
  }

  .vc-grove-pagination__link.is-current {
    background: #eb8935;
    border-color: #eb8935;
    color: #003d29;
    cursor: default;
  }

  .vc-grove-pagination__link--ellipsis {
    border-color: transparent;
    cursor: default;
  }

  @media screen and (max-width: 749px) {
    .vc-grove-pagination {
      flex-wrap: wrap;
    }
  }
/* END_SNIPPET:via-citrus-grove-pagination */

/* START_SNIPPET:video-background-styles (INDEX:316) */
.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:317) */
.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:319) */
.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 */