/** Shopify CDN: Minification failed

Line 27228:15 Expected ":"
Line 27231:15 Expected ":"
Line 27237:15 Expected ":"
Line 27240:15 Expected ":"
Line 27265:15 Expected ":"
Line 27318:15 Expected ":"
Line 27342:15 Expected ":"

**/
/* 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:10) */
.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:11) */
.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:header-announcements (INDEX:13) */
.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;
    /* place-content centres the slide box, not the copy inside it. On desktop the message
       is one line so the difference never showed; at 420px it wraps to two and sat ragged
       against the left edge, where the design centres both lines. */
    text-align: center;
  }

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

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
  /* ── One-line scrolling ticker ─────────────────────────────────────────── */
  .announcement-bar__slides--inert {
    display: none;
  }

  .announcement-bar__ticker {
    grid-column: 1 / -1;
    width: 100%;
    overflow: hidden;
  }

  .announcement-bar__ticker-track {
    display: flex;
    width: max-content;
    animation: announcement-ticker var(--ticker-dur, 30s) linear infinite;
  }

  .announcement-bar__ticker:hover .announcement-bar__ticker-track,
  .announcement-bar__ticker:focus-within .announcement-bar__ticker-track {
    animation-play-state: paused;
  }

  .announcement-bar__ticker-run {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  .announcement-bar__ticker-item,
  .announcement-bar__ticker-sep {
    white-space: nowrap;
    line-height: 1.643;
  }

  .announcement-bar__ticker-sep {
    padding-inline: 1.25em;
    opacity: 0.6;
  }

  .announcement-bar__ticker-link {
    color: inherit;
    text-decoration: none;
  }

  .announcement-bar__ticker-link:hover {
    text-decoration: underline;
  }

  @keyframes announcement-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* No motion means no animation, but the line must still be readable, so the strip
     becomes swipeable instead of silently hiding the offers past the right edge. */
  @media (prefers-reduced-motion: reduce) {
    .announcement-bar__ticker {
      overflow-x: auto;
    }
    .announcement-bar__ticker-track {
      animation: none;
    }
  }

  .announcement-bar__slides--ticker {
    display: flex;
    align-items: center;
    width: max-content;
    max-width: none;
    margin-inline: 0;
  }

  .announcement-bar__slides--ticker .announcement-bar__slide,
  .announcement-bar__slides--ticker .announcement-bar__text {
    /*
      text-wrap AS WELL AS white-space. The announcement block sets `--text-wrap: pretty` inline
      and the theme applies it as `text-wrap`, which is `text-wrap-mode: wrap` — that resets the
      nowrap half of `white-space: nowrap` and the offer broke onto a second line inside the
      ticker anyway. Both properties have to say nowrap for the line to hold.

      The slide also carries an inline `--width: 100%`, which in a max-content flex row resolves
      against the strip and squeezed each announcement into a column, so the width is released
      here too.
    */
    white-space: nowrap;
    text-wrap: nowrap;
  }

  .announcement-bar__slides--ticker .announcement-bar__slide {
    flex: none;
    width: auto;
    padding-inline: 1.25em;
    opacity: 1;
    visibility: visible;
  }

  .announcement-bar__slides--ticker .announcement-bar__text {
    margin: 0;
  }
/* END_SECTION:header-announcements */

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

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__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: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
      border-bottom-color: var(--border-bottom-color-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
    border-bottom-color: var(--border-bottom-color-mobile);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .header-actions__action:not(.account-button) .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:15) */
.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:16) */
.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:17) */
.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:19) */
.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:20) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

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

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

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

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

/* START_SECTION:main-cart (INDEX:21) */
.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:25) */
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:mbb-404 (INDEX:26) */
.mbb-404 {
    display: grid;
    justify-items: center;
  }
  .mbb-404__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: min(calc(var(--mbb-404-max, 860px) * var(--mbb-scale, 1)), 92vw);
    text-align: center;
  }
  .mbb-404__numeral {
    margin: 0 0 8px;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(72px, 18vw, var(--mbb-404-numeral, 180px));
    line-height: 1;
    color: var(--mbb-404-numeral-color, #ffd7e0);
  }
  .mbb-404__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    letter-spacing: 0.02em;
    color: var(--mbb-404-heading, #44362b);
  }
  .mbb-404__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    line-height: 1.3125;
    color: var(--mbb-404-heading, #44362b);
  }
  .mbb-404__body {
    max-width: 56ch;
    margin-block-start: calc(10px * var(--mbb-scale, 1));
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.714;
    color: #6b5c50;
  }
  .mbb-404__body > :first-child {
    margin-block-start: 0;
  }
  .mbb-404__body > :last-child {
    margin-block-end: 0;
  }

  .mbb-404__search {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--mbb-scale, 1));
    width: 100%;
    max-width: min(calc(460px * var(--mbb-scale, 1)), 92vw);
    margin-block-start: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
  }
  .mbb-404__search-input {
    flex: 1;
    height: calc(44px * var(--mbb-scale, 1));
    min-width: 0;
    padding: 10px clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    border: 0.5px solid #44362b;
    border-radius: 6px;
    background: transparent;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    color: #44362b;
  }
  .mbb-404__search-button {
    height: calc(44px * var(--mbb-scale, 1));
    padding: 10px clamp(calc(17.6px + 4.4px * var(--mbb-fl, 0)), 1.146vw, 19.36px);
    border: 0.5px solid #44362b;
    border-radius: 6px;
    background: transparent;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    color: #44362b;
    cursor: pointer;
  }

  .mbb-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(12px * var(--mbb-scale, 1));
    margin-block-start: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
  }
  .mbb-404__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(44px * var(--mbb-scale, 1));
    padding: 10px clamp(calc(24.01px + 5.99px * var(--mbb-fl, 0)), 1.563vw, 26.41px);
    border: 1px solid var(--mbb-404-heading, #44362b);
    border-radius: 100px;
    background: var(--mbb-404-heading, #44362b);
    color: #ffffff;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    text-decoration: none;
  }
  .mbb-404__cta--ghost {
    background: transparent;
    color: var(--mbb-404-heading, #44362b);
  }

  @media screen and (min-width: 750px) {
    .mbb-404__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-404__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }
    .mbb-404__body {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-404__cta,
    .mbb-404__search-input,
    .mbb-404__search-button {
      height: calc(50px * var(--mbb-scale, 1));
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
    .mbb-404__cta {
      padding: 10px clamp(calc(28.8px + 7.2px * var(--mbb-fl, 0)), 1.875vw, 31.68px);
    }
  }
/* END_SECTION:mbb-404 */

/* START_SECTION:mbb-about-banner (INDEX:27) */
.mbb-about-banner {
    --section-min-height: var(--mbb-banner-height-mobile);

    align-content: center;
  }

  @media screen and (min-width: 750px) {
    .mbb-about-banner {
      --section-min-height: var(--mbb-banner-height);
    }
  }

  .mbb-about-banner__backdrop {
    overflow: hidden;
  }

  .mbb-about-banner__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--mbb-banner-focal, center);
  }

  .mbb-about-banner__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--mbb-banner-overlay-color, #000);
    opacity: var(--mbb-banner-overlay, 0);
  }

  .mbb-about-banner__content {
    max-width: min(calc(var(--mbb-banner-content-width, 700px) * var(--mbb-scale, 1)), 92vw);
    width: 100%;
  }

  .mbb-about-banner--center .mbb-about-banner__content {
    margin-inline: auto;
    text-align: center;
  }

  .mbb-about-banner--left .mbb-about-banner__content {
    text-align: left;
  }

  .mbb-about-banner__eyebrow {
    font-family: var(--font-subheading--family);
    font-size: var(--font-size--sm, 0.875rem);
    letter-spacing: 0.12em;
    margin: 0 0 0.75rem;
    opacity: 0.8;
  }

  @media screen and (min-width: 750px) {
    .mbb-about-banner__eyebrow {
      font-size: var(--font-size--md, 1rem);
    }
  }

  .mbb-about-banner__heading {
    font-family: var(--font-heading--family);
    font-size: clamp(2rem, 6vw, var(--mbb-banner-heading-size, 72px));
    line-height: 1.05;
    margin: 0;
    text-wrap: balance;
  }

  .mbb-about-banner__subheading {
    margin-block-start: 1.25rem;
    max-width: 40rem;
    font-family: var(--font-body--family);
  }

  .mbb-about-banner--center .mbb-about-banner__subheading {
    margin-inline: auto;
  }

  .mbb-about-banner__subheading > :first-child {
    margin-block-start: 0;
  }

  .mbb-about-banner__subheading > :last-child {
    margin-block-end: 0;
  }

  .mbb-about-banner__cta {
    margin-block-start: 2rem;
  }
/* END_SECTION:mbb-about-banner */

/* START_SECTION:mbb-about-brand (INDEX:28) */
/* ---- Feature grid, built to the reference ---------------------------------
     Circular tinted disc, drawn glyph, centred title + body, and hairlines that
     meet as a cross between the four quadrants (drawn per-cell so they stop at
     the grid edges instead of running full-bleed). */
  .mbb-about--grid .mbb-about__usps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    background-image:
      linear-gradient(var(--mbb-about-rule-color, #e6ded4), var(--mbb-about-rule-color, #e6ded4)),
      linear-gradient(var(--mbb-about-rule-color, #e6ded4), var(--mbb-about-rule-color, #e6ded4));
    background-size: 1px 82%, 88% 1px;
    background-position: center center, center center;
    background-repeat: no-repeat;
    max-width: calc(760px * var(--mbb-scale, 1));
    margin-inline: auto;
  }

  .mbb-about--grid .mbb-about__usp {
    /*
      Each cell lays out on identical rows — icon, title, body — so the four
      titles and the four paragraphs line up across the grid even when a title
      wraps to two lines. Without this the right cell's body drifted downward.
    */
    display: grid;
    grid-template-rows: auto minmax(calc(58px * var(--mbb-scale, 1)), auto) auto;
    justify-items: center;
    align-content: start;
    text-align: center;
    gap: calc(6px * var(--mbb-scale, 1));
    padding: calc(34px * var(--mbb-scale, 1)) calc(24px * var(--mbb-scale, 1));
  }

  .mbb-about--grid .mbb-about__usp-title {
    align-self: start;
  }

  .mbb-about__usp-disc {
    display: grid;
    place-items: center;
    width: calc(96px * var(--mbb-scale, 1));
    height: calc(96px * var(--mbb-scale, 1));
    border-radius: 50%;
    background: var(--mbb-about-disc-bg, #f3ece3);
    margin-block-end: calc(8px * var(--mbb-scale, 1));
  }
  .mbb-about__usp-glyph {
    width: 55%;
    height: 55%;
    color: var(--mbb-about-glyph, #7a5c3a);
  }
  .mbb-about__usp-disc .mbb-about__usp-icon {
    width: 55%;
    height: 55%;
    object-fit: contain;
  }

  /* Eyebrow: letterspaced caps with a rule either side and a heart between. */
  .mbb-about--grid .mbb-about__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(14px * var(--mbb-scale, 1));
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mbb-about-eyebrow, #a8916f);
  }
  .mbb-about--grid .mbb-about__eyebrow::before,
  .mbb-about--grid .mbb-about__eyebrow::after {
    content: '';
    height: 1px;
    width: calc(90px * var(--mbb-scale, 1));
    background: var(--mbb-about-rule-color, #e6ded4);
  }

  .mbb-about--grid .mbb-about__head {
    text-align: center;
  }
  .mbb-about--grid .mbb-about__intro {
    margin-inline: auto;
    max-width: calc(620px * var(--mbb-scale, 1));
  }

  /*
    The collage enters from the right (data-mbb-reveal="right", a 40px translate).
    On narrow viewports that 40px sits outside the padding box and would briefly
    widen the scrollable area, so clip it. "clip" rather than "hidden" because it
    must not turn the section into a scroll container.
  */
  @media (prefers-reduced-motion: no-preference) {
    .mbb-about {
      overflow-x: clip;
    }
  }

  /* ---------- root : mobile first (Figma mobile frame 420 → 380 content) ---------- */
  .mbb-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    width: 100%;
    max-width: calc(var(--mbb-about-max, 1760px) + 40px);
    margin-inline: auto;
  }
  .mbb-about.spacing-style {
    --padding-inline: 20px;
  }
  /* 20 is the rail off the 420 mobile frame, so on a phone it has to scale with it like
     every other mobile value — flat, it was 20 on a 320 SE and 20 on a 430 Pro Max. */
  @media screen and (max-width: 749px) {
    .mbb-about.spacing-style {
      --padding-inline: var(--mbb-gutter, 20px);
    }
  }

  .mbb-about__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    width: 100%;
    text-align: center;
  }

  /* Frame 48 */
  .mbb-about__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10px * var(--mbb-scale, 1));
    width: 100%;
  }
  .mbb-about__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.25;
    /* 221:5503 sets the eyebrow in caps with a light track. This lived only in the
       --grid override, so the row layout the design actually uses rendered it title
       case; the label stays human-readable in the editor and the caps are styling. */
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mbb-about-heading-color, #44362b);
  }
  .mbb-about__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    line-height: 1.313;
    color: var(--mbb-about-heading-color, #44362b);
  }
  .mbb-about__intro,
  .mbb-about__intro p {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.25;
    color: var(--mbb-about-body-color, #909090);
  }

  /* Group 327 / Frame 255 */
  .mbb-about__usps {
    display: grid;
    grid-template-columns: repeat(var(--mbb-about-cols-m, 1), minmax(0, 1fr));
    gap: calc(var(--mbb-about-usp-gap, 60px) * var(--mbb-scale, 1));
    width: 100%;
    max-width: clamp(calc(267.2px + 66.8px * var(--mbb-fl, 0)), 17.396vw, 293.92px);
    margin-inline: auto;
  }
  .mbb-about__usp {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.963214px;
    text-align: center;
  }
  .mbb-about__usp + .mbb-about__usp::before {
    content: '';
    position: absolute;
    inset-block-start: calc(var(--mbb-about-usp-gap, 60px) / -2);
    inset-inline: 0;
    border-block-start: 0.827202px solid var(--mbb-about-rule-color, #a4a4a4);
  }
  .mbb-about__usps--flush .mbb-about__usp + .mbb-about__usp::before {
    content: none;
  }

  /*
    Mobile reads Small-Batch Excellence first (Mobile_HomePage 202:13713); desktop reads
    Gourmet -> Whipped -> Small-Batch across three columns (221:5503). Same three blocks,
    different reading order, so this is a visual reorder — the block data stays as authored
    and the theme editor keeps showing them in desktop order.

    The hairline rule is drawn with a DOM-order `+` selector, so it has to move with them:
    once the third card is pulled to the top it must lose its rule and the first card gains
    one. Scoped to exactly three USPs so a fourth block cannot inherit a half-applied rule.
  */
  @media screen and (max-width: 749px) {
    /* The mobile frame ends the block on the image group — no CTA is drawn. Doubled class
       so this outranks the `.mbb-about__cta { display: inline-flex }` rule further down;
       equal specificity would let source order win and the button stayed visible. */
    .mbb-about__cta.mbb-about__cta--desktop-only {
      display: none;
    }
    .mbb-about__usp:nth-child(3):nth-last-child(1) {
      order: -1;
    }
    .mbb-about__usps:has(> .mbb-about__usp:nth-child(3):nth-last-child(1)) .mbb-about__usp:nth-child(3)::before {
      content: none;
    }
    .mbb-about__usps:not(.mbb-about__usps--flush):has(> .mbb-about__usp:nth-child(3):nth-last-child(1))
      .mbb-about__usp:nth-child(1)::before {
      content: '';
      position: absolute;
      inset-block-start: calc(var(--mbb-about-usp-gap, 60px) / -2);
      inset-inline: 0;
      border-block-start: 0.827202px solid var(--mbb-about-rule-color, #a4a4a4);
    }
  }
  .mbb-about__usp-icon {
    width: calc(var(--mbb-about-icon, 32px) * var(--mbb-scale, 1));
    height: auto;
    display: block;
  }
  .mbb-about__usp-title {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.278;
    color: var(--mbb-about-heading-color, #44362b);
  }
  .mbb-about__usp-text,
  .mbb-about__usp-text p {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.25;
    color: var(--mbb-about-body-color, #909090);
  }

  /* Button */
  .mbb-about__cta {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: calc(10px * var(--mbb-scale, 1));
    padding: 14px clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
    border-radius: 100px;
    background: var(--mbb-about-cta-bg, #44362b);
    color: var(--mbb-about-cta-fg, #ffffff);
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .mbb-about__cta:hover {
    opacity: 0.88;
  }
  .mbb-about__cta-label {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.214;
    text-align: center;
    color: currentcolor;
  }
  .mbb-about__cta-arrow {
    width: calc(21px * var(--mbb-scale, 1));
    height: calc(12px * var(--mbb-scale, 1));
    flex: none;
  }

  /* Group 254 / Group 302 — collage */
  .mbb-about__media {
    position: relative;
    width: 100%;
    /*
      The mobile collage is 380 x 410.11 (Group 254 in 202:13687) — the full content band.
      These were transcribed from an earlier revision where the group was 365.54 wide, which
      left every piece inside it ~4% short: the main photo rendered 297.4 against the frame's
      314. Numbers below are ratios of 380, so they hold at any phone width.
    */
    max-width: clamp(calc(304px + 76px * var(--mbb-fl, 0)), 19.7917vw, 334.4px);
    aspect-ratio: 380 / 410.11;
    margin-inline: auto;
  }
  .mbb-about__main,
  .mbb-about__overlay,
  .mbb-about__accent {
    position: absolute;
    overflow: hidden;
    background: var(--mbb-about-media-bg, transparent);
  }
  .mbb-about__main {
    inset-block: 0;
    inset-inline-end: 0;
    width: 82.6316%; /* Frame 5 314 of 380 */
    border-radius: 6.67px;
  }
  .mbb-about__overlay {
    inset-inline-start: 0;
    inset-block-start: 52.6686%; /* Frame 189 at y 783 of the 410.11-tall group, offset 567.89 */
    width: 38.9474%; /* 148 of 380 */
    height: 43.6472%; /* 179 of 410.11 */
    border-radius: 8px;
    filter: drop-shadow(0 0 48.5432px rgb(0 0 0 / 10%));
  }
  .mbb-about__accent {
    inset-inline-start: var(--mbb-about-accent-x, 4%);
    inset-block-start: var(--mbb-about-accent-y, 4%);
    width: var(--mbb-about-accent-w, 30%);
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }
  .mbb-about__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 100% 50%;
  }
  .mbb-about__overlay .mbb-about__img,
  .mbb-about__accent .mbb-about__img {
    object-position: 50% 0%;
  }
  .mbb-about__img--placeholder {
    background: #f3f3f3;
  }

  /* Figma comment on this section: "auto movable".
     The collage panes drift on a slow loop so the group is never quite still.
     Applied to the panes, not the <img>, so the existing hover zoom (which uses
     `scale` on the image) keeps working independently of this `translate`. */
  @media (prefers-reduced-motion: no-preference) {
    .mbb-about--float .mbb-about__main,
    .mbb-about--float .mbb-about__overlay,
    .mbb-about--float .mbb-about__accent {
      animation: mbb-about-drift var(--mbb-about-float-time, 9s) ease-in-out infinite alternate;
      will-change: translate;
    }
    /* Offset each pane so they never move as one block. */
    .mbb-about--float .mbb-about__overlay {
      animation-duration: calc(var(--mbb-about-float-time, 9s) * 1.35);
      animation-delay: -2.5s;
    }
    .mbb-about--float .mbb-about__accent {
      animation-duration: calc(var(--mbb-about-float-time, 9s) * 0.8);
      animation-delay: -5s;
    }
  }

  @keyframes mbb-about-drift {
    from {
      translate: 0 calc(var(--mbb-about-float, 10px) * -1);
    }
    to {
      translate: 0 var(--mbb-about-float, 10px);
    }
  }

  /* Frame 278 — rating badge */
  .mbb-about__badge {
    /* mobile badge is 96 where desktop is 152 — 0.631579 keeps both exact */
    --mbb-about-badge: calc(var(--mbb-about-badge-size, 152px) * 0.631579);

    position: absolute;
    inset-inline-start: var(--mbb-about-badge-x, 2.9463%);
    inset-block-start: var(--mbb-about-badge-y, 9.0488%);
    display: grid;
    place-items: center;
    width: var(--mbb-about-badge);
    height: var(--mbb-about-badge);
    border-radius: 50%;
    background: var(--mbb-about-badge-bg, #d13e6a);
    border: calc(var(--mbb-about-badge) * 0.0877193) solid var(--mbb-about-badge-ring, #ffffff);
    color: var(--mbb-about-badge-fg, #ffffff);
  }
  .mbb-about__badge-ring {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 88.827%;
    height: 88.827%;
    fill: currentcolor;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(calc(11.37px + 2.83px * var(--mbb-fl, 0)), 0.74vw, 12.5px);
  }
  .mbb-about__badge-value {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--mbb-about-badge) * 0.0351478);
  }
  .mbb-about__badge-number {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: calc(var(--mbb-about-badge) * 0.1523072);
    line-height: calc(var(--mbb-about-badge) * 0.1842105);
    text-align: center;
    color: currentcolor;
  }
  .mbb-about__badge-star {
    width: calc(var(--mbb-about-badge) * 0.1464474);
    height: calc(var(--mbb-about-badge) * 0.1464474);
    color: currentcolor;
    flex: none;
  }

  /* ---------- desktop : Figma 1920 frame ---------- */
  @media screen and (min-width: 750px) {
    .mbb-about {
      display: grid;
      /* .mbb-about shares its element with Horizon .section, a named-line grid for page
         margins; its child placement rules drop both columns into one track. Reset the
         children to auto placement and use proportional columns so the 767/845 ratio
         holds at any desktop width instead of only at 1920. */
      grid-template-columns: minmax(0, 47.6%) minmax(0, 1fr);
      align-items: start;
      gap: clamp(32px, 7.7vw, 130.1px);
    }

    .mbb-about > .mbb-about__content,
    .mbb-about > .mbb-about__media {
      grid-column: auto;
      grid-row: auto;
      min-width: 0;
    }

    .mbb-about__content {
      align-items: flex-start;
      text-align: start;
      gap: calc(var(--mbb-about-gap, 66px) * var(--mbb-scale, 1));
      padding-block-start: calc(var(--mbb-about-lead, 120px) * var(--mbb-scale, 1));
    }
    .mbb-about__head {
      align-items: flex-start;
      gap: 4px;
    }
    .mbb-about__eyebrow,
    .mbb-about__intro,
    .mbb-about__intro p {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-about__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }

    .mbb-about__usps {
      display: grid;
      grid-template-columns: repeat(var(--mbb-about-cols, 3), minmax(0, 1fr));
      align-items: center;
      column-gap: calc(var(--mbb-about-usp-gap, 60px) * var(--mbb-scale, 1));
      row-gap: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
      max-width: none;
      margin-inline: 0;
    }
    .mbb-about__usp {
      align-items: flex-start;
      gap: 6px;
      text-align: start;
    }
    .mbb-about__usp + .mbb-about__usp::before {
      inset-block-start: 50%;
      inset-inline-start: calc(var(--mbb-about-usp-gap, 60px) / -2);
      inset-inline-end: auto;
      width: 0;
      height: calc(162px * var(--mbb-scale, 1));
      transform: translateY(-50%);
      border-block-start: 0;
      border-inline-start: 1px solid var(--mbb-about-rule-color, #a4a4a4);
    }
    .mbb-about__usp-title {
      font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
      line-height: 1.292;
    }
    .mbb-about__usp-text,
    .mbb-about__usp-text p {
      font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
      line-height: 1.214;
    }

    .mbb-about__cta {
      padding: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px) clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
    }
    .mbb-about__cta-label {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.222;
    }

    .mbb-about__media {
      max-width: none;
      aspect-ratio: 845 / 837;
    }
    .mbb-about__main {
      width: var(--mbb-about-main-w, 75.2414%);
      border-radius: 13.6098px;
    }
    .mbb-about__overlay {
      inset-block-start: var(--mbb-about-overlay-y, 48.0287%);
      width: var(--mbb-about-overlay-w, 42.0118%);
      height: 49.1039%;
      border-radius: 8.13119px;
    }
    .mbb-about__accent {
      border-radius: 8.13119px;
    }
    .mbb-about__badge {
      --mbb-about-badge: var(--mbb-about-badge-size, 152px);

      inset-inline-start: var(--mbb-about-badge-x, 10.0592%);
      inset-block-start: var(--mbb-about-badge-y, 14.4564%);
    }

    /* text_alignment: centre */
    .mbb-about--center .mbb-about__content,
    .mbb-about--center .mbb-about__head {
      align-items: center;
      text-align: center;
    }
    .mbb-about--center .mbb-about__usp {
      align-items: center;
      text-align: center;
    }
  }

  @media screen and (max-width: 749px) {
    .mbb-about:not(.mbb-about--center-mobile) .mbb-about__content,
    .mbb-about:not(.mbb-about--center-mobile) .mbb-about__head,
    .mbb-about:not(.mbb-about--center-mobile) .mbb-about__usp {
      align-items: flex-start;
      text-align: start;
    }
    .mbb-about--center-mobile .mbb-about__content,
    .mbb-about--center-mobile .mbb-about__head {
      text-align: center;
    }
  }
/* END_SECTION:mbb-about-brand */

/* START_SECTION:mbb-blog-grid (INDEX:29) */
.mbb-blog {
    row-gap: calc(var(--mbb-blog-gap, 40px) * var(--mbb-scale, 1));
    justify-items: center;
    width: 100%;
    max-width: min(calc(var(--mbb-blog-max, 1760px) * var(--mbb-scale, 1)), 92vw);
    margin-inline: auto;
  }

  /* Frame 48 — eyebrow + heading, gap 4 */
  .mbb-blog__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: min(calc(852px * var(--mbb-scale, 1)), 92vw);
  }

  .mbb-blog--center .mbb-blog__head {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .mbb-blog__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    letter-spacing: 0.08em;
    color: var(--mbb-blog-heading, #44362b);
  }

  .mbb-blog__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    line-height: 1.286;
    color: var(--mbb-blog-heading, #44362b);
    text-wrap: balance;
  }

  .mbb-blog__subheading {
    margin-block-start: calc(10px * var(--mbb-scale, 1));
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.733;
    color: var(--mbb-blog-body, #909090);
  }

  .mbb-blog__subheading > :first-child {
    margin-block-start: 0;
  }

  .mbb-blog__subheading > :last-child {
    margin-block-end: 0;
  }

  .mbb-blog__grid {
    display: grid;
    grid-template-columns: repeat(var(--mbb-blog-cols-m, 1), minmax(0, 1fr));
    gap: calc(12px * var(--mbb-scale, 1));
    width: 100%;
  }

  .mbb-blog__empty {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    line-height: 1.75;
    color: var(--mbb-blog-body, #909090);
  }

  .mbb-blog__pagination {
    width: 100%;
  }

  .mbb-blog__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(12px * var(--mbb-scale, 1));
    padding: 16px clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
    border-radius: 100px;
    background: var(--mbb-blog-heading, #44362b);
    color: #ffffff;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    line-height: 1.375;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .mbb-blog__button:hover {
    opacity: 0.88;
  }

  @media screen and (min-width: 750px) {
    .mbb-blog__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
      letter-spacing: 0.06em;
    }

    .mbb-blog__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }

    .mbb-blog__subheading {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }

    .mbb-blog__grid {
      grid-template-columns: repeat(var(--mbb-blog-cols, 3), minmax(0, 1fr));
      gap: calc(var(--mbb-blog-card-gap, 20px) * var(--mbb-scale, 1));
    }

    .mbb-blog__button {
      padding: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px) clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
  }
/* END_SECTION:mbb-blog-grid */

/* START_SECTION:mbb-category-tiles (INDEX:30) */
/* Switcher: radios are visually hidden but focusable via their labels. */
  .mbb-cats__switch {
    display: contents;
  }
  /*
    position:fixed, NOT absolute. Clicking a label focuses its radio, and the browser
    scrolls a focused control into view. Absolutely positioned, these sit at the top of
    the section, so every tab switch yanked the page upward (measured ~49px at 1920, more
    on a short viewport). A fixed element is by definition already inside the viewport, so
    focus never triggers a scroll — while the DOM order, and therefore the `:checked ~`
    sibling selectors that drive the whole switcher, stay exactly as they were.
  */
  .mbb-cats__radio {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .mbb-cats__panels {
    width: 100%;
    display: grid;
    /* An implicit `auto` column sizes to max-content, so a panel could grow wider than the
       section — invisible while the card grid was auto-fit, but the moment the mobile row
       became a flex scroller the panel stretched to 661px in a 420px viewport and pushed
       the whole page sideways. Pin the column so panels can never exceed the container. */
    grid-template-columns: minmax(0, 1fr);
  }
  /* Panels stack in one cell so the section height follows the tallest, no jump. */
  /* Authoritative: a global fail-safe rule once forced these visible and every panel
     stacked on top of the others. The switcher must always win. */
  .mbb-cats__panel {
    grid-area: 1 / 1;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 320ms var(--mbb-ease, ease);
  }
  .mbb-cats__panel-cta {
    margin-block-start: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    text-align: center;
  }
  .mbb-cats__viewall {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    color: #c3116a;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  /* Keyboard focus must be visible even though the input itself is hidden. */
  .mbb-cats__radio:focus-visible + .mbb-cats__radio ~ .mbb-cats__pills .mbb-cats__pill,
  .mbb-cats__pill:focus-visible {
    outline: 2px solid #c3116a;
    outline-offset: 2px;
  }

  /*
    Fail-safe. The panels are hidden by default and depend entirely on a :checked radio,
    so any state where nothing is checked renders the section as a heading and pills with
    an empty void beneath — no products. That can happen if the checked attribute is lost
    on a re-render (the theme editor re-renders sections without a full page load), or if
    the markup is served without it. Showing the first panel when no radio is checked
    means the section always has content; the :checked rules below still win when one is.
  */
  .mbb-cats__switch:not(:has(.mbb-cats__radio:checked)) .mbb-cats__panel:first-child {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
  }
  .mbb-cats__switch:not(:has(.mbb-cats__radio:checked)) .mbb-cats__pill:first-child {
    background: #44362b;
    color: #ffffff;
  }

  .mbb-cats__radio:nth-of-type(1):checked ~ .mbb-cats__pills .mbb-cats__pill:nth-of-type(1) { background: #44362b; color: #ffffff; }
  .mbb-cats__radio:nth-of-type(1):checked ~ .mbb-cats__panels .mbb-cats__panel:nth-of-type(1) { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
  .mbb-cats__radio:nth-of-type(2):checked ~ .mbb-cats__pills .mbb-cats__pill:nth-of-type(2) { background: #44362b; color: #ffffff; }
  .mbb-cats__radio:nth-of-type(2):checked ~ .mbb-cats__panels .mbb-cats__panel:nth-of-type(2) { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
  .mbb-cats__radio:nth-of-type(3):checked ~ .mbb-cats__pills .mbb-cats__pill:nth-of-type(3) { background: #44362b; color: #ffffff; }
  .mbb-cats__radio:nth-of-type(3):checked ~ .mbb-cats__panels .mbb-cats__panel:nth-of-type(3) { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
  .mbb-cats__radio:nth-of-type(4):checked ~ .mbb-cats__pills .mbb-cats__pill:nth-of-type(4) { background: #44362b; color: #ffffff; }
  .mbb-cats__radio:nth-of-type(4):checked ~ .mbb-cats__panels .mbb-cats__panel:nth-of-type(4) { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
  .mbb-cats__radio:nth-of-type(5):checked ~ .mbb-cats__pills .mbb-cats__pill:nth-of-type(5) { background: #44362b; color: #ffffff; }
  .mbb-cats__radio:nth-of-type(5):checked ~ .mbb-cats__panels .mbb-cats__panel:nth-of-type(5) { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
  .mbb-cats__radio:nth-of-type(6):checked ~ .mbb-cats__pills .mbb-cats__pill:nth-of-type(6) { background: #44362b; color: #ffffff; }
  .mbb-cats__radio:nth-of-type(6):checked ~ .mbb-cats__panels .mbb-cats__panel:nth-of-type(6) { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
  .mbb-cats__radio:nth-of-type(7):checked ~ .mbb-cats__pills .mbb-cats__pill:nth-of-type(7) { background: #44362b; color: #ffffff; }
  .mbb-cats__radio:nth-of-type(7):checked ~ .mbb-cats__panels .mbb-cats__panel:nth-of-type(7) { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
  .mbb-cats__radio:nth-of-type(8):checked ~ .mbb-cats__pills .mbb-cats__pill:nth-of-type(8) { background: #44362b; color: #ffffff; }
  .mbb-cats__radio:nth-of-type(8):checked ~ .mbb-cats__panels .mbb-cats__panel:nth-of-type(8) { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
  .mbb-cats__radio:nth-of-type(9):checked ~ .mbb-cats__pills .mbb-cats__pill:nth-of-type(9) { background: #44362b; color: #ffffff; }
  .mbb-cats__radio:nth-of-type(9):checked ~ .mbb-cats__panels .mbb-cats__panel:nth-of-type(9) { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
  .mbb-cats__radio:nth-of-type(10):checked ~ .mbb-cats__pills .mbb-cats__pill:nth-of-type(10) { background: #44362b; color: #ffffff; }
  .mbb-cats__radio:nth-of-type(10):checked ~ .mbb-cats__panels .mbb-cats__panel:nth-of-type(10) { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
  .mbb-cats__radio:nth-of-type(11):checked ~ .mbb-cats__pills .mbb-cats__pill:nth-of-type(11) { background: #44362b; color: #ffffff; }
  .mbb-cats__radio:nth-of-type(11):checked ~ .mbb-cats__panels .mbb-cats__panel:nth-of-type(11) { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
  .mbb-cats__radio:nth-of-type(12):checked ~ .mbb-cats__pills .mbb-cats__pill:nth-of-type(12) { background: #44362b; color: #ffffff; }
  .mbb-cats__radio:nth-of-type(12):checked ~ .mbb-cats__panels .mbb-cats__panel:nth-of-type(12) { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }

  /* Horizon .section is a named-line grid for page margins. Left as-is, our children get
     placed into its narrow content track: the pills stack vertically off the right edge and
     the card grid collapses to a sliver. Force one full-width column and auto placement. */
  .mbb-cats {
    /*
      The inner row scrolls, but nothing stopped the section resolving to the full
      row width — the section measured 390px while its scrollWidth was 1164px, and
      that width propagated to the document, rendering the whole site zoomed out on
      a phone. `clip` (not `hidden`) contains it without creating a scroll container.
    */
    overflow-x: clip;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--mbb-cats-gap, 50px) * var(--mbb-scale, 1));
    justify-items: center;
    max-width: min(calc(var(--mbb-cats-max, 1760px) * var(--mbb-scale, 1)), 92vw);
    margin-inline: auto;
    width: 100%;
  }

  /*
    Placement is named explicitly, NEVER as `.mbb-cats__switch > *`. The switcher is
    display:contents, so the radios and the panels wrapper are siblings in this grid and
    the whole switch depends on `:checked ~ .mbb-cats__panels .mbb-cats__panel`. Forcing
    grid placement (and width:100%) onto the radios rewrites the hidden inputs' box and
    breaks that sibling chain — which is what stacked every panel on top of the others.
    Only the three real layout children get placed.
  */
  .mbb-cats__head,
  .mbb-cats__pills,
  .mbb-cats__panels,
  .mbb-cats__cta {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }

  /*
    Centring the CTA gets its OWN rule. It is the last selector in the group above, and adding
    `display: flex` there applied it to .mbb-cats__panels as well — which flipped the panels
    wrapper from grid to flex, disabled the `grid-area: 1/1` that stacks the panels in one
    cell, and let the active panel shrink-wrap to its content. The card grid is auto-fit, so
    it then resolved against 310px instead of 1549px and collapsed 3 cards into 1 column.
    Never extend a grouped selector without reading the whole group.
  */
  .mbb-cats__cta {
    display: flex;
    justify-content: center;
  }

  .mbb-cats__pills {
    justify-self: center;
  }

  /* Frame 48 */
  .mbb-cats__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    max-width: min(calc(852px * var(--mbb-scale, 1)), 92vw);
  }
  .mbb-cats__eyebrow {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.667;
    color: #44362b;
    margin: 0;
  }
  .mbb-cats__heading {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
    line-height: 1.313;
    color: #44362b;
    margin: 0;
  }

  /* Frame 44 — pills */
  .mbb-cats__pills {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: calc(14px * var(--mbb-scale, 1));
    flex-wrap: wrap;
  }
  .mbb-cats__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(150px * var(--mbb-scale, 1));
    height: calc(50px * var(--mbb-scale, 1));
    padding: 10px clamp(calc(28.8px + 7.2px * var(--mbb-fl, 0)), 1.875vw, 31.68px);
    border: 0.5px solid #44362b;
    border-radius: 6px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.222;
    text-align: center;
    color: #44362b;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .mbb-cats__pill:hover {
    background: rgb(68 54 43 / 8%);
  }
  .mbb-cats__pill.is-active {
    background: #44362b;
    color: #ffffff;
  }

  /* Frame 44 — cards */
  /* auto-fit collapses the empty tracks when a category has fewer products than columns,
     and justify-content centres what remains instead of leaving a gap on the right.
     Cards cap at the design's 412px. */
  .mbb-cats__grid {
    max-width: 100%;
    min-width: 0;
    display: grid;
    /* The max track has to be fluid too. Frozen at the design's 412px, auto-fit computes
       the column count against 412 and drops to 2 columns on a 1366 laptop; expressed
       proportionally the cards just get narrower and the row stays intact. */
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), clamp(240px, 21.458vw, 362.55px)));
    justify-content: center;
    gap: calc(var(--mbb-cats-card-gap, 20px) * var(--mbb-scale, 1));
    width: 100%;
  }
  .mbb-cats__cta {
    margin-block-start: calc(8px * var(--mbb-scale, 1));
  }

  @media screen and (max-width: 989px) {
    .mbb-cats {
      row-gap: calc(28px * var(--mbb-scale, 1));
    }
    .mbb-cats__heading {
      font-size: 28px;
      line-height: 36px;
    }
    .mbb-cats__eyebrow {
      font-size: 12px;
      line-height: 20px;
    }
    .mbb-cats__pills {
      flex-wrap: nowrap;
      overflow-x: auto;
      justify-content: flex-start;
      width: 100%;
      gap: calc(8px * var(--mbb-scale, 1));
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .mbb-cats__pills::-webkit-scrollbar {
      display: none;
    }
    .mbb-cats__pill {
      min-width: 0;
      height: calc(38px * var(--mbb-scale, 1));
      padding: calc(8px * var(--mbb-scale, 1)) calc(18px * var(--mbb-scale, 1));
      font-size: 14px;
      flex: none;
    }
    .mbb-cats__grid {
      grid-template-columns: repeat(var(--mbb-cats-cols-m, 2), minmax(0, 1fr));
      gap: calc(12px * var(--mbb-scale, 1));
    }
  }

  /*
    Phones wrap, they do not scroll. Mobile_HomePage 202:13942 lays the five pills out on
    two centred rows (3 + 2); the horizontal scroller above pushed Body Butter and Body
    Scrub off the right edge with nothing to suggest they were there. Kept for 750-989px,
    where five pills still fit on one line and the scroller is harmless.
  */
  @media screen and (max-width: 749px) {
    .mbb-cats__pills {
      flex-wrap: wrap;
      overflow-x: visible;
      justify-content: center;
      row-gap: calc(10px * var(--mbb-scale, 1));
    }
    /* Desktop sets these in caps (202:11175); the mobile frame uses title case, and the
       extra width of BODY BUTTER / BODY SCRUB is what pushed the rows to 2 + 2 + 1
       instead of the 3 + 2 the design lays out. */
    .mbb-cats__pill {
      text-transform: none;
    }

    /*
      Frame 290 sits at x=20 w=380 on the 420 frame like every other mobile section. Nothing
      here provided that rail, and the desktop one (Product Categories Section 202:11175,
      x=80 w=1760) was being overridden by the guard in mbb-reveal.css — see the note there —
      so the eyebrow, the headline and the first card all sat flush against the screen edge.
    */
    .section.mbb-cats {
      max-width: none;
      padding-inline: var(--mbb-gutter, 20px);
    }

    /*
      One-up carousel, not a two-column grid. Mobile_HomePage 202:13942 shows a single
      262/420 card with the next one peeking past the right edge — the peek is the only
      affordance telling a shopper there is more, which a 2-col grid loses entirely.
      The negative margin lets the row bleed to the screen edges while the padding keeps
      the first card aligned with the headline above it.

      width MUST become auto with those margins. `width: 100%` resolves against the padded
      track (352.8 of 390) and negative margins only move that box, they do not widen it —
      the rail would start at 0 but still end 37px short, clipping the peek. With width:auto
      the used width absorbs the margins and the scrollport spans the full screen again.
      Group 289 in the frame starts at the rail and runs off the right edge, which is exactly
      padding-inline on a full-bleed scroller; scroll-padding keeps snapping on that rail too.
    */
    .mbb-cats__grid {
      display: flex;
      grid-template-columns: none;
      width: auto;
      margin-inline: calc(-1 * var(--mbb-gutter, 20px));
      padding-inline: var(--mbb-gutter, 20px);
      scroll-padding-inline: var(--mbb-gutter, 20px);
      min-width: 0;
      /*
        The desktop rule centres this grid. Kept on a horizontal scroller it makes the
        leading overflow unreachable — the browser clamps scrollLeft at 0, so whatever
        centring pushed off the left edge (the first card) can never be scrolled to.
      */
      justify-content: flex-start;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .mbb-cats__grid::-webkit-scrollbar {
      display: none;
    }
    /* 262 of the 420 frame. Sized against the viewport rather than the padded grid, so the
       card keeps the design's proportion instead of shrinking with the section's own rail. */
    .mbb-cats__grid > * {
      flex: 0 0 62.4vw;
      scroll-snap-align: start;
    }
  }
/* END_SECTION:mbb-category-tiles */

/* START_SECTION:mbb-collection-banner (INDEX:31) */
.mbb-cbanner {
    display: grid;
    justify-items: center;
  }
  .mbb-cbanner__inner {
    position: relative;
    display: grid;
    gap: calc(var(--mbb-cbanner-gap, 30px) * var(--mbb-scale, 1));
    width: 100%;
    max-width: min(calc(var(--mbb-cbanner-max, 1760px) * var(--mbb-scale, 1)), 92vw);
  }

  .mbb-cbanner__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    min-width: 0;
  }
  .mbb-cbanner--left .mbb-cbanner__content {
    align-items: flex-start;
    text-align: left;
  }

  .mbb-cbanner__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-block-end: 6px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.538;
    color: #909090;
  }
  .mbb-cbanner__crumb {
    color: inherit;
    text-decoration: none;
  }
  .mbb-cbanner__crumb:hover {
    text-decoration-line: underline;
  }
  .mbb-cbanner__crumb.is-current {
    color: var(--mbb-cbanner-heading, #44362b);
  }

  .mbb-cbanner__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    letter-spacing: 0.02em;
    color: var(--mbb-cbanner-heading, #44362b);
  }
  .mbb-cbanner__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    line-height: 1.3125;
    color: var(--mbb-cbanner-heading, #44362b);
  }
  .mbb-cbanner__description {
    max-width: 70ch;
    margin-block-start: calc(10px * var(--mbb-scale, 1));
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.714;
    color: var(--mbb-cbanner-body, #6b5c50);
  }
  .mbb-cbanner__description > :first-child {
    margin-block-start: 0;
  }
  .mbb-cbanner__description > :last-child {
    margin-block-end: 0;
  }
  .mbb-cbanner__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(38px * var(--mbb-scale, 1));
    margin: 14px 0 0;
    padding: 8px clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    border: 0.5px solid currentcolor;
    border-radius: 6px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.692;
    color: var(--mbb-cbanner-heading, #44362b);
  }
  .mbb-cbanner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(44px * var(--mbb-scale, 1));
    margin-block-start: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    padding: 10px clamp(calc(24.01px + 5.99px * var(--mbb-fl, 0)), 1.563vw, 26.41px);
    border-radius: 100px;
    background: var(--mbb-cbanner-heading, #44362b);
    color: #ffffff;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    text-decoration: none;
  }

  /* Split — collection artwork on a rounded panel, card radius */
  .mbb-cbanner__media {
    border-radius: var(--mbb-cbanner-radius, 10px);
    background: var(--mbb-cbanner-panel, #e4ffc4);
    overflow: hidden;
  }
  .mbb-cbanner__img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: calc(var(--mbb-cbanner-height, 420px) * var(--mbb-scale, 1));
    object-fit: cover;
  }

  /* Overlay — image as the ground, text sitting on it */
  .mbb-cbanner--overlay .mbb-cbanner__inner {
    border-radius: var(--mbb-cbanner-radius, 10px);
    overflow: hidden;
    isolation: isolate;
  }
  .mbb-cbanner--overlay .mbb-cbanner__content {
    position: relative;
    z-index: 1;
    padding: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px) clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    min-height: calc(var(--mbb-cbanner-height, 420px) * var(--mbb-scale, 1));
    justify-content: center;
  }
  .mbb-cbanner__ground {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .mbb-cbanner__ground-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mbb-cbanner__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(68 54 43 / 10%), rgb(68 54 43 / 80%));
    opacity: var(--mbb-cbanner-scrim, 0.55);
  }
  .mbb-cbanner--overlay .mbb-cbanner__crumbs,
  .mbb-cbanner--overlay .mbb-cbanner__eyebrow,
  .mbb-cbanner--overlay .mbb-cbanner__heading,
  .mbb-cbanner--overlay .mbb-cbanner__description,
  .mbb-cbanner--overlay .mbb-cbanner__count,
  .mbb-cbanner--overlay .mbb-cbanner__crumb.is-current {
    color: var(--mbb-cbanner-overlay-text, #ffffff);
  }
  .mbb-cbanner--overlay .mbb-cbanner__cta {
    background: var(--mbb-cbanner-overlay-text, #ffffff);
    color: var(--mbb-cbanner-heading, #44362b);
  }

  @media screen and (min-width: 750px) {
    .mbb-cbanner__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-cbanner__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }
    .mbb-cbanner__description {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-cbanner__count {
      height: calc(50px * var(--mbb-scale, 1));
      padding: 10px clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
    .mbb-cbanner__cta {
      height: calc(50px * var(--mbb-scale, 1));
      padding: 10px clamp(calc(28.8px + 7.2px * var(--mbb-fl, 0)), 1.875vw, 31.68px);
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
    .mbb-cbanner__crumbs {
      font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    }
    .mbb-cbanner--overlay .mbb-cbanner__content {
      padding: clamp(calc(64.01px + 15.99px * var(--mbb-fl, 0)), 4.167vw, 70.41px) clamp(calc(48px + 12px * var(--mbb-fl, 0)), 3.125vw, 52.8px);
    }
  }

  @media screen and (min-width: 990px) {
    .mbb-cbanner--split .mbb-cbanner__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
      align-items: center;
    }
  }
/* END_SECTION:mbb-collection-banner */

/* START_SECTION:mbb-collection-grid (INDEX:32) */
.mbb-coll {
    /* one source of truth for the header row's height, shared by the sort bar above the grid
       and the filter rail's head, so their rules stay on the same line */
    --mbb-coll-barh: calc(38px * var(--mbb-scale, 1));
    --mbb-coll-barpad: 14px;

    display: grid;
    row-gap: calc(var(--mbb-coll-gap, 50px) * var(--mbb-scale, 1));
    justify-items: center;
  }
  .mbb-coll > * {
    width: 100%;
    max-width: min(calc(var(--mbb-coll-max, 1760px) * var(--mbb-scale, 1)), 92vw);
  }

  /* Frame 48 — eyebrow + heading, gap 4 */
  .mbb-coll__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }
  .mbb-coll__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    letter-spacing: 0.02em;
    color: #44362b;
  }
  .mbb-coll__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    line-height: 1.3125;
    color: #44362b;
  }
  .mbb-coll__terms {
    display: block;
  }
  .mbb-coll__description {
    max-width: 70ch;
    margin-block-start: 6px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.714;
    color: #6b5c50;
  }
  .mbb-coll__description > :first-child {
    margin-block-start: 0;
  }
  .mbb-coll__description > :last-child {
    margin-block-end: 0;
  }

  /* Frame 44 — pill row (also used for the quick collection links) */
  .mbb-coll__quick {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: calc(8px * var(--mbb-scale, 1));
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mbb-coll__quick::-webkit-scrollbar {
    display: none;
  }

  /* The pill, verbatim from the homepage spec */
  .mbb-coll__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--mbb-scale, 1));
    min-width: 0;
    /*
      A FLOOR, NOT A CAP. This was `height`, and the box and the text are sized by two tokens
      that move in opposite directions: the height rides --mbb-scale (38 -> 35.3 at a 390
      viewport) while the font-size clamp floors at 14px on mobile, because --mbb-fl makes the
      clamp's minimum 11.2 + 2.8 and a clamp whose min exceeds its max returns the min. So the
      box shrank and the text would not: 14 * 1.571 line box + 8 + 8 padding needs 40px inside
      a 35.3px control, and every pill and the sort select had their descenders sliced off.
      With min-height the control still sits on the rail at its design height and simply grows
      the 4.7px it needs, so no combination of the two tokens can clip it again.
    */
    min-height: calc(38px * var(--mbb-scale, 1));
    padding: 8px clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    border: 0.5px solid #44362b;
    border-radius: 6px;
    background: transparent;
    color: #44362b;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    flex: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .mbb-coll__pill:hover {
    background: rgb(68 54 43 / 8%);
  }
  .mbb-coll__pill.is-active,
  .mbb-coll__pill:has(.mbb-coll__checkbox:checked) {
    background: #44362b;
    color: #ffffff;
  }
  .mbb-coll__pill.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .mbb-coll__pill:has(.mbb-coll__checkbox:focus-visible) {
    outline: 2px solid #44362b;
    outline-offset: 2px;
  }
  .mbb-coll__checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
  }
  .mbb-coll__pill-count {
    font-weight: 400;
    opacity: 0.7;
  }

  /* Body — sidebar or stacked pills */
  .mbb-coll__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
  }
  .mbb-coll__main {
    display: flex;
    flex-direction: column;
    gap: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    min-width: 0;
  }

  .mbb-coll__form--bare {
    display: none;
  }

  .mbb-coll__panel {
    border-block-end: 0.5px solid rgb(68 54 43 / 30%);
    padding-block-end: calc(16px * var(--mbb-scale, 1));
  }
  .mbb-coll__panel-summary {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--mbb-scale, 1));
    list-style: none;
    cursor: pointer;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    color: #44362b;
  }
  .mbb-coll__panel-summary::-webkit-details-marker {
    display: none;
  }
  .mbb-coll__panel-summary::after {
    content: '';
    width: calc(8px * var(--mbb-scale, 1));
    height: calc(8px * var(--mbb-scale, 1));
    border-inline-end: 1.5px solid currentcolor;
    border-block-end: 1.5px solid currentcolor;
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate 0.2s ease;
  }
  .mbb-coll__panel[open] > .mbb-coll__panel-summary::after {
    rotate: -135deg;
    translate: 0 2px;
  }
  .mbb-coll__panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(22px * var(--mbb-scale, 1));
    height: calc(22px * var(--mbb-scale, 1));
    padding: 0 6px;
    border-radius: 11px;
    background: #44362b;
    color: #ffffff;
    font-size: clamp(12px, 0.625vw, 10.56px);
  }
  .mbb-coll__panel-body {
    display: flex;
    flex-direction: column;
    gap: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    padding-block-start: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
  }
  .mbb-coll__group {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--mbb-scale, 1));
  }
  /*
    The legend was 400 weight at #909090 — lighter than the pill labels it introduces, so the
    groups read as one undifferentiated wall of chips rather than Flavour / Price / stock.
    Uppercase, heavier and darker gives the rail a hierarchy at a glance.
  */
  .mbb-coll__legend {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(11px, 0.625vw, 12px);
    line-height: 1.667;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(68 54 43 / 70%);
  }

  /* Desktop rail header — the mobile <summary> is hidden up there, see the note in markup. */
  /*
    Metrics deliberately match .mbb-coll__bar: same 42px content row, same 14px padding, same
    1px rule. The rail and the grid sit in adjacent columns, so if the two rules land at
    different heights the eye reads the whole listing as misaligned — which it did, the rail's
    rule sitting ~30px above the bar's.
  */
  /*
    --mbb-coll-barh is the sort control's height, and the bar is that plus its padding. The
    rail head reuses BOTH so the two rules land on the same line; hardcoding 42 here put them
    19px apart, because min-block-size is a border-box measure and swallowed the padding I
    thought I was adding on top of it.
  */
  .mbb-coll__rail-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    gap: 12px;
    min-block-size: calc(
      var(--mbb-coll-barh, 38px) + var(--mbb-coll-barpad, 14px) * var(--mbb-scale, 1)
    );
    margin-block-end: calc(14px * var(--mbb-scale, 1));
    padding-block-end: calc(var(--mbb-coll-barpad, 14px) * var(--mbb-scale, 1));
    border-block-end: 1px solid rgb(68 54 43 / 12%);
  }
  .mbb-coll__rail-title {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-size: clamp(17px, 1.146vw, 22px);
    line-height: 1.2;
    color: #44362b;
  }
  .mbb-coll__rail-clear {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(11px, 0.729vw, 13px);
    color: #b3345f;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .mbb-coll__rail-clear[hidden] {
    display: none !important;
  }
  .mbb-coll__values {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8px * var(--mbb-scale, 1));
  }

  .mbb-coll__price {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--mbb-scale, 1));
  }
  .mbb-coll__price-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: calc(38px * var(--mbb-scale, 1));
    padding: calc(8px * var(--mbb-scale, 1)) calc(14px * var(--mbb-scale, 1));
    border: 0.5px solid #44362b;
    border-radius: 6px;
  }
  .mbb-coll__price-symbol,
  .mbb-coll__price-dash {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    color: #44362b;
  }
  .mbb-coll__price-input {
    width: calc(72px * var(--mbb-scale, 1));
    border: 0;
    background: transparent;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    color: #44362b;
  }
  .mbb-coll__price-input:focus {
    outline: none;
  }
  .mbb-coll__price-note {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    color: #909090;
  }

  .mbb-coll__form-actions {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--mbb-scale, 1));
  }
  .mbb-coll__apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(38px * var(--mbb-scale, 1));
    padding: 8px clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
    border: 0;
    border-radius: 100px;
    background: #44362b;
    color: #ffffff;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    text-decoration: none;
    cursor: pointer;
  }
  .mbb-coll__clear {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    color: #44362b;
    text-decoration-line: underline;
  }
  /* Enhanced: the form submits itself, so the manual apply buttons are redundant */
  .mbb-coll.is-enhanced .mbb-coll__apply {
    display: none;
  }

  .mbb-coll__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(16px * var(--mbb-scale, 1));
    flex-wrap: wrap;
  }
  .mbb-coll__count {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    color: #909090;
  }
  .mbb-coll__sort {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(10px * var(--mbb-scale, 1));
  }
  .mbb-coll__sort-label {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    color: #909090;
  }
  .mbb-coll__sort-select {
    /* same floor-not-cap reasoning as .mbb-coll__pill above — it shares this rail's height */
    min-height: var(--mbb-coll-barh, 38px);
    height: auto;
    padding: 8px clamp(calc(27.2px + 6.8px * var(--mbb-fl, 0)), 1.771vw, 29.92px) 8px 16px;
    border: 0.5px solid #44362b;
    border-radius: 6px;
    background: transparent;
    color: #44362b;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    appearance: none;
    cursor: pointer;
  }
  .mbb-coll__sort-caret {
    position: absolute;
    inset-inline-end: calc(14px * var(--mbb-scale, 1));
    width: calc(10px * var(--mbb-scale, 1));
    height: 7px;
    color: #44362b;
    pointer-events: none;
  }
  .mbb-coll.is-enhanced .mbb-coll__sort-caret {
    inset-inline-end: calc(14px * var(--mbb-scale, 1));
  }
  .mbb-coll__apply--sort {
    margin-inline-start: 8px;
  }

  .mbb-coll__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(8px * var(--mbb-scale, 1));
  }
  .mbb-coll__chip {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--mbb-scale, 1));
    height: calc(32px * var(--mbb-scale, 1));
    padding: calc(6px * var(--mbb-scale, 1)) calc(14px * var(--mbb-scale, 1));
    border: 0.5px solid #44362b;
    border-radius: 6px;
    background: #fff1f1;
    color: #44362b;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.538;
    text-decoration: none;
    white-space: nowrap;
  }
  .mbb-coll__chip--clear {
    background: transparent;
    text-decoration-line: underline;
  }
  .mbb-coll__chip-x {
    width: calc(10px * var(--mbb-scale, 1));
    height: calc(10px * var(--mbb-scale, 1));
    flex: none;
  }

  /* Frame 44 — the card row */
  /*
    COLUMN COUNT REFLOWS. It is not a scaled constant.

    The grid used to have exactly two states — 2 columns below 750 and 4 above — so a 768px
    tablet and a 2560px monitor both rendered 4 columns, at 160px and 347px respectively.
    Scaling the cards is not a substitute for changing how many fit.

    The progression is chosen so the card stays near its 412 design width for as long as
    possible rather than so the breakpoints look tidy:

      < 750    2 up   phones, as drawn in the mobile frame
      >= 750   3 up   tablet — 244px at 834, 302px at 1024, 417px at 1399
      >= 1400  4 up   laptop and up — 300px at 1400, 417px at 1920 (the design)
  */
  /*
    Spec invariant 7.6: the `hidden` attribute loses to any author `display`. .mbb-card sets
    its own display, so the filter's `item.hidden = true` changed nothing — the result count
    dropped to "5 of 24" while all 24 cards stayed on screen. Needs !important because the
    card's own rule is a class and wins on specificity.
  */
  .mbb-coll__grid > [hidden],
  .mbb-coll__grid [data-mbb-facet][hidden],
  .mbb-coll__empty[hidden],
  .mbb-coll__active[hidden] {
    display: none !important;
  }

  .mbb-coll__grid {
    display: grid;
    grid-template-columns: repeat(var(--mbb-coll-cols-m, 2), minmax(0, 1fr));
    gap: calc(12px * var(--mbb-scale, 1));
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .mbb-coll__grid {
      grid-template-columns: repeat(var(--mbb-coll-cols-t, 3), minmax(0, 1fr));
    }
  }

  .mbb-coll__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(12px * var(--mbb-scale, 1));
    padding: clamp(calc(48px + 12px * var(--mbb-fl, 0)), 3.125vw, 52.8px) clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    border: 1px solid #cccccc;
    border-radius: 10px;
    text-align: center;
  }
  .mbb-coll__empty-title {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    line-height: 1.3125;
    color: #44362b;
  }
  .mbb-coll__empty-body {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.714;
    color: #909090;
  }
  .mbb-coll__empty-link {
    color: #44362b;
  }
  .mbb-coll__empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(44px * var(--mbb-scale, 1));
    padding: 10px clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    border-radius: 100px;
    background: #44362b;
    color: #ffffff;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    text-decoration: none;
  }

  /* Pager — the filter pill squared off */
  .mbb-coll__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--mbb-scale, 1));
    margin-block-start: calc(12px * var(--mbb-scale, 1));
  }
  .mbb-coll__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(38px * var(--mbb-scale, 1));
    height: calc(38px * var(--mbb-scale, 1));
    padding: 0 calc(12px * var(--mbb-scale, 1));
    border: 0.5px solid #44362b;
    border-radius: 6px;
    color: #44362b;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    text-decoration: none;
  }
  .mbb-coll__page.is-active {
    background: #44362b;
    color: #ffffff;
  }
  .mbb-coll__page.is-gap,
  .mbb-coll__page.is-disabled {
    border-color: rgb(68 54 43 / 25%);
    color: rgb(68 54 43 / 40%);
  }
  .mbb-coll__page--edge {
  }

  .mbb-coll__more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(12px * var(--mbb-scale, 1));
    margin-block-start: calc(12px * var(--mbb-scale, 1));
  }
  .mbb-coll__more-count {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.538;
    color: #909090;
  }
  .mbb-coll__more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(44px * var(--mbb-scale, 1));
    padding: 10px clamp(calc(27.2px + 6.8px * var(--mbb-fl, 0)), 1.771vw, 29.92px);
    border: 0.5px solid #44362b;
    border-radius: 100px;
    color: #44362b;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    text-decoration: none;
    cursor: pointer;
  }
  .mbb-coll__more-button[aria-busy='true'] {
    opacity: 0.5;
    pointer-events: none;
  }

  .mbb-coll__cta {
    display: flex;
    justify-content: center;
  }
  .mbb-coll__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(50px * var(--mbb-scale, 1));
    padding: 10px clamp(calc(28.8px + 7.2px * var(--mbb-fl, 0)), 1.875vw, 31.68px);
    border: 0.5px solid #44362b;
    border-radius: 6px;
    color: #44362b;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    text-decoration: none;
  }

  @media screen and (min-width: 750px) {
    .mbb-coll__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-coll__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }
    .mbb-coll__description {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-coll__quick {
      flex-wrap: wrap;
      justify-content: center;
      gap: calc(14px * var(--mbb-scale, 1));
      overflow: visible;
    }
    .mbb-coll__pill {
      min-width: calc(150px * var(--mbb-scale, 1));
      /* floor, not cap — see the note on the base rule. At 1440 this box was 40 while
         14.41 * 1.222 + 10 + 10 + borders needs 36.7, and the wider desktop padding put it
         over: the pills clipped here too, just less obviously than on a phone. */
      min-height: calc(50px * var(--mbb-scale, 1));
      height: auto;
      padding: 10px clamp(calc(28.8px + 7.2px * var(--mbb-fl, 0)), 1.875vw, 31.68px);
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.222;
    }
    .mbb-coll__panel-summary {
      display: none;
    }
    .mbb-coll__rail-head {
      display: flex;
    }
    /* separate the groups, so Flavour and Price do not run together as one chip field */
    .mbb-coll__group + .mbb-coll__group {
      padding-block-start: calc(16px * var(--mbb-scale, 1));
      border-block-start: 1px solid rgb(68 54 43 / 10%);
    }
    /*
      The bar carries the count and the sort; a rule under it ties them to the grid they
      describe instead of leaving them floating above it.
    */
    .mbb-coll__bar {
      padding-block-end: calc(var(--mbb-coll-barpad, 14px) * var(--mbb-scale, 1));
      border-block-end: 1px solid rgb(68 54 43 / 12%);
    }
    .mbb-coll__panel {
      border-block-end: 0;
      padding-block-end: 0;
    }
    .mbb-coll__panel-body {
      padding-block-start: 0;
      gap: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    }
    .mbb-coll__values {
      gap: calc(14px * var(--mbb-scale, 1));
    }
    .mbb-coll__price-field {
      height: calc(50px * var(--mbb-scale, 1));
      padding: 10px clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
    .mbb-coll__price-input,
    .mbb-coll__price-symbol,
    .mbb-coll__price-dash {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
    .mbb-coll__apply {
      height: calc(50px * var(--mbb-scale, 1));
      padding: 10px clamp(calc(28.8px + 7.2px * var(--mbb-fl, 0)), 1.875vw, 31.68px);
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
    .mbb-coll {
      --mbb-coll-barh: calc(50px * var(--mbb-scale, 1));
    }
    .mbb-coll__sort-select {
      /* desktop clipped too, just less visibly: at 1440 the box is 50 * 0.8 = 40 while
         14.41 * 1.571 + 10 + 10 needs 42.6 */
      min-height: var(--mbb-coll-barh, 50px);
      height: auto;
      padding: 10px clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px) 10px clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
    .mbb-coll__sort-caret {
      inset-inline-end: calc(16px * var(--mbb-scale, 1));
    }
    .mbb-coll__count,
    .mbb-coll__sort-label {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-coll__body {
      gap: clamp(calc(24.01px + 5.99px * var(--mbb-fl, 0)), 1.563vw, 26.41px);
    }
    .mbb-coll__main {
      gap: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    }
    .mbb-coll__grid {
      /* tablet keeps 3 up; the design's 4 up starts at 1400 (see the note above) */
      grid-template-columns: repeat(var(--mbb-coll-cols-t, 3), minmax(0, 1fr));
      gap: calc(var(--mbb-coll-card-gap, 20px) * var(--mbb-scale, 1));
    }
    .mbb-coll__page {
      min-width: calc(50px * var(--mbb-scale, 1));
      height: calc(50px * var(--mbb-scale, 1));
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
    .mbb-coll__more-button,
    .mbb-coll__empty-cta {
      height: calc(50px * var(--mbb-scale, 1));
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
    .mbb-coll__empty-title {
      font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    }
    .mbb-coll__cta-button {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
  }

  @media screen and (min-width: 990px) {
    /*
      Grid first, rail second — the rail sits on the RIGHT. The form still comes first in the
      DOM so it keeps its reading and tab order next to the filters heading; only the painted
      columns swap, via explicit column placement rather than `order`.
    */
    .mbb-coll--sidebar .mbb-coll__body {
      grid-template-columns: minmax(0, 1fr) var(--mbb-coll-sidebar, 320px);
      align-items: start;
      column-gap: clamp(calc(40px + 10px * var(--mbb-fl, 0)), 2.604vw, 44px);
    }
    .mbb-coll--sidebar .mbb-coll__form {
      grid-column: 2;
      grid-row: 1;
      /* the rail follows a long grid; sticking it keeps the filters reachable while scrolling */
      position: sticky;
      inset-block-start: clamp(calc(88px + 22px * var(--mbb-fl, 0)), 5.73vw, 96.8px);
      max-height: calc(100vh - 120px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .mbb-coll--sidebar .mbb-coll__main {
      grid-column: 1;
      grid-row: 1;
    }
    .mbb-coll--sidebar .mbb-coll__panel-body {
      gap: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    }
    .mbb-coll--sidebar .mbb-coll__pill {
      min-width: 0;
      min-height: calc(42px * var(--mbb-scale, 1));
      height: auto;
      padding: 10px clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    }
    .mbb-coll--sidebar .mbb-coll__form {
      position: sticky;
      inset-block-start: calc(24px * var(--mbb-scale, 1));
    }
  }

  /* the design's 4-up, from laptop widths on */
  @media screen and (min-width: 1400px) {
    .mbb-coll__grid {
      grid-template-columns: repeat(var(--mbb-coll-cols, 4), minmax(0, 1fr));
    }
  }
/* END_SECTION:mbb-collection-grid */

/* START_SECTION:mbb-collection-list (INDEX:33) */
.mbb-clist {
    display: grid;
    row-gap: calc(var(--mbb-clist-gap, 50px) * var(--mbb-scale, 1));
    justify-items: center;
  }
  .mbb-clist > * {
    width: 100%;
    max-width: min(calc(var(--mbb-clist-max, 1760px) * var(--mbb-scale, 1)), 92vw);
  }

  .mbb-clist__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }
  .mbb-clist__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    letter-spacing: 0.02em;
    color: var(--mbb-clist-heading, #44362b);
  }
  .mbb-clist__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    line-height: 1.3125;
    color: var(--mbb-clist-heading, #44362b);
  }
  .mbb-clist__subheading {
    max-width: 70ch;
    margin-block-start: calc(8px * var(--mbb-scale, 1));
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.714;
    color: #6b5c50;
  }

  .mbb-clist__grid {
    display: grid;
    grid-template-columns: repeat(var(--mbb-clist-cols-m, 2), minmax(0, 1fr));
    gap: calc(12px * var(--mbb-scale, 1));
  }
  .mbb-clist__cell {
    display: flex;
    min-width: 0;
  }
  .mbb-clist__cell > * {
    width: 100%;
  }

  /* Card style — the 412x572 product card, with a collection in it */
  .mbb-ctile {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--mbb-clist-radius, 10px);
    text-decoration: none;
    overflow: hidden;
  }
  .mbb-clist--card .mbb-ctile {
    background: #ffffff;
    border: 1px solid #cccccc;
  }
  .mbb-ctile__media {
    position: relative;
    display: block;
    aspect-ratio: 412 / 413;
    background: var(--mbb-ctile-tint, #e4ffc4);
    overflow: hidden;
  }
  .mbb-ctile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.4s ease;
  }
  .mbb-ctile:hover .mbb-ctile__img {
    scale: 1.04;
  }
  .mbb-ctile__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: calc(14px * var(--mbb-scale, 1));
    flex: 1;
  }
  .mbb-ctile__title {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.333;
    color: #44362b;
  }
  .mbb-ctile__count {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    color: #909090;
  }

  /* Tile style — flat tint panel, label inside, from Explore Fragrances */
  .mbb-clist--tile .mbb-ctile__media {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    aspect-ratio: 193 / 111;
    border-radius: var(--mbb-clist-radius, 10px);
  }
  .mbb-clist--tile .mbb-ctile__img {
    position: absolute;
    inset: 0;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply;
  }
  .mbb-clist--tile .mbb-ctile__info {
    align-items: center;
    padding: calc(12px * var(--mbb-scale, 1)) calc(8px * var(--mbb-scale, 1)) 0;
    text-align: center;
  }
  .mbb-clist--tile .mbb-ctile__title {
    font-size: clamp(calc(17.6px + 4.4px * var(--mbb-fl, 0)), 1.146vw, 19.36px);
    line-height: 1.273;
  }

  .mbb-clist__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--mbb-scale, 1));
  }
  .mbb-clist__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(38px * var(--mbb-scale, 1));
    height: calc(38px * var(--mbb-scale, 1));
    padding: 0 calc(12px * var(--mbb-scale, 1));
    border: 0.5px solid #44362b;
    border-radius: 6px;
    color: #44362b;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    text-decoration: none;
  }
  .mbb-clist__page.is-active {
    background: #44362b;
    color: #ffffff;
  }
  .mbb-clist__page.is-gap {
    border-color: rgb(68 54 43 / 25%);
    color: rgb(68 54 43 / 40%);
  }

  .mbb-clist__cta {
    display: flex;
    justify-content: center;
  }
  .mbb-clist__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(44px * var(--mbb-scale, 1));
    padding: 10px clamp(calc(24.01px + 5.99px * var(--mbb-fl, 0)), 1.563vw, 26.41px);
    border-radius: 100px;
    background: #44362b;
    color: #ffffff;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    text-decoration: none;
  }

  @media screen and (min-width: 750px) {
    .mbb-clist__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-clist__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }
    .mbb-clist__subheading {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-clist__grid {
      grid-template-columns: repeat(var(--mbb-clist-cols, 4), minmax(0, 1fr));
      gap: calc(var(--mbb-clist-tile-gap, 20px) * var(--mbb-scale, 1));
    }
    .mbb-ctile__info {
      padding: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
      gap: calc(8px * var(--mbb-scale, 1));
    }
    .mbb-ctile__title {
      font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
      line-height: 1.292;
    }
    .mbb-ctile__count {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-clist--tile .mbb-ctile__title {
      font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
      line-height: 1.313;
    }
    .mbb-clist__page {
      min-width: calc(50px * var(--mbb-scale, 1));
      height: calc(50px * var(--mbb-scale, 1));
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
    .mbb-clist__cta-button {
      height: calc(50px * var(--mbb-scale, 1));
      padding: 10px clamp(calc(28.8px + 7.2px * var(--mbb-fl, 0)), 1.875vw, 31.68px);
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
  }
/* END_SECTION:mbb-collection-list */

/* START_SECTION:mbb-contact (INDEX:34) */
.mbb-contact {
    row-gap: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    justify-items: center;
    width: 100%;
    max-width: min(calc(var(--mbb-contact-max, 1440px) * var(--mbb-scale, 1)), 92vw);
    margin-inline: auto;
  }

  /* Frame 48 — eyebrow + heading, gap 4 */
  .mbb-contact__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: min(calc(852px * var(--mbb-scale, 1)), 92vw);
  }

  .mbb-contact--center .mbb-contact__head {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .mbb-contact__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    letter-spacing: 0.08em;
    color: var(--mbb-contact-heading, #44362b);
  }

  .mbb-contact__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    line-height: 1.286;
    color: var(--mbb-contact-heading, #44362b);
    text-wrap: balance;
  }

  .mbb-contact__subheading {
    margin-block-start: calc(10px * var(--mbb-scale, 1));
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.733;
    color: var(--mbb-contact-body, #909090);
  }

  .mbb-contact__subheading > :first-child {
    margin-block-start: 0;
  }

  .mbb-contact__subheading > :last-child {
    margin-block-end: 0;
  }

  /* Layout */
  .mbb-contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--mbb-contact-gap, 40px) * var(--mbb-scale, 1));
    width: 100%;
  }

  .mbb-contact__aside {
    display: flex;
    flex-direction: column;
    gap: calc(var(--mbb-contact-gap, 40px) * var(--mbb-scale, 1));
  }

  /* Panels reuse the product-card shell */
  .mbb-contact__panel {
    background: var(--mbb-contact-panel, #ffffff);
    border: 1px solid var(--mbb-contact-border, #cccccc);
    border-radius: var(--mbb-contact-radius, 10px);
    padding: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
  }

  .mbb-contact__panel--faq {
    background: var(--mbb-contact-tint, #fff1fa);
    border-color: transparent;
  }

  .mbb-contact__panel--map {
    padding: 0;
    overflow: hidden;
    line-height: 0;
  }

  .mbb-contact__panel-title {
    margin: 0 0 18px;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    line-height: 1.292;
    color: var(--mbb-contact-heading, #44362b);
  }

  .mbb-contact__panel-note {
    margin-block: -8px clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.733;
    color: var(--mbb-contact-body, #909090);
  }

  .mbb-contact__panel-note > :first-child {
    margin-block-start: 0;
  }

  .mbb-contact__panel-note > :last-child {
    margin-block-end: 0;
  }

  /* Form */
  .mbb-contact__form {
    margin: 0;
  }

  .mbb-contact__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
  }

  .mbb-contact__field {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--mbb-scale, 1));
    min-width: 0;
  }

  .mbb-contact__label {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.429;
    letter-spacing: 0.04em;
    color: var(--mbb-contact-heading, #44362b);
  }

  .mbb-contact__req {
    color: var(--mbb-contact-accent, #d13e6a);
    margin-inline-start: 2px;
  }

  .mbb-contact__input {
    width: 100%;
    min-height: calc(54px * var(--mbb-scale, 1));
    padding: 14px clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    border: 1px solid var(--mbb-contact-border, #cccccc);
    border-radius: var(--mbb-contact-radius, 10px);
    background: #ffffff;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    line-height: 1.625;
    color: var(--mbb-contact-heading, #44362b);
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .mbb-contact__input::placeholder {
    color: var(--mbb-contact-body, #909090);
    opacity: 1;
  }

  .mbb-contact__input:focus-visible {
    outline: none;
    border-color: var(--mbb-contact-accent, #d13e6a);
    box-shadow: 0 0 0 3px rgb(209 62 106 / 14%);
  }

  .mbb-contact__input.is-error {
    border-color: #c3116a;
  }

  .mbb-contact__select {
    background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
      linear-gradient(135deg, currentcolor 50%, transparent 50%);
    background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-inline-end: clamp(calc(35.21px + 8.79px * var(--mbb-fl, 0)), 2.292vw, 38.73px);
  }

  .mbb-contact__textarea {
    min-height: calc(150px * var(--mbb-scale, 1));
    resize: vertical;
    line-height: 28px;
  }

  .mbb-contact__consent {
    margin-block-start: calc(16px * var(--mbb-scale, 1));
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.692;
    color: var(--mbb-contact-body, #909090);
  }

  .mbb-contact__consent > :first-child {
    margin-block-start: 0;
  }

  .mbb-contact__consent > :last-child {
    margin-block-end: 0;
  }

  /* Pill button — radius 100, padding 18/26, Montserrat 500 18/22 uppercase */
  .mbb-contact__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(12px * var(--mbb-scale, 1));
    margin-block-start: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    padding: 16px clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
    border: 1px solid transparent;
    border-radius: 100px;
    background: var(--mbb-contact-button-bg, #44362b);
    color: var(--mbb-contact-button-fg, #ffffff);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    line-height: 1.375;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .mbb-contact__submit:hover {
    opacity: 0.88;
  }

  .mbb-contact__submit-arrow {
    display: block;
    position: relative;
    width: calc(21px * var(--mbb-scale, 1));
    height: 0;
    border-block-start: 2px solid currentcolor;
    flex: none;
  }

  .mbb-contact__submit-arrow::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: -4px;
    width: calc(8px * var(--mbb-scale, 1));
    height: calc(8px * var(--mbb-scale, 1));
    border-block-start: 2px solid currentcolor;
    border-inline-end: 2px solid currentcolor;
    transform: rotate(45deg);
  }

  .mbb-contact__cta {
    margin-block-start: calc(8px * var(--mbb-scale, 1));
  }

  /* Success + errors */
  .mbb-contact__success {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(8px * var(--mbb-scale, 1));
    margin-block-end: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    padding: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px) clamp(calc(17.6px + 4.4px * var(--mbb-fl, 0)), 1.146vw, 19.36px);
    border-radius: var(--mbb-contact-radius, 10px);
    background: var(--mbb-contact-tint, #fff1fa);
  }

  .mbb-contact__success-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(38px * var(--mbb-scale, 1));
    height: calc(38px * var(--mbb-scale, 1));
    border-radius: 50%;
    background: var(--mbb-contact-accent, #d13e6a);
    color: #ffffff;
  }

  .mbb-contact__success-mark svg {
    width: calc(20px * var(--mbb-scale, 1));
    height: calc(20px * var(--mbb-scale, 1));
  }

  .mbb-contact__success-title {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    line-height: 1.292;
    color: var(--mbb-contact-heading, #44362b);
  }

  .mbb-contact__success-text {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.733;
    color: var(--mbb-contact-body, #909090);
  }

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

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

  .mbb-contact__errors {
    margin-block-end: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    padding: 16px clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    border: 1px solid #c3116a;
    border-radius: var(--mbb-contact-radius, 10px);
    background: #fff5f5;
  }

  .mbb-contact__errors-title {
    margin: 0 0 6px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.6;
    color: #c3116a;
  }

  .mbb-contact__errors-list {
    margin: 0;
    padding-inline-start: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.714;
    color: #c3116a;
  }

  .mbb-contact__error {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.538;
    color: #c3116a;
  }

  /* Contact details */
  .mbb-contact__details {
    display: flex;
    flex-direction: column;
    gap: clamp(calc(17.6px + 4.4px * var(--mbb-fl, 0)), 1.146vw, 19.36px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mbb-contact__detail {
    display: flex;
    align-items: flex-start;
    gap: calc(16px * var(--mbb-scale, 1));
  }

  .mbb-contact__detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: calc(46px * var(--mbb-scale, 1));
    height: calc(46px * var(--mbb-scale, 1));
    border-radius: 50%;
    background: var(--mbb-contact-tint, #fff1fa);
    color: var(--mbb-contact-accent, #d13e6a);
  }

  .mbb-contact__detail-icon svg {
    display: block;
    width: calc(22px * var(--mbb-scale, 1));
    height: calc(22px * var(--mbb-scale, 1));
  }

  .mbb-contact__detail-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .mbb-contact__detail-label {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.429;
    letter-spacing: 0.04em;
    color: var(--mbb-contact-heading, #44362b);
  }

  .mbb-contact__detail-value {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    line-height: 1.625;
    color: #3d3d3d;
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  a.mbb-contact__detail-value:hover {
    color: var(--mbb-contact-accent, #d13e6a);
    text-decoration: underline;
  }

  /* Map */
  .mbb-contact__map {
    display: block;
    width: 100%;
    height: calc(var(--mbb-contact-map-height, 300px) * var(--mbb-scale, 1));
    border: 0;
  }

  /* FAQ teaser */
  .mbb-contact__faq-text {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.733;
    color: var(--mbb-contact-heading, #44362b);
  }

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

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

  .mbb-contact__faq-link {
    display: inline-flex;
    align-items: center;
    gap: calc(10px * var(--mbb-scale, 1));
    margin-block-start: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.467;
    text-decoration: none;
    color: var(--mbb-contact-accent, #d13e6a);
  }

  .mbb-contact__faq-link:hover {
    text-decoration: underline;
  }

  @media screen and (min-width: 750px) {
    .mbb-contact {
      row-gap: clamp(calc(40px + 10px * var(--mbb-fl, 0)), 2.604vw, 44px);
    }

    .mbb-contact__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
      letter-spacing: 0.06em;
    }

    .mbb-contact__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }

    .mbb-contact__subheading {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }

    .mbb-contact__layout {
      grid-template-columns: minmax(0, var(--mbb-contact-form-width, 135fr)) minmax(0, var(--mbb-contact-aside-width, 100fr));
      align-items: start;
    }

    .mbb-contact__panel {
      padding: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    }

    .mbb-contact__panel--map {
      padding: 0;
    }

    .mbb-contact__fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px) clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    }

    .mbb-contact__field--full {
      grid-column: 1 / -1;
    }

    .mbb-contact__submit {
      padding: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px) clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
  }
/* END_SECTION:mbb-contact */

/* START_SECTION:mbb-explore-fragrances (INDEX:35) */
/* Keeps the theme's .section grid (and therefore its page margins) intact —
     children stay in the centre column and simply stack in rows. */
  .mbb-frag {
    row-gap: calc(var(--mbb-frag-head-gap, 50px) * var(--mbb-scale, 1));
    justify-items: center;
    /*
      The track scrolls internally, but its grid column was still sizing to the
      full card row (~2120px), so the SECTION grew and took the document with it —
      1165px of layout on a 390px phone, which renders the whole site zoomed out.
      Clip here and let the track own the scrolling. `clip`, not `hidden`, so no
      extra scroll container is created.
    */
    overflow-x: clip;
    max-width: 100%;
  }

  /* Frame 204 / Frame 48 */
  .mbb-frag__head {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--mbb-scale, 1));
    max-width: min(calc(769px * var(--mbb-scale, 1)), 100%);
    text-align: center;
  }
  .mbb-frag--left .mbb-frag__head {
    justify-self: start;
    text-align: left;
  }
  .mbb-frag__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    color: var(--mbb-frag-heading-color, #44362b);
  }
  .mbb-frag__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    line-height: 1.3125;
    color: var(--mbb-frag-heading-color, #44362b);
  }
  .mbb-frag__subheading {
    margin-block-start: calc(8px * var(--mbb-scale, 1));
    max-width: 60ch;
  }

  /* Carousel shell — arrows sit under the track on mobile, either side on desktop */
  .mbb-frag__carousel {
    display: grid;
    /*
      1fr, not auto. The two columns exist to seat the prev/next buttons under the row, but
      `auto` sized them to the buttons — about 101px all in — and the track spans 1/-1, so on
      mobile the whole carousel collapsed to 101px: 29px cards holding 17px chips. Fractional
      columns fill the carousel instead, and the buttons are pulled back to the middle below.
    */
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    column-gap: calc(10px * var(--mbb-scale, 1));
    row-gap: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    width: 100%;
    max-width: min(calc(var(--mbb-frag-max, 1400px) * var(--mbb-scale, 1)), 92vw);
    container-type: inline-size;
  }

  .mbb-frag__track {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    /* min-width:0 alone does not stop a grid column resolving to max-content */
    max-width: 100%;
    /* the row's reserved height is derived from the track's own inline size — the basis
       maths is relative to this box, not to the carousel (which also holds the arrows) */
    container-type: inline-size;
    overflow-x: auto;
    overflow-y: hidden;
    /*
      proximity, not mandatory. Mandatory re-runs the snap after every layout change, and
      marking the active card IS a layout change — so the snap kept re-firing against a row
      that had just moved underneath it. proximity only pulls when the scroll finishes near
      a snap point, which leaves the settle-then-resize sequence free to complete once.
    */
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /*
      The peek is intentional, but a hard edge slices the neighbouring chip's
      label mid-word ("...kie", "Caram...") which reads as a rendering fault.
      Fade the last few percent instead so a partial card looks deliberate.
    */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--mbb-frag-fade, 7%),
      #000 calc(100% - var(--mbb-frag-fade, 7%)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--mbb-frag-fade, 7%),
      #000 calc(100% - var(--mbb-frag-fade, 7%)),
      transparent 100%
    );
  }
  .mbb-frag__track::-webkit-scrollbar {
    display: none;
  }
  .mbb-frag__track:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 4px;
  }

  .mbb-frag__list {
    display: flex;
    /* bottom-aligned, so the active card grows upward into the reserved headroom
       instead of pushing the row taller */
    align-items: flex-end;
    /* the design's gap, kept constant on screen — see --mbb-frag-x on the slide.
       0.7056 is the mobile frame's ratio to the desktop one; the desktop block resets it. */
    column-gap: calc(var(--mbb-frag-gap, 30px) * 0.7056 * var(--mbb-scale, 1));
    margin: 0;
    padding: 0;
    list-style: none;

    /*
      Reserve the height of the LARGEST state so the row never changes size while you
      scroll. The active card widens to basis x scale, and because a card's height comes
      from its own width (30cqw of artwork above a 111/193 tile), a wider card is a taller
      card — so the section grew and shrank as the active card changed.
        card height = width x (30 + 111/193 x 100) / 100 = width x 0.8752

      This MUST be width-relative. Expressing the basis with `100%` resolved to
      `calc(23.4028% - 28.0833px)`, and a percentage in min-height resolves against the
      container's HEIGHT, not its width — so it silently did nothing and the row still
      moved 13-34px depending on viewport. 100cqw is the track's inline size, which is
      exactly what the basis assumes.
    */
    /*
      MOBILE sizes come straight from the mobile frame, not from a cards-per-view division.

      Fitting `cards_mobile` into the track forced the tiles to whatever the viewport divided
      by — 144.9 and 210.9 against the design's 136.18 and 188.64, i.e. 6% and 12% oversized.
      Group 299 states both outright, so use them: the tile is the desktop 193 x 0.7056, and
      the active card is 188.64 / 136.18 = 1.385x its neighbours on mobile (the desktop ratio
      is 1.461 because its outer cards are smaller — the mobile row has three sizes, not two).

      The gap follows the same 0.7056, so all three stay tied to the desktop settings.
    */
    /*
      --mbb-frag-active is the ACTIVE-CARD RATIO in use at this breakpoint. It exists because
      {% stylesheet %} is not Liquid-processed: writing `{{ active_scale }}` in here emitted
      the literal braces, which invalidated the calc, which made min-width fall back to auto
      and collapsed every tile to the width of its own label. The merchant's setting arrives
      as --mbb-frag-scale on the section's inline style; desktop simply reads it back.
    */
    --mbb-frag-active: 1.385;
    --mbb-frag-basis-cq: calc(193px * 0.7056 * var(--mbb-scale, 1));
    /*
      The card UNIT — the design tile width. Everything inside a card (artwork height, tile
      height, label size, padding) is a fraction of this rather than of the slide's own width.

      The slide now stretches to fit its label, so sizing the contents off the slide would
      make a long name grow its icon and type too: "Caramel Coffee" would render in a bigger
      face than "Coconut". The unit keeps every card visually identical and lets only the
      tile's width respond to the name.
    */
    --mbb-frag-unit: var(--mbb-frag-basis-cq);

    /*
      Card height as a fraction of card width. The tile's min-height grew from
      111 to 132 units so long scent names could wrap, which made the card ~11%
      taller — but this reservation still used the old 0.8752, so the enlarged
      card's artwork overshot the track and overflow-y clipped the top of the
      icon. Kept as a variable so the two consumers below cannot drift again.
    */
    --mbb-frag-card-h: 0.984;

    min-height: calc(
      var(--mbb-frag-basis-cq) * var(--mbb-frag-active, 1.46) * var(--mbb-frag-card-h)
    );
    /*
      Room underneath for the part of the enlarged card that now hangs below the row. The
      cards are bottom-aligned, so without this the growth would fall outside the track and
      be cut off by its overflow. 0.4569 is the card's height below the origin as a fraction
      of its width (0.522 x 0.8752); min-height already covers the growth above.
    */
    box-sizing: border-box;
    padding-block-end: calc(
      (var(--mbb-frag-active, 1.46) - 1) * 0.522 * var(--mbb-frag-card-h)
        * var(--mbb-frag-basis-cq)
    );
  }

  /*
    Growth is CONTINUOUS and driven by scroll position, not by a class.

    --mbb-frag-p is set per card by the script on every scroll frame: 1 when the card is dead
    centre, falling linearly to 0 one card-step away. So a card is already growing as it
    travels and reaches full size exactly as it arrives, rather than popping once the scroll
    has settled.

    It scales with `transform`, which does NOT affect layout. That matters for more than
    smoothness: the old version grew flex-basis, which reflowed the whole row, moved every
    card, changed which card was nearest the centre, and re-triggered itself. Transform has no
    such feedback path — the layout box never moves, so there is nothing to oscillate, and the
    row's height is constant by construction.

    Origin is bottom centre: cards are bottom-aligned and grow upward into the headroom the
    list already reserves (min-height below), so nothing is clipped by the track's overflow.
  */
  .mbb-frag__slide {
    /*
      Width follows the name. The design's tiles are all one width because its five flavours
      are short; "Caramel Coffee" and "Birthday Cake" overran theirs by 19px and 4px. The
      slide now takes its content's width with the design width as a floor, so short names
      look exactly as drawn and long ones get the room they need.
    */
    flex: 0 0 auto;
    min-width: var(--mbb-frag-unit);
    width: max-content;
    scroll-snap-align: center;
    /*
      The slide carries NO transform — it is the scroll-snap target.

      Scroll snap measures the snap area as the TRANSFORMED border box, so scaling and
      translating this element moved its own snap point. The browser re-snapped, which moved
      the cards, which moved the snap points again: a feedback loop through the compositor
      that reads as glitching while you scroll. The transform lives on the inner card
      instead, leaving the slide's box — and therefore the snap geometry — perfectly still.
    */
    /* the growing card must pass over its neighbours, never under them */
    z-index: 0;
  }
  /* is-active now only carries state (label emphasis, aria-current) — the SIZE comes from
     --mbb-frag-p, so marking a card can no longer move the layout. */
  .mbb-frag__slide.is-active {
    z-index: 1;
  }

  /* Card = tile + artwork overhanging its top edge (30% of the card width) */
  .mbb-frag__card {
    position: relative;
    display: block;
    padding-block-start: calc(0.3 * var(--mbb-frag-unit));
    color: inherit;
    text-decoration: none;

    /* Growth happens here, one level inside the snap target. --mbb-frag-p and --mbb-frag-x
       are set on the slide by the script and inherit down. */
    transform: translateX(var(--mbb-frag-x, 0px))
      scale(calc(1 + (var(--mbb-frag-active, 1.46) - 1) * var(--mbb-frag-p, 0)));
    /* Promote to its own layer: the scale is recomputed every scroll frame, and
       without this the card is re-rasterised each time, which reads as jitter. */
    will-change: transform;
    backface-visibility: hidden;
    /*
      Not `bottom center`. In the design (294:1016) the enlarged tile is NOT bottom-aligned
      with its neighbours — it spans 4378.43..4540.62 where the others span 4389..4500, so it
      grows 10.57 up and 40.62 down. Solving for the fixed point of a 1.4611 scale that
      produces that split puts the origin at 47.8% of the card's height, and because both
      terms are proportions of the card it holds at every size.
    */
    transform-origin: center 47.8%;
    /* keep it on its own compositor layer: this changes every frame while scrolling */
    will-change: transform;
  }
  .mbb-frag__media {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: calc(0.578 * var(--mbb-frag-unit));
  }
  .mbb-frag__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
  }
  .mbb-frag__img--placeholder {
    opacity: 0.5;
  }

  /* Rectangle 19 — 193x111 r10, label 11 off the bottom.
     min-height rather than a fixed aspect-ratio: the design widens the chip for longer
     names (193 single-word, 231 for "Caramel Coffee" / "Birthday Cake") and a locked
     ratio cannot do that, so a two-word label wrapped and collided with the icon. */
  .mbb-frag__tile {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: calc(132 / 193 * var(--mbb-frag-unit));
    padding-block-end: calc(0.05699 * var(--mbb-frag-unit));
    border-radius: var(--mbb-frag-radius, 10px);
    background-color: var(--mbb-frag-tint, #ffd7e0);
  }
  /*
    No radius bump on the active card. The design's active tile has r14.61 against the normal
    r10 — but that is exactly the 1.46 scale, which the transform already applies to the
    painted radius. Setting it here as well multiplied the two and rounded the corners twice
    as hard, and it animated on a 0.4s transition while the scale tracked the scroll, so the
    two disagreed the whole way.
  */
  .mbb-frag__label {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: calc(0.165803 * var(--mbb-frag-unit));
    line-height: 1.3125;
    text-align: center;
    color: var(--mbb-frag-label-color, #44362b);

    /*
      Two-word flavours must not wrap. The tile is sized from the design's single-word
      chip (193x111), so "Caramel Coffee" broke onto a second line and rode up under the
      icon. Figma solves it by widening those chips — Pistachio 193, but Caramel Coffee
      and Birthday Cake both 231 — so the label stays on one line and the artwork keeps
      its clearance. Holding the line here and letting the tile widen does the same thing
      without hard-coding which flavours are long.
    */
    /*
      The new range's names are far longer than the single-word scents this chip
      was drawn for ("Blueberry Cheesecake" vs "Coconut"), and nowrap cannot
      shrink — the label simply overran the tile. Wrap to a second line instead,
      with the tile reserving room for two so the artwork keeps its clearance.
    */
    white-space: normal;
    text-wrap: balance;
    line-height: 1.15;
    padding-inline: calc(0.06 * var(--mbb-frag-unit));
    max-width: 100%;
    overflow-wrap: break-word;
  }

  /* Frame 223 / Frame 280 — 52.33 circles */
  .mbb-frag__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-row: 2;
    width: calc(45.33px * var(--mbb-scale, 1));
    height: calc(45.33px * var(--mbb-scale, 1));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--mbb-frag-arrow-bg, #ffffff);
    box-shadow: 0 0 24.3667px rgb(0 0 0 / 14%);
    color: var(--mbb-frag-arrow-color, #44362b);
    cursor: pointer;
  }
  /* the columns now span the full carousel, so pull the pair back together in the middle */
  .mbb-frag__arrow--prev {
    grid-column: 1;
    justify-self: end;
  }
  .mbb-frag__arrow--next {
    grid-column: 2;
    justify-self: start;
  }
  .mbb-frag__chevron {
    width: calc(8.2px * var(--mbb-scale, 1));
    height: calc(16.4px * var(--mbb-scale, 1));
  }

  .mbb-frag__cta {
    margin-block-start: calc(8px * var(--mbb-scale, 1));
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    /*
      A short transition on transform only. --mbb-frag-p is recomputed every scroll
      frame, so a long one would lag the finger — but 90ms is under a typical frame
      gap and simply interpolates between the values the script writes, which removes
      the step-to-step judder without any perceptible delay.
    */
    transition: transform 90ms linear;
  }

  @media screen and (min-width: 750px) {
    .mbb-frag__head {
      gap: 4px;
    }
    .mbb-frag__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-frag__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
    }
    .mbb-frag__carousel {
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      column-gap: clamp(calc(48px + 12px * var(--mbb-fl, 0)), 3.125vw, 52.8px);
    }
    .mbb-frag__track {
      grid-column: 2;
      grid-row: 1;
    }

    /* desktop shows --mbb-frag-cards per row, so the reserved height follows suit */
    .mbb-frag__list {
      /* desktop keeps the cards-per-view fit — the 1920 frame's row does fill its track */
      --mbb-frag-active: var(--mbb-frag-scale, 1.46);
      --mbb-frag-unit: var(--mbb-frag-basis-cq);
      column-gap: calc(var(--mbb-frag-gap, 30px) * var(--mbb-scale, 1));
      --mbb-frag-basis-cq: calc(
        (100cqw - (var(--mbb-frag-cards, 5) - 1) * var(--mbb-frag-gap, 30px) * var(--mbb-scale, 1)) /
        (var(--mbb-frag-cards, 5) - 1 + var(--mbb-frag-active, 1.46))
      );
    }
    .mbb-frag__arrow {
      grid-row: 1;
      width: calc(52.33px * var(--mbb-scale, 1));
      height: calc(52.33px * var(--mbb-scale, 1));
      /* line the arrows up with the middle of a normal tile, not the tall active one */
      translate: 0 2.07cqw;
    }
    .mbb-frag__arrow--next {
      grid-column: 3;
    }
  }
/* END_SECTION:mbb-explore-fragrances */

/* START_SECTION:mbb-header (INDEX:37) */
/* Disclosure parent: looks identical to a nav link, behaves as a button. */
  .mbb-header__nav-toggle {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
  }
  /* Keep hover-to-open on pointer devices, and honour the click state everywhere. */
  .mbb-header__nav-item--has-sub.is-open > .mbb-header__nav-sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    translate: 0 0;
  }
  .mbb-header__nav-toggle[aria-expanded='true'] .mbb-header__nav-caret {
    rotate: 180deg;
  }

  .section.mbb-header {
    position: relative;
    z-index: 6;
    display: block;
    padding-inline: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
  }


  /* In flow (every template except the homepage hero): occupy real space. */
  .section.mbb-header--inflow {
    position: relative;
    inset-block-start: auto;
    padding-block-start: calc(var(--mbb-header-top-m, 16px) * var(--mbb-scale, 1));
    padding-block-end: calc(var(--mbb-header-top-m, 16px) * var(--mbb-scale, 1));
  }

  /*
    Floating is the WRAPPER's job — theme.liquid absolutely positions
    `#header-group > .shopify-section:last-child` so the hero runs underneath. Making this
    inner div absolute as well left the wrapper with no in-flow child and collapsed it to
    zero height. Both modes now just reserve the gap below the offer strip as padding; only
    the wrapper decides whether that block sits in flow.
  */
  .section.mbb-header--floating {
    position: relative;
    padding-block-start: calc(var(--mbb-header-top-m, 16px) * var(--mbb-scale, 1));
  }

  /* Mobile is a 3-column grid so the logo stays optically centred between the
     burger and the icon cluster, whatever each of them weighs. */
  .mbb-header__bar {
    /* the desktop nav is pinned to the design's coordinate inside the pill, so the pill
       has to be the containing block — without this it resolved against the section and
       landed ~87px short */
    position: relative;

    display: grid;
    /*
      minmax(0, 1fr), NOT 1fr. A bare 1fr keeps an automatic min-content floor, so the icon
      cluster — the heavier of the two side columns — grew its track past its fr share and
      the burger's track collapsed to fit what was left: measured 45.2px / 88.2px / 154.3px
      at 390, which put the logo 47.6px left of the pill's centre. The design centres it
      (ink centre 209.5 in a 420 frame). Flooring both side tracks at 0 makes them resolve
      equally, which is the only way the middle column is actually centred.
    */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: calc(12px * var(--mbb-scale, 1));
    width: 100%;
    /* vw, not %. A percentage resolves against whatever the ancestors leave after their own
       padding, so the pill kept landing short of the design's 1746 at 1920 depending on who
       padded what above it. 90.94vw is 1746 at 1920 and 382 at 420 — both design widths. */
    max-width: min(calc(var(--mbb-header-max, 1750px) * var(--mbb-scale, 1)), 90.94vw);
    min-height: calc(var(--mbb-header-h-m, 63px) * var(--mbb-scale, 1));
    margin-inline: auto;
    padding-inline: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    border-radius: var(--mbb-header-radius, 94.27646px);
    background: var(--mbb-header-bg, #ffffff);
    box-shadow: 0 0 41.5px rgb(0 0 0 / var(--mbb-header-shadow, 0.05));
  }

  /* Mobile: hamburger · logo · compact CTA */
  .mbb-header__drawer {
    position: relative;
    flex: none;
  }

  /*
    DELIBERATE DEPARTURE FROM FIGMA. The design draws the burger 27 wide against icon glyphs
    of 14-16 — measured off the 202:13687 render — so it reads noticeably heavier than the
    cluster it sits opposite. Matched to the icon box instead, on request. Restore 27px here
    and 27/+-10.8 on .mbb-header__burger to go back to the design.
  */
  .mbb-header__toggle {
    display: grid;
    place-items: center;
    width: calc(var(--mbb-header-icon, 22px) * var(--mbb-scale, 1));
    height: calc(var(--mbb-header-icon, 22px) * var(--mbb-scale, 1));
    cursor: pointer;
    list-style: none;
  }

  .mbb-header__toggle::-webkit-details-marker {
    display: none;
  }

  .mbb-header__burger,
  .mbb-header__burger::before,
  .mbb-header__burger::after {
    display: block;
    /* 18 x 15 of ink — the icon glyphs measure 13-16.5, so this reads as the same weight */
    width: calc(18px * var(--mbb-scale, 1));
    height: 1.5px;
    background: var(--mbb-header-fg, #44362b);
  }

  .mbb-header__burger {
    position: relative;
  }

  .mbb-header__burger::before,
  .mbb-header__burger::after {
    content: '';
    position: absolute;
  }

  /* scaled, unlike the old raw +-10.8px — the bar width scales, so the spacing must too,
     or the burger changes proportion across viewports */
  .mbb-header__burger::before {
    transform: translateY(calc(-6.75px * var(--mbb-scale, 1)));
  }

  .mbb-header__burger::after {
    transform: translateY(calc(6.75px * var(--mbb-scale, 1)));
  }

  .mbb-header__panel {
    position: absolute;
    inset-block-start: calc(100% + 18px);
    inset-inline-start: calc(-12px * var(--mbb-scale, 1));
    z-index: 2;
    min-width: calc(240px * var(--mbb-scale, 1));
    padding: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px) clamp(calc(17.6px + 4.4px * var(--mbb-fl, 0)), 1.146vw, 19.36px);
    border-radius: 18px;
    background: var(--mbb-header-bg, #ffffff);
    box-shadow: 0 8px 41.5px rgb(0 0 0 / 0.12);
  }

  .mbb-header__panel-list,
  .mbb-header__panel-sub {
    display: flex;
    flex-direction: column;
    gap: calc(14px * var(--mbb-scale, 1));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mbb-header__panel-sub {
    gap: calc(10px * var(--mbb-scale, 1));
    margin-block-start: calc(10px * var(--mbb-scale, 1));
    padding-inline-start: calc(14px * var(--mbb-scale, 1));
  }

  .mbb-header__panel-link,
  .mbb-header__nav-link {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: calc(var(--mbb-header-nav-size, 16px) * var(--mbb-scale, 1));
    line-height: 1.25;
    text-decoration: none;
    color: var(--mbb-header-fg, #44362b);
    white-space: nowrap;
  }

  .mbb-header__panel-link--sub {
    text-transform: none;
    opacity: 0.75;
  }

  .mbb-header__panel-utils {
    display: flex;
    flex-direction: column;
    gap: calc(14px * var(--mbb-scale, 1));
    margin: 18px 0 0;
    padding: calc(16px * var(--mbb-scale, 1)) 0 0;
    border-block-start: 1px solid rgb(from var(--mbb-header-fg, #44362b) r g b / 15%);
    list-style: none;
  }

  .mbb-header__panel-util {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
    cursor: pointer;
  }

  .mbb-header__panel-cta {
    display: inline-flex;
    margin-block-start: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    padding: 12px clamp(calc(17.6px + 4.4px * var(--mbb-fl, 0)), 1.146vw, 19.36px);
    border-radius: 100px;
    background: var(--mbb-header-cta-bg, #44362b);
    color: var(--mbb-header-cta-fg, #ffffff);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.2;
    text-decoration: none;
  }

  .mbb-header__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    text-decoration: none;
    color: var(--mbb-header-fg, #44362b);
  }

  /*
    Match the <img> directly as well as by class. The class passed to image_tag was not
    landing on the rendered element, so these rules never applied and the logo simply drew
    at the file's natural size (156x61) — which happened to equal the design value, hiding
    the fact that the width setting did nothing at all.
  */
  .mbb-header__logo-img,
  .mbb-header__logo img {
    display: block;
    width: calc(var(--mbb-header-logo-m, 95px) * var(--mbb-scale, 1));
    height: auto;
  }

  .mbb-header__wordmark {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 600;
    font-size: clamp(calc(17.6px + 4.4px * var(--mbb-fl, 0)), 1.146vw, 19.36px);
    line-height: 1.1;
    white-space: nowrap;
  }

  .mbb-header__nav {
    display: none;
  }

  /* ── Desktop dropdown ─────────────────────────────────────────────────────
     The nav rendered top-level titles only, so a parent link's children were
     dropped silently on desktop — a "Shop" item with collections under it would
     have shown as a flat link with nothing behind it. The drawer already renders
     children, so this brings the two into line.

     Hover AND focus-within, so it opens for the keyboard as well as the mouse.
     The ::before is a hover bridge: without it the gap between the link and the
     panel is dead space and the menu closes as the pointer crosses it. */
  .mbb-header__nav-item--has-sub {
    position: relative;
  }

  .mbb-header__nav-caret {
    width: calc(9px * var(--mbb-scale, 1));
    height: auto;
    margin-inline-start: 6px;
    transition: rotate 0.18s ease;
  }

  .mbb-header__nav-item--has-sub:hover .mbb-header__nav-caret,
  .mbb-header__nav-item--has-sub:focus-within .mbb-header__nav-caret {
    rotate: 180deg;
  }

  .mbb-header__nav-sub {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    z-index: 30;
    min-width: max-content;
    margin: 0;
    padding: calc(10px * var(--mbb-scale, 1)) 0;
    list-style: none;
    background: var(--mbb-header-bg, #ffffff);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgb(68 54 43 / 14%);
    opacity: 0;
    visibility: hidden;
    translate: -50% 6px;
    transition: opacity 0.18s ease, translate 0.18s ease, visibility 0.18s;
  }

  .mbb-header__nav-sub::before {
    content: '';
    position: absolute;
    inset-block-end: 100%;
    inset-inline: 0;
    height: 14px;
  }

  .mbb-header__nav-item--has-sub:hover .mbb-header__nav-sub,
  .mbb-header__nav-item--has-sub:focus-within .mbb-header__nav-sub {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
  }

  .mbb-header__nav-sublink {
    display: block;
    padding: calc(8px * var(--mbb-scale, 1)) calc(20px * var(--mbb-scale, 1));
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: calc(var(--mbb-header-nav-size, 16px) * 0.875 * var(--mbb-scale, 1));
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
    color: var(--mbb-header-fg, #44362b);
    transition: opacity 0.18s ease;
  }

  .mbb-header__nav-sublink:hover,
  .mbb-header__nav-sublink.is-active {
    opacity: 0.65;
  }

  @media (prefers-reduced-motion: reduce) {
    .mbb-header__nav-sub,
    .mbb-header__nav-caret {
      transition: none;
    }
  }

  /* ── Commerce icon cluster ────────────────────────────────────────────────
     Small line icons in the pill's own ink so the cluster reads as part of the
     design rather than a bolted-on toolbar. */
  .mbb-header__actions {
    --icon-stroke-width: 1.4px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--mbb-header-icon-gap, 18px) * var(--mbb-scale, 1));
    color: var(--mbb-header-fg, #44362b);
  }

  .mbb-header__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: calc(var(--mbb-header-icon, 22px) * var(--mbb-scale, 1));
    height: calc(var(--mbb-header-icon, 22px) * var(--mbb-scale, 1));
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  /* Keeps the 44px minimum touch target without inflating the pill's spacing. */
  .mbb-header__icon::after {
    content: '';
    position: absolute;
    inset: -11px;
  }

  .mbb-header__icon:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 6px;
    border-radius: 4px;
  }

  .mbb-header__icon--text {
    width: auto;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .mbb-header__icon:hover,
  .mbb-header__icon:focus-visible {
    opacity: 0.65;
  }

  .mbb-header__icon-svg {
    display: block;
    width: calc(var(--mbb-header-icon, 22px) * var(--mbb-scale, 1));
    height: calc(var(--mbb-header-icon, 22px) * var(--mbb-scale, 1));
  }

  .mbb-header__icon-svg svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Horizon's cart-icon + cart-bubble: the bubble is absolutely placed against
     the icon so the live count from cart-icon.js lands in the right spot. */
  .mbb-header__cart-icon {
    position: relative;
    display: block;
  }

  .mbb-header__cart-icon .cart-bubble {
    --cart-bubble-background: var(--mbb-header-fg, #44362b);
    --cart-bubble-text: var(--mbb-header-bg, #ffffff);

    position: absolute;
    inset-block-start: -5px;
    inset-inline-end: -6px;
    width: calc(16px * var(--mbb-scale, 1));
    min-width: calc(16px * var(--mbb-scale, 1));
  }

  .mbb-header__cart-icon .cart-bubble__text {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: 10px;
    line-height: 1;
  }

  /* Favourites badge — same footprint as the cart bubble so the cluster stays even.
     Starts hidden from Liquid and only appears once the client-side count is above zero,
     which also means a cached page never flashes a stale number. */
  .mbb-header__wish-bubble {
    position: absolute;
    inset-block-start: -5px;
    inset-inline-end: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(16px * var(--mbb-scale, 1));
    min-width: calc(16px * var(--mbb-scale, 1));
    height: calc(16px * var(--mbb-scale, 1));
    padding: 0 3px;
    border-radius: 8px;
    background: var(--mbb-header-wish, #d13e6a);
    color: #ffffff;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
  }

  .mbb-header__wish-bubble[hidden] {
    display: none;
  }

  /* In the mobile drawer the row is text, so the badge rides beside the label. */
  .mbb-header__wish-bubble--inline {
    position: static;
    margin-inline-start: 8px;
    inset: auto;
  }

  .mbb-header__localization {
    position: relative;
    display: flex;
    align-items: center;
  }

  .mbb-header__localization-panel {
    position: absolute;
    inset-block-start: calc(100% + 14px);
    inset-inline-end: 0;
    z-index: 3;
    width: max-content;
    min-width: calc(240px * var(--mbb-scale, 1));
    max-height: 60vh;
    overflow: hidden auto;
    border-radius: 14px;
    background: var(--mbb-header-bg, #ffffff);
    box-shadow: 0 8px 41.5px rgb(0 0 0 / 0.14);
  }

  .mbb-header__localization-panel[hidden] {
    display: none;
  }

  .mbb-header__cta {
    flex: none;
    display: none;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--mbb-scale, 1));
    min-height: calc(40px * var(--mbb-scale, 1));
    padding-inline: calc(14px * var(--mbb-scale, 1));
    border-radius: 100px;
    background: var(--mbb-header-cta-bg, #44362b);
    color: var(--mbb-header-cta-fg, #ffffff);
    text-decoration: none;
  }

  .mbb-header__cta-label {
    display: none;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    /* Cap at the design's 18. The 21px ceiling let the label keep growing until ~2240px
       while --mbb-scale froze at 1920, so the button reached 342px against a 306px comp. */
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.222;

    /* The design sets this in caps ("EXPLORE COLLECTIONS"), same as the nav items. It
       was rendering as typed, which is both the wrong case and 49px narrower than the
       306-wide button in the comp — the missing width was the missing capitals. */
  }

  .mbb-header__cta-arrow {
    flex: none;
    width: calc(21px * var(--mbb-scale, 1));
    height: calc(12px * var(--mbb-scale, 1));
  }

  @media screen and (min-width: 750px) {
    /*
      No inline padding on the wrapper. The design's 87px page inset is what is left over
      when a 1746px pill is centred in 1920 — it is a RESULT of the pill's width, not a
      separate gutter. Padding here shrank the pill's containing block, so its
      `max-width: min(1750px, 90.94%)` resolved against 1840 and produced 1673px. The 73px
      it lost came straight out of the gap the icon cluster needs, which is what pushed the
      icons back under CONTACT.
    */

    .section.mbb-header--floating {
      padding-block-start: calc(var(--mbb-header-top, 50px) * var(--mbb-scale, 1));
    }

    /*
      In-flow needs the same desktop offset as floating. Only --floating was overridden
      here, so every non-homepage template kept the MOBILE token (16px) at desktop widths
      and the capsule sat ~26px higher under the offer strip than it does on the homepage.
      The chrome has to read identically on every page, so both modes use --mbb-header-top.
    */
    .section.mbb-header--inflow {
      padding-block-start: calc(var(--mbb-header-top, 50px) * var(--mbb-scale, 1));
      padding-block-end: calc(var(--mbb-header-top, 50px) * var(--mbb-scale, 1));
    }

    .mbb-header__bar {
      display: flex;
      gap: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
      min-height: calc(var(--mbb-header-h, 105px) * var(--mbb-scale, 1));

      /*
        The design insets the logo 50 from the pill's left edge and ends the CTA 37.5 from
        its right. --mbb-header-pad already carried those values, but the only rule using
        them was .section.mbb-header--inflow — and the homepage header is --floating, so it
        never matched. The pill fell through to the shared mobile clamp instead, which
        resolves to 20px at 1920 and left the logo almost flush against the edge.
      */
      padding-inline:
        calc(var(--mbb-header-pad, 50px) * var(--mbb-scale, 1))
        calc(var(--mbb-header-pad-end, 37.5px) * var(--mbb-scale, 1));
    }

    /*
      NOTE: the duplicate --inflow block that used to sit here also set
      `padding-inline: 50px 37.5px` on the SECTION. Those are the pill's own insets and
      .mbb-header__bar already applies them; on the wrapper they shrank the pill's containing
      block by 88px, so `max-width: min(1750px, 90.94%)` resolved to 1666px instead of the
      design's 1746px. The 80px it stole is exactly what pushed the icon cluster back into
      CONTACT. Harmless while --inflow never matched; live the moment the class started
      applying, which is why it surfaced on the product page and not the homepage.
    */

    .mbb-header__drawer {
      display: none;
    }

    .mbb-header__logo {
      flex: 0 0 auto;
      justify-content: flex-start;
    }

    .mbb-header__actions {
      flex: 0 0 auto;
    }

    .mbb-header__logo-img,
    .mbb-header__logo img {
      width: calc(var(--mbb-header-logo, 156px) * var(--mbb-scale, 1));
    }

    .mbb-header__wordmark {
      font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    }

    /*
      Pinned to the design's own coordinate, not flexed into whatever space is left.

      Figma puts Navigation at x=503.512, y=43.051 inside the 1746x105 pill and has
      nothing else in the bar — no search, account, wishlist or cart. This build carries
      that 142px icon cluster because the store cannot trade without it, and while the nav
      was `flex: 1 1 auto` those icons ate the space the nav should occupy and dragged it
      ~165px left of the comp.

      Taking the nav out of flow puts it exactly where the design has it and leaves the
      icons to sit in the 160px gap between the nav's right edge (1242.5) and the CTA
      (1402.5). Everything stays on the frame scale, so the whole arrangement holds its
      proportions down to the mobile breakpoint.
    */
    /*
      Centred in the pill, not pinned to a coordinate and not flexed into leftover space.

      In the design the nav spans 503.5..1242.5 inside the 1746 pill — its midpoint is 873,
      which is exactly the pill's midpoint. So the rule is "centred", and expressing it that
      way is what makes it hold at every width.

      Two earlier attempts were wrong. `flex: 1 1 auto` centred the nav in the space left
      over after the logo and the icon cluster, and since those sides are unbalanced it sat
      ~165px left of the comp. Pinning `left: 503.512px * scale` fixed 1920 but nothing
      else: the offset scaled while the nav's own text did not, so it drifted further off
      centre as the viewport narrowed (-27px at 1280) and below ~1180 it ran straight
      through the icons.
    */
    .mbb-header__nav {
      display: block;
      position: absolute;
      inset-inline-start: 50%;
      inset-block-start: 50%;
      transform: translate(-50%, -50%);
      min-width: 0;
    }

    /* the nav is out of flow, so this is what now pushes the icons and CTA right */
    .mbb-header__actions {
      margin-inline-start: auto;
    }

    .mbb-header__nav-list {
      display: flex;
      /* must stay on one line — wrapping dropped CONTACT onto a second row below 1920 */
      flex-wrap: nowrap;
      white-space: nowrap;
      align-items: center;
      justify-content: center;
      gap: calc(var(--mbb-header-gap, 46.195465px) * var(--mbb-scale, 1));
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .mbb-header__nav-link {
      transition: opacity 0.2s ease;
    }

    .mbb-header__nav-link:hover,
    .mbb-header__nav-link.is-active {
      opacity: 0.65;
    }

    /* Figma Button 306x58 · padding 18/26 · gap 10 · radius 100 */
    .mbb-header__cta {
      display: inline-flex;
      min-height: calc(58px * var(--mbb-scale, 1));
      /*
        Cap at the design's 26, not 29. Above 1920 --mbb-scale is pinned to 1, so everything
        sized through it stops growing — but a vw-based clamp keeps climbing to its cap. That
        mismatch let the button reach 348px against a design width of 306 at 2560, eating the
        gap reserved for the icons. The cap has to be the design value for the two systems to
        stop growing together.
      */
      padding-inline: clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
    }

    .mbb-header__cta-label {
      display: block;
    }
  }

  @media screen and (min-width: 750px) and (max-width: 1279px) {
    .mbb-header__nav-list {
      gap: calc(22px * var(--mbb-scale, 1));
    }

    .mbb-header__bar {
      gap: calc(16px * var(--mbb-scale, 1));
      padding-inline: calc(28px * var(--mbb-scale, 1)) calc(20px * var(--mbb-scale, 1));
    }

    .mbb-header__actions {
      --mbb-header-icon-gap: 14px;
    }

    .mbb-header__cta-label {
      font-size: 15px;
    }
  }

  /*
    Below ~1200 the pill genuinely cannot hold logo + centred nav + icon cluster + CTA.
    The nav is centred in the pill, so as the pill narrows its ends reach into the icons —
    measured -15.9px of overlap at 1180 and -207px by 760. Handing the links to the burger
    drawer here keeps the bar honest instead of letting them collide. Above this the nav is
    centred exactly as the design has it (its midpoint is the pill's midpoint).
  */
  /*
    Below 1200 the inline nav is swapped for the drawer. This briefly needed to be 1280,
    when the icon cluster had to share the right-hand gap with the Explore Collections
    button; with the button gone the icons alone leave ~340px of clearance at 1920 and the
    nav fits comfortably again down to 1200.
  */
  @media screen and (min-width: 750px) and (max-width: 1199px) {
    .mbb-header__drawer {
      display: block;
    }

    .mbb-header__nav {
      display: none;
    }
  }

  /*
    Mobile_HomePage 202:13701 fits three icons in the capsule — search, account, cart — not
    the four the desktop bar carries. Favourites is the one it drops, and the drawer menu
    already lists Favourites as a link, so nothing becomes unreachable on a phone.
  */
  @media screen and (max-width: 749px) {
    .mbb-header__icon--wishlist {
      display: none;
    }

    /*
      The capsule in 202:13687 runs the three icons on a ~28px pitch at a 420 frame — ink
      centres measured at 318.5 / 345.5 / 375.5. The icon box is 22, so the gap is 6, not
      the 12-14 the desktop cluster uses. At the desktop gap the cluster measured 55.8px per
      icon and swallowed the room the logo needed to sit centred.
    */
    .mbb-header__actions {
      --mbb-header-icon-gap: 6px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mbb-header__icon,
    .mbb-header__nav-link {
      transition: none;
    }
  }
/* END_SECTION:mbb-header */

/* START_SECTION:mbb-hero (INDEX:38) */
/* .section is forced transparent by the theme, so the ground lives on __media */
  .section.mbb-hero {
    position: relative;
    isolation: isolate;
    min-height: calc(var(--mbb-hero-min-m, 790px) * var(--mbb-scale, 1));
    align-content: center;
  }

  .mbb-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--mbb-hero-bg, #fff7f1);
    background-image: var(--mbb-hero-bg-gradient, none);
  }

  /*
    Banners stack and crossfade. Only the active one is hit-testable, so a link belonging to a
    faded-out banner can never swallow a click.

    pointer-events is the subtle part: .mbb-hero__media is pointer-events:none so the artwork
    never steals clicks from the copy layer above it. The banner link therefore has to opt back
    IN, and it deliberately sits in the media layer rather than wrapping the whole hero — the
    overlay carries its own CTA link, and an <a> inside an <a> is invalid HTML that browsers
    silently unnest. This way the banner is clickable everywhere the copy is not.
  */
  .mbb-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mbb-dur, 700ms) ease;
  }

  .mbb-hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  .mbb-hero__slide-link {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }

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

  .mbb-hero__picture,
  .mbb-hero__media .mbb-hero__img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .mbb-hero__img {
    object-fit: cover;
    object-position: center;
  }

  /*
    MOBILE HEIGHT COMES FROM THE ARTWORK, exactly as it does on desktop below.

    The mobile banner is a whole composition — headline, features and Comprar are all baked
    into the PNG — so the box has to be the artwork's own shape. It was a fixed
    790px * --mbb-scale instead, which is 1.881 x viewport width, while the art (1080x1920)
    is 1.778 x viewport width. That 0.103vw of slack has to go somewhere and it went both
    ways depending on the viewport:

      box taller than art  (every phone <= 420, and 320-444 generally)
        object-fit: contain top-aligned the art and left a 40px strip of --mbb-hero-bg
        under it. The wave rides the box's bottom edge, so that strip showed as a near-white
        gap between the artwork and the band wherever the curve dips.
      box shorter than art  (445-749, and any width once Safari page zoom is below 100% —
        at 75% zoom a 393pt phone reports a 524px viewport)
        overflow:hidden on __media clipped the bottom of the art: the Comprar pill and the
        floor disappeared and the band cut across the cake.

    aspect-ratio removes the slack entirely, so the art fills the box exactly at every width
    and zoom level and object-fit has nothing left to crop or letterbox. --mbb-hero-ar-m is
    the uploaded mobile image's real ratio (falling back to the desktop image when no mobile
    one is set), so swapping the banner re-derives the height with no code change.

    Guarded on --art: with no image at all there is no ratio to use, and the section falls
    back to the min-height setting.
  */
  @media screen and (max-width: 749px) {
    .section.mbb-hero--art {
      aspect-ratio: var(--mbb-hero-ar-m, 0.5625);
      min-height: 0;
    }

    /*
      NO top margin here. 202:13687 does put 29 of pink ground above the artwork, but its
      hero frame starts at y=47 while the offer strip runs 0-78 — so those 29px sit BEHIND
      the strip and were never visible. Our hero starts where the strip ends (78) and adding
      them again opened a real 29px band, filled with --mbb-hero-bg (#FFF7F1) against the
      artwork's much pinker top edge (#F6E0D9), so it read as a seam.

      Sampled at x=6%: the design goes strip -> rgb(246,224,217) at y=78 with no step. Ours
      went strip -> rgb(254,246,240) until y=107.

      An offset measured inside a frame is only real if the frame starts where you think it
      does. Check the frame's own y against what sits above it before transcribing.
    */
  }

  .mbb-hero__scrim {
    position: absolute;
    inset: 0;
    background: var(--mbb-hero-bg, #fff7f1);
    opacity: var(--mbb-hero-overlay, 0);
  }

  .mbb-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(calc(var(--mbb-hero-max, 1920px) * var(--mbb-scale, 1)), 100vw);
    margin-inline: auto;
    padding-inline: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
  }

  .mbb-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: min(calc(var(--mbb-hero-col, 760px) * var(--mbb-scale, 1)), 92vw);
  }

  .mbb-hero--m-left .mbb-hero__content {
    align-items: flex-start;
    text-align: start;
  }

  .mbb-hero__eyebrow {
    margin: 0 0 8px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    letter-spacing: 0.08em;
    color: var(--mbb-hero-sub-color, #35363b);
  }

  /* Two-tone headline — EB Garamond, one colour per line */
  .mbb-hero__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: min(var(--mbb-hero-h-size-m, 44px), 11.5vw);
    line-height: 1.06;
    letter-spacing: 0;
  }

  .mbb-hero__line {
    display: block;
  }

  .mbb-hero__line--one {
    color: var(--mbb-hero-h1-color, #67285d);
  }

  .mbb-hero__line--two {
    color: var(--mbb-hero-h2-color, #bb385d);
  }

  /* Sparkle · rule · heart · rule · sparkle — Figma 508x21 */
  .mbb-hero__divider {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--mbb-scale, 1));
    width: 100%;
    max-width: clamp(calc(240px + 60px * var(--mbb-fl, 0)), 15.625vw, 264px);
    margin-block: calc(14px * var(--mbb-scale, 1)) 0;
  }

  .mbb-hero--m-center .mbb-hero__divider {
    margin-inline: auto;
  }

  .mbb-hero__spark,
  .mbb-hero__heart {
    display: block;
    flex: none;
    line-height: 0;
  }

  .mbb-hero__spark {
    width: calc(14px * var(--mbb-scale, 1));
    color: var(--mbb-hero-spark, #e6b58c);
  }

  .mbb-hero__heart {
    width: calc(17px * var(--mbb-scale, 1));
    color: var(--mbb-hero-heart, #b9395f);
  }

  .mbb-hero__spark svg,
  .mbb-hero__heart svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .mbb-hero__rule {
    flex: 1 1 0;
    height: 1px;
    background: var(--mbb-hero-rule, #cd5f79);
  }

  .mbb-hero__subheading {
    margin-block: calc(14px * var(--mbb-scale, 1)) 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.467;
    color: var(--mbb-hero-sub-color, #35363b);
  }

  .mbb-hero__subheading > :first-child {
    margin-block-start: 0;
  }

  .mbb-hero__subheading > :last-child {
    margin-block-end: 0;
  }

  /* Circular icon features */
  .mbb-hero__features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    width: 100%;
    margin-block: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px) 0;
    padding: 0;
    list-style: none;
  }

  .mbb-hero--m-left .mbb-hero__features {
    justify-content: flex-start;
    margin-inline-start: calc((var(--mbb-hero-circle-size, 78px) - var(--mbb-hero-feature-col, 145.33px)) / 2);
  }

  .mbb-hero__feature {
    position: relative;
    flex: 1 1 25%;
    min-width: calc(76px * var(--mbb-scale, 1));
    max-width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(8px * var(--mbb-scale, 1));
  }

  .mbb-hero__feature-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8px * var(--mbb-scale, 1));
    text-decoration: none;
    color: inherit;
  }

  .mbb-hero__circle {
    display: grid;
    place-items: center;
    flex: none;
    width: min(var(--mbb-hero-circle-size, 78px), 62px);
    height: min(var(--mbb-hero-circle-size, 78px), 62px);
    border-radius: 50%;
    background: var(--mbb-hero-circle, #f7e6e4);
    color: var(--mbb-hero-icon, #bd3a5e);
  }

  .mbb-hero__icon {
    width: 56%;
    height: 56%;
    fill: currentcolor;
  }

  .mbb-hero__icon-img {
    width: 56%;
    height: auto;
    object-fit: contain;
  }

  .mbb-hero__feature-title {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.333;
    color: var(--mbb-hero-caption, #3c3b3e);
  }

  /* Comprar pill — Figma 278x61 r10 */
  .mbb-hero__cta-row {
    margin-block: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px) 0;
  }

  .mbb-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(16px * var(--mbb-scale, 1));
    min-width: calc(200px * var(--mbb-scale, 1));
    min-height: calc(48px * var(--mbb-scale, 1));
    padding-inline: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    border-radius: 10px;
    background: var(--mbb-hero-cta-bg, #b9385e);
    color: var(--mbb-hero-cta-fg, #ffffff);
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .mbb-hero__cta:hover {
    transform: translateY(-1px);
  }

  .mbb-hero__cta-label {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    line-height: 1.25;
  }

  .mbb-hero__cta-arrow {
    flex: none;
    width: calc(20px * var(--mbb-scale, 1));
    height: calc(12px * var(--mbb-scale, 1));
  }

  @media screen and (min-width: 750px) {
    /*
      DESKTOP HEIGHT COMES FROM THE ARTWORK, NOT FROM A SETTING.

      Every element of this hero — headline, rule, feature icons, Comprar — is baked into
      the PNG; the section's own text settings are all blank. So the banner is a fixed
      composition and any crop destroys part of the design.

      A scaled px min-height (1050 * 0.88 = 924) held the box at 924 while the width tracked
      the viewport. At 2560 that box is aspect 2.77 against the artwork's 1.828, so cover
      threw away 238px off the top AND 238px off the bottom — the pedestal bases, the
      raspberries and the cake plate — and the wave's fill showed through the hole.

      aspect-ratio uses the element's own border-box width, so unlike 100vw it is not
      inflated by the scrollbar. --mbb-hero-ar is the uploaded image's real ratio, so
      swapping the banner re-derives the height with no code change.
    */
    .section.mbb-hero {
      aspect-ratio: var(--mbb-hero-ar, 1.8277);
      min-height: 0;
    }

    .mbb-hero__inner {
      padding-inline: calc(var(--mbb-hero-inset, 192px) * var(--mbb-scale, 1));
    }

    .mbb-hero--center .mbb-hero__content {
      align-items: center;
      text-align: center;
      margin-inline: auto;
    }

    .mbb-hero--left .mbb-hero__content {
      align-items: flex-start;
      text-align: start;
      margin-inline: 0;
    }

    .mbb-hero__eyebrow {
      font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
      line-height: 1.714;
      margin-block-end: calc(12px * var(--mbb-scale, 1));
    }

    /* cap 77px / 80px measured -> 115px; baseline-to-baseline 115px */
    .mbb-hero__heading {
      font-size: calc(var(--mbb-hero-h-size, 106px) * var(--mbb-scale, 1));
      line-height: calc(var(--mbb-hero-h-leading, 115px) / var(--mbb-hero-h-size, 106px));
    }

    /* divider 508x21 @ 189,514 — sparkle 22, heart 26, rules 193/195 */
    .mbb-hero__divider {
      max-width: min(calc(508px * var(--mbb-scale, 1)), 92vw);
      gap: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
      margin-block-start: calc(17px * var(--mbb-scale, 1));
      height: calc(21px * var(--mbb-scale, 1));
    }

    .mbb-hero--left .mbb-hero__divider {
      margin-inline: 0;
    }

    .mbb-hero--center .mbb-hero__divider {
      margin-inline: auto;
    }

    .mbb-hero__spark {
      width: calc(22px * var(--mbb-scale, 1));
    }

    .mbb-hero__heart {
      width: calc(26px * var(--mbb-scale, 1));
    }

    /* Montserrat 400 24/31 */
    .mbb-hero__subheading {
      margin-block-start: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
      font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
      line-height: 1.292;
    }

    .mbb-hero__features {
      flex-wrap: nowrap;
      margin-block-start: clamp(calc(18.4px + 4.6px * var(--mbb-fl, 0)), 1.198vw, 20.24px);
    }

    .mbb-hero--left .mbb-hero__features {
      justify-content: flex-start;
      margin-inline-start: calc((var(--mbb-hero-circle-size, 78px) - var(--mbb-hero-feature-col, 145.33px)) / 2);
    }

    .mbb-hero--center .mbb-hero__features {
      justify-content: center;
      margin-inline: auto;
    }

    .mbb-hero__feature {
      flex: 0 0 auto;
      width: calc(var(--mbb-hero-feature-col, 145.33px) * var(--mbb-scale, 1));
      min-width: 0;
      max-width: none;
      gap: 7px;
    }

    /* hairline in the gutter between columns — Figma y 652 -> 759 */
    .mbb-hero__feature + .mbb-hero__feature::before {
      content: '';
      position: absolute;
      inset-inline-start: 0;
      inset-block: 12px 6px;
      width: 1px;
      background: var(--mbb-hero-hairline, #f6e3d1);
    }

    .mbb-hero__circle {
      width: calc(var(--mbb-hero-circle-size, 78px) * var(--mbb-scale, 1));
      height: calc(var(--mbb-hero-circle-size, 78px) * var(--mbb-scale, 1));
    }

    .mbb-hero__feature-link {
      gap: 7px;
    }

    /* Montserrat 500 15/20 */
    .mbb-hero__feature-title {
      font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
      line-height: 1.333;
    }

    .mbb-hero__cta-row {
      margin-block-start: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    }

    .mbb-hero__cta {
      min-width: calc(278px * var(--mbb-scale, 1));
      min-height: calc(61px * var(--mbb-scale, 1));
      padding-inline: clamp(calc(35.21px + 8.79px * var(--mbb-fl, 0)), 2.292vw, 38.73px);
      gap: clamp(calc(18.4px + 4.6px * var(--mbb-fl, 0)), 1.198vw, 20.24px);
    }

    .mbb-hero__cta-label {
      font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
      line-height: 1.25;
    }

    .mbb-hero__cta-arrow {
      width: calc(22px * var(--mbb-scale, 1));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mbb-hero__cta {
      transition: none;
    }
  }
/* END_SECTION:mbb-hero */

/* START_SECTION:mbb-instagram-grid (INDEX:39) */
/*
    1377 below is this section's own narrower rail — Instagram Grid 202:11357 sits at x=272
    w=1377 of the 1920 frame, not on the 80/1760 one. It was being overridden by the guard in
    mbb-reveal.css; see the note there. Frame 298 puts the block on the standard 20/420 rail
    on the phone, tiles spanning 20..400 — it is not an edge-to-edge mosaic in either frame.
  */
  @media screen and (max-width: 749px) {
    .section.mbb-ig {
      max-width: none;
      padding-inline: var(--mbb-gutter, 20px);
    }
  }

  /* ---------- Instagram grid : mobile first (Frame 298, Mobile_HomePage) ---------- */
  .mbb-ig {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    width: 100%;
    max-width: min(calc(var(--mbb-ig-max, 1377px) * var(--mbb-scale, 1)), 92vw);
    margin-inline: auto;
  }

  /* Group 51 */
  .mbb-ig__head {
    display: flex;
    flex-direction: column;
    gap: calc(16px * var(--mbb-scale, 1));
    width: 100%;
    max-width: min(calc(769px * var(--mbb-scale, 1)), 92vw);
  }
  .mbb-ig__head--center {
    align-items: center;
    text-align: center;
  }
  .mbb-ig__head--left {
    align-items: flex-start;
    text-align: left;
  }
  .mbb-ig__titles {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--mbb-scale, 1));
    width: 100%;
  }
  .mbb-ig__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.25;
    color: var(--mbb-ig-text, #44362b);
  }
  .mbb-ig__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    line-height: 1.313;
    color: var(--mbb-ig-text, #44362b);
  }
  .mbb-ig__subheading {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    color: var(--mbb-ig-text, #44362b);
  }
  .mbb-ig__subheading > * {
    margin: 0;
  }

  /* Frame 226 */
  .mbb-ig__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--mbb-scale, 1));
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.667;
    color: var(--mbb-ig-accent, #c3116a);
    text-decoration: none;
  }
  .mbb-ig__handle-icon {
    display: inline-flex;
    flex: none;
    width: calc(30px * var(--mbb-scale, 1));
    height: calc(30px * var(--mbb-scale, 1));
  }
  .mbb-ig__handle-icon svg {
    width: 100%;
    height: 100%;
  }

  /* Group 288 — the scatter */
  .mbb-ig__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 380 / var(--mbb-ig-hm, 418.61);
  }
  .mbb-ig__tile {
    position: absolute;
    inset-block-start: calc(var(--mbb-ig-ym) / var(--mbb-ig-hm) * 100%);
    inset-inline-start: calc(var(--mbb-ig-xm) / 380 * 100%);
    width: calc(112.32 / 380 * 100%);
    aspect-ratio: 112.32 / 124.27;
    background: var(--mbb-ig-tile-bg, #d9d9d9);
    border-radius: 3.8784px;
    overflow: hidden;
  }
  .mbb-ig__link {
    display: block;
    width: 100%;
    height: 100%;
  }
  .mbb-ig__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
.mbb-ig__lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    background: rgb(0 0 0 / 72%);
  }
  .mbb-ig__lightbox iframe {
    width: min(400px, 92vw);
    height: min(680px, 86vh);
    border: 0;
    border-radius: 10px;
    background: #fff;
  }
  .mbb-ig__lightbox-close {
    position: absolute;
    inset-block-start: 2vmin;
    inset-inline-end: 3vmin;
    width: 44px;
    height: 44px;
    font-size: 30px;
    line-height: 1;
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .mbb-ig__video-inline {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
  }

  .mbb-ig__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 2;
  }

    .mbb-ig__reel {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(20px * var(--mbb-scale, 1));
    height: calc(20px * var(--mbb-scale, 1));
    background: rgb(0 0 0 / 35%);
    border-radius: 50%;
    color: #ffffff;
    pointer-events: none;
  }
  .mbb-ig__reel svg {
    width: calc(8px * var(--mbb-scale, 1));
    height: calc(9px * var(--mbb-scale, 1));
    margin-inline-start: 1px;
  }
  .mbb-ig__tag {
    position: absolute;
    inset-block-end: 6px;
    inset-inline-start: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: calc(22px * var(--mbb-scale, 1));
    padding-inline: 6px;
    background: var(--mbb-ig-tag-bg, #ffffff);
    border-radius: 4px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 0.573vw, 9.68px);
    line-height: 1.273;
    color: var(--mbb-ig-tag-text, #44362b);
    text-decoration: none;
    white-space: nowrap;
  }
  .mbb-ig__tag svg {
    flex: none;
    width: calc(9px * var(--mbb-scale, 1));
    height: calc(12px * var(--mbb-scale, 1));
  }

  /* simple grid alternative */
  .mbb-ig--grid .mbb-ig__stage {
    display: grid;
    grid-template-columns: repeat(var(--mbb-ig-cols-m, 2), minmax(0, 1fr));
    gap: calc(var(--mbb-ig-tile-gap, 12px) * var(--mbb-scale, 1));
    aspect-ratio: auto;
  }
  .mbb-ig--grid .mbb-ig__tile {
    position: relative;
    inset: auto;
    width: auto;
    aspect-ratio: 235 / 260;
    border-radius: var(--mbb-ig-radius, 8.1146px);
  }

  /* Frame 225 / 227 */
  .mbb-ig__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--mbb-scale, 1));
    min-width: calc(265px * var(--mbb-scale, 1));
    min-height: calc(47px * var(--mbb-scale, 1));
    padding: 15px clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    border: 1px solid var(--mbb-ig-accent, #c3116a);
    border-radius: 8px;
    color: var(--mbb-ig-accent, #c3116a);
    text-decoration: none;
  }
  .mbb-ig__cta-label {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.222;
    text-align: center;
  }
  .mbb-ig__arrow {
    display: block;
    flex: none;
    width: calc(21px * var(--mbb-scale, 1));
    height: calc(12px * var(--mbb-scale, 1));
  }

  /* ---------- Desktop : the Figma "Instagram Grid" frame ---------- */
  @media screen and (min-width: 750px) {
    .mbb-ig {
      gap: calc(var(--mbb-ig-gap, 50px) * var(--mbb-scale, 1));
    }
    .mbb-ig__head {
      gap: clamp(calc(24.81px + 6.19px * var(--mbb-fl, 0)), 1.615vw, 27.29px);
    }
    .mbb-ig__titles {
      gap: 4px;
    }
    .mbb-ig__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-ig__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }
    .mbb-ig__subheading {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }

    .mbb-ig__stage {
      aspect-ratio: 1377 / var(--mbb-ig-h, 618);
    }
    .mbb-ig__tile {
      inset-block-start: calc(var(--mbb-ig-y) / var(--mbb-ig-h) * 100%);
      inset-inline-start: calc(var(--mbb-ig-x) / 1377 * 100%);
      width: calc(235 / 1377 * 100%);
      aspect-ratio: 235 / 260;
      border-radius: var(--mbb-ig-radius, 8.1146px);
    }
    .mbb-ig__reel {
      inset-block-start: calc(12px * var(--mbb-scale, 1));
      inset-inline-end: calc(12px * var(--mbb-scale, 1));
      width: calc(32px * var(--mbb-scale, 1));
      height: calc(32px * var(--mbb-scale, 1));
    }
    .mbb-ig__reel svg {
      width: calc(12px * var(--mbb-scale, 1));
      height: calc(14px * var(--mbb-scale, 1));
    }
    .mbb-ig__tag {
      inset-block-end: calc(12px * var(--mbb-scale, 1));
      inset-inline-start: calc(12px * var(--mbb-scale, 1));
      gap: 6px;
      height: calc(30px * var(--mbb-scale, 1));
      padding-inline: calc(10px * var(--mbb-scale, 1));
      font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
      line-height: 1.214;
    }
    .mbb-ig__tag svg {
      width: calc(12px * var(--mbb-scale, 1));
      height: calc(16px * var(--mbb-scale, 1));
    }

    .mbb-ig--grid .mbb-ig__stage {
      grid-template-columns: repeat(var(--mbb-ig-cols, 4), minmax(0, 1fr));
      gap: calc(var(--mbb-ig-tile-gap, 20px) * var(--mbb-scale, 1));
      aspect-ratio: auto;
    }
    .mbb-ig--grid .mbb-ig__tile {
      position: relative;
      inset: auto;
      width: auto;
    }

    .mbb-ig__cta {
      min-width: calc(320px * var(--mbb-scale, 1));
      min-height: calc(52px * var(--mbb-scale, 1));
    }
  }
/* END_SECTION:mbb-instagram-grid */

/* START_SECTION:mbb-page-header (INDEX:40) */
.mbb-page-header {
    --section-min-height: var(--mbb-ph-min-m, 220px);

    align-content: center;
  }

  .mbb-page-header__backdrop {
    overflow: hidden;
  }

  .mbb-page-header__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--mbb-ph-focal, center);
  }

  .mbb-page-header__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--mbb-ph-overlay-color, #000);
    opacity: var(--mbb-ph-overlay, 0);
  }

  .mbb-page-header__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: min(calc(var(--mbb-ph-width, 860px) * var(--mbb-scale, 1)), 92vw);
  }

  .mbb-page-header--center .mbb-page-header__content {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .mbb-page-header--left .mbb-page-header__content {
    align-items: flex-start;
    text-align: left;
  }

  /* Frame 48 — eyebrow + heading, gap 4 */
  .mbb-page-header__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    letter-spacing: 0.08em;
    color: var(--mbb-ph-eyebrow-color, #44362b);
  }

  .mbb-page-header__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: calc(var(--mbb-ph-heading-m, 32px) * var(--mbb-scale, 1));
    line-height: 1.3125;
    color: var(--mbb-ph-heading-color, #44362b);
    text-wrap: balance;
  }

  .mbb-page-header__rule {
    display: inline-flex;
    align-items: center;
    gap: calc(12px * var(--mbb-scale, 1));
    margin-block-start: calc(14px * var(--mbb-scale, 1));
    color: var(--mbb-ph-accent, #d13e6a);
  }

  .mbb-page-header__rule-line {
    display: block;
    width: calc(46px * var(--mbb-scale, 1));
    height: 1px;
    background: currentcolor;
    opacity: 0.45;
  }

  .mbb-page-header__rule-mark {
    display: block;
    width: calc(15px * var(--mbb-scale, 1));
    height: calc(14px * var(--mbb-scale, 1));
    flex: none;
  }

  .mbb-page-header__subheading {
    margin-block-start: calc(10px * var(--mbb-scale, 1));
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.733;
    color: var(--mbb-ph-body-color, #909090);
  }

  .mbb-page-header__subheading > :first-child {
    margin-block-start: 0;
  }

  .mbb-page-header__subheading > :last-child {
    margin-block-end: 0;
  }

  .mbb-page-header__meta {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--mbb-scale, 1));
    margin: 12px 0 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.429;
    letter-spacing: 0.06em;
    color: var(--mbb-ph-body-color, #909090);
  }

  .mbb-page-header__cta {
    margin-block-start: clamp(calc(17.6px + 4.4px * var(--mbb-fl, 0)), 1.146vw, 19.36px);
  }

  /* Pill button — radius 100, padding 18/26, Montserrat 500 18/22 uppercase */
  .mbb-page-header__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--mbb-scale, 1));
    padding: 14px clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    border-radius: 100px;
    border: 1px solid transparent;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.467;
    text-decoration: none;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  .mbb-page-header__button--primary {
    background: var(--mbb-ph-heading-color, #44362b);
    color: #ffffff;
  }

  .mbb-page-header__button--accent {
    background: var(--mbb-ph-accent, #d13e6a);
    color: #ffffff;
  }

  .mbb-page-header__button--outline {
    border-color: var(--mbb-ph-accent, #d13e6a);
    color: var(--mbb-ph-accent, #d13e6a);
  }

  .mbb-page-header__button:hover {
    opacity: 0.88;
  }

  @media screen and (min-width: 750px) {
    .mbb-page-header {
      --section-min-height: var(--mbb-ph-min, 300px);
    }

    .mbb-page-header__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
      letter-spacing: 0.06em;
    }

    .mbb-page-header__heading {
      font-size: calc(var(--mbb-ph-heading, 48px) * var(--mbb-scale, 1));
    }

    .mbb-page-header__subheading {
      margin-block-start: calc(14px * var(--mbb-scale, 1));
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }

    .mbb-page-header__rule-line {
      width: calc(64px * var(--mbb-scale, 1));
    }

    .mbb-page-header__button {
      padding: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px) clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
  }
/* END_SECTION:mbb-page-header */

/* START_SECTION:mbb-product-buybox (INDEX:41) */
/* ---------------------------------------------------------------------------
     Type and rhythm scale. Every number is the Figma value inside the 1920 frame,
     expressed against the viewport so the buy column reads at the designed size at
     any desktop width instead of only at exactly 1920.
     --------------------------------------------------------------------------- */
  .mbb-buybox {
    --mbb-buybox-inset: max(var(--page-margin, 16px), calc((100vw - var(--page-content-width, 1400px)) / 2));

    /* 18/30 body */
    --mbb-fs-body: clamp(13px, calc(18 / 1920 * 100vw), 15.84px);
    /* 14/17 sub-label */
    --mbb-fs-sub: clamp(11px, calc(14 / 1920 * 100vw), 12.32px);
    /* 16 tax note */
    --mbb-fs-note: clamp(11px, calc(16 / 1920 * 100vw), 14.08px);
    /* 24/31 EB Garamond section labels */
    --mbb-fs-label: clamp(17px, calc(24 / 1920 * 100vw), 21.12px);
    /* 48 EB Garamond title and price */
    --mbb-fs-display: clamp(28px, calc(48 / 1920 * 100vw), 42.24px);
    /* 25.93 struck compare-at */
    --mbb-fs-compare: clamp(16px, calc(26 / 1920 * 100vw), 22.88px);
    /* 20.55 discount badge */
    --mbb-fs-save: clamp(13px, calc(20.55 / 1920 * 100vw), 18.08px);
    /* 30 — Frame 250's internal rhythm */
    --mbb-gap-inner: clamp(16px, calc(30 / 1920 * 100vw), 26.4px);
    /* 20 — label-to-content */
    --mbb-gap-tight: clamp(12px, calc(20 / 1920 * 100vw), 17.6px);

    display: flex;
    flex-direction: column;
    gap: clamp(24px, calc(var(--mbb-buybox-gap-n, 50) / 1920 * 100vw), calc(var(--mbb-buybox-gap-n, 50) * 1.2px));
    box-sizing: border-box;
    width: 100%;
    padding-inline: calc(var(--page-margin, 16px) * var(--mbb-scale, 1));
    color: var(--mbb-buybox-ink, #44362b);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
  }

  .mbb-buybox--center {
    text-align: center;
  }

  @media screen and (min-width: 990px) {
    /* The <main> grid in mbb-product-gallery.liquid already owns the page margin and the
       gutter back to the gallery, so the buy column fills its own track exactly. */
    .mbb-pdp-col--info .mbb-buybox {
      padding-inline: 0;
    }
  }

  /* Frame 250 */
  .mbb-buybox__group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--mbb-gap-inner, 30px) * var(--mbb-scale, 1));
  }

  /* Frame 244 — one 43-tall row: rating pill, reviews link, social proof, share disc. */
  .mbb-buybox__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55em;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
  }

  .mbb-buybox__proof {
    display: flex;
    align-items: center;
    gap: 0.55em;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Frame 187 — 89x37 */
  .mbb-buybox__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.22em;
    padding: 0.19em 0.72em;
    border-radius: 5px;
    background: var(--mbb-buybox-rating-bg, #e6269f);
    color: #ffffff;
    font-weight: 600;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1.667;
    white-space: nowrap;
  }

  .mbb-buybox__rating-star {
    width: 1em;
    height: 1em;
    flex: none;
    color: #ffdc4e;
  }

  .mbb-buybox__reviews-link {
    flex: none;
    font-weight: 500;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
  }

  .mbb-buybox__social {
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1.667;
    color: #7d7d7d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Frame 191 — 43x43 */
  .mbb-buybox .mbb-buybox__share {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.39em;
    height: 2.39em;
    padding: 0;
    background: transparent;
    border: 1px solid currentcolor;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .mbb-buybox .mbb-buybox__share:hover,
  .mbb-buybox .mbb-buybox__share.is-copied {
    background: #fff1fa;
  }

  .mbb-buybox__share svg {
    width: 0.89em;
    height: 0.78em;
  }

  /* Favourites heart — Frame 191's geometry, borrowed from the share control. */
  .mbb-buybox__wish {
    --mbb-wish-bg: transparent;

    flex: none;
  }

  .mbb-buybox__wish .mbb-wish__button {
    border: 1px solid currentcolor;
  }

  .mbb-buybox__wish .mbb-wish__button:hover,
  .mbb-buybox__wish .mbb-wish__button[aria-pressed='true'] {
    background: #fff1fa;
  }

  /* Frame 241 */
  .mbb-buybox__intro {
    display: flex;
    flex-direction: column;
    gap: calc(var(--mbb-gap-tight, 20px) * var(--mbb-scale, 1));
  }

  .mbb-buybox__eyebrow {
    margin: 0;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1.667;
    letter-spacing: 0.04em;
    color: var(--mbb-buybox-muted, #908882);
  }

  .mbb-buybox__sku {
    margin: 0.35rem 0 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: calc(12px * var(--mbb-scale, 1));
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: rgb(from currentColor r g b / 55%);
  }
  .mbb-buybox__sku-value {
    color: rgb(from currentColor r g b / 80%);
  }

  .mbb-buybox__title {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 600;
    font-size: calc(var(--mbb-fs-display, 48px) * var(--mbb-scale, 1));
    line-height: 1.1;
    color: inherit;
  }

  .mbb-buybox__description,
  .mbb-buybox__description p {
    margin: 0;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1.667;
    color: var(--mbb-buybox-muted, #908882);
  }

  .mbb-buybox__description > * + * {
    margin-block-start: 0;
  }

  /* Frame 238 */
  .mbb-buybox__pricing {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
  }

  .mbb-buybox__price-row {
    display: flex;
    align-items: center;
    gap: 0.55em;
    flex-wrap: wrap;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
  }

  .mbb-buybox__price {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 600;
    font-size: calc(var(--mbb-fs-display, 48px) * var(--mbb-scale, 1));
    line-height: 1;
    color: var(--mbb-buybox-price, #9552bd);
  }

  .mbb-buybox__compare {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: calc(var(--mbb-fs-compare, 26px) * var(--mbb-scale, 1));
    line-height: 1;
    color: var(--mbb-buybox-compare, #c7c7c7);
    text-decoration-line: line-through;
    text-decoration-color: currentcolor;
  }

  /* Frame 194 — 112x40 */
  .mbb-buybox__save {
    display: inline-flex;
    align-items: center;
    padding: 0.34em 0.44em;
    border: 0.64px solid #74c713;
    border-radius: 5px;
    background: var(--mbb-buybox-save-bg, #f7fff0);
    color: var(--mbb-buybox-save-fg, #4d9000);
    font-weight: 600;
    font-size: calc(var(--mbb-fs-save, 20px) * var(--mbb-scale, 1));
    line-height: 1;
    white-space: nowrap;
  }

  .mbb-buybox__tax {
    margin: 0;
    font-size: calc(var(--mbb-fs-note, 16px) * var(--mbb-scale, 1));
    line-height: 1.3;
    color: #6c6c6c;
  }

  /* Frame 251 — 373x99, pad 10/21 */
  .mbb-buybox__specs {
    display: inline-flex;
    align-items: stretch;
    gap: 1.67em;
    align-self: flex-start;
    max-width: 100%;
    margin: 0;
    padding: 0.56em 1.17em;
    border-radius: 10px;
    background: var(--mbb-buybox-spec-bg, #faf8ff);
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
  }

  .mbb-buybox__spec {
    display: flex;
    flex-direction: column;
    gap: 0.22em;
    padding-inline-end: 1.67em;
    border-inline-end: 1px solid currentcolor;
  }

  .mbb-buybox__spec:last-child {
    padding-inline-end: 0;
    border-inline-end: 0;
  }

  .mbb-buybox__spec-label,
  .mbb-buybox__label {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: calc(var(--mbb-fs-label, 24px) * var(--mbb-scale, 1));
    line-height: 1.29;
    color: inherit;
  }

  .mbb-buybox__spec-value {
    margin: 0;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1.667;
    color: var(--mbb-buybox-muted, #908882);
    white-space: nowrap;
  }

  /* Frame 241 — fragrance swatches. 131 of the 700 column, 24 apart. */
  .mbb-buybox__fragrances {
    display: flex;
    flex-direction: column;
    gap: calc(var(--mbb-gap-tight, 20px) * var(--mbb-scale, 1));
  }

  .mbb-buybox__swatches {
    display: flex;
    /*
      Split the axes. A percentage row-gap resolves against the container's HEIGHT, and this
      container's height is auto — so it computed to zero and every wrapped row of swatches
      sat flush against the one above it (measured: 1px, and that 1px was the border). Only
      the column gap can be a percentage here; 3.4286% is the design's 24 of the 700 column,
      so the rows use the same 24 scaled.
    */
    column-gap: 3.4286%;
    row-gap: calc(24px * var(--mbb-scale, 1));
    flex-wrap: wrap;
    /* stretch equalises tile height without clipping either label */
    align-items: stretch;
  }

  .mbb-buybox__swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* basis is a share of the buy column so it tracks the column at every width; the cap
       is fluid too — a fixed 131px froze the swatch at its 1920 size while the rest scaled. */
    flex: 0 0 22%;
    max-width: clamp(96px, 12vw, 202.75px);
    border: 1px solid #44362b;
    border-radius: 8px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .mbb-buybox__swatch:hover {
    border-color: #c3116a;
  }

  .mbb-buybox__swatch.is-active {
    border-width: 2px;
    box-shadow: 0 0 0 2px #fff1fa;
  }

  .mbb-buybox__swatch.is-unavailable {
    opacity: 0.45;
  }

  .mbb-buybox__swatch-media {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background: #efefef;
    border-radius: 8px;
    overflow: hidden;
  }

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

  .mbb-buybox__swatch-name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9em;
    padding: 0.4em 0.44em;
    text-align: center;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1.22;
    text-align: center;
  }

  /* Frame 252 — 700x251, pad 20, rows 660x70 */
  .mbb-buybox__bundles {
    display: flex;
    flex-direction: column;
    gap: calc(var(--mbb-gap-tight, 20px) * var(--mbb-scale, 1));
    padding: calc(var(--mbb-gap-tight, 20px) * var(--mbb-scale, 1));
    border: 0.8px solid var(--mbb-buybox-bundle-border, #c3116a);
    border-radius: 10px;
    background: var(--mbb-buybox-bundle-bg, #ffe5f2);
  }

  .mbb-buybox__bundle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9em;
    min-height: 3.89em;
    padding: 0.5em 1.33em;
    border-radius: 10px;
    background: #ffffff;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
  }

  .mbb-buybox__bundle-text {
    display: flex;
    flex-direction: column;
    gap: 0.22em;
    flex: 1 1 auto;
    min-width: 0;
  }

  .mbb-buybox__bundle-title {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: calc(var(--mbb-fs-label, 24px) * var(--mbb-scale, 1));
    line-height: 1.29;
  }

  .mbb-buybox__bundle-sub {
    font-size: calc(var(--mbb-fs-sub, 14px) * var(--mbb-scale, 1));
    line-height: 1.21;
    color: #9b8a7c;
  }

  /* Frame 255 + Frame 256 — 239x39 shell with a 122x39 pill */
  .mbb-buybox__code {
    display: inline-flex;
    align-items: center;
    gap: 0.44em;
    flex: none;
    border-radius: 4px;
    overflow: hidden;
  }

  .mbb-buybox__code-label {
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1.667;
    white-space: nowrap;
  }

  .mbb-buybox .mbb-buybox__code-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.44em;
    min-height: 2.17em;
    padding: 0.28em 0.89em;
    border: 0;
    border-radius: 0;
    background: var(--mbb-buybox-code-bg, #e6269f);
    color: #ffffff;
    font-family: inherit;
    font-weight: 600;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1.667;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.2s ease;
  }

  .mbb-buybox .mbb-buybox__code-pill:hover {
    filter: brightness(1.08);
  }

  .mbb-buybox .mbb-buybox__code-pill.is-copied {
    background: #4d9000;
  }

  .mbb-buybox__code-icon {
    width: 0.89em;
    height: 0.89em;
    flex: none;
  }

  /* Frame 243 — tip. 28x27 marker, 20 gutter, body 612 of the 700 column. */
  .mbb-buybox__tip {
    display: flex;
    align-items: flex-start;
    /* column-gap only — this row never wraps, but a percentage row-gap would be dead weight
       resolving against an auto height, as it was on the swatches above. */
    column-gap: 2.857%;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
  }

  .mbb-buybox__tip-marker {
    flex: none;
    display: block;
    width: 1.556em;
    color: var(--mbb-buybox-tip, #4d9000);
  }

  .mbb-buybox__tip-marker svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 28 / 27;
  }

  .mbb-buybox__tip-body {
    display: flex;
    flex-direction: column;
    gap: 0.44em;
    min-width: 0;
  }

  .mbb-buybox__tip-text,
  .mbb-buybox__tip-text p {
    margin: 0;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1.667;
    color: var(--mbb-buybox-muted, #908882);
  }

  /* Frame 190 — add to cart */
  .mbb-buybox__atc {
    display: flex;
    flex-direction: column;
    gap: 0.67em;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
  }

  /* add-to-cart-component is an unknown element, so it needs an explicit box for the
     full-width button inside it to resolve against. */
  .mbb-buybox__form,
  .mbb-buybox__form form,
  .mbb-buybox__form add-to-cart-component {
    display: block;
    margin: 0;
  }

  .mbb-buybox .mbb-buybox__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.56em;
    width: 100%;
    min-height: 3.33em;
    padding-inline: 1.33em;
    border: 1px solid var(--mbb-buybox-atc-bg, #44362b);
    border-radius: var(--mbb-buybox-radius, 10px);
    background: var(--mbb-buybox-atc-bg, #44362b);
    color: var(--mbb-buybox-atc-fg, #ffffff);
    font-family: inherit;
    font-weight: 500;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1.22;
    letter-spacing: 0.02em;
    cursor: pointer;
  }

  .mbb-buybox .mbb-buybox__button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Arrow 1 — a 31x2 rule, not a chevron. */
  .mbb-buybox .mbb-buybox__button::after {
    content: '';
    flex: none;
    width: 1.72em;
    height: 2px;
    background: currentcolor;
  }

  .mbb-buybox .mbb-buybox__button .add-to-cart-icon {
    display: none;
  }

  .mbb-buybox__cta {
    align-self: center;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #c3116a;
  }

  /* Frame 247 — 2x2 trust badges. Columns 301 + 74 gutter + 325 across the 700 column. */
  .mbb-buybox__badges {
    display: grid;
    grid-template-columns: minmax(0, 43fr) minmax(0, 46.43fr);
    column-gap: 10.571%;
    row-gap: calc(var(--mbb-gap-inner, 30px) * var(--mbb-scale, 1));
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
  }

  .mbb-buybox__badge {
    display: flex;
    align-items: center;
    gap: 0.56em;
  }

  .mbb-buybox__badge-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.56em;
    height: 2.56em;
    border-radius: 50%;
    background: var(--mbb-buybox-badge-bg, #44362b);
    color: #ffffff;
    overflow: hidden;
  }

  .mbb-buybox__badge-icon svg {
    width: 1.28em;
    height: 1.28em;
  }

  .mbb-buybox__badge-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mbb-buybox__badge-label {
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1.33;
    color: #000000;
  }

  /* Frame 243 — accordions. Title 31 tall, 30 of air to each 1px rule, and no padding
     above the first title or below the last (Figma: 1924 → 2228 = 304 for four rows). */
  .mbb-buybox__accordions {
    display: flex;
    flex-direction: column;
  }

  .mbb-buybox__accordion {
    border-block-end: 1px solid currentcolor;
  }

  .mbb-buybox__accordion:last-child {
    border-block-end: 0;
  }

  .mbb-buybox__accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--mbb-gap-tight, 20px) * var(--mbb-scale, 1));
    padding-block: calc(var(--mbb-gap-inner, 30px) * var(--mbb-scale, 1));
    cursor: pointer;
    list-style: none;
  }

  .mbb-buybox__accordion:first-child .mbb-buybox__accordion-summary {
    padding-block-start: 0;
  }

  .mbb-buybox__accordion:last-child:not([open]) .mbb-buybox__accordion-summary {
    padding-block-end: 0;
  }

  .mbb-buybox__accordion-summary::-webkit-details-marker {
    display: none;
  }

  .mbb-buybox__accordion-title {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: calc(var(--mbb-fs-label, 24px) * var(--mbb-scale, 1));
    line-height: 1.29;
  }

  .mbb-buybox__accordion-chevron {
    flex: none;
    width: 0.46em;
    height: 0.96em;
    font-size: calc(var(--mbb-fs-label, 24px) * var(--mbb-scale, 1));
    transition: rotate 0.2s ease;
  }

  .mbb-buybox__accordion[open] .mbb-buybox__accordion-chevron {
    rotate: 90deg;
  }

  .mbb-buybox__accordion-panel {
    padding-block-end: calc(var(--mbb-gap-inner, 30px) * var(--mbb-scale, 1));
    font-size: calc(var(--mbb-fs-body, 18px) * var(--mbb-scale, 1));
    line-height: 1.667;
    color: var(--mbb-buybox-muted, #908882);
  }

  .mbb-buybox__accordion-panel > :first-child {
    margin-block-start: 0;
  }

  .mbb-buybox__accordion-panel > :last-child {
    margin-block-end: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .mbb-buybox__accordion-chevron {
      transition: none;
    }
  }

  /* Mobile — "Mobile_ProductPage" › "Frame 247" 380 wide */
  @media screen and (max-width: 989px) {
    .mbb-buybox {
      /* "Mobile_ProductPage" is a 380 frame with its own type ramp, so the desktop
         scale is replaced wholesale rather than shrunk. */
      --mbb-fs-body: 15px;
      --mbb-fs-sub: 12px;
      --mbb-fs-note: 13px;
      --mbb-fs-label: 19px;
      --mbb-fs-display: 28px;
      --mbb-fs-compare: 20px;
      --mbb-fs-save: 15px;
      --mbb-gap-inner: 20px;
      --mbb-gap-tight: 14px;

      gap: calc(30px * var(--mbb-scale, 1));
    }

    .mbb-buybox__group {
      gap: calc(20px * var(--mbb-scale, 1));
    }

    .mbb-buybox__proof {
      flex-wrap: wrap;
    }

    .mbb-buybox__social {
      white-space: normal;
    }

    .mbb-buybox__title {
      font-size: 28px;
    }

    .mbb-buybox__description,
    .mbb-buybox__description p,
    .mbb-buybox__spec-value,
    .mbb-buybox__tip-text,
    .mbb-buybox__tip-text p,
    .mbb-buybox__social,
    .mbb-buybox__badge-label,
    .mbb-buybox__accordion-panel,
    .mbb-buybox__swatch-name,
    .mbb-buybox__code-label {
      font-size: 15px;
      line-height: 24px;
    }

    .mbb-buybox__price {
      font-size: 32px;
    }

    .mbb-buybox__compare {
      font-size: 20px;
    }

    .mbb-buybox__save {
      font-size: 15px;
      padding: calc(5px * var(--mbb-scale, 1)) calc(8px * var(--mbb-scale, 1));
    }

    .mbb-buybox__rating,
    .mbb-buybox__reviews-link {
      font-size: 15px;
    }

    .mbb-buybox .mbb-buybox__share {
      width: calc(34px * var(--mbb-scale, 1));
      height: calc(34px * var(--mbb-scale, 1));
    }

    .mbb-buybox__wish {
      --mbb-wish-size: 34px;
      --mbb-wish-icon: 17px;
    }

    .mbb-buybox__spec-label,
    .mbb-buybox__label,
    .mbb-buybox__bundle-title,
    .mbb-buybox__accordion-title {
      font-size: 19px;
      line-height: 26px;
    }

    .mbb-buybox__specs {
      gap: calc(20px * var(--mbb-scale, 1));
      padding: calc(10px * var(--mbb-scale, 1)) calc(16px * var(--mbb-scale, 1));
    }

    .mbb-buybox__spec {
      padding-inline-end: calc(20px * var(--mbb-scale, 1));
    }

    .mbb-buybox__swatches {
      gap: calc(12px * var(--mbb-scale, 1));
    }

    .mbb-buybox__swatch {
      flex: 0 0 auto;
      width: calc(110px * var(--mbb-scale, 1));
      max-width: 40vw;
    }

    .mbb-buybox__bundles {
      padding: calc(14px * var(--mbb-scale, 1));
      gap: calc(14px * var(--mbb-scale, 1));
    }

    .mbb-buybox__bundle {
      padding: calc(12px * var(--mbb-scale, 1)) calc(14px * var(--mbb-scale, 1));
      gap: calc(10px * var(--mbb-scale, 1));
      flex-wrap: nowrap;
    }

    .mbb-buybox__bundle-title {
      font-size: 16px;
      line-height: 22px;
    }

    .mbb-buybox__bundle-sub {
      font-size: 12px;
      line-height: 15px;
    }

    .mbb-buybox__code {
      padding-inline-start: calc(8px * var(--mbb-scale, 1));
    }

    .mbb-buybox__code-label {
      font-size: 12px;
      line-height: 18px;
    }

    .mbb-buybox .mbb-buybox__code-pill {
      font-size: 13px;
      min-height: calc(30px * var(--mbb-scale, 1));
      padding: calc(4px * var(--mbb-scale, 1)) calc(9px * var(--mbb-scale, 1));
      gap: 5px;
    }

    .mbb-buybox__code-icon {
      width: calc(13px * var(--mbb-scale, 1));
      height: calc(13px * var(--mbb-scale, 1));
    }

    .mbb-buybox .mbb-buybox__button {
      min-height: calc(48px * var(--mbb-scale, 1));
      font-size: 15px;
    }

    .mbb-buybox__badges {
      column-gap: calc(14px * var(--mbb-scale, 1));
      row-gap: calc(18px * var(--mbb-scale, 1));
    }

    .mbb-buybox__badge-icon {
      width: calc(36px * var(--mbb-scale, 1));
      height: calc(36px * var(--mbb-scale, 1));
    }

    .mbb-buybox__badge-icon svg {
      width: calc(18px * var(--mbb-scale, 1));
      height: calc(18px * var(--mbb-scale, 1));
    }

    .mbb-buybox__accordion-summary {
      padding-block: calc(18px * var(--mbb-scale, 1));
    }

    .mbb-buybox__accordion-panel {
      padding-block-end: calc(18px * var(--mbb-scale, 1));
    }
  }
/* END_SECTION:mbb-product-buybox */

/* START_SECTION:mbb-product-carousel (INDEX:42) */
/* ---------- root : mobile first (Figma mobile frame 420 → 380 content) ---------- */
  .mbb-carousel {
    /*
      The inner row scrolls, but nothing stopped the section resolving to the full
      row width — the section measured 390px while its scrollWidth was 1164px, and
      that width propagated to the document, rendering the whole site zoomed out on
      a phone. `clip` (not `hidden`) contains it without creating a scroll container.
    */
    overflow-x: clip;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    width: 100%;
    max-width: calc(var(--mbb-carousel-max, 1760px) + 40px);
    margin-inline: auto;
  }
  .mbb-carousel.spacing-style {
    --padding-inline: 20px;
  }

  /* Frame 206 */
  .mbb-carousel__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10px * var(--mbb-scale, 1));
    width: 100%;
    max-width: min(calc(769px * var(--mbb-scale, 1)), 92vw);
    text-align: center;
  }
  .mbb-carousel--left .mbb-carousel__head {
    align-items: flex-start;
    text-align: start;
    margin-inline-end: auto;
  }
  .mbb-carousel__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.25;
    color: var(--mbb-carousel-heading-color, #44362b);
  }
  .mbb-carousel__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    line-height: 1.313;
    color: var(--mbb-carousel-heading-color, #44362b);
  }
  .mbb-carousel__subheading,
  .mbb-carousel__subheading p {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.25;
    color: var(--mbb-carousel-body-color, #909090);
  }

  /* Frame 44 — card row */
  .mbb-carousel__grid {
    max-width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(var(--mbb-carousel-cols-m, 2), minmax(0, 1fr));
    gap: calc(var(--mbb-carousel-card-gap, 20px) * var(--mbb-scale, 1));
    width: 100%;
  }

  /* Frame 190 */
  .mbb-carousel__cta {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: calc(10px * var(--mbb-scale, 1));
    min-width: calc(146px * var(--mbb-scale, 1));
    padding: 12px clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    border: 1px solid var(--mbb-carousel-cta-border, #c3116a);
    border-radius: 8px;
    color: var(--mbb-carousel-cta-fg, #c3116a);
    text-decoration: none;
    transition: background-color 0.2s ease;
  }
  .mbb-carousel__cta:hover {
    background: rgb(195 17 106 / 6%);
  }
  .mbb-carousel__cta-label {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.214;
    text-align: center;
    color: currentcolor;
  }
  .mbb-carousel__cta-arrow {
    width: calc(21px * var(--mbb-scale, 1));
    height: calc(12px * var(--mbb-scale, 1));
    flex: none;
  }

  /* ---------- mobile scroller : cards 278.09 wide, 16.91 gutter ---------- */
  @media screen and (max-width: 749px) {
    .mbb-carousel--scroll-mobile .mbb-carousel__grid {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: calc(16.91px * var(--mbb-scale, 1));

      /* bleed past the page margin so cards run off the right edge, as in Figma. All three
         numbers are the same rail and have to stay one value — mixing a flat 20 with a
         scaled 20 left the trailing gutter and the bleed disagreeing by up to 5px. */
      width: calc(100% + var(--mbb-gutter, 20px));
      margin-inline-end: calc(-1 * var(--mbb-gutter, 20px));
      padding-inline-end: var(--mbb-gutter, 20px);
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .mbb-carousel--scroll-mobile .mbb-carousel__grid::-webkit-scrollbar {
      display: none;
    }
    .mbb-carousel--scroll-mobile .mbb-carousel__grid > * {
      flex: 0 0 278.09px;
      max-width: 278.09px;
      scroll-snap-align: start;
    }
  }

  /* ---------- desktop : Figma 1920 frame ---------- */
  @media screen and (min-width: 750px) {
    .mbb-carousel {
      gap: calc(var(--mbb-carousel-gap, 50px) * var(--mbb-scale, 1));
    }
    .mbb-carousel__head {
      gap: 4px;
    }
    .mbb-carousel__eyebrow,
    .mbb-carousel__subheading,
    .mbb-carousel__subheading p {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-carousel__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }

    /* 1760 container · 4 tracks capped at 412 · space-between → 37.33px gutters, exactly Figma */
    .mbb-carousel__grid {
      grid-template-columns: repeat(var(--mbb-carousel-cols, 4), minmax(0, var(--mbb-carousel-card-max, 412px)));
      justify-content: space-between;
    }

    .mbb-carousel__cta {
      min-width: calc(186px * var(--mbb-scale, 1));
      padding: 15px clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    }
    .mbb-carousel__cta-label {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.222;
    }
  }
/* END_SECTION:mbb-product-carousel */

/* START_SECTION:mbb-product-gallery (INDEX:43) */
/* ---------------------------------------------------------------------------
     Two-column product page. mbb-product-gallery and mbb-product-buybox each add
     a class to their own .shopify-section wrapper, so <main> can lay them out as
     a row without either section knowing about the other. Everything else on the
     page keeps spanning the full width.
     --------------------------------------------------------------------------- */
  @media screen and (min-width: 990px) {
    /* Figma "Product Page - Brown Butters" 1920 wide:
         Product Catelogs   x  80 → 894  (814)
         gutter                894 → 956  ( 62)
         Product Description   956 → 1656 (700)
         slack                1656 → 1840 (184)
       Everything below the fold sits inside the same 80…1840 (1760) content band, so the
       four tracks are expressed as fractions of that band — 814/1760, 62/1760, 700/1760,
       184/1760 — and stay exact at any desktop width instead of only at 1920. */
    main.content-for-layout:has(> .mbb-pdp-col--media) {
      /*
        The band is the design's 1760 (80…1840 at 1920), NOT Horizon's --page-content-width.
        This store runs `page-width-narrow`, so that variable is 1440 — it squeezed the whole
        product block into 1290px while the type stayed at its 1920 sizes. Nothing was
        literally scaled up, but every element was too big for the column it sat in, which is
        what made the page read as zoomed in: the 48px title wrapped to two lines in a 573px
        column the design gives 700px.

        91.67vw is 1760 at 1920, and the --mbb-scale term keeps the band proportional below
        that, matching how every other MBB section caps its content width.
      */
      --mbb-pdp-band: min(calc(1760px * var(--mbb-scale, 1)), 91.67vw);
      --mbb-pdp-inset: max(var(--page-margin, 16px), calc((100vw - var(--mbb-pdp-band)) / 2));

      display: grid;
      grid-template-columns:
        [mbb-pdp-full-start] var(--mbb-pdp-inset)
        [mbb-pdp-media-start] minmax(0, 46.2500fr)
        [mbb-pdp-media-end] minmax(0, 3.5227fr)
        [mbb-pdp-info-start] minmax(0, 39.7727fr)
        [mbb-pdp-info-end] minmax(0, 10.4546fr)
        var(--mbb-pdp-inset) [mbb-pdp-full-end];
    }

    main.content-for-layout:has(> .mbb-pdp-col--media) > * {
      grid-column: mbb-pdp-full-start / mbb-pdp-full-end;
      min-width: 0;
    }

    main.content-for-layout:has(> .mbb-pdp-col--media) > .mbb-pdp-col--media {
      grid-column: mbb-pdp-media-start / mbb-pdp-media-end;
    }

    main.content-for-layout:has(> .mbb-pdp-col--media) > .mbb-pdp-col--info {
      grid-column: mbb-pdp-info-start / mbb-pdp-info-end;
    }
  }

  .mbb-pgal {
    --mbb-pgal-inset: max(var(--page-margin, 16px), calc((100vw - var(--page-content-width, 1400px)) / 2));

    display: flex;
    flex-direction: column;
    gap: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    box-sizing: border-box;
    width: 100%;
    padding-inline: calc(var(--page-margin, 16px) * var(--mbb-scale, 1));
    color: #44362b;
  }

  .mbb-pgal--center {
    text-align: center;
  }

  @media screen and (min-width: 990px) {
    /* The <main> grid above already owns the page margin and the gutter to the buy
       column, so the gallery itself runs edge to edge inside its own track. */
    .mbb-pdp-col--media .mbb-pgal {
      padding-inline: 0;
    }

    /* The section wrapper stretches to the row height, so the gallery can ride the
       scroll while the taller buy column moves past it. */
    .mbb-pdp-col--media .mbb-pgal--sticky {
      position: sticky;
      inset-block-start: calc(var(--mbb-pgal-sticky-top, 24px) * var(--mbb-scale, 1));
    }
  }

  .mbb-pgal__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mbb-pgal__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.667;
  }

  .mbb-pgal__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    line-height: 1.313;
  }

  .mbb-pgal__subheading {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.667;
    color: #908882;
  }

  /* Frame 33 + Frame 35 */
  .mbb-pgal__layout {
    display: grid;
    grid-template-columns: var(--mbb-pgal-rail, 131px) minmax(0, 1fr);
    gap: calc(var(--mbb-pgal-gap, 23px) * var(--mbb-scale, 1));
    align-items: start;
    width: 100%;
  }

  .mbb-pgal__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: calc(10px * var(--mbb-scale, 1));
    min-height: 0;
  }

  /* Frame 161 / Frame 175 */
  .mbb-pgal .mbb-pgal__arrow {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(50px * var(--mbb-scale, 1));
    height: calc(50px * var(--mbb-scale, 1));
    padding: 0;
    background: #ffffff;
    border: 1px solid currentcolor;
    border-radius: 50%;
    color: #44362b;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
  }

  .mbb-pgal .mbb-pgal__arrow:hover {
    background: #fff1fa;
  }

  .mbb-pgal .mbb-pgal__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .mbb-pgal__chevron {
    width: calc(16px * var(--mbb-scale, 1));
    height: calc(8px * var(--mbb-scale, 1));
  }

  .mbb-pgal__arrow--down .mbb-pgal__chevron {
    rotate: 180deg;
  }

  .mbb-pgal__thumbs {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--mbb-scale, 1));
    width: 100%;
    max-height: calc(var(--mbb-pgal-rail, 131px) * 4 + 24px);
    overflow-y: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }

  .mbb-pgal__thumbs::-webkit-scrollbar {
    display: none;
  }

  /* Frame 36..39 */
  .mbb-pgal .mbb-pgal__thumb {
    flex: none;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    background: var(--mbb-pgal-media-bg, #efefef);
    border: 1px solid transparent;
    border-radius: calc(var(--mbb-pgal-radius, 13px) * 0.75);
    cursor: default;
    transition: border-color 0.2s ease, opacity 0.2s ease;
  }

  .mbb-pgal[data-enhanced='true'] .mbb-pgal__thumb {
    cursor: pointer;
  }

  .mbb-pgal .mbb-pgal__thumb.is-active {
    border-color: #44362b;
  }

  .mbb-pgal .mbb-pgal__thumb:hover {
    border-color: #c3116a;
  }

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

  /* Frame 35 */
  .mbb-pgal__stage {
    position: relative;
    border-radius: var(--mbb-pgal-radius, 13px);
    background: var(--mbb-pgal-media-bg, #efefef);
    overflow: hidden;
  }

  .mbb-pgal__track {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mbb-pgal__track::-webkit-scrollbar {
    display: none;
  }

  .mbb-pgal__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    aspect-ratio: var(--mbb-pgal-ratio, 1);
  }

  .mbb-pgal .mbb-pgal__zoom {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: zoom-in;
  }

  .mbb-pgal__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mbb-pgal__img--placeholder {
    background: var(--mbb-pgal-media-bg, #efefef);
  }

  /* Frame 194 — Bestseller flag. 140x35 inset 16 inside the 660 stage, so both the inset
     and the type track the viewport instead of only being right at 1920. */
  .mbb-pgal__flag {
    position: absolute;
    inset-block-start: 2.4242%;
    inset-inline-start: 2.4242%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.34em;
    min-height: clamp(24px, calc(35 / 1920 * 100vw), 30.8px);
    padding-inline: 0.61em;
    background: var(--mbb-pgal-flag-bg, #fff1f1);
    border-radius: 4px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, calc(18 / 1920 * 100vw), 15.84px);
    line-height: 1.22;
    color: var(--mbb-pgal-flag-fg, #c3116a);
    white-space: nowrap;
    pointer-events: none;
  }

  .mbb-pgal__flag-star {
    width: 1.167em;
    height: 1.167em;
    flex: none;
    color: var(--mbb-pgal-star, #f19f2d);
  }

  .mbb-pgal__seal {
    position: absolute;
    inset-block-start: 2.4242%;
    inset-inline-end: 2.4242%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(var(--mbb-pgal-seal-size, 104px), 15.7576%);
    aspect-ratio: 1;
    padding: 4%;
    border-radius: 50%;
    background: var(--mbb-pgal-seal-bg, #44362b);
    color: var(--mbb-pgal-seal-fg, #ffffff);
    overflow: hidden;
    pointer-events: none;
  }

  .mbb-pgal__seal-text {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-size: clamp(10px, calc(16 / 1920 * 100vw), 14.08px);
    line-height: 1.19;
    text-align: center;
    text-wrap: balance;
  }

  .mbb-pgal__seal-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .mbb-pgal__cta {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #c3116a;
  }

  /* Lightbox */
  .mbb-pgal__lightbox {
    width: min(92vw, 1100px);
    max-width: none;
    max-height: 92dvh;
    padding: 0;
    border: 0;
    border-radius: var(--mbb-pgal-radius, 13px);
    background: #ffffff;
    color: #44362b;
    overflow: visible;
  }

  .mbb-pgal__lightbox::backdrop {
    background: rgb(68 54 43 / 72%);
  }

  .mbb-pgal__lightbox-inner {
    position: relative;
  }

  .mbb-pgal__lightbox-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 84dvh;
    object-fit: contain;
    border-radius: var(--mbb-pgal-radius, 13px);
    background: var(--mbb-pgal-media-bg, #efefef);
  }

  .mbb-pgal__lightbox-counter {
    margin: 0;
    padding: calc(10px * var(--mbb-scale, 1)) 0;
    text-align: center;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
  }

  .mbb-pgal .mbb-pgal__lightbox-nav,
  .mbb-pgal .mbb-pgal__lightbox-close {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(44px * var(--mbb-scale, 1));
    height: calc(44px * var(--mbb-scale, 1));
    padding: 0;
    background: #ffffff;
    border: 1px solid #44362b;
    border-radius: 50%;
    color: #44362b;
    cursor: pointer;
  }

  .mbb-pgal .mbb-pgal__lightbox-nav svg {
    width: calc(16px * var(--mbb-scale, 1));
    height: calc(8px * var(--mbb-scale, 1));
  }

  .mbb-pgal .mbb-pgal__lightbox-close svg {
    width: calc(14px * var(--mbb-scale, 1));
    height: calc(14px * var(--mbb-scale, 1));
  }

  .mbb-pgal .mbb-pgal__lightbox-nav--prev {
    inset-block-start: 50%;
    inset-inline-start: calc(12px * var(--mbb-scale, 1));
    translate: 0 -50%;
    rotate: 270deg;
  }

  .mbb-pgal .mbb-pgal__lightbox-nav--next {
    inset-block-start: 50%;
    inset-inline-end: calc(12px * var(--mbb-scale, 1));
    translate: 0 -50%;
    rotate: 90deg;
  }

  .mbb-pgal .mbb-pgal__lightbox-close {
    inset-block-start: calc(12px * var(--mbb-scale, 1));
    inset-inline-end: calc(12px * var(--mbb-scale, 1));
  }

  @media (prefers-reduced-motion: reduce) {
    .mbb-pgal__track,
    .mbb-pgal__thumbs {
      scroll-behavior: auto;
    }
  }

  /* Desktop — Figma 1920 frame. Kept below the base rules so it wins on source order. */
  @media screen and (min-width: 990px) {
    /* Frame 33 / Frame 35 keep their 131 : 23 : 660 split of the 814 wide column, and the
       rail stretches to the stage height (both are 660) so the arrows sit on the stage's
       top and bottom edges. */
    .mbb-pgal__layout {
      grid-template-columns: minmax(0, var(--mbb-pgal-rail-pct, 16.0934%)) minmax(0, 1fr);
      column-gap: var(--mbb-pgal-gap-pct, 2.8256%);
      row-gap: 0;
      align-items: start;
    }

    .mbb-pgal__rail {
      aspect-ratio: var(--mbb-pgal-rail-aspect, 16.0934 / 81.081);
      gap: 4px;
    }

    .mbb-pgal__thumbs {
      flex: 1 1 auto;
      max-height: none;
      min-height: 0;
      gap: 6px;
    }

    /* Four thumbnails fill the rail exactly, as in Frame 33; a fifth and beyond scroll.
       The cap only bites once four are present, so a two-image product keeps squares. */
    .mbb-pgal .mbb-pgal__thumb {
      max-height: calc((100% - 18px) / 4);
    }

    /* Frame 161 / Frame 175 are 50 of the rail's 131 — 38.2%. */
    .mbb-pgal .mbb-pgal__arrow {
      width: min(50px, 38.2%);
      height: auto;
      aspect-ratio: 1;
    }

    .mbb-pgal__chevron {
      width: 32%;
      height: auto;
      aspect-ratio: 2;
    }
  }

  /* Mobile — "Group 300" 380x308: same rail, scaled down. */
  @media screen and (max-width: 989px) {
    .mbb-pgal__layout {
      grid-template-columns: 61px minmax(0, 1fr);
      gap: calc(11px * var(--mbb-scale, 1));
    }

    .mbb-pgal .mbb-pgal__arrow {
      width: calc(34px * var(--mbb-scale, 1));
      height: calc(34px * var(--mbb-scale, 1));
    }

    .mbb-pgal__chevron {
      width: calc(11px * var(--mbb-scale, 1));
      height: 6px;
    }

    .mbb-pgal__thumbs {
      max-height: calc(61px * 4 + 24px);
    }

    .mbb-pgal__flag {
      min-height: calc(26px * var(--mbb-scale, 1));
      padding: calc(4px * var(--mbb-scale, 1)) calc(8px * var(--mbb-scale, 1));
      font-size: 13px;
      gap: 4px;
    }

    .mbb-pgal__flag-star {
      width: calc(15px * var(--mbb-scale, 1));
      height: calc(15px * var(--mbb-scale, 1));
    }

    .mbb-pgal__seal {
      width: calc(var(--mbb-pgal-seal-size, 104px) * 0.62);
      height: calc(var(--mbb-pgal-seal-size, 104px) * 0.62);
      padding: 6px;
    }

    .mbb-pgal__seal-text {
      font-size: 11px;
      line-height: 13px;
    }

    /* Optional: drop the rail under the stage instead of beside it. */
    .mbb-pgal--thumbs-below .mbb-pgal__layout {
      grid-template-columns: minmax(0, 1fr);
      gap: calc(12px * var(--mbb-scale, 1));
    }

    .mbb-pgal--thumbs-below .mbb-pgal__rail {
      order: 2;
      flex-direction: row;
    }

    .mbb-pgal--thumbs-below .mbb-pgal__thumbs {
      flex-direction: row;
      max-height: none;
      overflow-x: auto;
      overflow-y: hidden;
    }

    .mbb-pgal--thumbs-below .mbb-pgal__thumb {
      width: calc(74px * var(--mbb-scale, 1));
    }

    .mbb-pgal--thumbs-below .mbb-pgal__arrow--up .mbb-pgal__chevron {
      rotate: 270deg;
    }

    .mbb-pgal--thumbs-below .mbb-pgal__arrow--down .mbb-pgal__chevron {
      rotate: 90deg;
    }
  }
/* END_SECTION:mbb-product-gallery */

/* START_SECTION:mbb-promise-grid (INDEX:44) */
.mbb-promise {
    --mbb-promise-icon-bg: rgb(from currentColor r g b / 8%);
    --mbb-promise-item-bg: transparent;
  }

  .mbb-promise__head {
    margin-block-end: 2.5rem;
  }

  .mbb-promise__align--center {
    text-align: center;
  }

  .mbb-promise__align--left {
    text-align: left;
  }

  .mbb-promise__eyebrow {
    font-family: var(--font-subheading--family);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 0 0 0.625rem;
    opacity: 0.85;
  }

  .mbb-promise__heading {
    font-family: var(--font-heading--family);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.1;
    margin: 0;
  }

  .mbb-promise__subheading {
    margin-block-start: 0.75rem;
    max-width: 62ch;
  }

  .mbb-promise__align--center .mbb-promise__subheading {
    margin-inline: auto;
  }

  @media screen and (min-width: 750px) {
    .mbb-promise__eyebrow {
      font-size: 1.125rem;
      line-height: 30px;
      margin-block-end: 0.25rem;
    }
  }

  /* Grid */
  .mbb-promise__grid {
    display: grid;
    grid-template-columns: repeat(var(--mbb-promise-cols-mobile), minmax(0, 1fr));
    column-gap: calc(var(--mbb-promise-gap) * var(--mbb-scale, 1));
    row-gap: calc(var(--mbb-promise-row-gap) * var(--mbb-scale, 1));
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media screen and (min-width: 750px) {
    .mbb-promise__grid {
      grid-template-columns: repeat(var(--mbb-promise-cols), minmax(0, 1fr));
    }
  }

  /* Horizontal scroll on small screens */
  .mbb-promise--scroll-mobile .mbb-promise__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mbb-promise--scroll-mobile .mbb-promise__grid::-webkit-scrollbar {
    display: none;
  }

  .mbb-promise--scroll-mobile .mbb-promise__item {
    flex: 0 0
      calc(
        (100% - (var(--mbb-promise-cols-mobile) - 1) * var(--mbb-promise-gap)) / var(--mbb-promise-cols-mobile)
      );
    scroll-snap-align: start;
  }

  @media screen and (min-width: 750px) {
    .mbb-promise--scroll-mobile .mbb-promise__grid {
      display: grid;
      overflow: visible;
    }
  }

  /* Sticky card stack — Figma comment on the mobile product page:
     "on scrolling down, other one will overlap on previous one."
     Each card pins a little lower than the one before it, so the next card rides
     over the previous instead of pushing it away. Cards need an opaque backdrop
     for the overlap to read, hence --mbb-promise-stack-bg. Mobile only: the
     desktop layout is a real multi-column grid and must not be disturbed. */
  @media screen and (max-width: 749px) {
    .mbb-promise--stack-mobile .mbb-promise__grid {
      display: block;
      /* Sticky dies inside a clipping ancestor — beats the carousel variant if both are on. */
      overflow: visible;
      /* Tail room so the last card can reach its pinned position. */
      padding-block-end: calc(var(--mbb-promise-stack-step) * 2);
    }

    .mbb-promise--stack-mobile .mbb-promise__item {
      position: sticky;
      top: calc(
        (var(--mbb-promise-stack-top) + var(--mbb-promise-i, 0) * var(--mbb-promise-stack-step)) *
          var(--mbb-scale, 1)
      );
      /* Later cards paint over earlier ones. */
      z-index: calc(var(--mbb-promise-i, 0) + 1);
      background-color: var(--mbb-promise-stack-bg, var(--mbb-promise-item-bg, #fff9f4));
      border-radius: var(--mbb-promise-item-radius);
      padding: calc(var(--mbb-promise-item-padding) * var(--mbb-scale, 1));
      margin-block-end: calc(var(--mbb-promise-row-gap) * var(--mbb-scale, 1));
    }

    .mbb-promise--stack-mobile .mbb-promise__item:last-child {
      margin-block-end: 0;
    }

    /* A scroll-driven settle on the outgoing card, where the browser supports it.
       Purely additive — without it the stack still works, just without the dip. */
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        .mbb-promise--stack-mobile .mbb-promise__item {
          animation: mbb-promise-settle linear both;
          animation-timeline: view();
          animation-range: exit 20% exit 100%;
        }
      }
    }
  }

  @keyframes mbb-promise-settle {
    to {
      scale: 0.94;
      filter: brightness(0.94);
    }
  }

  /* Item */
  .mbb-promise__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--mbb-promise-icon-gap) * var(--mbb-scale, 1));
    background-color: var(--mbb-promise-item-bg);
    border-radius: var(--mbb-promise-item-radius);
    min-width: 0;
  }

  .mbb-promise__item--filled {
    padding: calc(var(--mbb-promise-item-padding) * var(--mbb-scale, 1));
  }

  .mbb-promise__align--left .mbb-promise__item {
    align-items: flex-start;
  }

  .mbb-promise--icon-beside-text .mbb-promise__item {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .mbb-promise--icon-beside-text .mbb-promise__text {
    flex: 1 1 auto;
    text-align: left;
  }

  /* Media */
  .mbb-promise__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, var(--mbb-promise-icon-size));
    aspect-ratio: 1;
    flex: 0 0 auto;
    border-radius: var(--mbb-promise-icon-radius);
    background-color: var(--mbb-promise-icon-bg);
    overflow: hidden;
    color: var(--mbb-promise-icon-color, inherit);
  }

  .mbb-promise--icon-beside-text .mbb-promise__media {
    width: calc(var(--mbb-promise-icon-size) * var(--mbb-scale, 1));
    max-width: 40%;
  }

  .mbb-promise__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .mbb-promise__item:hover .mbb-promise__img {
    transform: scale(1.04);
  }

  .mbb-promise__icon {
    width: 45%;
    height: 45%;
    fill: currentcolor;
  }

  /* Text */
  .mbb-promise__text {
    min-width: 0;
  }

  .mbb-promise__title {
    font-family: var(--font-heading--family);
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0;
    color: var(--mbb-promise-title-color, inherit);
  }

  .mbb-promise__description {
    margin-block-start: 0.5rem;
    font-size: var(--font-size--sm, 1rem);
    line-height: 1.6;
    opacity: 0.85;
  }

  .mbb-promise__description > :first-child {
    margin-block-start: 0;
  }

  .mbb-promise__description > :last-child {
    margin-block-end: 0;
  }

  .mbb-promise__link {
    display: inline-block;
    margin-block-start: 0.5rem;
    font-family: var(--font-subheading--family);
    font-size: var(--font-size--sm, 0.875rem);
    letter-spacing: 0.06em;
  }

  .mbb-promise__cta {
    margin-block-start: 2.5rem;
  }
/* END_SECTION:mbb-promise-grid */

/* START_SECTION:mbb-promo-banner (INDEX:45) */
/* Offer Banner — 1920x707, pink -> lavender gradient */
  .mbb-promo__panel {
    position: relative;
    overflow: hidden;
    display: grid;
    width: 100%;
    min-height: calc(var(--mbb-promo-min-h-m, 560px) * var(--mbb-scale, 1));
    background-color: var(--mbb-promo-start, #fdebe9);
    background-image: linear-gradient(
      180deg,
      var(--mbb-promo-start, #fdebe9) 0%,
      var(--mbb-promo-end, #e5bee6) 100%
    );
  }

  .mbb-promo__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
  }

  /* Text column — content is centre-set inside its own column in the Figma */
  .mbb-promo__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px) clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px) clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
  }
  .mbb-promo--left .mbb-promo__content {
    align-items: flex-start;
    text-align: left;
  }

  /* Kicker — "More treats." ♥ "More care." between two hairlines */
  .mbb-promo__kicker {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--mbb-scale, 1));
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.333;
    color: var(--mbb-promo-kicker-color, #4b5157);
  }
  .mbb-promo__rule {
    display: block;
    flex: none;
    width: calc(34px * var(--mbb-scale, 1));
    height: 2px;
    background-color: var(--mbb-promo-rule-color, #eaa2b5);
  }
  .mbb-promo__heart {
    flex: none;
    width: calc(17px * var(--mbb-scale, 1));
    height: calc(16px * var(--mbb-scale, 1));
    color: var(--mbb-promo-heart-color, #c73064);
  }

  /* BUY 2 / GET 2 — 180px EB Garamond in a 148px line box */
  .mbb-promo__display {
    display: flex;
    flex-direction: column;
    margin: 14px 0 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: calc(var(--mbb-promo-display-m, 72px) * var(--mbb-scale, 1));
    line-height: 0.788;
  }
  .mbb-promo__line--1 {
    color: var(--mbb-promo-line-1-color, #5d2776);
  }
  .mbb-promo__line--2 {
    color: var(--mbb-promo-line-2-color, #c53062);
  }

  /* Supporting ribbon — V-notched banderole */
  .mbb-promo__support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--mbb-scale, 1));
    margin-block-start: calc(14px * var(--mbb-scale, 1));
    min-height: calc(40px * var(--mbb-scale, 1));
    padding: 6px clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    background-color: var(--mbb-promo-support-bg, #8d61a3);
    color: var(--mbb-promo-support-color, #ffffff);
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(13.59px + 3.41px * var(--mbb-fl, 0)), 0.885vw, 14.95px);
    line-height: 1.294;
  }
  .mbb-promo__support-text > * {
    margin: 0;
  }
  .mbb-promo__support-heart {
    flex: none;
    width: calc(17px * var(--mbb-scale, 1));
    height: calc(16px * var(--mbb-scale, 1));
  }

  /* Comprar pill */
  .mbb-promo__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--mbb-scale, 1));
    margin-block-start: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    padding: 12px clamp(calc(24.01px + 5.99px * var(--mbb-fl, 0)), 1.563vw, 26.41px);
    border-radius: 100px;
    background-color: var(--mbb-promo-cta-bg, #c23262);
    color: var(--mbb-promo-cta-color, #ffffff);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    line-height: 1.25;
    text-decoration: none;
    transition: filter 0.2s ease;
  }
  .mbb-promo__cta:hover {
    filter: brightness(0.92);
  }
  .mbb-promo__arrow {
    flex: none;
    width: calc(22px * var(--mbb-scale, 1));
    height: calc(9px * var(--mbb-scale, 1));
  }

  /* Product photography */
  .mbb-promo__media {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: calc(220px * var(--mbb-scale, 1));
  }
  /*
    A single banner stays in normal flow, so the section still takes its height from the
    artwork. Only a rota needs stacking, and then the first slide keeps the flow (position
    relative) while the rest are absolutely positioned over it — otherwise every slide would
    be out of flow and the media box would collapse to nothing.
  */
  .mbb-promo__slide-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  .mbb-promo__media--rota {
    position: relative;
  }

  .mbb-promo__media--rota .mbb-promo__slide {
    transition: opacity 700ms ease;
  }

  .mbb-promo__media--rota .mbb-promo__slide:first-child {
    position: relative;
  }

  .mbb-promo__media--rota .mbb-promo__slide:not(:first-child) {
    position: absolute;
    inset: 0;
  }

  .mbb-promo__media--rota .mbb-promo__slide {
    opacity: 0;
    pointer-events: none;
  }

  .mbb-promo__media--rota .mbb-promo__slide.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .mbb-promo__media--rota .mbb-promo__slide {
      transition: none;
    }
  }

  .mbb-promo__picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .mbb-promo__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
  }
  .mbb-promo__img--placeholder {
    opacity: 0.6;
  }

  /* ── Flat-banner mode ──────────────────────────────────────────────────────
     The artwork already carries its own headline, CTA and badge, so there is no
     copy column to sit beside: the banner takes the full width at its native
     aspect. Without this the two-column grid squeezed it into 55vw, which cropped
     the products, clipped the badge and left a seam where the artwork's own pink
     met the section's lilac. Padding and min-height go too — the artwork's own
     margins are already baked in. */
  .mbb-promo--flat .mbb-promo__panel {
    min-height: 0;
    padding: 0;
    background: none;
  }

  .mbb-promo--flat .mbb-promo__inner {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .mbb-promo--flat .mbb-promo__media {
    display: block;
    min-height: 0;
  }

  .mbb-promo--flat .mbb-promo__img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  /* Circular "Made With Love" badge */
  /* On mobile the badge drops onto the photography rather than the type */
  .mbb-promo__badge {
    position: absolute;
    inset-block-end: calc(16px * var(--mbb-scale, 1));
    inset-inline-end: calc(16px * var(--mbb-scale, 1));
    width: min(var(--mbb-promo-badge-size, 198px), 28vw);
    height: min(var(--mbb-promo-badge-size, 198px), 28vw);
  }
  .mbb-promo__badge-text {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    letter-spacing: 0.5px;
  }
  .mbb-promo__badge-ring {
    transform-box: view-box;
    transform-origin: 50% 50%;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .mbb-promo__badge-ring {
      animation: mbb-promo-badge-spin 18s linear infinite;
    }
  }

  @keyframes mbb-promo-badge-spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  @media screen and (min-width: 750px) {
    .mbb-promo__panel {
      min-height: calc(var(--mbb-promo-min-h, 707px) * var(--mbb-scale, 1));
    }
    /* products start at page x 870 of 1920 */
    .mbb-promo__inner {
      grid-template-columns: 870fr 1050fr;
    }
    .mbb-promo__content {
      padding: clamp(calc(49.6px + 12.4px * var(--mbb-fl, 0)), 3.229vw, 54.56px) clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px) clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    }
    .mbb-promo__kicker {
      gap: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      font-size: clamp(calc(18.4px + 4.6px * var(--mbb-fl, 0)), 1.198vw, 20.24px);
      line-height: 1.217;
    }
    .mbb-promo__rule {
      width: calc(78px * var(--mbb-scale, 1));
    }
    .mbb-promo__heart,
    .mbb-promo__support-heart {
      width: calc(30px * var(--mbb-scale, 1));
      height: calc(28px * var(--mbb-scale, 1));
    }
    .mbb-promo__display {
      margin-block-start: clamp(calc(16.8px + 4.2px * var(--mbb-fl, 0)), 1.094vw, 18.48px);
      font-size: calc(var(--mbb-promo-display, 180px) * var(--mbb-scale, 1));
    }
    .mbb-promo__support {
      margin-block-start: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      gap: calc(12px * var(--mbb-scale, 1));
      min-height: calc(56px * var(--mbb-scale, 1));
      padding: 8px clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      clip-path: polygon(0 0, 100% 0, calc(100% - 29px) 50%, 100% 100%, 0 100%, 29px 50%);
      font-size: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
      line-height: 1.143;
    }
    .mbb-promo__cta {
      margin-block-start: clamp(calc(24.01px + 5.99px * var(--mbb-fl, 0)), 1.563vw, 26.41px);
      gap: calc(14px * var(--mbb-scale, 1));
      padding: 17px clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      font-size: clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
      line-height: 1.192;
    }
    .mbb-promo__arrow {
      width: calc(30px * var(--mbb-scale, 1));
      height: calc(12px * var(--mbb-scale, 1));
    }
    .mbb-promo__media {
      min-height: 0;
    }
    .mbb-promo__badge {
      inset-block-start: 8.9%;
      inset-block-end: auto;
      inset-inline-end: 9.32%;
      width: calc(var(--mbb-promo-badge-size, 198px) * var(--mbb-scale, 1));
      height: calc(var(--mbb-promo-badge-size, 198px) * var(--mbb-scale, 1));
    }
  }
/* END_SECTION:mbb-promo-banner */

/* START_SECTION:mbb-ratings-reviews (INDEX:46) */
.mbb-reviews {
    --mbb-rev-star-color: #fcbb3b;
    --mbb-rev-bar-color: #44362b;
    --mbb-rev-bar-track: #f0eae5;
    --mbb-rev-card-bg: rgb(from currentColor r g b / 4%);
    --mbb-rev-star-size: 1.5rem;
  }

  .mbb-reviews__head {
    margin-block-end: 2.5rem;
  }

  .mbb-reviews__align--center {
    text-align: center;
  }

  .mbb-reviews__align--left {
    text-align: left;
  }

  .mbb-reviews__eyebrow {
    font-family: var(--font-subheading--family);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 0 0 0.625rem;
    opacity: 0.85;
  }

  .mbb-reviews__heading {
    font-family: var(--font-heading--family);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.1;
    margin: 0;
  }

  .mbb-reviews__subheading {
    margin-block-start: 0.75rem;
    max-width: 62ch;
  }

  .mbb-reviews__align--center .mbb-reviews__subheading {
    margin-inline: auto;
  }

  @media screen and (min-width: 750px) {
    .mbb-reviews__eyebrow {
      font-size: 1.125rem;
      line-height: 30px;
      margin-block-end: 0.25rem;
    }
  }

  /* Stars */
  .mbb-reviews__stars {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 0;
  }

  .mbb-reviews__stars-track,
  .mbb-reviews__stars-fill {
    display: inline-flex;
    gap: 0.0625rem;
  }

  .mbb-reviews__stars-track {
    color: var(--mbb-rev-bar-track);
  }

  .mbb-reviews__stars-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--mbb-rev-fill, 100%);
    overflow: hidden;
    color: var(--mbb-rev-star-color);
  }

  .mbb-reviews__star {
    width: var(--mbb-rev-star-size);
    height: var(--mbb-rev-star-size);
    flex: 0 0 auto;
    fill: currentcolor;
  }

  .mbb-reviews__stars--lg {
    --mbb-rev-star-size: 2.0625rem;
  }

  @media screen and (min-width: 750px) {
    .mbb-reviews__stars--lg {
      --mbb-rev-star-size: 3.0625rem;
    }
  }

  /* Summary */
  .mbb-reviews__summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.125rem;
  }

  @media screen and (min-width: 750px) {
    .mbb-reviews__summary {
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 2.125rem;
    }

    .mbb-reviews__summary:has(.mbb-reviews__histogram):has(.mbb-reviews__aggregate) .mbb-reviews__aggregate {
      border-inline-end: 1px solid var(--color-border, rgb(from currentColor r g b / 15%));
      padding-inline-end: 2.125rem;
    }
  }

  .mbb-reviews__aggregate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    flex: 0 0 auto;
  }

  .mbb-reviews__score {
    font-family: var(--font-subheading--family);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .mbb-reviews__score {
      font-size: 3.125rem;
    }
  }

  .mbb-reviews__count {
    margin: 0;
    font-size: var(--font-size--sm, 0.875rem);
    opacity: 0.7;
  }

  /* Histogram */
  .mbb-reviews__histogram {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 44rem;
  }

  .mbb-reviews__hist-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .mbb-reviews__hist-label,
  .mbb-reviews__hist-value {
    font-family: var(--font-subheading--family);
    font-weight: 700;
    font-size: var(--font-size--sm, 0.875rem);
    line-height: 1.4;
    flex: 0 0 auto;
  }

  .mbb-reviews__hist-value {
    min-width: 2.75rem;
    text-align: end;
  }

  .mbb-reviews__stars--single {
    --mbb-rev-star-size: 1.0625rem;
  }

  @media screen and (min-width: 750px) {
    .mbb-reviews__hist-label,
    .mbb-reviews__hist-value {
      font-size: 1.125rem;
      line-height: 30px;
    }

    .mbb-reviews__stars--single {
      --mbb-rev-star-size: 1.5rem;
    }
  }

  .mbb-reviews__bar {
    flex: 1 1 auto;
    height: calc(var(--mbb-rev-bar-height) * var(--mbb-scale, 1));
    border-radius: calc(var(--mbb-rev-bar-height) / 2);
    background-color: var(--mbb-rev-bar-track);
    overflow: hidden;
  }

  .mbb-reviews__bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--mbb-rev-bar-color);
  }

  /* Review cards */
  .mbb-reviews__list {
    display: grid;
    grid-template-columns: repeat(var(--mbb-rev-cols-mobile), minmax(0, 1fr));
    gap: calc(var(--mbb-rev-gap) * var(--mbb-scale, 1));
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
  }

  @media screen and (min-width: 750px) {
    .mbb-reviews__list {
      grid-template-columns: repeat(var(--mbb-rev-cols), minmax(0, 1fr));
    }
  }

  .mbb-reviews--scroll-mobile .mbb-reviews__list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mbb-reviews--scroll-mobile .mbb-reviews__list::-webkit-scrollbar {
    display: none;
  }

  .mbb-reviews--scroll-mobile .mbb-reviews__card {
    flex: 0 0 calc((100% - (var(--mbb-rev-cols-mobile) - 1) * var(--mbb-rev-gap)) / var(--mbb-rev-cols-mobile));
    scroll-snap-align: start;
  }

  @media screen and (min-width: 750px) {
    .mbb-reviews--scroll-mobile .mbb-reviews__list {
      display: grid;
      overflow: visible;
    }
  }

  .mbb-reviews__card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: calc(var(--mbb-rev-card-padding) * var(--mbb-scale, 1));
    border-radius: var(--mbb-rev-card-radius);
    background-color: var(--mbb-rev-card-bg);
    min-width: 0;
  }

  .mbb-reviews__card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .mbb-reviews__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    min-width: 0;
  }

  .mbb-reviews__author {
    font-family: var(--font-heading--family);
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0;
  }

  .mbb-reviews__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 3px;
    background-color: var(--mbb-rev-verified-bg, #eeffe0);
    color: var(--mbb-rev-verified-color, #4d9000);
    font-family: var(--font-subheading--family);
    font-size: var(--font-size--sm, 0.875rem);
    font-weight: 600;
    line-height: 1.2;
  }

  .mbb-reviews__verified-icon {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentcolor;
    flex: 0 0 auto;
  }

  .mbb-reviews__date {
    margin: 0;
    font-size: var(--font-size--xs, 0.75rem);
    opacity: 0.6;
  }

  .mbb-reviews__card-title {
    font-family: var(--font-heading--family);
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0;
  }

  .mbb-reviews__body {
    line-height: 1.65;
  }

  .mbb-reviews__body > :first-child {
    margin-block-start: 0;
  }

  .mbb-reviews__body > :last-child {
    margin-block-end: 0;
  }

  .mbb-reviews__media {
    margin-block-start: auto;
  }

  /* The thumbnail links through to the product, so it needs to look clickable and carry the
     product's name — an 80px pack shot on its own is not a recognisable target. */
  .mbb-reviews__media-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: inherit;
  }

  .mbb-reviews__media-name {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.35;
    color: #44362b;
  }

  .mbb-reviews__media-link:hover .mbb-reviews__media-name {
    text-decoration: underline;
  }

  .mbb-reviews__photo {
    width: 4.25rem;
    height: 5.75rem;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    flex: none;
  }

  .mbb-reviews__cta {
    margin-block-start: 2.5rem;
  }
/* END_SECTION:mbb-ratings-reviews */

/* START_SECTION:mbb-reels (INDEX:47) */
/* ---------- Reels : mobile first (Group 296, Mobile_HomePage) ---------- */
  .mbb-reels {
    display: block;
    width: 100%;
    max-width: min(calc(var(--mbb-reels-max, 1760px) * var(--mbb-scale, 1)), 92vw);
    margin-inline: auto;
  }

  /*
    Reels 202:11227 is drawn at x=81 w=1760 of 1920 — the max-width above — and Group 296 at
    x=20 of 420. Neither showed: the guard in mbb-reveal.css was overriding the first (see
    the note there) and nothing implemented the second.

    On the phone the rail becomes padding, and the scroller is handed it back as
    padding-inline so the row still bleeds the full screen — Group 295 starts its first card
    on the rail and runs off the right edge, which is exactly that. width:auto is required
    for it: `width: 100%` resolves against the padded track and the negative margins would
    move the scrollport without widening it, ending the rail short of the right edge.
  */
  @media screen and (max-width: 749px) {
    .section.mbb-reels {
      max-width: none;
      padding-inline: var(--mbb-gutter, 20px);
    }

    .mbb-reels--scroll .mbb-reels__track {
      width: auto;
      margin-inline: calc(-1 * var(--mbb-gutter, 20px));
      padding-inline: var(--mbb-gutter, 20px);
      scroll-padding-inline: var(--mbb-gutter, 20px);
    }
  }

  .mbb-reels__head {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--mbb-scale, 1));
    max-width: min(calc(850px * var(--mbb-scale, 1)), 92vw);
    margin-block-end: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
  }
  .mbb-reels__head--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .mbb-reels__head--left {
    align-items: flex-start;
    text-align: left;
  }
  .mbb-reels__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.25;
    color: var(--mbb-reels-text, #44362b);
  }
  .mbb-reels__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    line-height: 1.313;
    color: var(--mbb-reels-text, #44362b);
  }
  .mbb-reels__subheading {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    color: var(--mbb-reels-text, #44362b);
  }
  .mbb-reels__subheading > * {
    margin: 0;
  }

  /* Frame 47 — track */
  .mbb-reels__track {
    display: grid;
    grid-template-columns: repeat(var(--mbb-reels-cols-m, 1), minmax(0, 1fr));
    gap: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    width: 100%;
  }
  .mbb-reels--scroll .mbb-reels__track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mbb-reels--scroll .mbb-reels__track::-webkit-scrollbar {
    display: none;
  }
  .mbb-reels--scroll .mbb-reels__item {
    flex: 0 0 255px;
    scroll-snap-align: start;
  }

  /* Frame 47 — card */
  .mbb-reels__item {
    display: flex;
    flex-direction: column;
    gap: calc(12.49px * var(--mbb-scale, 1));
    min-width: 0;
  }

  /* Frame 223 — the 9:16 video frame */
  .mbb-reels__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 326.63 / 580.67;
    background: var(--mbb-reels-media-bg, #bbbbbb);
    border-radius: 7.5808px;
    overflow: hidden;
  }
  .mbb-reels__media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
  }

  /* Frame 194 — rating chip */
  .mbb-reels__rating {
    position: absolute;
    inset-block-start: calc(11.37px * var(--mbb-scale, 1));
    inset-inline-start: calc(12.04px * var(--mbb-scale, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3.79px;
    min-width: calc(59.89px * var(--mbb-scale, 1));
    height: calc(26.53px * var(--mbb-scale, 1));
    padding-inline: 6px;
    background: var(--mbb-reels-chip-bg, #ffffff);
    border: 0.379px solid var(--mbb-reels-chip-bg, #ffffff);
    border-radius: 3.0323px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(calc(11.24px + 2.81px * var(--mbb-fl, 0)), 0.732vw, 12.37px);
    line-height: 1.21;
    color: var(--mbb-reels-text, #44362b);
  }
  .mbb-reels__rating svg {
    flex: none;
    width: calc(17.44px * var(--mbb-scale, 1));
    height: calc(17.44px * var(--mbb-scale, 1));
    color: var(--mbb-reels-star, #ef62a8);
  }

  /* Frame 191 — sound toggle */
  .mbb-reels__sound {
    position: absolute;
    inset-block-start: calc(11.37px * var(--mbb-scale, 1));
    inset-inline-end: calc(11.03px * var(--mbb-scale, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(38.53px * var(--mbb-scale, 1));
    height: calc(40.18px * var(--mbb-scale, 1));
    padding: 0;
    background: transparent;
    border: 1.3645px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
  }
  .mbb-reels__sound svg {
    width: calc(14.64px * var(--mbb-scale, 1));
    height: calc(13.51px * var(--mbb-scale, 1));
  }
  .mbb-reels__sound .mbb-reels__wave {
    display: none;
  }
  .mbb-reels__sound[aria-pressed='true'] .mbb-reels__wave {
    display: block;
  }
  .mbb-reels__sound[aria-pressed='true'] .mbb-reels__cross {
    display: none;
  }

  /* Frame 192 — shop button */
  .mbb-reels__shop {
    position: absolute;
    inset-block-end: calc(11.37px * var(--mbb-scale, 1));
    inset-inline-end: calc(11.03px * var(--mbb-scale, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(38.53px * var(--mbb-scale, 1));
    height: calc(40.18px * var(--mbb-scale, 1));
    background: var(--mbb-reels-shop-bg, #ffffff);
    border-radius: 50%;
    color: var(--mbb-reels-shop-icon, #44362b);
  }
  .mbb-reels__shop svg {
    width: calc(15.89px * var(--mbb-scale, 1));
    height: calc(21.98px * var(--mbb-scale, 1));
  }

  /* Frame 47 — attached product row */
  .mbb-reels__product {
    display: flex;
    align-items: flex-start;
    gap: calc(10.88px * var(--mbb-scale, 1));
    width: 100%;
    text-decoration: none;
    color: inherit;
  }
  .mbb-reels__thumb {
    flex: none;
    display: block;
    width: calc(47.62px * var(--mbb-scale, 1));
    height: calc(47.62px * var(--mbb-scale, 1));
    background: var(--mbb-reels-thumb-bg, #e4e4e4);
    border-radius: 3.1228px;
    overflow: hidden;
  }
  .mbb-reels__thumb img,
  .mbb-reels__thumb svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mbb-reels__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 5.52px;
    min-width: 0;
  }
  .mbb-reels__title {
    display: block;
    overflow: hidden;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.25;
    color: var(--mbb-reels-text, #44362b);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mbb-reels__prow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .mbb-reels__prices {
    display: flex;
    align-items: center;
    gap: 4.68px;
  }
  .mbb-reels__price {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(14.99px + 3.75px * var(--mbb-fl, 0)), 0.976vw, 16.49px);
    line-height: 1.281;
    color: var(--mbb-reels-text, #44362b);
  }
  .mbb-reels__compare {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(10.18px + 2.54px * var(--mbb-fl, 0)), 0.663vw, 11.2px);
    line-height: 1.336;
    color: var(--mbb-reels-compare, #c7c7c7);
    text-decoration-line: line-through;
    text-decoration-color: var(--mbb-reels-compare, #c7c7c7);
  }
  .mbb-reels__badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: calc(70px * var(--mbb-scale, 1));
    height: calc(21.43px * var(--mbb-scale, 1));
    background: var(--mbb-reels-badge-bg, #f7fff0);
    border: 0.3643px solid var(--mbb-reels-badge-border, #74c713);
    border-radius: 2.9142px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.25;
    color: var(--mbb-reels-badge-text, #4d9000);
    white-space: nowrap;
  }

  .mbb-reels__cta {
    display: flex;
    justify-content: center;
    margin-block-start: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
  }

  /* ---------- Desktop : the Figma "Reels" frame ---------- */
  @media screen and (min-width: 750px) {
    .mbb-reels__head {
      gap: 4px;
      margin-block-end: calc(var(--mbb-reels-gap, 50px) * var(--mbb-scale, 1));
    }
    .mbb-reels__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-reels__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }
    .mbb-reels__subheading {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }

    .mbb-reels__track,
    .mbb-reels--scroll .mbb-reels__track {
      display: grid;
      grid-template-columns: repeat(var(--mbb-reels-cols, 5), minmax(0, 1fr));
      gap: calc(var(--mbb-reels-card-gap, 43px) * var(--mbb-scale, 1));
      overflow: visible;
    }
    .mbb-reels--scroll .mbb-reels__item {
      flex: initial;
    }

    .mbb-reels__item {
      gap: calc(16px * var(--mbb-scale, 1));
    }
    .mbb-reels__frame {
      border-radius: 9.71018px;
    }

    .mbb-reels__rating {
      inset-block-start: calc(14.57px * var(--mbb-scale, 1));
      inset-inline-start: calc(15.42px * var(--mbb-scale, 1));
      gap: 4.86px;
      min-width: calc(76.71px * var(--mbb-scale, 1));
      height: calc(33.99px * var(--mbb-scale, 1));
      border-width: 0.485509px;
      border-radius: 3.88407px;
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.222;
    }
    .mbb-reels__rating svg {
      width: calc(22.33px * var(--mbb-scale, 1));
      height: calc(22.33px * var(--mbb-scale, 1));
    }

    .mbb-reels__sound {
      inset-block-start: calc(14.57px * var(--mbb-scale, 1));
      inset-inline-end: calc(14.13px * var(--mbb-scale, 1));
      width: calc(49.35px * var(--mbb-scale, 1));
      height: calc(51.46px * var(--mbb-scale, 1));
      border-width: 1.74783px;
    }
    .mbb-reels__sound svg {
      width: calc(18.75px * var(--mbb-scale, 1));
      height: calc(17.31px * var(--mbb-scale, 1));
    }

    .mbb-reels__shop {
      inset-block-end: calc(14.57px * var(--mbb-scale, 1));
      inset-inline-end: calc(14.13px * var(--mbb-scale, 1));
      width: calc(49.35px * var(--mbb-scale, 1));
      height: calc(51.46px * var(--mbb-scale, 1));
    }
    .mbb-reels__shop svg {
      width: calc(20.35px * var(--mbb-scale, 1));
      height: calc(28.16px * var(--mbb-scale, 1));
    }

    .mbb-reels__product {
      gap: calc(13.94px * var(--mbb-scale, 1));
    }
    .mbb-reels__thumb {
      width: calc(61px * var(--mbb-scale, 1));
      height: calc(61px * var(--mbb-scale, 1));
      border-radius: 4px;
    }
    .mbb-reels__info {
      gap: 6px;
    }
    .mbb-reels__title {
      font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
      line-height: 1.25;
    }
    .mbb-reels__prices {
      gap: 6px;
    }
    .mbb-reels__price {
      font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
      line-height: 1.292;
    }
    .mbb-reels__compare {
      font-size: clamp(calc(13.04px + 3.25px * var(--mbb-fl, 0)), 0.849vw, 14.34px);
      line-height: 1.289;
    }
    .mbb-reels__badge {
      min-width: calc(79.41px * var(--mbb-scale, 1));
      height: calc(24px * var(--mbb-scale, 1));
      border-width: 0.435501px;
      border-radius: 3.48401px;
      font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
      line-height: 1.214;
    }
    .mbb-reels__cta {
      margin-block-start: calc(var(--mbb-reels-gap, 50px) * var(--mbb-scale, 1));
    }
  }

  /* Five 326.63px columns need the full 1760px frame; step down before that. */
  @media screen and (min-width: 750px) and (max-width: 1199px) {
    .mbb-reels__track,
    .mbb-reels--scroll .mbb-reels__track {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .mbb-reels__heading {
      font-size: 36px;
      line-height: 47px;
    }
  }
/* END_SECTION:mbb-reels */

/* START_SECTION:mbb-rich-text (INDEX:48) */
.mbb-rich {
    justify-items: center;
  }

  .mbb-rich__inner {
    width: 100%;
    max-width: min(calc(var(--mbb-rich-width, 760px) * var(--mbb-scale, 1)), 92vw);
    margin-inline: auto;
  }

  .mbb-rich--center .mbb-rich__inner {
    text-align: center;
  }

  /* Frame 48 — eyebrow + heading, gap 4 */
  .mbb-rich__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-block-end: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
  }

  .mbb-rich--center .mbb-rich__head {
    align-items: center;
  }

  .mbb-rich__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    letter-spacing: 0.08em;
    color: var(--mbb-rich-heading, #44362b);
  }

  .mbb-rich__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    line-height: 1.286;
    color: var(--mbb-rich-heading, #44362b);
    text-wrap: balance;
  }

  .mbb-rich__subheading {
    margin-block-start: calc(10px * var(--mbb-scale, 1));
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.733;
    color: var(--mbb-rich-muted, #909090);
  }

  .mbb-rich__subheading > :first-child {
    margin-block-start: 0;
  }

  .mbb-rich__subheading > :last-child {
    margin-block-end: 0;
  }

  /* Table of contents */
  .mbb-rich__toc {
    margin-block-end: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    padding: clamp(calc(17.6px + 4.4px * var(--mbb-fl, 0)), 1.146vw, 19.36px) clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    border-radius: var(--mbb-rich-radius, 10px);
    background: var(--mbb-rich-tint, #fff8f8);
    text-align: start;
  }

  .mbb-rich__toc-title {
    margin: 0 0 12px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.538;
    letter-spacing: 0.1em;
    color: var(--mbb-rich-heading, #44362b);
  }

  .mbb-rich__toc-list {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--mbb-scale, 1));
    margin: 0;
    padding-inline-start: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: 1.6;
    color: var(--mbb-rich-muted, #909090);
  }

  .mbb-rich__toc-link {
    color: var(--mbb-rich-body, #44362b);
    text-decoration: none;
  }

  .mbb-rich__toc-link:hover {
    color: var(--mbb-rich-accent, #c3116a);
    text-decoration: underline;
  }

  /* The typeset column */
  .mbb-rich__body {
    display: block;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    line-height: var(--mbb-rich-lh, 1.67);
    color: var(--mbb-rich-body, #44362b);
    text-align: start;
    overflow-wrap: break-word;
  }

  .mbb-rich--center .mbb-rich__body {
    text-align: center;
  }

  .mbb-rich__body p,
  .mbb-rich__body ul,
  .mbb-rich__body ol,
  .mbb-rich__body dl,
  .mbb-rich__body pre {
    margin-block: 0 1.25em;
  }

  .mbb-rich__body > :last-child {
    margin-block-end: 0;
  }

  .mbb-rich__body :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    color: var(--mbb-rich-heading, #44362b);
    margin-block: 1.8em 0.5em;
    scroll-margin-block-start: 120px;
    text-wrap: balance;
  }

  .mbb-rich--head-sans .mbb-rich__body :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .mbb-rich__body > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-block-start: 0;
  }

  .mbb-rich__body h1 {
    font-size: clamp(calc(24.01px + 5.99px * var(--mbb-fl, 0)), 1.563vw, 26.41px);
    line-height: 1.25;
  }

  .mbb-rich__body h2 {
    font-size: clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
    line-height: 1.3;
  }

  .mbb-rich__body h3 {
    font-size: clamp(calc(17.6px + 4.4px * var(--mbb-fl, 0)), 1.146vw, 19.36px);
    line-height: 1.3;
  }

  .mbb-rich__body :is(h4, h5, h6) {
    font-size: clamp(calc(15.21px + 3.79px * var(--mbb-fl, 0)), 0.99vw, 16.73px);
    line-height: 1.35;
  }

  .mbb-rich--head-sans .mbb-rich__body :is(h4, h5, h6) {
    font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    letter-spacing: 0.08em;
  }

  .mbb-rich__body :is(ul, ol) {
    padding-inline-start: 1.35em;
  }

  .mbb-rich__body li {
    margin-block-end: 0.5em;
  }

  .mbb-rich__body li::marker {
    color: var(--mbb-rich-accent, #c3116a);
  }

  .mbb-rich__body :is(ul, ol) :is(ul, ol) {
    margin-block: 0.5em 0;
  }

  .mbb-rich__body a:not(.button) {
    color: var(--mbb-rich-accent, #c3116a);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
  }

  .mbb-rich__body a:not(.button):hover {
    text-decoration-thickness: 2px;
  }

  .mbb-rich__body strong,
  .mbb-rich__body b {
    font-weight: 600;
    color: var(--mbb-rich-heading, #44362b);
  }

  .mbb-rich__body blockquote {
    margin: 2em 0;
    padding: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px) clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    border: 0;
    border-inline-start: 3px solid var(--mbb-rich-accent, #c3116a);
    border-radius: 0 var(--mbb-rich-radius, 10px) var(--mbb-rich-radius, 10px) 0;
    background: var(--mbb-rich-tint, #fff8f8);
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-size: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    font-style: italic;
    line-height: 1.5;
    color: var(--mbb-rich-heading, #44362b);
  }

  .mbb-rich__body blockquote > :last-child {
    margin-block-end: 0;
  }

  .mbb-rich__body hr {
    height: 0;
    margin-block: 2.5em;
    border: 0;
    border-block-start: 1px solid var(--mbb-rich-border, #cccccc);
  }

  .mbb-rich__body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--mbb-rich-radius, 10px);
  }

  .mbb-rich__body :is(iframe, video) {
    max-width: 100%;
    border-radius: var(--mbb-rich-radius, 10px);
  }

  .mbb-rich__body :is(code, kbd, samp) {
    padding: 0.15em 0.45em;
    border-radius: 4px;
    background: var(--mbb-rich-tint, #fff8f8);
    font-size: 0.9em;
  }

  /* Tables — policy pages love them and the default is unreadable */
  .mbb-rich__body .rte-table-wrapper,
  .mbb-rich__body .table-wrapper {
    overflow-x: auto;
    margin-block-end: 1.5em;
    border: 1px solid var(--mbb-rich-border, #cccccc);
    border-radius: var(--mbb-rich-radius, 10px);
  }

  .mbb-rich__body table {
    width: 100%;
    margin-block-end: 1.5em;
    border-collapse: collapse;
    font-size: 0.92em;
    text-align: start;
  }

  .mbb-rich__body .rte-table-wrapper table,
  .mbb-rich__body .table-wrapper table {
    margin-block-end: 0;
  }

  /* Fallback while <rte-formatter> has not yet wrapped the table */
  .mbb-rich__body > table {
    display: block;
    overflow-x: auto;
  }

  .mbb-rich__body :is(th, td) {
    padding: calc(12px * var(--mbb-scale, 1)) calc(16px * var(--mbb-scale, 1));
    border-block-end: 1px solid var(--mbb-rich-border, #cccccc);
    text-align: start;
    vertical-align: top;
  }

  .mbb-rich__body th,
  .mbb-rich__body thead td {
    background: var(--mbb-rich-tint, #fff8f8);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    letter-spacing: 0.06em;
    color: var(--mbb-rich-heading, #44362b);
  }

  .mbb-rich__body tbody tr:last-child :is(th, td) {
    border-block-end: 0;
  }

  .mbb-rich__footnote {
    margin-block-start: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    padding-block-start: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    border-block-start: 1px solid var(--mbb-rich-border, #cccccc);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.846;
    color: var(--mbb-rich-muted, #909090);
    text-align: start;
  }

  .mbb-rich__footnote > :first-child {
    margin-block-start: 0;
  }

  .mbb-rich__footnote > :last-child {
    margin-block-end: 0;
  }

  .mbb-rich__cta {
    margin-block-start: clamp(calc(28.8px + 7.2px * var(--mbb-fl, 0)), 1.875vw, 31.68px);
  }

  .mbb-rich__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(12px * var(--mbb-scale, 1));
    padding: 16px clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
    border-radius: 100px;
    background: var(--mbb-rich-heading, #44362b);
    color: #ffffff;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    line-height: 1.375;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .mbb-rich__button:hover {
    opacity: 0.88;
  }

  .mbb-rich__button-arrow {
    display: block;
    position: relative;
    width: calc(21px * var(--mbb-scale, 1));
    height: 0;
    border-block-start: 2px solid currentcolor;
    flex: none;
  }

  .mbb-rich__button-arrow::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: -4px;
    width: calc(8px * var(--mbb-scale, 1));
    height: calc(8px * var(--mbb-scale, 1));
    border-block-start: 2px solid currentcolor;
    border-inline-end: 2px solid currentcolor;
    transform: rotate(45deg);
  }

  @media screen and (min-width: 750px) {
    .mbb-rich__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
      letter-spacing: 0.06em;
    }

    .mbb-rich__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }

    .mbb-rich__subheading {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }

    .mbb-rich__head {
      margin-block-end: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    }

    .mbb-rich__toc {
      padding: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px) clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    }

    .mbb-rich__body {
      font-size: calc(var(--mbb-rich-size, 18px) * var(--mbb-scale, 1));
    }

    .mbb-rich__body h1 {
      font-size: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    }

    .mbb-rich__body h2 {
      font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    }

    .mbb-rich__body h3 {
      font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    }

    .mbb-rich__body :is(h4, h5, h6) {
      font-size: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    }

    .mbb-rich--head-sans .mbb-rich__body :is(h4, h5, h6) {
      font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    }

    .mbb-rich__body blockquote {
      font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    }

    .mbb-rich__button {
      padding: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px) clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }
  }
/* END_SECTION:mbb-rich-text */

/* START_SECTION:mbb-sticky-atc (INDEX:49) */
.mbb-sticky-atc {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--layer-sticky, 8);
    padding: calc(var(--mbb-atc-offset) * var(--mbb-scale, 1));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    translate: 0 calc(100% + var(--mbb-atc-offset));
    transition: translate 0.35s var(--ease-out-cubic, ease), opacity 0.25s ease, visibility 0s linear 0.25s;
  }

  .mbb-sticky-atc--visible {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-delay: 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    .mbb-sticky-atc {
      transition: none;
    }
  }

  .mbb-sticky-atc--hide-mobile {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .mbb-sticky-atc--hide-mobile {
      display: block;
    }

    .mbb-sticky-atc--hide-desktop {
      display: none;
    }
  }

  /* Scoped through the root so these win over Horizon's equal-specificity
     .spacing-style and .button rules regardless of stylesheet order. */
  .mbb-sticky-atc .mbb-sticky-atc__bar {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    max-width: min(calc(var(--page-width, 1440px) * var(--mbb-scale, 1)), 92vw);
    margin-inline: auto;
    pointer-events: auto;
    background-color: var(--color-background, #fff);
    color: var(--color-foreground, inherit);
    border-radius: var(--mbb-atc-radius);
    box-shadow: 0 -2px 24px rgb(0 0 0 / 12%);
  }

  .mbb-sticky-atc__details {
    display: flex;
    align-items: center;
    gap: 12px clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    flex: 1 1 240px;
    min-width: 0;
  }

  .mbb-sticky-atc--center .mbb-sticky-atc__details {
    justify-content: center;
    text-align: center;
  }

  .mbb-sticky-atc__thumb {
    flex: 0 0 auto;
    width: calc(var(--mbb-atc-thumb) * var(--mbb-scale, 1));
    height: calc(var(--mbb-atc-thumb) * var(--mbb-scale, 1));
    border-radius: calc(var(--mbb-atc-radius) / 2);
    overflow: hidden;
    background: rgb(from currentColor r g b / 6%);
  }

  .mbb-sticky-atc__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mbb-sticky-atc__text {
    min-width: 0;
  }

  .mbb-sticky-atc__eyebrow {
    margin: 0;
    font-family: var(--font-subheading--family);
    font-size: var(--font-size--xs, 0.75rem);
    letter-spacing: 0.12em;
    opacity: 0.7;
  }

  .mbb-sticky-atc__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-h5--size, 1.125rem);
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .mbb-sticky-atc__note {
    margin-block-start: 2px;
    font-size: var(--font-size--xs, 0.75rem);
    opacity: 0.75;
  }

  .mbb-sticky-atc__pricing {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--mbb-scale, 1));
    flex-wrap: wrap;
  }

  .mbb-sticky-atc__badge {
    font-family: var(--font-subheading--family);
    font-size: var(--font-size--xs, 0.75rem);
    font-weight: 600;
    line-height: 1;
    padding: calc(7px * var(--mbb-scale, 1)) calc(8px * var(--mbb-scale, 1));
    border-radius: 5px;
    background-color: var(--mbb-atc-badge-bg);
    color: var(--mbb-atc-badge-color);
    white-space: nowrap;
  }

  .mbb-sticky-atc__price {
    font-family: var(--font-heading--family);
    font-size: var(--font-h4--size, 1.5rem);
    font-weight: 600;
    line-height: 1;
    color: var(--mbb-atc-price-color);
  }

  .mbb-sticky-atc__compare {
    font-family: var(--font-heading--family);
    font-size: var(--font-size--md, 1rem);
    line-height: 1;
    color: var(--mbb-atc-compare-color);
  }

  .mbb-sticky-atc__actions {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--mbb-scale, 1));
    flex: 0 0 auto;
  }

  .mbb-sticky-atc__link {
    font-family: var(--font-subheading--family);
    font-size: var(--font-size--sm, 0.875rem);
    text-underline-offset: 3px;
    color: inherit;
  }

  .mbb-sticky-atc__form {
    display: block;
    margin: 0;
  }

  .mbb-sticky-atc__form form {
    margin: 0;
  }

  .mbb-sticky-atc .mbb-sticky-atc__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--mbb-scale, 1));
    min-height: calc(53px * var(--mbb-scale, 1));
    padding-inline: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    border-radius: calc(var(--mbb-atc-radius) / 2);
    border: 1px solid transparent;
    font-family: var(--font-subheading--family);
    font-size: var(--font-size--sm, 0.875rem);
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
  }

  .mbb-sticky-atc .mbb-sticky-atc__button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .mbb-sticky-atc .mbb-sticky-atc__button--add {
    background-color: var(--mbb-atc-add-bg);
    border-color: var(--mbb-atc-add-border);
    color: var(--mbb-atc-add-color);
  }

  .mbb-sticky-atc .mbb-sticky-atc__button--buy {
    background-color: var(--mbb-atc-buy-bg);
    border-color: var(--mbb-atc-buy-bg);
    color: var(--mbb-atc-buy-color);
  }

  .mbb-sticky-atc__arrow {
    width: calc(21px * var(--mbb-scale, 1));
    height: calc(8px * var(--mbb-scale, 1));
    flex: 0 0 auto;
  }

  .mbb-sticky-atc__dynamic {
    min-width: calc(200px * var(--mbb-scale, 1));
  }

  @media screen and (max-width: 749px) {
    .mbb-sticky-atc__bar {
      gap: calc(10px * var(--mbb-scale, 1)) calc(12px * var(--mbb-scale, 1));
    }

    .mbb-sticky-atc__actions {
      flex: 1 1 100%;
    }

    .mbb-sticky-atc__form,
    .mbb-sticky-atc__dynamic {
      flex: 1 1 0;
      min-width: 0;
    }

    .mbb-sticky-atc__button {
      width: 100%;
      min-height: calc(48px * var(--mbb-scale, 1));
    }
  }
/* END_SECTION:mbb-sticky-atc */

/* START_SECTION:mbb-story-section (INDEX:50) */
.mbb-story__layout {
    display: grid;
    gap: calc(var(--mbb-story-gap, 48px) * var(--mbb-scale, 1));
  }

  @media screen and (max-width: 749px) {
    .mbb-story--mobile-media-last .mbb-story__media {
      order: 2;
    }
  }

  @media screen and (min-width: 750px) {
    .mbb-story--has-media.mbb-story--left .mbb-story__layout {
      grid-template-columns: var(--mbb-story-media-width, 46%) minmax(0, 1fr);
      align-items: var(--mbb-story-valign, center);
    }

    .mbb-story--has-media.mbb-story--right .mbb-story__layout {
      grid-template-columns: minmax(0, 1fr) var(--mbb-story-media-width, 46%);
      align-items: var(--mbb-story-valign, center);
    }

    .mbb-story--has-media.mbb-story--right .mbb-story__media {
      order: 2;
    }
  }

  /* Media */
  .mbb-story__media {
    position: relative;
  }

  .mbb-story--stack-stacked .mbb-story__media {
    display: grid;
    gap: calc(var(--mbb-story-gap, 48px) / 3);
  }

  .mbb-story--above .mbb-story__media,
  .mbb-story--background .mbb-story__backdrop-media {
    width: 100%;
  }

  .mbb-story__media-frame {
    border-radius: var(--mbb-story-radius, 10px);
    overflow: hidden;
    background-color: var(--mbb-story-media-bg, rgb(from currentcolor r g b / 5%));
    aspect-ratio: var(--mbb-story-ratio, auto);
  }

  .mbb-story__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mbb-story--stack-overlap.mbb-story--has-second-image .mbb-story__media-frame--secondary {
    position: absolute;
    inset-block-end: -6%;
    inset-inline-end: -5%;
    width: 42%;
    aspect-ratio: 1;
    box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
  }

  /* Background image variant */
  .mbb-story__backdrop-media {
    position: absolute;
    inset: 0;
  }

  .mbb-story__backdrop-media .mbb-story__media-frame {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .mbb-story__backdrop-media .mbb-story__media-frame--secondary {
    display: none;
  }

  .mbb-story__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--mbb-story-overlay-color, #000);
    opacity: var(--mbb-story-overlay, 0);
  }

  /* Content */
  .mbb-story__content {
    max-width: min(calc(var(--mbb-story-content-width, 900px) * var(--mbb-scale, 1)), 92vw);
  }

  .mbb-story--align-center .mbb-story__content {
    margin-inline: auto;
    text-align: center;
  }

  .mbb-story__eyebrow {
    display: inline-block;
    margin: 0 0 1rem;
    font-family: var(--font-subheading--family);
    font-size: var(--font-size--sm, 0.875rem);
    letter-spacing: 0.12em;
    line-height: 1.6;
  }

  .mbb-story--eyebrow-pill .mbb-story__eyebrow {
    padding: 0.375rem 1.25rem;
    border-radius: 100px;
    background-color: var(--mbb-story-eyebrow-bg, rgb(from currentcolor r g b / 6%));
    color: var(--mbb-story-eyebrow-color, inherit);
  }

  .mbb-story__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size--h2, 2.5rem);
    line-height: 1.1;
    text-wrap: balance;
  }

  .mbb-story__subheading {
    margin-block-start: 1rem;
  }

  .mbb-story__lead {
    margin-block-start: 1.25rem;
    font-family: var(--font-heading--family);
    font-size: var(--font-size--h3, 2rem);
    line-height: 1.2;
  }

  .mbb-story__body {
    margin-block-start: 1.25rem;
  }

  .mbb-story__subheading > :first-child,
  .mbb-story__lead > :first-child,
  .mbb-story__body > :first-child,
  .mbb-story__quote-text > :first-child {
    margin-block-start: 0;
  }

  .mbb-story__subheading > :last-child,
  .mbb-story__lead > :last-child,
  .mbb-story__body > :last-child,
  .mbb-story__quote-text > :last-child {
    margin-block-end: 0;
  }

  /* Stats */
  .mbb-story__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
  }

  .mbb-story--align-center .mbb-story__stats {
    justify-content: center;
  }

  .mbb-story__stat-value {
    display: block;
    font-family: var(--font-heading--family);
    font-size: var(--font-size--3xl, 2rem);
    line-height: 1.1;
    color: var(--mbb-story-accent, inherit);
  }

  .mbb-story__stat-label {
    display: block;
    margin-block-start: 0.25rem;
    font-family: var(--font-subheading--family);
    font-size: var(--font-size--sm, 0.875rem);
    letter-spacing: 0.08em;
    opacity: 0.75;
  }

  /* Pull quote */
  .mbb-story__quote {
    margin: 1.75rem 0 0;
    padding: 0;
  }

  .mbb-story__quote-text {
    font-family: var(--font-heading--family);
    font-style: italic;
    line-height: 1.35;
  }

  .mbb-story__quote-cite {
    display: block;
    margin-block-start: 0.5rem;
    font-family: var(--font-subheading--family);
    font-size: var(--font-size--sm, 0.875rem);
    font-style: normal;
    letter-spacing: 0.06em;
    opacity: 0.8;
  }

  .mbb-story__quote--bar {
    padding-inline-start: 1.25rem;
    border-inline-start: 3px solid var(--mbb-story-accent, currentcolor);
  }

  .mbb-story--align-center .mbb-story__quote--bar {
    padding-inline: 1.25rem;
    border-inline-start: 0;
    border-block-start: 3px solid var(--mbb-story-accent, currentcolor);
    padding-block-start: 1.25rem;
  }

  .mbb-story__quote--card {
    padding: 1.5rem;
    border-radius: var(--mbb-story-radius, 10px);
    background-color: var(--mbb-story-media-bg, rgb(from currentcolor r g b / 5%));
  }

  .mbb-story__quote--display .mbb-story__quote-text {
    font-size: var(--font-size--h3, 2rem);
    font-style: normal;
  }

  .mbb-story__quote--plain .mbb-story__quote-text {
    font-style: normal;
  }

  .mbb-story__cta {
    margin-block-start: 2rem;
  }

  /* Visibility */
  @media screen and (max-width: 749px) {
    .section.mbb-story--hide-mobile {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .section.mbb-story--hide-desktop {
      display: none;
    }
  }
/* END_SECTION:mbb-story-section */

/* START_SECTION:mbb-testimonials (INDEX:51) */
/*
    The product card enters from the right (data-mbb-reveal="right", a 40px
    translate). On narrow viewports that 40px would briefly widen the scrollable
    area, so clip it — "clip" rather than "hidden" so the section does not become
    a scroll container.
  */
  @media (prefers-reduced-motion: no-preference) {
    .mbb-testi {
      overflow-x: clip;
    }
  }

  /*
    The rail below is the 1920 frame's: Testimonials 202:11465 lays its copy out at x=80
    w=1760. It went missing for a long time because the document-width guard in
    mbb-reveal.css also carried `max-width: 100%` at (0,3,0) and beat it — see the note
    there. The phone frame uses the shared 20/420 rail instead (Frame 276, inner x=20 w=380),
    which is 18.6 at a 390 viewport where 92vw would give 15.6 — close, but not the drawn
    value, so mobile takes the rail as padding and drops the desktop cap.
  */
  @media screen and (max-width: 749px) {
    .section.mbb-testi {
      max-width: none;
      padding-inline: var(--mbb-gutter, 20px);
    }
  }

  /* ---------- Testimonials : mobile first (Frame 276, Mobile_HomePage) ---------- */
  .mbb-testi {
    display: block;
    width: 100%;
    max-width: min(calc(var(--mbb-t-max, 1760px) * var(--mbb-scale, 1)), 92vw);
    margin-inline: auto;
  }
  .mbb-testi__grid {
    display: flex;
    flex-direction: column;
    gap: calc(var(--mbb-t-row-gap, 40px) * var(--mbb-scale, 1));
  }

  .mbb-testi__col {
    display: flex;
    flex-direction: column;
    gap: calc(var(--mbb-t-row-gap, 40px) * var(--mbb-scale, 1));
    min-width: 0;
  }

  /* Frame 205 */
  .mbb-testi__head {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--mbb-scale, 1));
  }
  .mbb-testi__head--center {
    align-items: center;
    text-align: center;
  }
  .mbb-testi__head--left {
    align-items: flex-start;
    text-align: left;
  }
  .mbb-testi__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.25;
    color: var(--mbb-t-text, #44362b);
  }
  .mbb-testi__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    line-height: 1.313;
    color: var(--mbb-t-text, #44362b);
  }
  .mbb-testi__body {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.25;
    color: var(--mbb-t-body-mobile, #909090);
  }
  .mbb-testi__body > * {
    margin: 0;
  }

  /* Frame 47 — aggregate score */
  .mbb-testi__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10.94px * var(--mbb-scale, 1));
  }
  .mbb-testi__score-row {
    display: flex;
    align-items: center;
    gap: 6.57px;
  }
  .mbb-testi__stars {
    display: inline-flex;
    align-items: center;
  }
  .mbb-testi__stars--score {
    gap: 0.85px;
  }
  .mbb-testi__star {
    flex: none;
    width: calc(25.58px * var(--mbb-scale, 1));
    height: calc(25.58px * var(--mbb-scale, 1));
    color: var(--mbb-t-star, #f19f2d);
  }
  .mbb-testi__star.is-empty {
    color: #e3e3e3;
  }
  .mbb-testi__score-value {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    line-height: 1.2;
    color: var(--mbb-t-text, #44362b);
  }
  .mbb-testi__count {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.214;
    color: var(--mbb-t-count, #9d8069);
  }

  /*
    Customer feedback. The overlay treatment stays for the 'overlay' layout, but the split
    layout keeps its white quote card on mobile too: Frame 276 in Mobile_HomePage stacks the
    card above the photo and leaves only the name, the verified pill and the stars on the
    image. Reading a long quote off a photo through a scrim was the weaker half of that
    trade anyway.
  */
  .mbb-testi__quotes {
    display: none;
  }
  .mbb-testi--split .mbb-testi__quotes {
    display: block;
  }
  .mbb-testi--split .mbb-testi__oquote {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Montserrat 12 is the mobile body token. The shared clamp floors at 18px on phones,
       which is a desktop size and overflowed the card to five lines instead of four. */
    .mbb-testi--split .mbb-testi__quotebox {
      font-size: 12px;
    }
    /* With the quote lifted out, the caption is a single row: name and verified pill on the
       left, stars pushed to the right, exactly as the mobile frame draws it. */
    .mbb-testi--split .mbb-testi__overlay {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    .mbb-testi--split .mbb-testi__stars--media {
      order: 1;
    }
  }
  .mbb-testi__quotebox {
    display: none;
    margin: 0;
    padding: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    background: var(--mbb-t-quote-bg, #ffffff);
    border-radius: 10px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.667;
    color: var(--mbb-t-quote-text, #44362b);
  }
  .mbb-testi__quotebox > * {
    margin: 0;
  }
  .mbb-testi__quotebox.is-active {
    display: block;
  }

  /* Group 284 — arrows */
  .mbb-testi__nav {
    display: flex;
    justify-content: center;
    gap: calc(13.18px * var(--mbb-scale, 1));
  }
  .mbb-testi__navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(36.91px * var(--mbb-scale, 1));
    height: calc(37.72px * var(--mbb-scale, 1));
    padding: 0;
    background: var(--mbb-t-nav-bg, #ffffff);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 17.1894px rgb(0 0 0 / 14%);
    color: var(--mbb-t-nav-icon, #44362b);
    cursor: pointer;
  }
  .mbb-testi__navbtn svg {
    width: 5.78px;
    height: calc(11.57px * var(--mbb-scale, 1));
  }

  /* customer image / Frame 282 */
  .mbb-testi__stage {
    position: relative;
    min-width: 0;
  }
  .mbb-testi__media {
    position: relative;
    display: none;
    width: 100%;
    margin: 0;
    aspect-ratio: 1 / 1;
    background: var(--mbb-t-media-bg, #000000);
    border: 0.4915px solid var(--mbb-t-media-border-alt, #f8b4d8);
    border-radius: 10px;
    overflow: hidden;
  }
  .mbb-testi__media.is-active {
    display: block;
  }
  .mbb-testi__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mbb-testi__scrim {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 46.176%;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--mbb-t-scrim, #362928) 0%, transparent) 0%,
      color-mix(in srgb, var(--mbb-t-scrim, #362928) 70%, transparent) 64.9%,
      var(--mbb-t-scrim, #362928) 100%
    );
  }
  .mbb-testi__overlay {
    position: absolute;
    inset-inline-start: 4.268%;
    inset-inline-end: 4.268%;
    inset-block-end: calc(23.86px * var(--mbb-scale, 1));
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--mbb-scale, 1));
  }
  .mbb-testi__oquote {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    color: #ffffff;
  }
  .mbb-testi__oquote > * {
    margin: 0;
  }
  .mbb-testi__stars--media {
    gap: 0.49px;
  }
  .mbb-testi__stars--media .mbb-testi__star {
    width: calc(14.67px * var(--mbb-scale, 1));
    height: calc(14.67px * var(--mbb-scale, 1));
  }
  .mbb-testi__who {
    display: flex;
    align-items: center;
    gap: calc(9.3px * var(--mbb-scale, 1));
  }
  .mbb-testi__author {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(12.75px + 3.19px * var(--mbb-fl, 0)), 0.83vw, 14.02px);
    line-height: 1.317;
    color: #ffffff;
  }
  .mbb-testi__verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: calc(66.43px * var(--mbb-scale, 1));
    height: calc(17.94px * var(--mbb-scale, 1));
    padding-inline: 6px;
    background: var(--mbb-t-badge-bg, #f7fff0);
    border-radius: 2.3146px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 0.573vw, 9.68px);
    line-height: 1.273;
    color: var(--mbb-t-badge-text, #4d9000);
    white-space: nowrap;
  }
  .mbb-testi__verified svg {
    flex: none;
    width: calc(14px * var(--mbb-scale, 1));
    height: 7px;
  }

  /* attached product card */
  .mbb-testi__cards {
    min-width: 0;
  }
  .mbb-testi__card {
    display: none;
  }
  .mbb-testi__card.is-active {
    display: block;
  }

  /* ---------- Desktop ---------- */
  @media screen and (min-width: 750px) {
    .mbb-testi__head {
      gap: calc(10px * var(--mbb-scale, 1));
    }
    .mbb-testi__head--center,
    .mbb-testi__head--left {
      align-items: flex-start;
      text-align: left;
    }
    .mbb-testi__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-testi__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }
    .mbb-testi__body {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
      color: var(--mbb-t-body, #000000);
    }
    .mbb-testi--overlay .mbb-testi__body {
      max-width: min(calc(429px * var(--mbb-scale, 1)), 92vw);
    }

    .mbb-testi__score {
      align-items: flex-start;
      gap: calc(14px * var(--mbb-scale, 1));
    }
    .mbb-testi__score-row {
      gap: 6px;
    }
    .mbb-testi__stars--score {
      gap: 0.78px;
    }
    .mbb-testi__star {
      width: calc(23.38px * var(--mbb-scale, 1));
      height: calc(23.38px * var(--mbb-scale, 1));
    }
    .mbb-testi__score-value {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.222;
    }
    .mbb-testi__count {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }

    .mbb-testi__nav {
      justify-content: flex-start;
    }

    /* split layout: the quote lives in a white card in the left column */
    .mbb-testi--split .mbb-testi__quotes {
      display: block;
    }
    .mbb-testi--split .mbb-testi__oquote {
      display: none;
    }

    .mbb-testi__media {
      aspect-ratio: 1 / 1;
      border-width: 1.146px;
      border-color: var(--mbb-t-media-border, #ffffff);
      border-radius: 11.46px;
    }
    .mbb-testi--overlay .mbb-testi__media {
      aspect-ratio: 767 / 582;
      border-width: 1px;
      border-color: var(--mbb-t-media-border-alt, #f8b4d8);
      border-radius: 10px;
    }

    .mbb-testi--split .mbb-testi__scrim {
      height: 20.3333%;
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--mbb-t-scrim, #362928) 0%, transparent) 0%,
        color-mix(in srgb, var(--mbb-t-scrim, #362928) 80%, transparent) 64.9%,
        var(--mbb-t-scrim, #362928) 100%
      );
    }
    .mbb-testi--overlay .mbb-testi__scrim {
      height: 61.3402%;
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--mbb-t-scrim, #362928) 0%, transparent) 0%,
        color-mix(in srgb, var(--mbb-t-scrim, #362928) 60%, transparent) 64.9%,
        var(--mbb-t-scrim, #362928) 100%
      );
    }

    /* Frame 284 — split: name left, stars right, on one 549x39 row */
    .mbb-testi--split .mbb-testi__overlay {
      inset-inline: 4.25%;
      inset-block-end: calc(24px * var(--mbb-scale, 1));
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
      gap: calc(12.6px * var(--mbb-scale, 1));
    }
    .mbb-testi--split .mbb-testi__who {
      order: 0;
      gap: calc(17.64px * var(--mbb-scale, 1));
    }
    .mbb-testi--split .mbb-testi__stars--media {
      order: 1;
      gap: 0.98px;
    }
    .mbb-testi--split .mbb-testi__stars--media .mbb-testi__star {
      width: calc(29.45px * var(--mbb-scale, 1));
      height: calc(29.45px * var(--mbb-scale, 1));
    }
    .mbb-testi--split .mbb-testi__author {
      font-size: clamp(calc(24.19px + 6.05px * var(--mbb-fl, 0)), 1.575vw, 26.61px);
      line-height: 1.29;
    }
    .mbb-testi--split .mbb-testi__verified {
      min-width: calc(126px * var(--mbb-scale, 1));
      height: calc(34.02px * var(--mbb-scale, 1));
      gap: 6px;
      border-radius: 4.38985px;
      font-size: clamp(calc(14.12px + 3.52px * var(--mbb-fl, 0)), 0.919vw, 15.53px);
      line-height: 1.247;
    }
    .mbb-testi--split .mbb-testi__verified svg {
      width: calc(22.68px * var(--mbb-scale, 1));
      height: calc(10.9px * var(--mbb-scale, 1));
    }

    /* Frame 284 — option: quote, stars, name stacked on the image */
    .mbb-testi--overlay .mbb-testi__overlay {
      inset-inline-start: 4.4329%;
      inset-inline-end: 4.4329%;
      inset-block-end: calc(29.62px * var(--mbb-scale, 1));
      gap: calc(10px * var(--mbb-scale, 1));
    }
    .mbb-testi--overlay .mbb-testi__oquote {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-testi--overlay .mbb-testi__stars--media {
      gap: 0.78px;
    }
    .mbb-testi--overlay .mbb-testi__stars--media .mbb-testi__star {
      width: calc(23.38px * var(--mbb-scale, 1));
      height: calc(23.38px * var(--mbb-scale, 1));
    }
    .mbb-testi--overlay .mbb-testi__who {
      gap: calc(14px * var(--mbb-scale, 1));
    }
    .mbb-testi--overlay .mbb-testi__author {
      font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
      line-height: 1.313;
    }
    .mbb-testi--overlay .mbb-testi__verified {
      min-width: calc(100px * var(--mbb-scale, 1));
      height: calc(27px * var(--mbb-scale, 1));
      gap: 5px;
      border-radius: 3.484px;
      font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
      line-height: 1.214;
    }
    .mbb-testi--overlay .mbb-testi__verified svg {
      width: calc(18px * var(--mbb-scale, 1));
      height: calc(9px * var(--mbb-scale, 1));
    }
  }

  /* Three across only once the 703 / 600 / 358 columns actually have room. */
  @media screen and (min-width: 1100px) {
    .mbb-testi__grid {
      display: grid;
      align-items: center;
      gap: 0;
    }
    .mbb-testi--split .mbb-testi__grid {
      grid-template-columns: 703fr 57fr 600fr 42fr 358fr;
    }
    .mbb-testi--overlay .mbb-testi__grid {
      grid-template-columns: 570fr 52fr 767fr 52fr 286fr;
    }
    .mbb-testi__col {
      grid-column: 1;
      align-self: stretch;
      justify-content: space-between;
      gap: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    }
    .mbb-testi__stage {
      grid-column: 3;
    }
    .mbb-testi__cards {
      grid-column: 5;
    }

    /* option layout: head + score at the top, arrows pinned to the bottom */
    .mbb-testi--overlay .mbb-testi__col {
      justify-content: flex-start;
      gap: clamp(calc(40px + 10px * var(--mbb-fl, 0)), 2.604vw, 44px);
    }
    .mbb-testi--overlay .mbb-testi__score {
      margin-block-end: auto;
    }
  }
/* END_SECTION:mbb-testimonials */

/* START_SECTION:mbb-text-animation (INDEX:52) */
.mbb-ta {
    display: block;
    width: 100%;

    /*
      The decorations are absolutely positioned as a percentage of the stage and get a
      2.05x size multiplier on mobile, so the ones near the right edge extended past the
      section. Nothing clipped them, so they widened the document itself and gave every
      phone a horizontal scrollbar — measured 408px against a 390px viewport, and the
      same ~4.4% at 320/360/375/430. Hiding this section alone restored 390 exactly.
      `clip` rather than `hidden` so no scroll container is created.
    */
    overflow-x: clip;
  }

  .mbb-ta__stage {
    position: relative;
    width: 100%;
    max-width: min(calc(var(--mbb-ta-max, 1657px) * var(--mbb-scale, 1)), 92vw);
    margin-inline: auto;
    padding-block: var(--mbb-ta-pad-top-m, 25px) var(--mbb-ta-pad-bottom-m, 65px);
    padding-inline: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
  }

  .mbb-ta__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16px * var(--mbb-scale, 1));
    text-align: center;
  }
  .mbb-ta__align--left .mbb-ta__content {
    align-items: flex-start;
    text-align: left;
  }

  .mbb-ta__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    color: var(--mbb-ta-color, #000000);
  }

  /* Group 271 */
  .mbb-ta__words {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: var(--mbb-ta-word-gap-m, 0px);
    row-gap: 0;
    margin: 0;
    padding: 0;
    max-width: var(--mbb-ta-text-max-m, 312px);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: calc(var(--mbb-ta-size-m, 58px) * var(--mbb-scale, 1));
    line-height: calc(var(--mbb-ta-line-height-m, 71px) * var(--mbb-scale, 1));
    color: var(--mbb-ta-color, #000000);
    text-align: center;
  }
  .mbb-ta__align--left .mbb-ta__words {
    justify-content: flex-start;
    text-align: left;
  }

  .mbb-ta__word {
    display: inline-block;
    color: var(--mbb-ta-word-color, inherit);
  }

  /*
    Knockout: the image is painted across the whole headline box and clipped to the
    letterforms, so one continuous picture reads through all the words rather than
    repeating per word. Set on the container, not the words, for that reason.
  */
  /*
    Fill mapping. In Figma the mask rectangle is sized to the text box (1279x174
    over a 1252x110 headline), so the picture's tonal sweep — lavender, cream,
    lavender, chocolate — runs left to right across the single desktop line.
    Zoom 100% reproduces that exactly.

    Mobile stacks into three lines. The same left-to-right sweep would then drop
    the pale cream stripe through the middle of every line, which is unreadable on
    white, so mobile zooms into the lavender band instead — matching what the
    mobile design shows. Height carries the drift headroom (see below) and is kept
    separate from width so scrolling never disturbs the horizontal mapping.
  */
  .mbb-ta__words--knockout {
    background-image: var(--mbb-ta-fill);
    background-size:
      var(--mbb-ta-fill-zoom, 100%)
      calc(100% + 2 * var(--mbb-ta-drift-room, 0px));
    background-position:
      var(--mbb-ta-fill-fx, 50%)
      calc(50% + var(--mbb-ta-drift-y, 0px));
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* Figma comment on this section: "pls add animation in image on scrolling".
     The image lives inside the letterforms as a clipped background, so the
     scroll animation is a drift of that fill. Scroll-driven and CSS-only, so it
     stays in step with the scrollbar and costs no JS; browsers without view()
     timelines simply keep the static fill they have now. */
  /* The words element already runs the wipe-in animation, and animation-name is a
     single list per element — animating the fill there would cancel the wipe. So the
     drift animates an inherited custom property on the stage, and the words simply
     read it. Registering the property is what makes it interpolate rather than snap. */
  @property --mbb-ta-drift-y {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
  }

  /* Only the parallax variant gets vertical overspill, and exactly twice the drift
     so the travel uses it up without ever exposing an edge. */
  .mbb-ta--fill-parallax {
    --mbb-ta-drift-room: var(--mbb-ta-drift, 40px);
  }

  @media screen and (max-width: 749px) {
    .mbb-ta__words--knockout {
      background-size:
        var(--mbb-ta-fill-zoom-m, 300%)
        calc(100% + 2 * var(--mbb-ta-drift-room, 0px));
      background-position:
        var(--mbb-ta-fill-fx-m, 8%)
        calc(50% + var(--mbb-ta-drift-y, 0px));
    }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .mbb-ta--fill-parallax .mbb-ta__stage {
        animation: mbb-ta-fill-drift linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
      }
    }
  }

  @keyframes mbb-ta-fill-drift {
    from {
      --mbb-ta-drift-y: calc(var(--mbb-ta-drift, 40px) * -1);
    }
    to {
      --mbb-ta-drift-y: var(--mbb-ta-drift, 40px);
    }
  }

  /* Words must not paint their own colour over the clip. */
  .mbb-ta__words--knockout .mbb-ta__word {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* No background-clip support (or forced-colors): fall back to solid type. */
  @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .mbb-ta__words--knockout,
    .mbb-ta__words--knockout .mbb-ta__word {
      color: var(--mbb-ta-word-color, currentcolor);
      -webkit-text-fill-color: currentcolor;
      background-image: none;
    }
  }

  @media (forced-colors: active) {
    .mbb-ta__words--knockout,
    .mbb-ta__words--knockout .mbb-ta__word {
      -webkit-text-fill-color: currentcolor;
      background-image: none;
    }
  }
  .mbb-ta__word-inner {
    display: inline-block;
  }

  .mbb-ta__subheading {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.714;
    color: var(--mbb-ta-color, #000000);
  }
  .mbb-ta__subheading > :first-child {
    margin-block-start: 0;
  }
  .mbb-ta__subheading > :last-child {
    margin-block-end: 0;
  }

  /* Decorative artwork */
  .mbb-ta__deco {
    position: absolute;
    top: var(--mbb-ta-deco-y, 0%);
    left: var(--mbb-ta-deco-x, 0%);
    z-index: 0;
    display: block;
    width: calc(var(--mbb-ta-deco-w, 7.5%) * var(--mbb-ta-deco-scale, 2.05));
    transform: rotate(var(--mbb-ta-deco-r, 0deg));
    transform-origin: top left;
    pointer-events: none;
  }

  /*
    The mobile frame (Group 294) does not simply shrink the desktop arrangement — it moves
    the pieces: chocolate to the top right, berries to the mid left, the two cakes along the
    bottom corners. A single set of coordinates cannot describe both, so blocks may carry a
    mobile triple. Scoped to a max-width query and keyed on --mbb-ta-deco-wm, which is only
    emitted when a mobile width is set, so untouched blocks keep the scaled desktop layout.
  */
  @media screen and (max-width: 749px) {
    .mbb-ta__deco {
      top: var(--mbb-ta-deco-ym, var(--mbb-ta-deco-y, 0%));
      left: var(--mbb-ta-deco-xm, var(--mbb-ta-deco-x, 0%));
      width: var(--mbb-ta-deco-wm, calc(var(--mbb-ta-deco-w, 7.5%) * var(--mbb-ta-deco-scale, 2.05)));
    }
  }

  /* In the theme editor the blocks must be selectable, so re-enable hit testing there. */
  .shopify-design-mode .mbb-ta__deco {
    pointer-events: auto;
  }
  .mbb-ta__deco-img {
    display: block;
    width: 100%;
    height: auto;
  }

  @media screen and (min-width: 750px) {
    .mbb-ta__stage {
      padding-block: var(--mbb-ta-pad-top, 130px) var(--mbb-ta-pad-bottom, 116px);
      padding-inline: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    }
    .mbb-ta__content {
      gap: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    }
    .mbb-ta__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-ta__words {
      column-gap: calc(var(--mbb-ta-word-gap, 24px) * var(--mbb-scale, 1));
      /* The line must not break. --mbb-scale caps at 1 above 1920 so the px box froze at
         1252px, but the font kept growing to its 112.5px ceiling — by 2048 the words needed
         1280px and NOURISH. dropped to a second line. The em term makes the box track the
         type instead, so the same three words fit at 1920 and at 3440 alike. */
      max-width: min(max(calc(var(--mbb-ta-text-max, 1252px) * var(--mbb-scale, 1)), 14em), 92vw);
      /* 90px at 1920 = 4.6875vw. Fluid so the type holds its proportion to the design at
         every desktop width instead of only at 1920; floor/cap keep it sane either side. */
      font-size: clamp(44px, calc(var(--mbb-ta-size, 90) / 1920 * 100vw), calc(var(--mbb-ta-size, 90) * 1.25px));
      line-height: calc(var(--mbb-ta-line-height, 110) / var(--mbb-ta-size, 90) * 1em);
    }
    .mbb-ta__subheading {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-ta__deco {
      width: var(--mbb-ta-deco-w, 7.5%);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .mbb-ta:not(.mbb-ta--none) .mbb-ta__word,
    .mbb-ta:not(.mbb-ta--none) .mbb-ta__word-inner {
      animation-duration: var(--mbb-ta-duration, 900ms);
      animation-delay: calc(var(--mbb-ta-i, 0) * var(--mbb-ta-stagger, 120ms));
      animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
      animation-fill-mode: both;
    }
    .mbb-ta--loop .mbb-ta__word,
    .mbb-ta--loop .mbb-ta__word-inner {
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

    .mbb-ta--fade-up .mbb-ta__word {
      animation-name: mbb-ta-fade-up;
    }
    .mbb-ta--fade .mbb-ta__word {
      animation-name: mbb-ta-fade;
    }
    .mbb-ta--slide .mbb-ta__word {
      animation-name: mbb-ta-slide;
    }
    .mbb-ta--scale .mbb-ta__word {
      animation-name: mbb-ta-scale;
    }
    .mbb-ta--blur .mbb-ta__word {
      animation-name: mbb-ta-blur;
    }
    /* the mask needs room for descenders without changing the line box */
    .mbb-ta--rise .mbb-ta__word {
      overflow: hidden;
      padding-block-end: 0.08em;
      margin-block-end: -0.08em;
    }
    .mbb-ta--rise .mbb-ta__word-inner {
      animation-name: mbb-ta-rise;
    }

    @keyframes mbb-ta-fade-up {
      from {
        opacity: 0;
        transform: translateY(0.4em);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @keyframes mbb-ta-fade {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    @keyframes mbb-ta-slide {
      from {
        opacity: 0;
        transform: translateX(-0.6em);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    @keyframes mbb-ta-scale {
      from {
        opacity: 0;
        transform: scale(0.86);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
    @keyframes mbb-ta-blur {
      from {
        opacity: 0;
        filter: blur(14px);
      }
      to {
        opacity: 1;
        filter: blur(0);
      }
    }
    @keyframes mbb-ta-rise {
      from {
        transform: translateY(110%);
      }
      to {
        transform: translateY(0);
      }
    }

    /*
      Knockout headlines cannot animate word by word.

      background-clip: text clips ONE background to the text painted inside the
      heading box. A word that transforms (or fades, or blurs) gets its own paint
      layer, so its glyphs stop contributing to that shared clip — and because the
      words are also -webkit-text-fill-color: transparent, the headline disappears
      entirely. Verified in Chrome: every animation_style except "none" rendered a
      blank headline once a fill image was set, and it stayed blank after the
      animation finished, because animation-fill-mode keeps the layer promoted.

      So when a fill image is set we drop the per-word motion and wipe the whole
      heading open instead. The image stays put while the clip travels across it,
      which is the calmer reading anyway: one picture, revealed once.
    */
    .mbb-ta--knockout .mbb-ta__word,
    .mbb-ta--knockout .mbb-ta__word-inner {
      animation: none;
    }
    /* the rise style masks each word; without the inner animation that only clips */
    .mbb-ta--knockout .mbb-ta__word {
      overflow: visible;
      padding-block-end: 0;
      margin-block-end: 0;
    }
    .mbb-ta--knockout:not(.mbb-ta--none) .mbb-ta__words--knockout {
      animation-name: mbb-ta-wipe;
      animation-duration: var(--mbb-ta-duration, 900ms);
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
      animation-fill-mode: both;
    }
    .mbb-ta--loop.mbb-ta--knockout:not(.mbb-ta--none) .mbb-ta__words--knockout {
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

    @keyframes mbb-ta-wipe {
      from {
        clip-path: inset(0 100% 0 0);
      }
      to {
        clip-path: inset(0 0 0 0);
      }
    }
  }
/* END_SECTION:mbb-text-animation */

/* START_SECTION:mbb-warning-banner (INDEX:53) */
.mbb-warning {
    display: block;
    width: 100%;
  }

  /* Offer Banner — 420x560 mobile, 1920x707 desktop */
  .mbb-warning__banner {
    position: relative;
    width: 100%;
    aspect-ratio: 420 / 560;
    height: var(--mbb-warning-banner-h-m, auto);
    background-color: var(--mbb-warning-banner-bg, #000000);
    overflow: hidden;
  }
  .mbb-warning__picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .mbb-warning__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Warning Animation Strp */
  .mbb-warning__strip {
    background-color: var(--mbb-warning-strip-bg, #fff9f4);
    padding-block: calc(var(--mbb-warning-pad-m, 21px) * var(--mbb-scale, 1));
    padding-inline: clamp(calc(20px + 5px * var(--mbb-fl, 0)), 1.302vw, 22px);
  }
  /* The generated clamp floors at 25 on a phone — a value from no frame, and 6px wider than
     the rail every other mobile section sits on. The strip itself stays full-bleed
     (Group 298 is x=0 w=420); only its copy moves onto the shared rail. */
  @media screen and (max-width: 749px) {
    .mbb-warning__strip {
      padding-inline: var(--mbb-gutter, 20px);
    }
  }
  .mbb-warning__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mbb-warning-gap-m, 9px);
    max-width: min(calc(var(--mbb-warning-max, 1050px) * var(--mbb-scale, 1)), 92vw);
    margin-inline: auto;
    text-align: center;
  }
  .mbb-warning__align--left .mbb-warning__content {
    align-items: flex-start;
    text-align: left;
  }

  .mbb-warning__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    color: var(--mbb-warning-color, #44362b);
  }

  /* Group 290 / Group 269 */
  .mbb-warning__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mbb-warning-gap-m, 9px);
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .mbb-warning__align--left .mbb-warning__row {
    align-items: flex-start;
  }

  .mbb-warning__text {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: calc(var(--mbb-warning-size-m, 24px) * var(--mbb-scale, 1));
    line-height: 1.3125;
    color: var(--mbb-warning-color, #44362b);
  }

  /*
    The statement is two-tone in the comp: "WARNING:" in the ink colour and "MAY CAUSE
    SERIOUS" in a warm taupe sampled at #B29F8E. It was rendering as one solid dark line.
  */
  /*
    Inline, not flex. As flex items the two halves were unbreakable boxes, so the pair wrapped
    at the span boundary and put "MAY CAUSE SERIOUS" on its own line — the design sets the
    whole statement as one 370-wide text run. Inline spans let it flow and break like text.
  */
  .mbb-warning__statement {
    display: block;
    text-align: inherit;
    text-wrap: balance;
  }

  .mbb-warning__text--muted {
    color: var(--mbb-warning-muted, #b29f8e);
  }

  /* Frame 280 */
  .mbb-warning__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(5px * var(--mbb-scale, 1)) calc(13.5px * var(--mbb-scale, 1));
    border-radius: var(--mbb-warning-badge-radius-m, 6px);
    background-color: var(--mbb-warning-badge-bg, #44362b);
    color: var(--mbb-warning-badge-color, #ffffff);
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: calc(var(--mbb-warning-size-m, 24px) * var(--mbb-scale, 1));
    line-height: 1.3125;
    white-space: nowrap;
  }

  /* Word rotator — CRAVINGS / COMPLIMENTS / OBSESSION / ADDICTION*
     The pill clips the roll; the inner track animates its width so the box
     hugs each word instead of sitting at the width of the longest one. */
  .mbb-warning__badge--rotator {
    overflow: hidden;
    max-width: 100%;
  }
  .mbb-warning__words {
    display: grid;
    justify-content: center;
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .mbb-warning__word {
    grid-area: 1 / 1;
    justify-self: center;
    white-space: nowrap;
    opacity: 0;
    translate: 0 0.72em;
    transition:
      opacity 0.42s ease,
      translate 0.52s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .mbb-warning__word.is-active {
    opacity: 1;
    translate: 0 0;
  }
  .mbb-warning__word.is-leaving {
    opacity: 0;
    translate: 0 -0.72em;
  }

  @media (prefers-reduced-motion: reduce) {
    .mbb-warning__words {
      transition: none;
    }
    .mbb-warning__word {
      transition: none;
    }
  }

  .mbb-warning__subheading {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.714;
    color: var(--mbb-warning-color, #44362b);
  }
  .mbb-warning__subheading > :first-child {
    margin-block-start: 0;
  }
  .mbb-warning__subheading > :last-child {
    margin-block-end: 0;
  }
  .mbb-warning__cta {
    margin-block-start: 4px;
  }

  @media screen and (min-width: 750px) {
    .mbb-warning__banner {
      aspect-ratio: 1920 / 707;
      height: var(--mbb-warning-banner-h, auto);
    }
    .mbb-warning__strip {
      padding-block: calc(var(--mbb-warning-pad, 65px) * var(--mbb-scale, 1));
      padding-inline: clamp(calc(31.99px + 8.01px * var(--mbb-fl, 0)), 2.083vw, 35.19px);
    }
    .mbb-warning__content {
      gap: calc(16px * var(--mbb-scale, 1));
    }
    .mbb-warning__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
    .mbb-warning__row {
      flex-direction: row;
      flex-wrap: wrap;
      gap: calc(var(--mbb-warning-gap, 20px) * var(--mbb-scale, 1));
    }
    .mbb-warning__text {
      font-weight: 600;
      font-size: calc(var(--mbb-warning-size, 48px) * var(--mbb-scale, 1));
    }
    .mbb-warning__badge {
      padding: 7px clamp(calc(17.2px + 4.3px * var(--mbb-fl, 0)), 1.12vw, 18.92px);
      border-radius: var(--mbb-warning-badge-radius, 10px);
      font-weight: 600;
      font-size: calc(var(--mbb-warning-size, 48px) * var(--mbb-scale, 1));
    }
    .mbb-warning__subheading {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }
  }
/* END_SECTION:mbb-warning-banner */

/* START_SECTION:mbb-wave-strip (INDEX:54) */
/*
    Horizon .section is a named-line grid. Without claiming a full row and forcing a height
    the band collapses — its SVG is absolutely positioned so it contributes no height, and
    the strip rendered ~61px instead of the design's 286.
  */
  .section.mbb-wave {
    grid-column: 1 / -1;
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    /* see the desktop note: height from width / aspect, overlap as a fraction of it */
    --mbb-wave-bandh: calc(
      (100vw + var(--mbb-wave-bl-m, 0px) + var(--mbb-wave-br-m, 0px)) / 5.9586
    );
    height: var(--mbb-wave-bandh);
    min-height: var(--mbb-wave-bandh);
    margin-block-start: calc(-1 * var(--mbb-wave-bandh) * var(--mbb-wave-lap-m, 0));
    pointer-events: none;
  }

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

  /* Anchored to the left overhang rather than centred, so the two edges are independent. */
  .mbb-wave__svg {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(-1 * var(--mbb-wave-bl-m, 60px));
    display: none;

    /* Horizon resets media to max-width:100%. This band is deliberately WIDER than its
       section — it bleeds past both edges — so the reset clamped it back to the section
       width. Shifted left by the bleed but clamped to 1920, the ribbon ended one
       bleed-width early and the wave looked cut in half. */
    max-width: none;
  }

  /*
    aspect 432 / 114.7965 = 3.76318
    Bleed past both edges so the curve never appears to start or stop at the
    viewport. The svg is centred (translateX(-50%)), so widening it overhangs
    equally on both sides.
  */
  /* width/height, NOT inline-size/block-size: the logical properties do not size an
     <svg> element in Chrome, so the box fell back to 100% of the section. Shifted left
     by the bleed but never widened, the ribbon ran out one bleed-width early — the
     wave visibly stopped about two thirds across. */
  /* fills the band, same reasoning as the desktop svg — the band is width / 5.9586 */
  .mbb-wave__svg--mobile {
    display: block;
    height: 100%;
    width: calc(100% + var(--mbb-wave-bl-m, 60px) + var(--mbb-wave-br-m, 60px));
  }

  .mbb-wave__text {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: calc(var(--mbb-wave-size, 24) * 1px * var(--mbb-scale, 1));
    fill: var(--mbb-wave-fg, #ffffff);
    letter-spacing: 0;
  }

  /* The mobile band is a much thinner ribbon than the desktop one, so the marquee needs
     its own size — the desktop 24px would overflow the stroke. Distortion is handled by
     the mobile viewBox (see the note on the SVG), not here. */
  @media screen and (max-width: 749px) {
    .mbb-wave__text {
      font-size: calc(var(--mbb-wave-size-m, 11) * 1px * var(--mbb-scale, 1));
    }

    .mbb-wave--quiet-mobile .mbb-wave__text {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .section.mbb-wave {
      /*
        Height comes from the WIDTH the band actually occupies, divided by the curve's own
        aspect. It used to be the 1920 height multiplied by --mbb-bleed-scale, which is a
        different number: at 2560 the element measured 2620 wide by 345 tall — aspect 7.59
        against the vector's 7.017 — and because preserveAspectRatio is "none" the mismatch
        came out as horizontal stretch, flattening the curve and pulling the marquee text
        wide. Deriving the height from the width makes the aspect exact at every viewport,
        so the ribbon can never distort.
      */
      --mbb-wave-bandh: calc(
        (100vw + var(--mbb-wave-bl, 0px) + var(--mbb-wave-br, 0px)) / var(--mbb-wave-aspect, 7.01737)
      );
      height: var(--mbb-wave-bandh);
      min-height: var(--mbb-wave-bandh);
      /* the overlap rides the same number, so the band stays welded to the hero's edge */
      margin-block-start: calc(-1 * var(--mbb-wave-bandh) * var(--mbb-wave-lap, 0));
    }

    .mbb-wave__svg--mobile {
      display: none;
    }

    /* aspect 2011 / 286.5748 = 7.01737 — bleed past both edges, see mobile note */
    /*
      The svg fills the band exactly. The band's height is already (this width / 7.01737),
      so height:100% reproduces the viewBox aspect at every viewport and
      preserveAspectRatio="none" has nothing left to stretch. Sizing the svg from its own
      scaled px var instead let the two drift apart, which is what flattened the curve.
    */
    .mbb-wave__svg--desktop {
      inset-inline-start: calc(-1 * var(--mbb-wave-bl, 140px));
      display: block;
      height: 100%;
      width: calc(100% + var(--mbb-wave-bl, 140px) + var(--mbb-wave-br, 140px));
    }
  }
/* END_SECTION:mbb-wave-strip */

/* START_SECTION:mbb-wishlist (INDEX:55) */
.mbb-wishp {
    display: grid;
    row-gap: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    justify-items: center;
    color: var(--mbb-wishp-ink, #44362b);
  }

  .mbb-wishp > * {
    width: 100%;
    max-width: min(calc(var(--mbb-wishp-max, 1760px) * var(--mbb-scale, 1)), 92vw);
  }

  .mbb-wishp [hidden] {
    display: none;
  }

  .mbb-wishp__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .mbb-wishp--center .mbb-wishp__head,
  .mbb-wishp--center .mbb-wishp__tools,
  .mbb-wishp--center .mbb-wishp__total {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .mbb-wishp__eyebrow {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    letter-spacing: 0.06em;
    color: inherit;
  }

  .mbb-wishp__heading {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    line-height: 1.3125;
    color: inherit;
  }

  .mbb-wishp__subheading,
  .mbb-wishp__subheading p {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.714;
    color: var(--mbb-wishp-muted, #909090);
  }

  .mbb-wishp__total {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.692;
    letter-spacing: 0.04em;
    color: var(--mbb-wishp-muted, #909090);
  }

  .mbb-wishp__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(16px * var(--mbb-scale, 1));
  }

  .mbb-wishp__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(44px * var(--mbb-scale, 1));
    padding: 10px clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    border: 0;
    border-radius: 100px;
    background: var(--mbb-wishp-ink, #44362b);
    color: #ffffff;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    text-decoration: none;
    cursor: pointer;
  }

  .mbb-wishp__button[aria-busy='true'] {
    opacity: 0.5;
    pointer-events: none;
  }

  .mbb-wishp__link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mbb-wishp-muted, #909090);
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.571;
    text-decoration-line: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .mbb-wishp__button:focus-visible,
  .mbb-wishp__link-button:focus-visible,
  .mbb-wishp__remove:focus-visible,
  .mbb-wishp__view:focus-visible,
  .mbb-wishp__title:focus-visible,
  .mbb-wishp__media:focus-visible {
    outline: 2px solid var(--mbb-wishp-accent, #c3116a);
    outline-offset: 3px;
  }

  /* The card, matching snippets/mbb-product-card.liquid without depending on it. */
  .mbb-wishp__grid {
    display: grid;
    grid-template-columns: repeat(var(--mbb-wishp-cols-m, 2), minmax(0, 1fr));
    gap: calc(12px * var(--mbb-scale, 1));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mbb-wishp__item {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--mbb-wishp-border, #cccccc);
    border-radius: var(--mbb-wishp-radius, 10px);
    overflow: hidden;
  }

  .mbb-wishp__media {
    display: block;
    width: 100%;
    aspect-ratio: 412 / 413;
    background: var(--mbb-wishp-media, #e4ffc4);
    overflow: hidden;
  }

  .mbb-wishp__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mbb-wishp__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(10px * var(--mbb-scale, 1));
    padding: calc(14px * var(--mbb-scale, 1));
    flex: 1;
  }

  .mbb-wishp__title {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.333;
    color: inherit;
    text-decoration: none;
  }

  .mbb-wishp__price {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    line-height: 1.333;
    color: inherit;
  }

  .mbb-wishp__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(14px * var(--mbb-scale, 1));
    margin-block-start: auto;
    padding-block-start: 4px;
  }

  .mbb-wishp__view {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.538;
    text-decoration-line: underline;
    text-underline-offset: 3px;
    color: inherit;
  }

  .mbb-wishp__remove {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.538;
    text-decoration-line: underline;
    text-underline-offset: 3px;
    color: var(--mbb-wishp-accent, #c3116a);
    cursor: pointer;
  }

  .mbb-wishp__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(14px * var(--mbb-scale, 1));
    padding: clamp(calc(44.81px + 11.19px * var(--mbb-fl, 0)), 2.917vw, 49.29px) clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    border: 1px solid var(--mbb-wishp-border, #cccccc);
    border-radius: var(--mbb-wishp-radius, 10px);
    text-align: center;
  }

  .mbb-wishp__empty-heart {
    width: calc(48px * var(--mbb-scale, 1));
    height: calc(48px * var(--mbb-scale, 1));
    color: var(--mbb-wishp-accent, #c3116a);
  }

  .mbb-wishp__empty-title {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(22.39px + 5.61px * var(--mbb-fl, 0)), 1.458vw, 24.63px);
    line-height: 1.3125;
    color: inherit;
  }

  .mbb-wishp__empty-body,
  .mbb-wishp__empty-body p {
    margin: 0;
    max-width: 52ch;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.714;
    color: var(--mbb-wishp-muted, #909090);
  }

  @media screen and (min-width: 750px) {
    .mbb-wishp {
      row-gap: clamp(calc(28.8px + 7.2px * var(--mbb-fl, 0)), 1.875vw, 31.68px);
    }

    .mbb-wishp__eyebrow {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }

    .mbb-wishp__heading {
      font-size: clamp(calc(38.4px + 9.6px * var(--mbb-fl, 0)), 2.5vw, 42.24px);
      line-height: 1.313;
    }

    .mbb-wishp__subheading,
    .mbb-wishp__subheading p,
    .mbb-wishp__empty-body,
    .mbb-wishp__empty-body p {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.667;
    }

    .mbb-wishp__total {
      font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    }

    .mbb-wishp__button {
      min-height: calc(50px * var(--mbb-scale, 1));
      padding: 10px clamp(calc(28.8px + 7.2px * var(--mbb-fl, 0)), 1.875vw, 31.68px);
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    }

    .mbb-wishp__link-button {
      font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    }

    .mbb-wishp__grid {
      grid-template-columns: repeat(var(--mbb-wishp-cols, 4), minmax(0, 1fr));
      gap: calc(var(--mbb-wishp-gap, 20px) * var(--mbb-scale, 1));
    }

    .mbb-wishp__body {
      gap: calc(14px * var(--mbb-scale, 1));
      padding: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    }

    .mbb-wishp__title {
      font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
      line-height: 1.292;
    }

    .mbb-wishp__price {
      font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
      line-height: 1.313;
    }

    .mbb-wishp__view,
    .mbb-wishp__remove {
      font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    }

    .mbb-wishp__empty-title {
      font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    }

    .mbb-wishp__empty-heart {
      width: calc(64px * var(--mbb-scale, 1));
      height: calc(64px * var(--mbb-scale, 1));
    }
  }
/* END_SECTION:mbb-wishlist */

/* START_SECTION:media-with-content (INDEX:56) */
.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:57) */
.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:58) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

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

/* START_SECTION:product-hotspots (INDEX:61) */
/* 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 Enlaces de interés-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 {
    .Enlaces de interés-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .Enlaces de interés-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(--Enlaces de interés-add-foreground, var(--color-foreground));
      background-color: var(--Enlaces de interés-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;
      }
    }

    .Enlaces de interés-add__button.add-to-cart-button[data-added='true'] {
      color: transparent;
    }
  }

  @media screen and (min-width: 750px) {
    .hotspot-dialog {
      .Enlaces de interés-add__button:is(:hover, :focus-visible) {
        width: max-content;
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:62) */
.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:65) */
.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:70) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

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

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

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

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

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

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

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

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

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

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

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

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

/* CSS from block stylesheet tags */
/* START_BLOCK:_announcement (INDEX:75) */
.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:76) */
.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:77) */
.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:78) */
.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:79) */
.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:80) */
.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:81) */
.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:83) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

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

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:84) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:85) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:86) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(#header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    @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:87) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:90) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:92) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:96) */
.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:97) */
.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:99) */
.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:102) */
.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:103) */
.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:104) */
.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:105) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

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

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .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;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    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:108) */
.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:112) */
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:117) */
/* 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:122) */
.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:123) */
.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:124) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:comparison-slider (INDEX:136) */
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:137) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:138) */
.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:140) */
.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:141) */
.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:142) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:143) */
.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:145) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:146) */
.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:148) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:149) */
.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:151) */
.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:152) */
.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:153) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:154) */
.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:155) */
.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:156) */
.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:159) */
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:161) */
.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:162) */
.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:165) */
.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:167) */
.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:168) */
/* 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:169) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:172) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:173) */
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:174) */
.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:175) */
/* 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:178) */
.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:179) */
.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:184) */
.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 Enlaces de interés-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:185) */
.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 .Enlaces de interés-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(Enlaces de interés-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 Enlaces de interés-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:186) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--cart-bubble-text, var(--cart-bubble-text-fallback));
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback));
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-disclosure-tooltip (INDEX:187) */
.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:188) */
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:189) */
.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:190) */
.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:191) */
.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:192) */
.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:193) */
/* 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:194) */
.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:196) */
.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:197) */
/* ------------------------------------------------------------------------------ */

  /* 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:200) */
.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:201) */
.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:202) */
.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:203) */
.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:204) */
.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:205) */
.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:206) */
/* 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:207) */
/* 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--Enlaces de interés {
    --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:212) */
.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:214) */
.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:215) */
.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:216) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:217) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

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

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-overlay);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .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:223) */
.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:226) */
.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:227) */
/* 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:mbb-article-card (INDEX:229) */
/* Card shell — mirrors .mbb-card */
  .mbb-blog__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    background: #ffffff;
    border: 1px solid var(--mbb-blog-border, #cccccc);
    border-radius: var(--mbb-blog-radius, 10px);
    overflow: hidden;
  }

  .mbb-blog__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 412 / 300;
    background: var(--mbb-blog-media, #fff5f5);
    overflow: hidden;
  }

  .mbb-blog__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .mbb-blog__card:hover .mbb-blog__img {
    transform: scale(1.03);
  }

  .mbb-blog__img--placeholder {
    object-fit: contain;
    padding: 12%;
    opacity: 0.35;
  }

  .mbb-blog__chip {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 4px;
    background: #fff1f1;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.692;
    letter-spacing: 0.04em;
    color: var(--mbb-blog-heading, #44362b);
  }

  /* Frame 195 — padding 20, gap 14 */
  .mbb-blog__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 16px;
  }

  .mbb-blog__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 0.625vw, 10.56px);
    line-height: 1.667;
    letter-spacing: 0.06em;
    color: var(--mbb-blog-body, #909090);
  }

  .mbb-blog__title {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    line-height: 1.3;
    color: var(--mbb-blog-heading, #44362b);
    text-decoration: none;
    text-wrap: balance;
  }

  .mbb-blog__title:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .mbb-blog__excerpt {
    margin: 0;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    line-height: 1.714;
    color: var(--mbb-blog-body, #909090);
  }

  .mbb-blog__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block-start: auto;
    padding-block-start: 4px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(10.4px + 2.6px * var(--mbb-fl, 0)), 0.677vw, 11.44px);
    line-height: 1.692;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--mbb-blog-accent, #c3116a);
  }

  .mbb-blog__more-arrow {
    display: block;
    position: relative;
    width: 18px;
    height: 0;
    border-block-start: 2px solid currentcolor;
    flex: none;
  }

  .mbb-blog__more-arrow::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: -4px;
    width: 7px;
    height: 7px;
    border-block-start: 2px solid currentcolor;
    border-inline-end: 2px solid currentcolor;
    transform: rotate(45deg);
  }

  @media screen and (min-width: 750px) {
    .mbb-blog__info {
      gap: 14px;
      padding: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    }

    .mbb-blog__meta {
      font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
    }

    .mbb-blog__title {
      font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
      line-height: 1.292;
    }

    .mbb-blog__excerpt {
      font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
      line-height: 1.75;
    }

    .mbb-blog__more {
      font-size: clamp(calc(12px + 3px * var(--mbb-fl, 0)), 0.781vw, 13.2px);
    }
  }
/* END_SNIPPET:mbb-article-card */

/* START_SNIPPET:mbb-product-card (INDEX:232) */
.mbb-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
  }

  /* Frame 189 — 412x413 on a 412 card */
  .mbb-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 412 / 413;
    background: #e4ffc4;
    overflow: hidden;
  }
  .mbb-card__media-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }
  .mbb-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Frame 193 */
  .mbb-card__best {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 140px;
    height: 35px;
    padding: 0 10px;
    background: #fff1f1;
    border-radius: 4px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.222;
    color: #44362b;
    white-space: nowrap;
  }
  .mbb-card__best-star {
    width: 21px;
    height: 21px;
    color: #f19f2d;
    flex: none;
  }

  .mbb-card__soldout {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: #eef1ea;
    border-radius: 4px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    color: #3d3d3d;
  }

  /* Favourites heart — media top-right, inset 14px to line up with the circle button's
     own 14px gutter. z-index 2 lifts it above the full-bleed media link. */
  .mbb-card__wish {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    z-index: 2;
  }

  /* Sold out is not a Figma badge; when the heart is present it steps aside rather than
     forcing the heart out of the corner. 43 disc + 14 gutter + 8 gap = 65. */
  .mbb-card--wish .mbb-card__soldout {
    inset-inline-end: 65px;
  }

  /* Group 278 — circle button left, save badge right, near the bottom of the media */
  .mbb-card__row {
    position: absolute;
    inset-inline: 14px;
    inset-block-end: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }
  .mbb-card__quick-add {
    display: block;
    pointer-events: auto;
  }
  .mbb-card__quick-add form {
    margin: 0;
  }
  .mbb-card__circle {
    width: 43px;
    height: 43px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #44362b;
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease;
  }
  .mbb-card__circle:hover {
    transform: scale(1.06);
  }
  .mbb-card__circle[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .mbb-card__circle svg {
    width: 17.86px;
    height: 23.09px;
  }
  @media (prefers-reduced-motion: reduce) {
    .mbb-card__circle {
      transition: none;
    }
    .mbb-card__circle:hover {
      transform: none;
    }
  }
  /* Frame 194 */
  .mbb-card__save {
    margin-inline-start: auto;
    min-width: 109px;
    padding-inline: calc(12px * var(--mbb-scale, 1));
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f7fff0;
    border: 0.5px solid #4d9000;
    border-radius: 4px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.222;
    color: #4d9000;
    white-space: nowrap;
  }

  /* Frame 195 — 412x159, padding 20, gap 14 */
  .mbb-card__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    width: 100%;
    flex: 1;
  }
  .mbb-card__title {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    line-height: 1.292;
    color: #44362b;
    text-decoration: none;
    display: block;
    width: 100%;
  }

  .mbb-card__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }
  .mbb-card__prices {
    display: flex;
    align-items: baseline;
    gap: 12px;
    /* the row may wrap to a second line, but a single price never splits */
    flex-wrap: wrap;
  }
  /*
    A money string is one atom. Shopify's format puts a space after the symbol ("₹ 224.00"),
    which is a legal break opportunity — in the 76px card column at 420px the ₹ sat alone on
    the first line with the amount underneath it.
  */
  .mbb-card__price,
  .mbb-card__compare {
    white-space: nowrap;
  }
  .mbb-card__price {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(25.61px + 6.39px * var(--mbb-fl, 0)), 1.667vw, 28.17px);
    line-height: 1.313;
    color: #44362b;
  }
  .mbb-card__compare {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
    line-height: 1.292;
    color: #c7c7c7;
    text-decoration-line: line-through;
    text-decoration-color: #c7c7c7;
  }
  .mbb-card__size {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.667;
    color: #909090;
  }

  .mbb-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .mbb-card__stars {
    display: flex;
    align-items: center;
    gap: 0.65px;
  }
  .mbb-card__star {
    width: 19.48px;
    height: 19.48px;
    color: #f19f2d;
    flex: none;
  }
  .mbb-card__star.is-empty {
    color: #e3e3e3;
  }
  .mbb-card__rating {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.667;
    color: #44362b;
    margin-inline-start: 5px;
  }
  .mbb-card__reviews {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
    line-height: 1.25;
    text-decoration-line: underline;
    color: #44362b;
  }

  @media screen and (max-width: 989px) {
    .mbb-card__title { font-size: 18px; line-height: 24px; }
    .mbb-card__price { font-size: 24px; line-height: 32px; }
    .mbb-card__compare { font-size: 18px; line-height: 24px; }
    .mbb-card__size,
    .mbb-card__rating { font-size: 14px; line-height: 22px; }
    .mbb-card__reviews { font-size: 13px; }
    .mbb-card__best,
    .mbb-card__save { font-size: 14px; height: 28px; min-width: 0; padding-inline: 10px; }
    .mbb-card__best-star { width: 16px; height: 16px; }
    .mbb-card__info { padding: 14px; gap: 10px; }
    .mbb-card__star { width: 15px; height: 15px; }
    .mbb-card__circle { width: 34px; height: 34px; }
    .mbb-card__circle svg { width: 14px; height: 18px; }
    .mbb-card__wish {
      --mbb-wish-size: 34px;
      --mbb-wish-icon: 17px;

      inset-block-start: 10px;
      inset-inline-end: 10px;
    }
    .mbb-card--wish .mbb-card__soldout { inset-inline-end: 52px; }
  }
/* END_SNIPPET:mbb-product-card */

/* START_SNIPPET:mbb-testimonial-product (INDEX:234) */
/* ---------- mobile first : Figma "Frame 297" ---------- */
  .mbb-tcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    width: 100%;
  }
  .mbb-tcard__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
  }
  .mbb-tcard__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mbb-tcard__best {
    position: absolute;
    inset-block-start: 14.14px;
    inset-inline-start: 4.5%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5.18px;
    min-width: 120.76px;
    height: 30.19px;
    padding-inline: 8px;
    background: var(--mbb-t-best-bg, #fff1f1);
    border-radius: 3.4502px;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(calc(12.43px + 3.1px * var(--mbb-fl, 0)), 0.809vw, 13.67px);
    line-height: 1.224;
    color: var(--mbb-t-text, #44362b);
    white-space: nowrap;
  }
  .mbb-tcard__best svg {
    flex: none;
    width: 18.11px;
    height: 18.11px;
    color: var(--mbb-t-star, #f19f2d);
  }
  .mbb-tcard__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: clamp(calc(274.41px + 68.59px * var(--mbb-fl, 0)), 17.865vw, 301.85px);
    text-align: center;
  }
  .mbb-tcard__title {
    display: block;
    width: 100%;
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
    line-height: 1.444;
    color: var(--mbb-t-text, #44362b);
    text-decoration: none;
  }
  .mbb-tcard__prices {
    display: flex;
    align-items: center;
    gap: 7.45px;
  }
  .mbb-tcard__price {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(23.84px + 5.96px * var(--mbb-fl, 0)), 1.552vw, 26.22px);
    line-height: 1.275;
    color: var(--mbb-t-text, #44362b);
  }
  .mbb-tcard__compare {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(calc(17.34px + 4.33px * var(--mbb-fl, 0)), 1.129vw, 19.08px);
    line-height: 1.292;
    color: var(--mbb-t-compare, #b4b4b4);
    text-decoration-line: line-through;
    text-decoration-color: var(--mbb-t-compare, #b4b4b4);
  }
  .mbb-tcard__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8.63px;
    min-width: 221.15px;
    min-height: 46.27px;
    padding: 12.93px clamp(calc(16.01px + 3.99px * var(--mbb-fl, 0)), 1.042vw, 17.61px);
    background: var(--mbb-t-button-bg, #44362b);
    border-radius: 10px;
    color: var(--mbb-t-button-text, #ffffff);
    text-decoration: none;
  }
  .mbb-tcard__button-label {
    font-family: var(--font-body--family), 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(calc(12.43px + 3.1px * var(--mbb-fl, 0)), 0.809vw, 13.67px);
    line-height: 1.224;
    text-align: center;
  }
  .mbb-tcard__arrow {
    display: block;
    flex: none;
    width: 18.11px;
    height: 10.35px;
  }

  /* ---------- desktop ---------- */
  @media screen and (min-width: 750px) {
    /* "split" — Figma "product card" 358x508.75 */
    .mbb-testi--split .mbb-tcard {
      gap: clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
    }
    .mbb-testi--split .mbb-tcard__media {
      aspect-ratio: 358 / 356.16;
      border-radius: 14.1502px;
    }
    .mbb-testi--split .mbb-tcard__best {
      inset-block-start: 13.55px;
      inset-inline-start: 3.7737%;
      gap: 4.96px;
      min-width: 115.75px;
      height: 28.94px;
      border-radius: 3.30716px;
      font-size: clamp(calc(11.9px + 2.98px * var(--mbb-fl, 0)), 0.775vw, 13.09px);
      line-height: 1.209;
    }
    .mbb-testi--split .mbb-tcard__best svg {
      width: 17.36px;
      height: 17.36px;
    }
    .mbb-testi--split .mbb-tcard__info {
      gap: 6.61px;
      max-width: clamp(calc(183.2px + 45.8px * var(--mbb-fl, 0)), 11.927vw, 201.52px);
    }
    .mbb-testi--split .mbb-tcard__title {
      font-size: clamp(calc(11.2px + 2.8px * var(--mbb-fl, 0)), 0.729vw, 12.32px);
      line-height: 1.214;
    }
    .mbb-testi--split .mbb-tcard__prices {
      gap: 4.96px;
    }
    .mbb-testi--split .mbb-tcard__price {
      font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
      line-height: 1.292;
    }
    .mbb-testi--split .mbb-tcard__compare {
      font-size: clamp(calc(11.55px + 2.88px * var(--mbb-fl, 0)), 0.752vw, 12.71px);
      line-height: 1.317;
    }
    .mbb-testi--split .mbb-tcard__button {
      gap: 10px;
      min-width: 211px;
      min-height: 58px;
      padding: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px) clamp(calc(20.8px + 5.2px * var(--mbb-fl, 0)), 1.354vw, 22.88px);
      border-radius: 100px;
    }
    .mbb-testi--split .mbb-tcard__button-label {
      font-size: clamp(calc(14.41px + 3.59px * var(--mbb-fl, 0)), 0.938vw, 15.85px);
      line-height: 1.222;
    }
    .mbb-testi--split .mbb-tcard__arrow {
      width: 21px;
      border-block-start-width: 2px;
    }

    /* "overlay" — Figma "Frame 283" 286x371 */
    .mbb-testi--overlay .mbb-tcard {
      align-items: stretch;
      justify-content: flex-start;
      gap: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
      padding: 17px 16px clamp(calc(16.99px + 4.24px * var(--mbb-fl, 0)), 1.106vw, 18.69px);
      background: var(--mbb-t-card-bg, #ffffff);
      border-radius: 10px;
    }
    .mbb-testi--overlay .mbb-tcard__media {
      aspect-ratio: 1 / 1;
      border-radius: 10px;
    }
    .mbb-testi--overlay .mbb-tcard__best,
    .mbb-testi--overlay .mbb-tcard__button {
      display: none;
    }
    .mbb-testi--overlay .mbb-tcard__info {
      align-items: flex-start;
      gap: 8px;
      max-width: none;
      text-align: left;
    }
    .mbb-testi--overlay .mbb-tcard__title {
      font-size: clamp(calc(12.79px + 3.21px * var(--mbb-fl, 0)), 0.833vw, 14.07px);
      line-height: 1.5;
    }
    .mbb-testi--overlay .mbb-tcard__prices {
      gap: 6px;
    }
    .mbb-testi--overlay .mbb-tcard__price {
      font-size: clamp(calc(19.2px + 4.8px * var(--mbb-fl, 0)), 1.25vw, 21.12px);
      line-height: 1.292;
    }
    .mbb-testi--overlay .mbb-tcard__compare {
      font-size: clamp(calc(13.04px + 3.25px * var(--mbb-fl, 0)), 0.849vw, 14.34px);
      line-height: 1.459;
    }
  }
/* END_SNIPPET:mbb-testimonial-product */

/* START_SNIPPET:mbb-wishlist-drawer (INDEX:236) */
.mbb-wishdrawer {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .mbb-wishdrawer__list {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-inline: var(--padding-lg, 20px);
    padding-block-end: var(--padding-md, 16px);
  }

  .mbb-wishdrawer__total {
    margin: 0 0 12px;
    font-size: 14px;
    color: #909090;
  }

  .mbb-wishdrawer__tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 16px;
  }

  /*
    The `hidden` attribute is only UA `display: none`, so ANY author display declaration beats
    it. These blocks are toggled by mbb-wishlist.js via .hidden, and without this the empty
    state rendered underneath the saved items — both visible at once.
  */
  .mbb-wishdrawer [hidden] {
    display: none !important;
  }

  .mbb-wishdrawer__grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /*
    mbb-wishlist.js renders each row with the Favourites PAGE's classes (.mbb-wishp__*), and
    those styles live in sections/mbb-wishlist.liquid — which is not loaded anywhere else. In
    the drawer the rows arrived completely unstyled, so the same class names are dressed here
    for the narrow column. One renderer, two skins.
  */
  .mbb-wishdrawer .mbb-wishp__item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  .mbb-wishdrawer .mbb-wishp__media {
    display: block;
    aspect-ratio: 1;
    border-radius: 8px;
    background: var(--mbb-wishp-media, #f6f1ec);
    overflow: hidden;
  }

  .mbb-wishdrawer .mbb-wishp__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mbb-wishdrawer .mbb-wishp__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .mbb-wishdrawer .mbb-wishp__title {
    font-size: 14px;
    line-height: 1.35;
    color: #44362b;
    text-decoration: none;
  }

  .mbb-wishdrawer .mbb-wishp__price {
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-size: 16px;
    color: #44362b;
    white-space: nowrap;
  }

  .mbb-wishdrawer .mbb-wishp__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-start: 4px;
  }

  .mbb-wishdrawer .mbb-wishp__view,
  .mbb-wishdrawer .mbb-wishp__remove {
    padding: 0;
    border: 0;
    background: none;
    color: #909090;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
  }

  .mbb-wishdrawer .mbb-wishp__view {
    color: #44362b;
  }

  .mbb-wishdrawer__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 0;
    border-radius: 100px;
    background: #44362b;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
  }

  .mbb-wishdrawer__link {
    border: 0;
    background: none;
    color: #909090;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
  }

  .mbb-wishdrawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-block: 48px;
    text-align: center;
  }

  .mbb-wishdrawer__empty-heart {
    width: 40px;
    height: 40px;
    color: #c3116a;
  }

  .mbb-wishdrawer__empty-title {
    margin: 0;
    font-family: var(--font-heading--family), 'EB Garamond', serif;
    font-size: 20px;
    color: #44362b;
  }

  .mbb-wishdrawer__empty-body {
    margin: 0;
    font-size: 14px;
    color: #909090;
  }

  .mbb-wishdrawer__viewall {
    flex: none;
    padding: 16px var(--padding-lg, 20px);
    border-block-start: 1px solid #eee;
    color: #44362b;
    font-size: 14px;
    text-align: center;
  }
/* END_SNIPPET:mbb-wishlist-drawer */

/* START_SNIPPET:mbb-wishlist-toggle (INDEX:237) */
/* No JS (or the module failed): never upgraded, so it takes no space at all. */
  mbb-wishlist-toggle:not(:defined) {
    display: none;
  }

  .mbb-wish {
    display: block;
    line-height: 0;
  }

  .mbb-wish[hidden] {
    display: none;
  }

  /* Sibling of .mbb-card__circle — 43x43 white disc, radius 50%. */
  .mbb-wish__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--mbb-wish-size, 43px) * var(--mbb-scale, 1));
    height: calc(var(--mbb-wish-size, 43px) * var(--mbb-scale, 1));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--mbb-wish-bg, #ffffff);
    color: var(--mbb-wish-ink, #d13e6a);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
  }

  /* Keeps a 44px touch target on a 43px disc without changing the visual geometry. */
  .mbb-wish__button::after {
    content: '';
    position: absolute;
    inset: calc((var(--mbb-wish-size, 43px) - 44px) / 2);
  }

  .mbb-wish__button:hover {
    color: var(--mbb-wish-ink-active, #c3116a);
    transform: scale(1.06);
  }

  .mbb-wish__button:focus-visible {
    outline: 2px solid var(--mbb-wish-ink-active, #c3116a);
    outline-offset: 2px;
  }

  .mbb-wish__heart {
    width: calc(var(--mbb-wish-icon, 21px) * var(--mbb-scale, 1));
    height: calc(var(--mbb-wish-icon, 21px) * var(--mbb-scale, 1));
    flex: none;
  }

  .mbb-wish__button[aria-pressed='true'] {
    color: var(--mbb-wish-ink-active, #c3116a);
  }

  .mbb-wish__button[aria-pressed='true'] .mbb-wish__heart path {
    fill: currentcolor;
  }

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

    .mbb-wish__button:hover {
      transform: none;
    }
  }
/* END_SNIPPET:mbb-wishlist-toggle */

/* START_SNIPPET:media (INDEX:238) */
.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:243) */
.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:244) */
.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:245) */
.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:246) */
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:247) */
/* 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:251) */
/* 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:252) */
/* 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:254) */
.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:255) */
.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:256) */
.product-grid__card.product-grid__card {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--product-card-gap);
    align-items: var(--product-card-alignment);
    text-decoration: none;
    color: var(--color, var(--color-foreground));
    padding-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    overflow: hidden;
  }

  .product-grid__card .group-block > * {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  /* Collection and product list cards have equal heights */
  :is(.product-grid__item, .resource-list__item) .product-card {
    display: grid;
    height: 100%;
  }

  /* Product card title truncation - applied on mobile regardless of view */
  @media screen and (max-width: 749px) {
    :is(.product-card, .product-grid__card) :is(h4, .h4) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
    }
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card-styles */

/* START_SNIPPET:product-grid (INDEX:258) */
/* 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:259) */
.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:260) */
: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:261) */
/* 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:262) */
.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:264) */
.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:265) */
/* 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,
  .Enlaces de interés-add-modal .quantity-selector {
    border-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-minus,
  .Enlaces de interés-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,
  .Enlaces de interés-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:266) */
.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:267) */
#Enlaces de interés-add-dialog {
    display: contents;
  }

  /* Inputs inside the Enlaces de interés-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .Enlaces de interés-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);
  }

  .Enlaces de interés-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .Enlaces de interés-add-modal {
      width: var(--Enlaces de interés-add-modal-width);
      height: var(--Enlaces de interés-add-modal-height);
      max-width: none;
    }
  }

  .Enlaces de interés-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;
    }
  }

  .Enlaces de interés-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);
    }
  }

  .Enlaces de interés-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .Enlaces de interés-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .Enlaces de interés-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .Enlaces de interés-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .Enlaces de interés-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;
  }

  .Enlaces de interés-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .Enlaces de interés-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;
    }
  }

  .Enlaces de interés-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;
    }
  }

  .Enlaces de interés-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .Enlaces de interés-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .Enlaces de interés-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;
    }
  }

  .Enlaces de interés-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;
  }

  .Enlaces de interés-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);
    }
  }

  .Enlaces de interés-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;
    }
  }

  .Enlaces de interés-add-modal__content variant-picker,
  .Enlaces de interés-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .Enlaces de interés-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .Enlaces de interés-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 --Enlaces de interés-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --Enlaces de interés-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] .Enlaces de interés-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--Enlaces de interés-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 {
      --Enlaces de interés-add-modal-mask-start: 0px;
    }
    to {
      --Enlaces de interés-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --Enlaces de interés-add-modal-mask-end: 0px;
    }
    to {
      --Enlaces de interés-add-modal-mask-end: 48px;
    }
  }

  .Enlaces de interés-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .Enlaces de interés-add-modal__content > * {
    min-height: 0;
  }

  .Enlaces de interés-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .Enlaces de interés-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 {
      --Enlaces de interés-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(--Enlaces de interés-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .Enlaces de interés-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;
  }

  .Enlaces de interés-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .Enlaces de interés-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .Enlaces de interés-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .Enlaces de interés-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 {
      --Enlaces de interés-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(--Enlaces de interés-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .Enlaces de interés-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .Enlaces de interés-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--Enlaces de interés-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --Enlaces de interés-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .Enlaces de interés-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));
  }

  .Enlaces de interés-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .Enlaces de interés-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .Enlaces de interés-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .Enlaces de interés-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));
  }

  .Enlaces de interés-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);
  }

  .Enlaces de interés-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .Enlaces de interés-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .Enlaces de interés-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .Enlaces de interés-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .Enlaces de interés-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;
    }
  }

  .Enlaces de interés-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) {
    .Enlaces de interés-add-modal__content .group-block-content {
      gap: 0;
    }

    .Enlaces de interés-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .Enlaces de interés-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .Enlaces de interés-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .Enlaces de interés-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .Enlaces de interés-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .Enlaces de interés-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(--Enlaces de interés-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .Enlaces de interés-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .Enlaces de interés-add-modal media-gallery {
    padding: 0;
  }

  .Enlaces de interés-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .Enlaces de interés-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .Enlaces de interés-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .Enlaces de interés-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);
  }

  .Enlaces de interés-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .Enlaces de interés-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .Enlaces de interés-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;
  }

  .Enlaces de interés-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;
  }

  .Enlaces de interés-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .Enlaces de interés-add-modal__content .sticky-content,
  .Enlaces de interés-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .Enlaces de interés-add-modal__content .text-block.rte:not(product-price),
  .Enlaces de interés-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:269) */
/* 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:272) */
.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:273) */
.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:274) */
.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:275) */
.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:278) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

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

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    overflow: hidden;

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

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:279) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:280) */
.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:282) */
.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:284) */
.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:285) */
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:286) */
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:288) */
/*
   * 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:290) */
.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:296) */
/* 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:299) */
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:300) */
: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:302) */
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:315) */
/* 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:316) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video-background-styles (INDEX:317) */
.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:318) */
.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:320) */
.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 */